@bigz-app/booking-widget 1.0.0 → 1.0.1

package/dist/booking-widget.js

@@ -4059,25 +4059,72 @@
    * A reusable input component with focus states, labels, and error handling.
    * Uses forwardRef to support react-hook-form integration.
    */
-  const Input = D$1(({ label, error, helperText, leftIcon, rightIcon, fullWidth = false, className = "", containerClassName = "", id, ...props }, ref) => {
+  const Input = D$1(({ label, error, helperText, leftIcon, rightIcon, fullWidth = false, className = "", containerClassName = "", id, style, ...props }, ref) => {
       const [isFocused, setIsFocused] = d$1(false);
-      const containerClasses = `flex flex-col gap-1 ${fullWidth ? "w-full" : "w-auto"} ${containerClassName}`;
-      const inputWrapperClasses = "relative flex items-center";
-      const inputBaseClasses = "w-full py-3 rounded bg-surface text-text-primary text-base font-sans outline-none transition-all duration-200";
-      const inputPaddingClasses = leftIcon ? "pl-10 pr-3" : rightIcon ? "pl-3 pr-10" : "px-3";
-      const inputBorderClasses = error
-          ? "border border-solid border-error"
-          : isFocused
-              ? "border border-solid border-highlight shadow-[0_0_0_2px_var(--bw-highlight-color)]"
-              : "border border-solid border-border";
-      const iconClasses = "absolute flex items-center justify-center text-text-muted pointer-events-none";
-      return (u$2("div", { className: containerClasses, children: [label && (u$2("label", { htmlFor: id, className: "text-base font-medium text-text-primary font-sans", children: label })), u$2("div", { className: inputWrapperClasses, children: [leftIcon && u$2("span", { className: `${iconClasses} left-3`, children: leftIcon }), u$2("input", { ref: ref, id: id, className: `${inputBaseClasses} ${inputPaddingClasses} ${inputBorderClasses} ${className}`, onFocus: (e) => {
+      const containerStyles = {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: fullWidth ? "100%" : "auto",
+      };
+      const inputWrapperStyles = {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+      };
+      const inputStyles = {
+          width: "100%",
+          padding: "12px",
+          paddingLeft: leftIcon ? "40px" : "12px",
+          paddingRight: rightIcon ? "40px" : "12px",
+          backgroundColor: "var(--bw-surface-color)",
+          color: "var(--bw-text-color)",
+          fontSize: "16px",
+          fontFamily: "var(--bw-font-family)",
+          borderRadius: "var(--bw-border-radius)",
+          outline: "none",
+          transition: "all 0.2s ease",
+          border: error
+              ? "1px solid var(--bw-error-color)"
+              : isFocused
+                  ? "1px solid var(--bw-highlight-color)"
+                  : "1px solid var(--bw-border-color)",
+          boxShadow: isFocused && !error
+              ? "0 0 0 2px var(--bw-highlight-color)"
+              : "none",
+          ...style,
+      };
+      const iconStyles = {
+          position: "absolute",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--bw-text-muted)",
+          pointerEvents: "none",
+      };
+      return (u$2("div", { className: containerClassName, style: containerStyles, children: [label && (u$2("label", { htmlFor: id, style: {
+                      fontSize: "16px",
+                      fontWeight: 500,
+                      color: "var(--bw-text-color)",
+                      fontFamily: "var(--bw-font-family)",
+                  }, children: label })), u$2("div", { style: inputWrapperStyles, children: [leftIcon && (u$2("span", { style: { ...iconStyles, left: "12px" }, children: leftIcon })), u$2("input", { ref: ref, id: id, className: `bw-input ${error ? "bw-input-error" : ""} ${className}`, style: inputStyles, onFocus: (e) => {
                               setIsFocused(true);
                               props.onFocus?.(e);
                           }, onBlur: (e) => {
                               setIsFocused(false);
                               props.onBlur?.(e);
-                          }, ...props }), rightIcon && u$2("span", { className: `${iconClasses} right-3`, children: rightIcon })] }), error && u$2("p", { className: "text-error text-base mt-1 font-sans", children: error }), helperText && !error && (u$2("p", { className: "text-text-muted text-sm font-sans", children: helperText }))] }));
+                          }, ...props }), rightIcon && (u$2("span", { style: { ...iconStyles, right: "12px" }, children: rightIcon }))] }), error && (u$2("p", { style: {
+                      color: "var(--bw-error-color)",
+                      fontSize: "14px",
+                      marginTop: "4px",
+                      fontFamily: "var(--bw-font-family)",
+                      margin: 0,
+                  }, children: error })), helperText && !error && (u$2("p", { style: {
+                      color: "var(--bw-text-muted)",
+                      fontSize: "14px",
+                      fontFamily: "var(--bw-font-family)",
+                      margin: 0,
+                  }, children: helperText }))] }));
   });
   Input.displayName = "Input";
 
@@ -4085,10 +4132,16 @@
    * A simple dotted spinner component for loading states.
    * Uses the spin animation from animations.css
    */
-  const Spinner = ({ size = 16, borderColor = "var(--bw-highlight-color)", className = "", }) => (u$2("div", { className: `flex justify-center items-center ${className}`, children: u$2("div", { className: "rounded-full animate-spin", style: {
+  const Spinner = ({ size = 16, borderColor = "var(--bw-highlight-color)", className = "", }) => (u$2("div", { className: `bw-spinner ${className}`, style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+      }, children: u$2("div", { className: "animate-spin", style: {
               width: `${size}px`,
               height: `${size}px`,
               border: `3px dotted ${borderColor}`,
+              borderRadius: "50%",
+              animation: "spin 1s linear infinite",
           } }) }));
   /**
    * A spinner function that returns a spinner element.
@@ -4301,7 +4354,21 @@
               if (this.props.fallback) {
                   return this.props.fallback;
               }
-              return (u$2("div", { className: "booking-widget-error text-center p-6 bg-red-50 border border-red-200 rounded-lg", children: [u$2("div", { className: "text-red-600 mb-2", children: "\u26A0\uFE0F Something went wrong with the booking widget" }), u$2("div", { className: "text-sm text-red-500", children: "Please refresh the page and try again. If the problem persists, contact support." }), "production" === "development"] }));
+              return (u$2("div", { className: "booking-widget-error", style: {
+                      textAlign: "center",
+                      padding: "24px",
+                      backgroundColor: "#fef2f2",
+                      border: "1px solid #fecaca",
+                      borderRadius: "var(--bw-border-radius)",
+                  }, children: [u$2("div", { style: {
+                              color: "#dc2626",
+                              marginBottom: "8px",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: "\u26A0\uFE0F Something went wrong with the booking widget" }), u$2("div", { style: {
+                              fontSize: "14px",
+                              color: "#ef4444",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: "Please refresh the page and try again. If the problem persists, contact support." }), "production" === "development"] }));
           }
           return this.props.children;
       }
@@ -4311,13 +4378,173 @@
    * Skeleton loading state for event type cards.
    * Matches the layout of EventTypeSelection cards.
    */
-  const EventCardSkeleton = ({ count = 4 }) => (u$2("div", { className: "p-0", children: u$2("div", { className: "flex flex-wrap justify-center gap-6", children: Array.from({ length: count }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer relative bg-surface border border-solid border-border rounded overflow-hidden shadow-md font-sans max-w-[500px] flex-[1_1_350px] flex flex-col", children: [u$2("div", { className: "absolute top-4 left-4 z-10", children: u$2("div", { className: "w-20 h-6 bg-white/20 rounded-sm" }) }), u$2("div", { className: "relative w-full h-[300px] bg-border" }), u$2("div", { className: "p-4 px-6 flex-1", children: [u$2("div", { className: "w-3/5 h-3.5 bg-border rounded mb-2" }), u$2("div", { className: "w-4/5 h-6 bg-border rounded mb-3" }), u$2("div", { className: "mb-4", children: [u$2("div", { className: "w-full h-3 bg-border rounded mb-2" }), u$2("div", { className: "w-[90%] h-3 bg-border rounded mb-2" }), u$2("div", { className: "w-[70%] h-3 bg-border rounded" })] }), u$2("div", { className: "flex gap-4 mb-4", children: [u$2("div", { className: "w-20 h-4 bg-border rounded" }), u$2("div", { className: "w-[100px] h-4 bg-border rounded" })] }), u$2("div", { className: "flex justify-between items-center pt-3 border-t border-solid border-border", children: [u$2("div", { className: "w-[100px] h-7 bg-border rounded" }), u$2("div", { className: "w-[120px] h-10 bg-highlight opacity-30 rounded" })] })] })] }, idx))) }) }));
+  const EventCardSkeleton = ({ count = 4 }) => (u$2("div", { style: { padding: 0 }, children: u$2("div", { style: {
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              gap: "24px",
+          }, children: Array.from({ length: count }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer", style: {
+                  position: "relative",
+                  backgroundColor: "var(--bw-surface-color)",
+                  border: "1px solid var(--bw-border-color)",
+                  borderRadius: "var(--bw-border-radius)",
+                  overflow: "hidden",
+                  boxShadow: "var(--bw-shadow-md)",
+                  fontFamily: "var(--bw-font-family)",
+                  maxWidth: "500px",
+                  flex: "1 1 350px",
+                  display: "flex",
+                  flexDirection: "column",
+              }, children: [u$2("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$2("div", { style: {
+                              width: "80px",
+                              height: "24px",
+                              backgroundColor: "rgba(255, 255, 255, 0.2)",
+                              borderRadius: "var(--bw-border-radius-small)",
+                          } }) }), u$2("div", { style: {
+                          position: "relative",
+                          width: "100%",
+                          height: "300px",
+                          backgroundColor: "var(--bw-border-color)",
+                      } }), u$2("div", { style: { padding: "16px 24px", flex: 1 }, children: [u$2("div", { style: {
+                                  width: "60%",
+                                  height: "14px",
+                                  backgroundColor: "var(--bw-border-color)",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  marginBottom: "8px",
+                              } }), u$2("div", { style: {
+                                  width: "80%",
+                                  height: "24px",
+                                  backgroundColor: "var(--bw-border-color)",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  marginBottom: "12px",
+                              } }), u$2("div", { style: { marginBottom: "16px" }, children: [u$2("div", { style: {
+                                          width: "100%",
+                                          height: "12px",
+                                          backgroundColor: "var(--bw-border-color)",
+                                          borderRadius: "var(--bw-border-radius)",
+                                          marginBottom: "8px",
+                                      } }), u$2("div", { style: {
+                                          width: "90%",
+                                          height: "12px",
+                                          backgroundColor: "var(--bw-border-color)",
+                                          borderRadius: "var(--bw-border-radius)",
+                                          marginBottom: "8px",
+                                      } }), u$2("div", { style: {
+                                          width: "70%",
+                                          height: "12px",
+                                          backgroundColor: "var(--bw-border-color)",
+                                          borderRadius: "var(--bw-border-radius)",
+                                      } })] }), u$2("div", { style: { display: "flex", gap: "16px", marginBottom: "16px" }, children: [u$2("div", { style: {
+                                          width: "80px",
+                                          height: "16px",
+                                          backgroundColor: "var(--bw-border-color)",
+                                          borderRadius: "var(--bw-border-radius)",
+                                      } }), u$2("div", { style: {
+                                          width: "100px",
+                                          height: "16px",
+                                          backgroundColor: "var(--bw-border-color)",
+                                          borderRadius: "var(--bw-border-radius)",
+                                      } })] }), u$2("div", { style: {
+                                  display: "flex",
+                                  justifyContent: "space-between",
+                                  alignItems: "center",
+                                  paddingTop: "12px",
+                                  borderTop: "1px solid var(--bw-border-color)",
+                              }, children: [u$2("div", { style: {
+                                          width: "100px",
+                                          height: "28px",
+                                          backgroundColor: "var(--bw-border-color)",
+                                          borderRadius: "var(--bw-border-radius)",
+                                      } }), u$2("div", { style: {
+                                          width: "120px",
+                                          height: "40px",
+                                          backgroundColor: "var(--bw-highlight-color)",
+                                          opacity: 0.3,
+                                          borderRadius: "var(--bw-border-radius)",
+                                      } })] })] })] }, idx))) }) }));
 
   /**
    * Skeleton loading state for the next events preview.
    * Shows a header and list of upcoming event placeholders.
    */
-  const NextEventsSkeleton = ({ count = 3 }) => (u$2("div", { className: "max-w-[500px] mx-auto p-4 font-sans", children: [u$2("div", { className: "mb-6 text-center", children: [u$2("div", { className: "skeleton-shimmer w-[280px] h-6 bg-border rounded mx-auto mb-2" }), u$2("div", { className: "skeleton-shimmer w-[320px] h-4 bg-border rounded mx-auto" })] }), u$2("div", { className: "flex flex-col gap-3 mb-6", children: Array.from({ length: count }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer bg-surface border border-solid border-border rounded p-2 px-2.5 font-sans", children: [u$2("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [u$2("div", { className: "flex items-start gap-3", children: [u$2("div", { className: "w-10 h-10 bg-border rounded-sm" }), u$2("div", { className: "flex flex-col gap-1", children: [u$2("div", { className: "w-20 h-4 bg-border rounded" }), u$2("div", { className: "w-[60px] h-3.5 bg-border rounded" })] })] }), u$2("div", { className: "flex flex-col items-end gap-1", children: [u$2("div", { className: "w-[70px] h-5 bg-border rounded" }), u$2("div", { className: "w-[50px] h-3.5 bg-border rounded" })] })] }), u$2("div", { className: "w-[70%] h-4 bg-border rounded mt-2" })] }, idx))) }), u$2("div", { className: "skeleton-shimmer w-full h-12 bg-highlight opacity-30 rounded" })] }));
+  const NextEventsSkeleton = ({ count = 3 }) => (u$2("div", { style: {
+          maxWidth: "500px",
+          margin: "0 auto",
+          padding: "16px",
+          fontFamily: "var(--bw-font-family)",
+      }, children: [u$2("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [u$2("div", { className: "skeleton-shimmer", style: {
+                          width: "280px",
+                          height: "24px",
+                          backgroundColor: "var(--bw-border-color)",
+                          borderRadius: "var(--bw-border-radius)",
+                          margin: "0 auto 8px auto",
+                      } }), u$2("div", { className: "skeleton-shimmer", style: {
+                          width: "320px",
+                          height: "16px",
+                          backgroundColor: "var(--bw-border-color)",
+                          borderRadius: "var(--bw-border-radius)",
+                          margin: "0 auto",
+                      } })] }), u$2("div", { style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "12px",
+                  marginBottom: "24px",
+              }, children: Array.from({ length: count }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer", style: {
+                      backgroundColor: "var(--bw-surface-color)",
+                      border: "1px solid var(--bw-border-color)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "8px 10px",
+                      fontFamily: "var(--bw-font-family)",
+                  }, children: [u$2("div", { style: {
+                              display: "flex",
+                              justifyContent: "space-between",
+                              width: "100%",
+                              alignItems: "flex-start",
+                              gap: "12px",
+                              marginBottom: "4px",
+                          }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
+                                              width: "40px",
+                                              height: "40px",
+                                              backgroundColor: "var(--bw-border-color)",
+                                              borderRadius: "var(--bw-border-radius-small)",
+                                          } }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [u$2("div", { style: {
+                                                      width: "80px",
+                                                      height: "16px",
+                                                      backgroundColor: "var(--bw-border-color)",
+                                                      borderRadius: "var(--bw-border-radius)",
+                                                  } }), u$2("div", { style: {
+                                                      width: "60px",
+                                                      height: "14px",
+                                                      backgroundColor: "var(--bw-border-color)",
+                                                      borderRadius: "var(--bw-border-radius)",
+                                                  } })] })] }), u$2("div", { style: {
+                                      display: "flex",
+                                      flexDirection: "column",
+                                      alignItems: "flex-end",
+                                      gap: "4px",
+                                  }, children: [u$2("div", { style: {
+                                              width: "70px",
+                                              height: "20px",
+                                              backgroundColor: "var(--bw-border-color)",
+                                              borderRadius: "var(--bw-border-radius)",
+                                          } }), u$2("div", { style: {
+                                              width: "50px",
+                                              height: "14px",
+                                              backgroundColor: "var(--bw-border-color)",
+                                              borderRadius: "var(--bw-border-radius)",
+                                          } })] })] }), u$2("div", { style: {
+                              width: "70%",
+                              height: "16px",
+                              backgroundColor: "var(--bw-border-color)",
+                              borderRadius: "var(--bw-border-radius)",
+                              marginTop: "8px",
+                          } })] }, idx))) }), u$2("div", { className: "skeleton-shimmer", style: {
+                  width: "100%",
+                  height: "48px",
+                  backgroundColor: "var(--bw-highlight-color)",
+                  opacity: 0.3,
+                  borderRadius: "var(--bw-border-radius)",
+              } })] }));
 
   // Clock icon - used for duration displays
   const IconClock = ({ size = 16, color = "#10b981", className, }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [u$2("circle", { cx: "12", cy: "12", r: "10" }), u$2("polyline", { points: "12 6 12 12 16 14" })] }));
@@ -4343,14 +4570,13 @@
   const IconChevronRight = ({ size = 20, color = "white", className, }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: u$2("polyline", { points: "9 18 15 12 9 6" }) }));
 
   // Component for bookings fully covered by gift cards (no Stripe payment needed)
-  function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, giftCards, onSuccess, onError, }) {
+  function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, giftCards, onSuccess, onError, upsellSelections = [], }) {
       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,
@@ -4362,6 +4588,7 @@
                   customerPhone: formData.customerPhone?.trim(),
                   comment: formData.comment?.trim(),
                   paymentMethod: "gift_card",
+                  ...(upsellSelections.length > 0 && { upsellSelections }),
               };
               const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-gift-card-booking"), {
                   method: "POST",
@@ -4390,7 +4617,56 @@
           }
       };
       const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
-      return (u$2("div", { className: "flex flex-col gap-4", children: [u$2("div", { className: "bg-success/15 border border-solid border-success/40 rounded p-4", children: [u$2("div", { className: "flex items-center gap-2 mb-2 text-success font-sans font-semibold", children: "\uD83C\uDF81 Vollst\u00E4ndig durch Gutschein(e) gedeckt" }), u$2("div", { className: "text-base text-text-muted font-sans", children: ["Gutschein-Guthaben: ", formatCurrency(totalGiftCardAmount)] })] }), error && (u$2("div", { className: "bg-error/15 border border-solid border-error/40 rounded p-4 text-error text-base font-sans", children: ["\u26A0\uFE0F ", error] })), u$2("button", { type: "button", onClick: handleBooking, disabled: isLoading, className: `w-full px-6 py-3 bg-highlight text-white border-0 rounded text-base font-semibold font-sans transition-all duration-200 flex items-center justify-center gap-2 ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`, children: isLoading ? (u$2(k$3, { children: [u$2("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" }), "Buchung wird erstellt..."] })) : ("Mit Gutschein buchen") })] }));
+      return (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
+                      backgroundColor: "rgba(var(--bw-success-color), 0.15)",
+                      border: "1px solid rgba(var(--bw-success-color), 0.4)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "16px",
+                  }, 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: "16px",
+                              color: "var(--bw-text-muted)",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: ["Gutschein-Guthaben: ", formatCurrency(totalGiftCardAmount)] })] }), error && (u$2("div", { style: {
+                      backgroundColor: "rgba(var(--bw-error-color), 0.15)",
+                      border: "1px solid rgba(var(--bw-error-color), 0.4)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "16px",
+                      color: "var(--bw-error-color)",
+                      fontSize: "16px",
+                      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: "#ffffff",
+                      border: "none",
+                      borderRadius: "var(--bw-border-radius)",
+                      fontSize: "16px",
+                      fontWeight: 600,
+                      fontFamily: "var(--bw-font-family)",
+                      transition: "all 0.2s ease",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "8px",
+                      cursor: isLoading ? "not-allowed" : "pointer",
+                      opacity: isLoading ? 0.6 : 1,
+                  }, children: isLoading ? (u$2(k$3, { children: [u$2("div", { style: {
+                                  width: "16px",
+                                  height: "16px",
+                                  border: "2px solid #ffffff",
+                                  borderTopColor: "transparent",
+                                  borderRadius: "50%",
+                                  animation: "spin 1s linear infinite",
+                              } }), "Buchung wird erstellt..."] })) : ("Mit Gutschein buchen") })] }));
   }
   // Inner component that uses the Stripe hooks
   function PaymentFormInner({ config, eventDetails, formData, totalAmount, onSuccess, onError, }) {
@@ -4406,7 +4682,6 @@
           setIsLoading(true);
           setPaymentError(null);
           try {
-              // Validate participant count before proceeding with payment
               const participantCount = formData.participants.filter((p) => p.name.trim()).length;
               const availableSpots = eventDetails.availableSpots || 0;
               if (participantCount > availableSpots) {
@@ -4417,7 +4692,6 @@
                   setPaymentError("Mindestens ein Teilnehmer ist erforderlich.");
                   return;
               }
-              // First, confirm the payment with Stripe
               const baseUrl = window !== undefined ? window.location.href : `${config.bookingSystemUrl}/booking-success`;
               const returnUrl = new URL(baseUrl);
               const confirmParams = {
@@ -4444,7 +4718,6 @@
                   }
                   return;
               }
-              // Payment succeeded, now create the booking
               if (paymentIntent && paymentIntent.status === "succeeded") {
                   onSuccess({
                       paymentIntent: paymentIntent,
@@ -4462,7 +4735,12 @@
               setIsLoading(false);
           }
       };
-      return (u$2("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [u$2("div", { className: "bg-slate-700/30 border border-solid border-border rounded p-4", children: u$2(reactStripe_umdExports.PaymentElement, { options: {
+      return (u$2("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
+                      backgroundColor: "rgba(71, 85, 105, 0.3)",
+                      border: "1px solid var(--bw-border-color)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "16px",
+                  }, children: u$2(reactStripe_umdExports.PaymentElement, { options: {
                           layout: "accordion",
                           defaultValues: {
                               billingDetails: {
@@ -4471,22 +4749,46 @@
                                   phone: formData.customerPhone,
                               },
                           },
-                      } }) }), paymentError && (u$2("div", { className: "bg-error/10 border border-solid border-error rounded p-4 text-error text-base font-sans", children: ["\u26A0\uFE0F ", paymentError] })), u$2("button", { type: "submit", disabled: !stripe || isLoading, className: `w-full px-6 py-3 bg-highlight text-surface border-0 rounded text-base font-semibold font-sans transition-all duration-200 flex items-center justify-center gap-2 ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`, children: isLoading ? (u$2(k$3, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (u$2(k$3, { children: totalAmount <
+                      } }) }), paymentError && (u$2("div", { style: {
+                      backgroundColor: "rgba(var(--bw-error-color), 0.1)",
+                      border: "1px solid var(--bw-error-color)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "16px",
+                      color: "var(--bw-error-color)",
+                      fontSize: "16px",
+                      fontFamily: "var(--bw-font-family)",
+                  }, children: ["\u26A0\uFE0F ", paymentError] })), u$2("button", { type: "submit", disabled: !stripe || isLoading, style: {
+                      width: "100%",
+                      padding: "12px 24px",
+                      backgroundColor: "var(--bw-highlight-color)",
+                      color: "var(--bw-surface-color)",
+                      border: "none",
+                      borderRadius: "var(--bw-border-radius)",
+                      fontSize: "16px",
+                      fontWeight: 600,
+                      fontFamily: "var(--bw-font-family)",
+                      transition: "all 0.2s ease",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "8px",
+                      cursor: isLoading ? "not-allowed" : "pointer",
+                      opacity: isLoading ? 0.6 : 1,
+                  }, children: isLoading ? (u$2(k$3, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (u$2(k$3, { children: totalAmount <
                           eventDetails.price * formData.participants.filter((p) => p.name.trim()).length
                           ? "Anzahlen & buchen"
                           : "Jetzt buchen" })) })] }));
   }
   // Main PaymentForm component that handles payment intent creation and Elements wrapper
-  function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, }) {
+  function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, upsellSelections = [], }) {
       const [clientSecret, setClientSecret] = d$1(null);
       const [paymentIntentId, setPaymentIntentId] = d$1(null);
       const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = d$1(false);
       const [paymentError, setPaymentError] = d$1(null);
-      // LocalStorage persistence (scoped by organization + event) for paymentIntentId only
       const storageKey = typeof window !== "undefined"
           ? `bw_pi_${config?.organizationId}_${config?.eventInstanceId || eventDetails?.id}`
           : "";
-      const PAYMENT_INTENT_TTL = 24 * 60 * 60 * 1000; // 24 hours
+      const PAYMENT_INTENT_TTL = 24 * 60 * 60 * 1000;
       function loadPersistedPaymentIntent() {
           if (typeof window === "undefined" || !storageKey)
               return null;
@@ -4524,7 +4826,6 @@
           }
           catch { }
       }
-      // On mount (and when scope changes), restore persisted paymentIntentId
       y$1(() => {
           if (!paymentIntentId) {
               const restored = loadPersistedPaymentIntent();
@@ -4533,20 +4834,16 @@
               }
           }
       }, [storageKey]);
-      // Persist whenever paymentIntentId changes
       y$1(() => {
           if (paymentIntentId) {
               persistPaymentIntent(paymentIntentId);
           }
       }, [paymentIntentId]);
-      // Create payment intent when component mounts or when relevant data changes
-      // Note: Detailed validation is handled by BookingForm before this component renders
       y$1(() => {
           const createPaymentIntent = async () => {
               if (!systemConfig || !eventDetails || !formData.participants?.length) {
                   return;
               }
-              // Basic safety check - detailed validation already done in BookingForm
               const participantCount = formData.participants?.filter((p) => p.name?.trim()).length || 0;
               if (participantCount === 0 || !formData.customerEmail?.trim() || !formData.customerName?.trim()) {
                   return;
@@ -4567,8 +4864,8 @@
                       customerPhone: formData.customerPhone?.trim(),
                       comment: formData.comment?.trim(),
                       ...(paymentIntentId && { paymentIntentId }),
+                      ...(upsellSelections && upsellSelections.length > 0 && { upsellSelections }),
                   };
-                  // Validate required fields
                   if (!requestData.eventInstanceId) {
                       throw new Error("Event instance ID is required");
                   }
@@ -4612,7 +4909,6 @@
                   setIsCreatingPaymentIntent(false);
               }
           };
-          // Debounce the payment intent creation
           const timer = setTimeout(createPaymentIntent, 500);
           return () => clearTimeout(timer);
       }, [
@@ -4625,8 +4921,8 @@
           discountCode,
           giftCards,
           config,
+          upsellSelections,
       ]);
-      // Calculate total gift card coverage
       const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
       const baseTotal = eventDetails?.price
           ? eventDetails.price * (formData.participants?.filter((p) => p.name?.trim()).length || 0)
@@ -4634,19 +4930,33 @@
       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 }));
+          return (u$2(GiftCardOnlyBooking, { config: config, eventDetails: eventDetails, formData: formData, discountCode: discountCode, giftCards: giftCards, onSuccess: onSuccess, onError: onError, upsellSelections: upsellSelections }));
       }
-      // Show loading state while creating payment intent
       if (isCreatingPaymentIntent || !clientSecret) {
-          return (u$2("div", { className: "flex items-center justify-center p-4 gap-2", children: [spinner(), u$2("span", { className: "text-text-muted font-sans text-base", children: "Zahlungsm\u00F6glichkeiten werden geladen..." })] }));
+          return (u$2("div", { style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "16px",
+                  gap: "8px",
+              }, children: [spinner(), u$2("span", { style: {
+                          color: "var(--bw-text-muted)",
+                          fontFamily: "var(--bw-font-family)",
+                          fontSize: "16px",
+                      }, children: "Zahlungsm\u00F6glichkeiten werden geladen..." })] }));
       }
-      // Show error if payment intent creation failed
       if (paymentError) {
-          return (u$2("div", { className: "bg-error/10 border border-solid border-error rounded p-4 text-error text-base font-sans", children: ["\u26A0\uFE0F ", paymentError] }));
+          return (u$2("div", { style: {
+                  backgroundColor: "rgba(var(--bw-error-color), 0.1)",
+                  border: "1px solid var(--bw-error-color)",
+                  borderRadius: "var(--bw-border-radius)",
+                  padding: "16px",
+                  color: "var(--bw-error-color)",
+                  fontSize: "16px",
+                  fontFamily: "var(--bw-font-family)",
+              }, children: ["\u26A0\uFE0F ", paymentError] }));
       }
-      // Render the payment form with Elements wrapper
       return (
       // @ts-ignore
       u$2(reactStripe_umdExports.Elements, { stripe: stripePromise, options: {
@@ -4654,7 +4964,6 @@
               appearance: stripeAppearance || { theme: "stripe" },
               locale: (config.locale) || "de",
           }, children: u$2(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, onSuccess: (result) => {
-                  // Clear persisted PI data on successful payment
                   clearPersistedPaymentIntent();
                   setPaymentIntentId(null);
                   setClientSecret(null);
@@ -4663,7 +4972,7 @@
   }
 
   const SidebarGlobal = Sidebar;
-  function Sidebar({ isOpen, onClose, title, children, width = "450px", }) {
+  function Sidebar({ isOpen, onClose, title, children, width = "450px", footer, }) {
       const [isVisible, setIsVisible] = d$1(false);
       const [isAnimating, setIsAnimating] = d$1(false);
       const themedStyles = useStyles();
@@ -4736,36 +5045,135 @@
       }, [isOpen, onClose]);
       if (!isVisible)
           return null;
-      const sidebarContent = (u$2("div", { className: "fixed inset-0 z-[1000] font-sans", style: themedStyles, children: [u$2("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-250 ease-out", style: { opacity: isAnimating ? 1 : 0 }, onClick: onClose }), u$2("div", { className: "sidebar-mobile absolute top-0 right-0 bottom-0 flex flex-col overflow-hidden bg-surface border-l border-solid border-border shadow-lg transition-transform duration-250 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform", style: {
+      const sidebarContent = (u$2("div", { style: {
+              ...themedStyles,
+              position: "fixed",
+              inset: 0,
+              zIndex: 1000,
+              fontFamily: "var(--bw-font-family)",
+          }, children: [u$2("div", { style: {
+                      position: "absolute",
+                      inset: 0,
+                      backgroundColor: "rgba(0, 0, 0, 0.5)",
+                      backdropFilter: "blur(4px)",
+                      transition: "opacity 0.25s ease-out",
+                      opacity: isAnimating ? 1 : 0,
+                  }, onClick: onClose }), u$2("div", { className: "sidebar-mobile", style: {
+                      position: "absolute",
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      display: "flex",
+                      flexDirection: "column",
+                      overflow: "hidden",
+                      backgroundColor: "var(--bw-surface-color)",
+                      borderLeft: "1px solid var(--bw-border-color)",
+                      boxShadow: "var(--bw-shadow-lg)",
+                      transition: "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+                      willChange: "transform",
                       width,
                       maxWidth: "90vw",
                       transform: isAnimating ? "translateX(0)" : "translateX(100%)",
-                  }, children: [u$2("div", { className: "flex items-center justify-between shrink-0 p-4 border-b border-solid border-border bg-background", children: [u$2("h2", { className: "m-0 font-semibold text-lg text-text-primary font-sans", children: title }), u$2("button", { onClick: onClose, className: "flex items-center justify-center cursor-pointer whitespace-nowrap px-4 py-2 rounded-sm bg-transparent border border-solid border-border text-text-muted text-base font-sans font-medium transition-all duration-200 hover:bg-border hover:text-text-primary", children: "\u2190 Zur\u00FCck" })] }), u$2("div", { className: "flex-1 overflow-auto bg-background", children: children })] })] }));
+                  }, children: [u$2("div", { style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "space-between",
+                              flexShrink: 0,
+                              padding: "12px 16px",
+                              borderBottom: "1px solid var(--bw-border-color)",
+                              backgroundColor: "var(--bw-background-color)",
+                          }, children: [u$2("h2", { style: {
+                                      margin: 0,
+                                      fontWeight: 600,
+                                      fontSize: "16px",
+                                      color: "var(--bw-text-color)",
+                                      fontFamily: "var(--bw-font-family)",
+                                      flex: 1,
+                                      paddingRight: "12px",
+                                  }, children: title }), u$2("button", { onClick: onClose, "aria-label": "Schlie\u00DFen", style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      cursor: "pointer",
+                                      width: "32px",
+                                      height: "32px",
+                                      borderRadius: "50%",
+                                      backgroundColor: "transparent",
+                                      border: "1px solid var(--bw-border-color)",
+                                      color: "var(--bw-text-muted)",
+                                      fontSize: "18px",
+                                      fontFamily: "var(--bw-font-family)",
+                                      fontWeight: 400,
+                                      transition: "all 0.2s ease",
+                                      flexShrink: 0,
+                                  }, children: "\u00D7" })] }), u$2("div", { style: {
+                              flex: 1,
+                              overflow: "auto",
+                              backgroundColor: "var(--bw-background-color)",
+                          }, children: children }), footer && (u$2("div", { className: "bw-sidebar-footer", style: {
+                              flexShrink: 0,
+                              padding: "12px 16px",
+                              borderTop: "1px solid var(--bw-border-color)",
+                              backgroundColor: "var(--bw-surface-color)",
+                              display: "flex",
+                              gap: "12px",
+                          }, children: footer }))] })] }));
       return portalRootRef.current
           ? Rn.createPortal(sidebarContent, portalRootRef.current)
           : null;
   }
   function Accordion({ title, priceInfo, children, isOpen, onToggle, }) {
-      return (u$2("div", { className: "overflow-hidden bg-surface border border-solid border-border rounded", children: [u$2("button", { type: "button", className: "accordion-trigger w-full flex justify-between items-center text-left cursor-pointer p-4 bg-transparent border-0 font-sans transition-colors duration-200 hover:bg-highlight/10", onClick: onToggle, children: [u$2("span", { className: "font-bold text-xl text-text-primary", children: title }), priceInfo && (u$2("div", { className: "ml-auto font-medium text-base text-highlight", children: priceInfo })), u$2("span", { className: "accordion-chevron ml-4 text-base transition-transform duration-200", style: {
+      return (u$2("div", { style: {
+              overflow: "hidden",
+              backgroundColor: "var(--bw-surface-color)",
+              border: "1px solid var(--bw-border-color)",
+              borderRadius: "var(--bw-border-radius)",
+          }, children: [u$2("button", { type: "button", className: "accordion-trigger", onClick: onToggle, style: {
+                      width: "100%",
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      textAlign: "left",
+                      cursor: "pointer",
+                      padding: "16px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      fontFamily: "var(--bw-font-family)",
+                      transition: "background-color 0.2s ease",
+                  }, children: [u$2("span", { style: {
+                              fontWeight: 700,
+                              fontSize: "18px",
+                              color: "var(--bw-text-color)",
+                          }, children: title }), priceInfo && (u$2("div", { style: {
+                              marginLeft: "auto",
+                              fontWeight: 500,
+                              fontSize: "16px",
+                              color: "var(--bw-highlight-color)",
+                          }, children: priceInfo })), u$2("span", { className: "accordion-chevron", style: {
+                              marginLeft: "16px",
+                              fontSize: "16px",
+                              transition: "transform 0.2s ease",
                               transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
-                          }, children: "\u25BC" })] }), isOpen && (u$2("div", { className: "px-4 pb-4 border-t border-solid border-border bg-background", children: children }))] }));
+                          }, children: "\u25BC" })] }), isOpen && (u$2("div", { style: {
+                      padding: "0 16px 16px 16px",
+                      borderTop: "1px solid var(--bw-border-color)",
+                      backgroundColor: "var(--bw-background-color)",
+                  }, children: children }))] }));
   }
 
   // Spinner icon (kept local as it has animation style)
-  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", className: "animate-spin", children: u$2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+  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;
@@ -4785,7 +5193,6 @@
               });
               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");
@@ -4830,18 +5237,122 @@
               }
           }
       };
-      return (u$2("div", { className: "bg-surface border border-solid border-border rounded overflow-hidden", children: [u$2("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "w-full p-4 bg-transparent border-0 cursor-pointer flex items-center justify-between text-text-primary font-sans text-base font-medium", children: [u$2("span", { className: "flex items-center gap-2", children: [u$2(IconTicket, { size: 18, color: "var(--bw-highlight-color)" }), "Rabattcode oder Gutschein", appliedVouchers.length > 0 && (u$2("span", { className: "bg-highlight text-white px-2 py-0.5 rounded-full text-xs font-semibold", children: appliedVouchers.length }))] }), u$2("span", { className: "transition-transform duration-200", style: { transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)" }, children: "\u25BC" })] }), isExpanded && (u$2("div", { className: "px-4 pb-4", children: [appliedVouchers.length > 0 && (u$2("div", { className: "mb-3", children: appliedVouchers.map((voucher) => (u$2("div", { className: "flex items-center justify-between px-3 py-2.5 bg-surface border border-solid border-border rounded mb-2", children: [u$2("div", { className: "flex items-center gap-2.5", 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", { className: "font-sans text-base font-semibold text-text-primary flex items-center gap-1.5", children: [u$2("span", { className: "font-mono", children: voucher.code }), u$2(IconCheck, { size: 14, color: "var(--bw-success-color)" })] }), u$2("div", { className: "font-sans text-xs text-success", children: [voucher.type === "discount"
+      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: "16px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      color: "var(--bw-text-color)",
+                      fontFamily: "var(--bw-font-family)",
+                      fontSize: "16px",
+                      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: "#ffffff",
+                                      padding: "2px 8px",
+                                      borderRadius: "9999px",
+                                      fontSize: "12px",
+                                      fontWeight: 600,
+                                  }, children: appliedVouchers.length }))] }), u$2("span", { style: {
+                              transition: "transform 0.2s ease",
+                              transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                          }, children: "\u25BC" })] }), isExpanded && (u$2("div", { style: { padding: "0 16px 16px 16px" }, children: [appliedVouchers.length > 0 && (u$2("div", { style: { marginBottom: "12px" }, children: appliedVouchers.map((voucher) => (u$2("div", { style: {
+                                  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",
+                              }, 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: "16px",
+                                                          fontWeight: 600,
+                                                          color: "var(--bw-text-color)",
+                                                          display: "flex",
+                                                          alignItems: "center",
+                                                          gap: "6px",
+                                                      }, children: [u$2("span", { style: { fontFamily: "ui-monospace, 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", { className: "text-text-muted ml-2", children: ["(Rest: ", formatCurrency(voucher.remainingBalance), ")"] }))] })] })] }), u$2("button", { type: "button", onClick: () => onRemoveVoucher(voucher.code), className: "bg-transparent border-0 p-1 cursor-pointer text-error flex items-center justify-center rounded-full transition-colors duration-200 hover:bg-error/10", title: "Entfernen", children: u$2(IconX, { size: 16 }) })] }, voucher.code))) })), u$2("div", { className: "flex gap-2", children: [u$2("input", { type: "text", value: inputValue, onChange: (e) => {
+                                                              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: {
+                                          backgroundColor: "transparent",
+                                          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",
+                                      }, 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...", className: "flex-1 px-3 py-2.5 bg-background border border-solid border-border rounded text-text-primary text-base font-sans outline-none transition-all duration-200 uppercase focus:border-highlight focus:shadow-[0_0_0_2px_var(--bw-highlight-color)33]", disabled: disabled || isLoading }), u$2("button", { type: "button", onClick: handleSubmit, disabled: disabled || isLoading || !inputValue.trim(), className: `px-4 py-2.5 bg-highlight border-0 rounded text-white text-base font-sans font-semibold transition-all duration-200 flex items-center justify-center gap-1.5 min-w-[100px] ${disabled || isLoading
-                                    ? "cursor-not-allowed opacity-60"
-                                    : "cursor-pointer hover:brightness-110"}`, 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", { className: "mt-2 px-3 py-2 bg-error/15 border border-solid border-error/40 rounded text-error text-base font-sans flex items-center gap-2", children: [u$2(IconX, { size: 16 }), error] })), hasDiscountCode && (u$2("div", { className: "mt-2 text-xs text-text-muted font-sans", children: "\uD83D\uDCA1 Es wurde bereits ein Rabattcode angewendet. Du kannst weitere Gutscheine hinzuf\u00FCgen." }))] }))] }));
+                                      : "Rabatt- oder Gutscheincode eingeben...", style: {
+                                      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: "16px",
+                                      fontFamily: "var(--bw-font-family)",
+                                      outline: "none",
+                                      transition: "all 0.2s ease",
+                                      textTransform: "uppercase",
+                                  }, disabled: disabled || isLoading }), u$2("button", { type: "button", onClick: handleSubmit, disabled: disabled || isLoading || !inputValue.trim(), style: {
+                                      padding: "10px 16px",
+                                      backgroundColor: "var(--bw-highlight-color)",
+                                      border: "none",
+                                      borderRadius: "var(--bw-border-radius)",
+                                      color: "#ffffff",
+                                      fontSize: "16px",
+                                      fontFamily: "var(--bw-font-family)",
+                                      fontWeight: 600,
+                                      transition: "all 0.2s ease",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      gap: "6px",
+                                      minWidth: "100px",
+                                      cursor: disabled || isLoading ? "not-allowed" : "pointer",
+                                      opacity: disabled || isLoading ? 0.6 : 1,
+                                  }, 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: "rgba(var(--bw-error-color), 0.15)",
+                              border: "1px solid rgba(var(--bw-error-color), 0.4)",
+                              borderRadius: "var(--bw-border-radius)",
+                              color: "var(--bw-error-color)",
+                              fontSize: "16px",
+                              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." }))] }))] }));
   }
 
   var util;
@@ -8647,12 +9158,199 @@
   // Pre-created schema instance
   createBookingFormSchema();
 
+  /**
+   * Shared inline styles for the booking widget.
+   *
+   * This module provides consistent styling across all components using inline styles.
+   * We use inline styles because:
+   * 1. The widget renders components in portals (outside the main DOM tree)
+   * 2. CSS classes may not be available in all embedding contexts (iframes, shadow DOM)
+   * 3. Inline styles with CSS variables provide theming while guaranteeing styles are applied
+   *
+   * Usage:
+   * import { buttonStyles, cardStyles } from "../../styles/shared-styles";
+   * <button style={buttonStyles.primary}>Click me</button>
+   */
+  // ============================================
+  // BUTTONS
+  // ============================================
+  const buttonBase = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "6px",
+      padding: "12px 16px",
+      borderRadius: "var(--bw-border-radius)",
+      fontSize: "14px",
+      fontWeight: 600,
+      fontFamily: "var(--bw-font-family)",
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      whiteSpace: "nowrap",
+      border: "none",
+  };
+  const buttonStyles = {
+      primary: {
+          ...buttonBase,
+          backgroundColor: "var(--bw-highlight-color)",
+          color: "#ffffff",
+          border: "none",
+      },
+      secondary: {
+          ...buttonBase,
+          backgroundColor: "transparent",
+          color: "var(--bw-text-muted)",
+          border: "1px solid var(--bw-border-color)",
+      },
+      // Full width modifier
+      fullWidth: {
+          width: "100%",
+          flex: 1,
+      },
+  };
+  // ============================================
+  // CARDS
+  // ============================================
+  const cardStyles$1 = {
+      base: {
+          backgroundColor: "var(--bw-surface-color)",
+          border: "1px solid var(--bw-border-color)",
+          borderRadius: "var(--bw-border-radius)",
+          padding: "20px",
+          marginBottom: "20px",
+      }};
+  // ============================================
+  // FORMS
+  // ============================================
+  const formStyles = {
+      label: {
+          display: "block",
+          fontSize: "14px",
+          fontWeight: 500,
+          color: "var(--bw-text-muted)",
+          marginBottom: "6px",
+          fontFamily: "var(--bw-font-family)",
+      },
+      input: {
+          width: "100%",
+          padding: "8px 12px",
+          backgroundColor: "var(--bw-background-color)",
+          border: "1px solid var(--bw-border-color)",
+          borderRadius: "var(--bw-border-radius)",
+          color: "var(--bw-text-color)",
+          fontSize: "16px", // Keep 16px for iOS zoom prevention
+          fontFamily: "var(--bw-font-family)",
+          outline: "none",
+          transition: "all 0.2s ease",
+      },
+      checkbox: {
+          width: "20px",
+          height: "20px",
+          border: "1px solid var(--bw-border-color)",
+          accentColor: "var(--bw-highlight-color)",
+          cursor: "pointer",
+      },
+      error: {
+          color: "var(--bw-error-color)",
+          fontSize: "13px",
+          marginTop: "4px",
+          fontFamily: "var(--bw-font-family)",
+      }};
+  // ============================================
+  // SECTION HEADERS
+  // ============================================
+  const sectionStyles = {
+      header: {
+          fontSize: "16px",
+          fontWeight: 600,
+          color: "var(--bw-highlight-color)",
+          margin: 0,
+          marginBottom: "12px",
+          fontFamily: "var(--bw-font-family)",
+          borderBottom: "2px solid var(--bw-highlight-color)",
+          paddingBottom: "4px",
+      }};
+  // ============================================
+  // TEXT
+  // ============================================
+  const textStyles = {
+      muted: {
+          fontSize: "14px",
+          color: "var(--bw-text-muted)",
+          fontFamily: "var(--bw-font-family)",
+      }};
+  // ============================================
+  // PARTICIPANT UPSELLS
+  // ============================================
+  const participantUpsellStyles = {
+      container: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "8px",
+          marginTop: "10px",
+          paddingTop: "10px",
+          borderTop: "1px dashed var(--bw-border-color)",
+      },
+      label: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "6px 10px",
+          backgroundColor: "var(--bw-background-color)",
+          border: "1px solid var(--bw-border-color)",
+          borderRadius: "var(--bw-border-radius-small, 8px)",
+          fontSize: "13px",
+          fontFamily: "var(--bw-font-family)",
+          color: "var(--bw-text-muted)",
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+      },
+      labelSelected: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "6px 10px",
+          backgroundColor: "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)",
+          border: "1px solid var(--bw-highlight-color)",
+          borderRadius: "var(--bw-border-radius-small, 8px)",
+          fontSize: "13px",
+          fontFamily: "var(--bw-font-family)",
+          color: "var(--bw-highlight-color)",
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+      },
+      checkbox: {
+          width: "16px",
+          height: "16px",
+          accentColor: "var(--bw-highlight-color)",
+          cursor: "pointer",
+      },
+  };
+  // ============================================
+  // HELPER FUNCTIONS
+  // ============================================
+  /**
+   * Merge multiple style objects together
+   */
+  function mergeStyles(...styles) {
+      return Object.assign({}, ...styles.filter(Boolean));
+  }
+
   // Pre-typed resolver - cast schema to any to avoid deep type instantiation in zodResolver
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const bookingResolver = t(createBookingFormSchema());
-  function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, systemConfig, }) {
-      // New voucher system - supports multiple gift cards + one discount code
+  // Local style aliases from shared styles
+  const cardStyles = cardStyles$1.base;
+  const sectionHeaderStyles = sectionStyles.header;
+  const labelStyles = formStyles.label;
+  const inputStyles = formStyles.input;
+  const errorTextStyles = formStyles.error;
+  function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, systemConfig, selectedUpsells = [], upsells = [], }) {
       const [appliedVouchers, setAppliedVouchers] = d$1([]);
+      const paymentSectionRef = A$2(null);
+      // Payment option: "deposit" or "full" - only relevant when deposit is available
+      const [paymentOption, setPaymentOption] = d$1("deposit");
+      // Per-participant upsell selections: participantIndex -> array of upsell package IDs
+      const [participantUpsells, setParticipantUpsells] = d$1({});
       const form = useForm({
           resolver: bookingResolver,
           defaultValues: {
@@ -8666,18 +9364,64 @@
           },
       });
       const watchedParticipants = form.watch("participants");
+      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");
-      const { isValid: isFormValid } = form.formState;
-      // Calculate base total before any discounts
+      // Initialize participant upsells from selectedUpsells when component mounts or participants change
+      y$1(() => {
+          if (selectedUpsells.length > 0 && upsells.length > 0) {
+              const globalUpsellIds = selectedUpsells.map(s => s.upsellPackageId);
+              const newParticipantUpsells = {};
+              // Pre-select the global upsells for all current participants
+              watchedParticipants.forEach((_, index) => {
+                  // Keep existing selections if they exist, otherwise use global selections
+                  if (participantUpsells[index] === undefined) {
+                      newParticipantUpsells[index] = [...globalUpsellIds];
+                  }
+                  else {
+                      newParticipantUpsells[index] = participantUpsells[index];
+                  }
+              });
+              setParticipantUpsells(newParticipantUpsells);
+          }
+      }, [watchedParticipants.length, selectedUpsells, upsells.length]);
+      // Toggle upsell for a specific participant
+      const toggleParticipantUpsell = (participantIndex, upsellId) => {
+          setParticipantUpsells(prev => {
+              const currentUpsells = prev[participantIndex] || [];
+              const hasUpsell = currentUpsells.includes(upsellId);
+              return {
+                  ...prev,
+                  [participantIndex]: hasUpsell
+                      ? currentUpsells.filter(id => id !== upsellId)
+                      : [...currentUpsells, upsellId]
+              };
+          });
+      };
       const calculateBaseTotal = q$2(() => {
           if (!eventDetails)
               return 0;
           return eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
       }, [eventDetails, watchedParticipants]);
-      // Calculate total discount from all applied vouchers
+      // Calculate upsells total based on per-participant selections
+      const calculateUpsellsTotal = q$2(() => {
+          let total = 0;
+          watchedParticipants.forEach((participant, index) => {
+              // Only count upsells for participants with names
+              if (participant.name.trim()) {
+                  const participantUpsellIds = participantUpsells[index] || [];
+                  participantUpsellIds.forEach(upsellId => {
+                      const upsell = upsells.find(u => u.id === upsellId);
+                      if (upsell) {
+                          total += upsell.price;
+                      }
+                  });
+              }
+          });
+          return total;
+      }, [participantUpsells, upsells, watchedParticipants]);
       const calculateTotalDiscount = q$2(() => {
           return appliedVouchers.reduce((total, voucher) => {
               if (voucher.type === "discount") {
@@ -8689,12 +9433,12 @@
               return total;
           }, 0);
       }, [appliedVouchers]);
-      // Calculate total amount after discounts
       const calculateTotal = q$2(() => {
           const baseTotal = calculateBaseTotal();
+          const upsellsTotal = calculateUpsellsTotal();
           const totalDiscount = calculateTotalDiscount();
-          return Math.max(0, baseTotal - totalDiscount);
-      }, [calculateBaseTotal, calculateTotalDiscount]);
+          return Math.max(0, baseTotal + upsellsTotal - totalDiscount);
+      }, [calculateBaseTotal, calculateUpsellsTotal, calculateTotalDiscount]);
       const calculateDeposit = () => {
           if (!eventDetails || !eventDetails.deposit)
               return 0;
@@ -8702,16 +9446,39 @@
           return eventDetails.deposit * participantCount;
       };
       const baseTotal = calculateBaseTotal();
+      const upsellsTotal = calculateUpsellsTotal();
       const totalDiscount = calculateTotalDiscount();
       const totalAmount = calculateTotal();
       const depositAmount = calculateDeposit();
-      // 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
+      // Deposit stays fixed unless the discounted total is lower than the deposit
+      // (discount applies to total price, not to the deposit itself)
+      const hasDepositOption = depositAmount > 0 && depositAmount < totalAmount;
+      const paymentAmount = hasDepositOption && paymentOption === "deposit"
+          ? Math.min(depositAmount, totalAmount)
+          : totalAmount;
+      // Convert per-participant upsells to UpsellSelection[] format for API
+      // Includes participantIndices to track which participants selected each upsell
+      const aggregatedUpsellSelections = q$2(() => {
+          const upsellParticipantMap = {};
+          watchedParticipants.forEach((participant, index) => {
+              if (participant.name.trim()) {
+                  const participantUpsellIds = participantUpsells[index] || [];
+                  participantUpsellIds.forEach(upsellId => {
+                      if (!upsellParticipantMap[upsellId]) {
+                          upsellParticipantMap[upsellId] = [];
+                      }
+                      upsellParticipantMap[upsellId].push(index);
+                  });
+              }
+          });
+          return Object.entries(upsellParticipantMap).map(([upsellPackageId, participantIndices]) => ({
+              upsellPackageId: Number(upsellPackageId),
+              quantity: participantIndices.length,
+              participantIndices,
+          }));
+      }, [participantUpsells, watchedParticipants]);
       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 (voucher) {
               setAppliedVouchers((prev) => [...prev, voucher]);
@@ -8720,13 +9487,20 @@
       const handleRemoveVoucher = q$2((code) => {
           setAppliedVouchers((prev) => prev.filter((v) => v.code !== code));
       }, []);
-      // Check if form is ready for payment (schema valid + participant count within limit)
       const isReadyForPayment = () => {
-          const participantCount = watchedParticipants.filter((p) => p.name.trim()).length;
-          const participantsWithinLimit = participantCount <= (eventDetails?.availableSpots || 0);
-          return isFormValid && participantsWithinLimit && participantCount > 0;
+          const participantsWithNames = watchedParticipants.filter((p) => p.name.trim()).length;
+          const totalParticipantRows = watchedParticipants.length;
+          const allParticipantsHaveNames = participantsWithNames === totalParticipantRows;
+          const participantsWithinLimit = participantsWithNames <= (eventDetails?.availableSpots || 0);
+          const hasValidCustomerName = watchedCustomerName && watchedCustomerName.trim().length >= 2;
+          const hasValidCustomerEmail = watchedCustomerEmail && watchedCustomerEmail.trim().length > 0 && !customerEmailError;
+          return allParticipantsHaveNames &&
+              participantsWithinLimit &&
+              participantsWithNames > 0 &&
+              hasValidCustomerName &&
+              hasValidCustomerEmail &&
+              watchedAcceptTerms;
       };
-      // Re-validate vouchers when participant count changes (affects order value)
       y$1(() => {
           if (appliedVouchers.length > 0) {
               const newBaseTotal = eventDetails?.price
@@ -8765,7 +9539,6 @@
               }));
           }
       }, [watchedParticipants, eventDetails]);
-      // Helper functions
       const addParticipant = () => {
           const currentParticipants = form.getValues("participants");
           const availableSpots = eventDetails?.availableSpots || 0;
@@ -8782,7 +9555,6 @@
               form.setValue("participants", currentParticipants.filter((_, i) => i !== index));
           }
       };
-      // Stripe appearance based on theme CSS variables
       const [stripeAppearance, setStripeAppearance] = d$1(null);
       y$1(() => {
           const container = document.querySelector(".booking-widget-container");
@@ -8818,10 +9590,79 @@
               onBackToEventTypes?.();
           }
       };
+      const scrollToPayment = () => {
+          paymentSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      };
+      // Footer navigation
+      const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: "\u2190 Zur\u00FCck" }), u$2("button", { type: "button", onClick: scrollToPayment, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: "Zur Zahlung \u2193" })] }));
       if (!eventDetails.bookingOpen) {
-          return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", children: u$2("div", { className: "flex items-center justify-center min-h-[400px] text-center p-4", children: u$2("div", { children: [u$2("div", { className: "mx-auto mb-4 text-[48px]", children: u$2(IconWarning, { size: 48, color: "var(--bw-error-color)" }) }), u$2("h3", { className: "mb-2 font-semibold text-lg text-text-muted font-sans", children: "Buchung nicht m\u00F6glich" }), u$2("p", { className: "text-text-muted font-sans", children: "F\u00FCr diese Veranstaltung sind derzeit keine Buchungen m\u00F6glich." })] }) }) }));
-      }
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, children: u$2("div", { className: "booking-widget-container p-4", children: [u$2("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4 mb-6", children: [u$2("h2", { className: "text-lg font-semibold text-highlight mb-3 font-sans border-b-2 border-highlight pb-1", children: "Event Details" }), u$2("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-3 text-base", children: [u$2("div", { className: "flex items-center justify-between", children: [u$2("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [u$2(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " Datum:"] }), u$2("span", { className: "text-text-primary font-medium font-sans", children: formatEventDate(eventDetails.startTime) })] }), u$2("div", { className: "flex items-center justify-between", children: [u$2("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [u$2(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " Uhrzeit:"] }), u$2("span", { className: "text-text-primary font-medium font-sans", children: formatTime(eventDetails.startTime, "Europe/Berlin", "de") })] }), u$2("div", { className: "flex items-center justify-between", children: [u$2("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [u$2(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " Dauer:"] }), u$2("span", { className: "text-text-primary font-medium font-sans", children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] }), u$2("div", { className: "flex items-center justify-between", children: [u$2("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [u$2(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " Preis:"] }), u$2("span", { className: "text-text-primary font-medium font-sans", children: [formatCurrency(eventDetails.price), " pro Person"] })] })] })] }), u$2("div", { className: "flex flex-col gap-6", children: [u$2("div", { className: "flex flex-col gap-6", children: [u$2("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4 mb-6", children: [u$2("h2", { className: "text-lg font-semibold text-highlight mb-3 font-sans border-b-2 border-highlight pb-1", children: "Kontaktdaten" }), u$2("div", { className: "flex flex-col gap-4", children: [u$2("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4", children: [u$2("div", { children: [u$2("label", { htmlFor: "customerName", className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Name *" }), u$2("input", { id: "customerName", ...form.register("customerName"), type: "text", className: "w-full px-3 py-2 bg-background border border-solid border-border rounded text-text-primary text-base font-sans outline-none transition-all duration-200 focus:border-highlight focus:shadow-[0_0_0_2px_var(--bw-highlight-color)]", placeholder: "Dein vollst\u00E4ndiger Name" }), customerNameError && (u$2("p", { className: "text-error text-base mt-1 font-sans", children: customerNameError.message }))] }), u$2("div", { children: [u$2("label", { htmlFor: "customerEmail", className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "E-Mail *" }), u$2("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", className: "w-full px-3 py-2 bg-background border border-solid border-border rounded text-text-primary text-base font-sans outline-none transition-all duration-200 focus:border-highlight focus:shadow-[0_0_0_2px_var(--bw-highlight-color)]", placeholder: "deine@email.de" }), customerEmailError && (u$2("p", { className: "text-error text-base mt-1 font-sans", children: customerEmailError.message }))] })] }), u$2("div", { children: [u$2("label", { htmlFor: "customerPhone", className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Telefon (optional)" }), u$2("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", className: "w-full px-3 py-2 bg-background border border-solid border-border rounded text-text-primary text-base font-sans outline-none transition-all duration-200 focus:border-highlight focus:shadow-[0_0_0_2px_var(--bw-highlight-color)]", placeholder: "+49 123 456789" })] })] })] }), u$2("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4 mb-6", children: [u$2("div", { className: "flex justify-between items-center mb-4", children: u$2("h2", { className: "text-lg font-semibold text-highlight m-0 font-sans border-b-2 border-highlight pb-1", children: "Teilnehmer" }) }), u$2("div", { className: "flex flex-col gap-3", children: [watchedParticipants.map((_, index) => (u$2("div", { className: "flex gap-3 items-center", children: [u$2("div", { className: "flex-1", children: [u$2("label", { htmlFor: `participant-name-${index}`, className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Name *" }), u$2("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", className: "w-full px-3 py-2 bg-background border border-solid border-border rounded text-text-primary text-base font-sans outline-none transition-all duration-200 focus:border-highlight focus:shadow-[0_0_0_2px_var(--bw-highlight-color)]", placeholder: "Teilnehmername" }), form.formState.errors.participants?.[index]?.name && (u$2("p", { className: "text-error text-base mt-1 font-sans", children: form.formState.errors.participants[index]?.name?.message }))] }), u$2("div", { className: "w-20", children: [u$2("label", { htmlFor: `participant-age-${index}`, className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Alter" }), u$2("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
+          return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", children: u$2("div", { style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      minHeight: "400px",
+                      textAlign: "center",
+                      padding: "16px",
+                  }, children: u$2("div", { children: [u$2("div", { style: { margin: "0 auto 16px auto", fontSize: "48px" }, children: u$2(IconWarning, { size: 48, color: "var(--bw-error-color)" }) }), u$2("h3", { style: {
+                                  marginBottom: "8px",
+                                  fontWeight: 600,
+                                  fontSize: "18px",
+                                  color: "var(--bw-text-muted)",
+                                  fontFamily: "var(--bw-font-family)",
+                              }, children: "Buchung nicht m\u00F6glich" }), u$2("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "F\u00FCr diese Veranstaltung sind derzeit keine Buchungen m\u00F6glich." })] }) }) }));
+      }
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, footer: footerContent, children: u$2("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [u$2("div", { style: cardStyles, children: [u$2("h2", { style: sectionHeaderStyles, children: "Event Details" }), u$2("div", { style: {
+                                  display: "grid",
+                                  gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                  gap: "12px",
+                                  fontSize: "14px",
+                              }, children: [u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
+                                                  color: "var(--bw-text-muted)",
+                                                  fontFamily: "var(--bw-font-family)",
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: "4px",
+                                              }, children: [u$2(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " Datum:"] }), u$2("span", { style: {
+                                                  color: "var(--bw-text-color)",
+                                                  fontWeight: 500,
+                                                  fontFamily: "var(--bw-font-family)",
+                                              }, children: [formatEventDate(eventDetails.startTime), " \u2022 ", formatTime(eventDetails.startTime, "Europe/Berlin", "de")] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
+                                                  color: "var(--bw-text-muted)",
+                                                  fontFamily: "var(--bw-font-family)",
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: "4px",
+                                              }, children: [u$2(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " Dauer:"] }), u$2("span", { style: {
+                                                  color: "var(--bw-text-color)",
+                                                  fontWeight: 500,
+                                                  fontFamily: "var(--bw-font-family)",
+                                              }, children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
+                                                  color: "var(--bw-text-muted)",
+                                                  fontFamily: "var(--bw-font-family)",
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: "4px",
+                                              }, children: [u$2(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " Preis:"] }), u$2("span", { style: {
+                                                  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: "24px" }, children: [u$2("div", { style: cardStyles, children: [u$2("h2", { style: sectionHeaderStyles, children: "Kontaktdaten" }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
+                                                  display: "grid",
+                                                  gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                                  gap: "16px",
+                                              }, children: [u$2("div", { children: [u$2("label", { htmlFor: "customerName", style: labelStyles, children: "Name *" }), u$2("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles, placeholder: "Dein vollst\u00E4ndiger Name" }), customerNameError && (u$2("p", { style: errorTextStyles, children: customerNameError.message }))] }), u$2("div", { children: [u$2("label", { htmlFor: "customerEmail", style: labelStyles, children: "E-Mail *" }), u$2("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles, placeholder: "deine@email.de" }), customerEmailError && (u$2("p", { style: errorTextStyles, children: customerEmailError.message }))] })] }), u$2("div", { children: [u$2("label", { htmlFor: "customerPhone", style: labelStyles, children: "Telefon (optional)" }), u$2("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles, placeholder: "+49 123 456789" })] }), u$2("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), u$2("label", { htmlFor: "acceptTerms", style: {
+                                                                  fontSize: "14px",
+                                                                  color: "var(--bw-text-muted)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  maxWidth: "calc(100% - 32px)",
+                                                                  overflowWrap: "break-word",
+                                                                  cursor: "pointer",
+                                                              }, children: ["Ich akzeptiere die", " ", u$2("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: "AGBs" }), "*"] })] }), form.formState.errors.acceptTerms && (u$2("p", { style: { ...errorTextStyles, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), u$2("div", { style: cardStyles, children: [u$2("div", { style: {
+                                          display: "flex",
+                                          justifyContent: "space-between",
+                                          alignItems: "center",
+                                          marginBottom: "16px",
+                                      }, children: u$2("h2", { style: { ...sectionHeaderStyles, marginBottom: 0 }, children: "Teilnehmer" }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [u$2("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [u$2("div", { style: { flex: 1 }, children: [u$2("label", { htmlFor: `participant-name-${index}`, style: labelStyles, children: "Name *" }), u$2("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles, placeholder: "Teilnehmername" }), form.formState.errors.participants?.[index]?.name && (u$2("p", { style: errorTextStyles, children: form.formState.errors.participants[index]?.name?.message }))] }), u$2("div", { style: { width: "80px" }, children: [u$2("label", { htmlFor: `participant-age-${index}`, style: labelStyles, children: "Alter" }), u$2("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
                                                                           setValueAs: (value) => {
                                                                               if (value === "" || value === null || value === undefined) {
                                                                                   return undefined;
@@ -8829,44 +9670,205 @@
                                                                               const num = Number(value);
                                                                               return Number.isNaN(num) ? undefined : num;
                                                                           },
-                                                                      }), type: "number", min: "0", max: "120", className: "w-full px-3 py-2 bg-background border border-solid border-border rounded text-text-primary text-base font-sans outline-none transition-all duration-200 focus:border-highlight focus:shadow-[0_0_0_2px_var(--bw-highlight-color)]", placeholder: "25" })] }), watchedParticipants.length > 1 && (u$2("div", { children: [u$2("label", { className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "\u00A0" }), u$2("button", { type: "button", onClick: () => removeParticipant(index), className: "text-error bg-surface border border-solid border-border rounded-full w-9 h-9 flex items-center justify-center cursor-pointer transition-all duration-200 text-2xl font-bold font-sans p-0 hover:bg-border", children: "\u00D7" })] }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { className: "flex flex-col items-center mt-3", children: u$2("button", { type: "button", onClick: addParticipant, className: "text-white text-base font-semibold px-4 py-2 rounded bg-highlight border border-solid border-highlight cursor-pointer transition-all duration-200 mb-1 font-sans shadow-[0_2px_8px_0_var(--bw-highlight-color)] hover:brightness-110", children: "+ Teilnehmer hinzuf\u00FCgen" }) })) : (u$2("p", { className: "text-error text-base font-sans", 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", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [u$2("label", { htmlFor: "booking-comment", className: "block text-base font-medium text-text-primary mb-2 font-sans", children: "Kommentar (optional)" }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zur Buchung...", rows: 3, className: "w-full p-3 border border-solid border-border rounded text-base font-sans bg-background text-text-primary resize-y min-h-[80px] outline-none transition-colors duration-200 focus:border-highlight" })] }), u$2("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [u$2("div", { className: "flex items-center gap-3", children: [u$2("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", className: "mt-1 w-5 h-5 border border-solid border-border accent-highlight cursor-pointer", style: {
-                                                          appearance: "checkbox",
-                                                          WebkitAppearance: "checkbox",
-                                                      } }), u$2("label", { htmlFor: "acceptTerms", className: "text-base text-text-muted font-sans max-w-[calc(100%-32px)] break-words", children: ["Ich akzeptiere die", " ", u$2("a", { href: eventDetails.agbUrl || "/terms", className: "text-highlight no-underline", target: "_blank", rel: "noopener noreferrer", children: "AGBs" }), "*"] })] }), form.formState.errors.acceptTerms && (u$2("p", { className: "text-error text-base mt-2 font-sans", children: form.formState.errors.acceptTerms.message }))] })] }), u$2("div", { className: "flex flex-col gap-6", children: [u$2("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [u$2("h2", { className: "text-lg font-semibold text-highlight mb-4 font-sans border-b-2 border-highlight pb-1", children: "Buchungszusammenfassung" }), u$2("div", { className: "flex flex-col gap-3", children: [u$2("div", { className: "flex justify-between items-center", children: [u$2("span", { className: "text-text-muted font-sans", children: "Anzahl Teilnehmer:" }), u$2("span", { className: "text-text-primary font-medium font-sans", children: watchedParticipants.filter((p) => p.name.trim()).length })] }), u$2("div", { className: "flex justify-between items-center", children: [u$2("span", { className: "text-text-muted font-sans", children: "Preis pro Person:" }), u$2("span", { className: "text-text-primary font-medium font-sans", children: formatCurrency(eventDetails.price) })] }), depositAmount > 0 && (u$2("div", { className: "flex justify-between items-center", children: [u$2("span", { className: "text-text-muted font-sans", children: "Anzahlung pro Person:" }), u$2("span", { className: "text-text-primary font-medium font-sans", children: formatCurrency(eventDetails.deposit || 0) })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { className: "flex justify-between items-center", children: [u$2("span", { className: "text-text-muted font-sans", children: "Zwischensumme:" }), u$2("span", { className: `font-sans ${totalDiscount > 0 ? "text-text-muted line-through" : "text-text-muted"}`, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (u$2("div", { className: "flex justify-between items-center", children: [u$2("span", { className: "text-success font-sans text-base", children: ["Rabatt (", appliedDiscountCode.code, "):"] }), u$2("span", { className: "text-success font-sans", children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (u$2("div", { className: "flex justify-between items-center", children: [u$2("span", { className: "text-success font-sans text-base", children: ["Gutschein (", giftCard.code, "):"] }), u$2("span", { className: "text-success font-sans", children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), u$2("div", { className: "border-t border-solid border-border pt-3", children: [depositAmount > 0 && (u$2("div", { className: "flex justify-between items-center text-base mb-2", children: [u$2("span", { className: "text-text-muted font-sans", children: "Gesamtbetrag:" }), u$2("span", { className: "text-text-muted font-sans font-medium", children: formatCurrency(totalAmount) })] })), u$2("div", { className: "flex justify-between items-center text-lg font-semibold", children: [u$2("span", { className: "text-text-primary font-sans", children: depositAmount > 0 ? "Heute zu zahlen (Anzahlung):" : "Gesamtbetrag:" }), u$2("span", { className: "text-highlight font-sans font-bold", children: formatCurrency(paymentAmount) })] })] })] })] }), stripePromise &&
-                                      (() => {
-                                          if (!isReadyForPayment()) {
-                                              const participantCount = watchedParticipants.filter((p) => p.name.trim()).length;
-                                              const missing = [];
-                                              if (participantCount === 0) {
-                                                  missing.push("einen Teilnehmer");
-                                              }
-                                              if (participantCount > (eventDetails?.availableSpots || 0)) {
-                                                  missing.push(`die Anzahl der Teilnehmer auf ${eventDetails?.availableSpots || 0} zu reduzieren`);
-                                              }
-                                              if (customerNameError) {
-                                                  missing.push("einen gültigen Namen (mindestens 2 Zeichen)");
-                                              }
-                                              if (customerEmailError) {
-                                                  missing.push("eine gültige E-Mail-Adresse");
-                                              }
-                                              if (!watchedAcceptTerms) {
-                                                  missing.push("die Akzeptanz der Allgemeinen Geschäftsbedingungen");
+                                                                      }), type: "number", min: "0", max: "120", style: inputStyles, placeholder: "25" })] }), watchedParticipants.length > 1 && (u$2("div", { children: [u$2("label", { style: { ...labelStyles, visibility: "hidden" }, children: "\u00A0" }), u$2("button", { type: "button", onClick: () => removeParticipant(index), style: {
+                                                                          color: "var(--bw-error-color)",
+                                                                          backgroundColor: "var(--bw-surface-color)",
+                                                                          border: "1px solid var(--bw-border-color)",
+                                                                          borderRadius: "50%",
+                                                                          width: "36px",
+                                                                          height: "36px",
+                                                                          display: "flex",
+                                                                          alignItems: "center",
+                                                                          justifyContent: "center",
+                                                                          cursor: "pointer",
+                                                                          transition: "all 0.2s ease",
+                                                                          fontSize: "24px",
+                                                                          fontWeight: 700,
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          padding: 0,
+                                                                      }, children: "\u00D7" })] }))] }), upsells.length > 0 && (u$2("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
+                                                          const isSelected = (participantUpsells[index] || []).includes(upsell.id);
+                                                          return (u$2("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [u$2("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), u$2("span", { style: { fontWeight: 500 }, children: upsell.name }), u$2("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
+                                                      }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { style: {
+                                                  display: "flex",
+                                                  flexDirection: "column",
+                                                  alignItems: "center",
+                                                  marginTop: "12px",
+                                              }, children: u$2("button", { type: "button", onClick: addParticipant, style: {
+                                                      color: "#ffffff",
+                                                      fontSize: "14px",
+                                                      fontWeight: 600,
+                                                      padding: "8px 16px",
+                                                      borderRadius: "var(--bw-border-radius)",
+                                                      backgroundColor: "var(--bw-highlight-color)",
+                                                      border: "1px solid var(--bw-highlight-color)",
+                                                      cursor: "pointer",
+                                                      transition: "all 0.2s ease",
+                                                      marginBottom: "4px",
+                                                      fontFamily: "var(--bw-font-family)",
+                                                      boxShadow: "0 2px 8px 0 var(--bw-highlight-color)",
+                                                  }, children: [watchedParticipants.length + 1, ". Teilnehmer hinzuf\u00FCgen"] }) })) : (u$2("p", { style: { ...errorTextStyles, margin: 0 }, 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: cardStyles, children: [u$2("label", { htmlFor: "booking-comment", style: labelStyles, children: "Kommentar (optional)" }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zur Buchung...", rows: 3, style: {
+                                          ...inputStyles,
+                                          resize: "vertical",
+                                          minHeight: "80px",
+                                      } })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles, children: [u$2("h2", { style: { ...sectionHeaderStyles, marginBottom: "16px" }, children: "Buchungszusammenfassung" }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Preis:" }), u$2("div", { style: {
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontWeight: 500,
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                              }, children: [u$2("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.filter((p) => p.name.trim()).length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), depositAmount > 0 && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Anzahlung:" }), u$2("span", { style: {
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontWeight: 500,
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                              }, children: [u$2("span", { style: { fontWeight: 200 }, children: [watchedParticipants.filter((p) => p.name.trim()).length, " x"] }), " ", formatCurrency(eventDetails.deposit || 0)] })] })), upsellsTotal > 0 && (u$2("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "13px", display: "block", marginBottom: "4px" }, children: "Extras:" }), upsells.map((upsell) => {
+                                                              // Count how many participants have this upsell selected
+                                                              const countWithUpsell = watchedParticipants.filter((p, idx) => p.name.trim() && (participantUpsells[idx] || []).includes(upsell.id)).length;
+                                                              if (countWithUpsell === 0)
+                                                                  return null;
+                                                              const upsellLineTotal = upsell.price * countWithUpsell;
+                                                              return (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px" }, children: [u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }, upsell.id));
+                                                          })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Zwischensumme:" }), u$2("span", { style: {
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          color: totalDiscount > 0 ? "var(--bw-text-muted)" : "var(--bw-text-muted)",
+                                                                          textDecoration: totalDiscount > 0 ? "line-through" : "none",
+                                                                      }, 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)",
+                                                                          fontSize: "14px",
+                                                                      }, children: ["Rabatt (", appliedDiscountCode.code, "):"] }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, 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: "14px",
+                                                                      }, 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: [hasDepositOption && (u$2("div", { style: {
+                                                                  display: "flex",
+                                                                  gap: "8px",
+                                                                  marginBottom: "16px",
+                                                              }, children: [u$2("button", { type: "button", onClick: () => setPaymentOption("deposit"), style: {
+                                                                          flex: 1,
+                                                                          padding: "12px",
+                                                                          borderRadius: "var(--bw-border-radius)",
+                                                                          border: paymentOption === "deposit"
+                                                                              ? "2px solid var(--bw-highlight-color)"
+                                                                              : "1px solid var(--bw-border-color)",
+                                                                          backgroundColor: paymentOption === "deposit"
+                                                                              ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
+                                                                              : "var(--bw-surface-color)",
+                                                                          cursor: "pointer",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          transition: "all 0.2s ease",
+                                                                      }, children: [u$2("div", { style: {
+                                                                                  fontSize: "13px",
+                                                                                  color: "var(--bw-text-muted)",
+                                                                                  marginBottom: "4px",
+                                                                              }, children: "Anzahlung" }), u$2("div", { style: {
+                                                                                  fontSize: "18px",
+                                                                                  fontWeight: 700,
+                                                                                  color: paymentOption === "deposit"
+                                                                                      ? "var(--bw-highlight-color)"
+                                                                                      : "var(--bw-text-color)",
+                                                                              }, children: formatCurrency(depositAmount) })] }), u$2("button", { type: "button", onClick: () => setPaymentOption("full"), style: {
+                                                                          flex: 1,
+                                                                          padding: "12px",
+                                                                          borderRadius: "var(--bw-border-radius)",
+                                                                          border: paymentOption === "full"
+                                                                              ? "2px solid var(--bw-highlight-color)"
+                                                                              : "1px solid var(--bw-border-color)",
+                                                                          backgroundColor: paymentOption === "full"
+                                                                              ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
+                                                                              : "var(--bw-surface-color)",
+                                                                          cursor: "pointer",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          transition: "all 0.2s ease",
+                                                                      }, children: [u$2("div", { style: {
+                                                                                  fontSize: "13px",
+                                                                                  color: "var(--bw-text-muted)",
+                                                                                  marginBottom: "4px",
+                                                                              }, children: "Vollst\u00E4ndig bezahlen" }), u$2("div", { style: {
+                                                                                  fontSize: "18px",
+                                                                                  fontWeight: 700,
+                                                                                  color: paymentOption === "full"
+                                                                                      ? "var(--bw-highlight-color)"
+                                                                                      : "var(--bw-text-color)",
+                                                                              }, children: formatCurrency(totalAmount) })] })] })), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
+                                                                  display: "flex",
+                                                                  justifyContent: "space-between",
+                                                                  alignItems: "center",
+                                                                  fontSize: "14px",
+                                                                  marginBottom: "8px",
+                                                              }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag:" }), u$2("span", { style: {
+                                                                          color: "var(--bw-text-muted)",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          fontWeight: 500,
+                                                                      }, children: formatCurrency(totalAmount) })] })), u$2("div", { style: {
+                                                                  display: "flex",
+                                                                  justifyContent: "space-between",
+                                                                  alignItems: "center",
+                                                                  fontSize: "18px",
+                                                                  fontWeight: 600,
+                                                              }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
+                                                                          ? "Heute zu zahlen (Anzahlung):"
+                                                                          : "Gesamtbetrag:" }), u$2("span", { style: {
+                                                                          color: "var(--bw-highlight-color)",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          fontWeight: 700,
+                                                                      }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
+                                                                  fontSize: "12px",
+                                                                  color: "var(--bw-text-muted)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  marginTop: "8px",
+                                                                  textAlign: "right",
+                                                              }, children: ["Restbetrag (", formatCurrency(totalAmount - depositAmount), ") vor Ort f\u00E4llig."] }))] })] })] }), u$2("div", { ref: paymentSectionRef, children: stripePromise &&
+                                          (() => {
+                                              if (!isReadyForPayment()) {
+                                                  const participantsWithNames = watchedParticipants.filter((p) => p.name.trim()).length;
+                                                  const totalParticipantRows = watchedParticipants.length;
+                                                  const participantsWithoutNames = totalParticipantRows - participantsWithNames;
+                                                  const missing = [];
+                                                  if (participantsWithNames === 0) {
+                                                      missing.push("mindestens einen Teilnehmer mit Namen");
+                                                  }
+                                                  else if (participantsWithoutNames > 0) {
+                                                      missing.push(`Namen für alle ${totalParticipantRows} Teilnehmer`);
+                                                  }
+                                                  if (participantsWithNames > (eventDetails?.availableSpots || 0)) {
+                                                      missing.push(`die Anzahl der Teilnehmer auf ${eventDetails?.availableSpots || 0} zu reduzieren`);
+                                                  }
+                                                  // Check for empty or invalid name (min 2 chars required)
+                                                  if (!watchedCustomerName || watchedCustomerName.trim().length < 2 || customerNameError) {
+                                                      missing.push("einen gültigen Kontaktnamen");
+                                                  }
+                                                  // Check for empty or invalid email
+                                                  if (!watchedCustomerEmail || watchedCustomerEmail.trim().length === 0 || customerEmailError) {
+                                                      missing.push("eine gültige E-Mail-Adresse");
+                                                  }
+                                                  if (!watchedAcceptTerms) {
+                                                      missing.push("die Akzeptanz der AGBs");
+                                                  }
+                                                  const message = missing.length > 0
+                                                      ? `Wir benötigen mindestens ${missing.join(", ")} um fortzufahren.`
+                                                      : "Bitte fülle alle Pflichtfelder aus, um fortzufahren.";
+                                                  return (u$2("div", { style: {
+                                                          ...cardStyles,
+                                                          borderColor: "var(--bw-warning-color)",
+                                                          color: "var(--bw-warning-color)",
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          textAlign: "center",
+                                                      }, children: message }));
                                               }
-                                              const message = `Bitte gib mindestens ${missing.join(", ")} an, um fortzufahren.`;
-                                              return (u$2("div", { className: "bg-surface border border-solid border-border rounded p-4 text-text-muted font-sans text-center", children: message }));
-                                          }
-                                          return (u$2("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [u$2("h2", { className: "text-lg font-semibold text-highlight mb-4 font-sans border-b-2 border-highlight pb-1", 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 ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance })] }));
-                                      })()] })] })] }) }));
+                                              return (u$2("div", { style: cardStyles, children: [u$2("h2", { style: { ...sectionHeaderStyles }, 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 ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] }));
+                                          })() })] })] })] }) }));
   }
 
   /**
@@ -9010,6 +10012,7 @@
                           order: data.order,
                           payments: data.payments,
                           orderItems: data.orderItems,
+                          purchases: data.purchases || [],
                           stripePaymentIntent: data.stripePaymentIntent,
                       });
                       setEventDetails({
@@ -9018,7 +10021,7 @@
                           description: data.booking.eventInstance.eventType.description,
                           startTime: data.booking.eventInstance.startTime,
                           endTime: data.booking.eventInstance.endTime,
-                          price: data.order.total / data.booking.participantCount,
+                          price: data.booking.eventInstance.price || 0, // Use actual event instance price
                       });
                       setFormData({
                           customerEmail: data.booking.customerEmail,
@@ -9097,18 +10100,21 @@
                   fontFamily: "var(--bw-font-family)",
                   padding: "var(--bw-spacing-large)",
                   maxWidth: "100%",
-              }, children: [u$2("div", { className: "flex justify-between items-center print-hidden", style: {
+              }, children: [u$2("div", { className: "print-hidden", style: {
                           marginBottom: "var(--bw-spacing-large)",
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "space-between",
-                      }, children: [u$2("h1", { className: "font-bold text-3xl flex items-center gap-2", style: {
+                      }, children: [u$2("h1", { style: {
                                   color: "var(--bw-text-color)",
                                   fontFamily: "var(--bw-font-family)",
                                   marginBottom: "var(--bw-spacing-large)",
                                   display: "flex",
                                   alignItems: "center",
                                   gap: "var(--bw-spacing-small)",
+                                  fontWeight: 700,
+                                  fontSize: "24px",
+                                  margin: 0,
                               }, children: [u$2("div", { style: {
                                           width: "32px",
                                           height: "32px",
@@ -9144,24 +10150,26 @@
                                               color: "var(--bw-text-color)",
                                               margin: "0",
                                               fontFamily: "var(--bw-font-family)",
-                                          }, children: "Buchungsdetails" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Buchungsdetails" }) }), u$2("div", { className: "space-y-4 print-only:space-y-2 print-only:p-0", children: [u$2("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                          }, children: "Buchungsdetails" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Buchungsdetails" }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { className: "print-detail-grid", style: {
                                                   display: "grid",
                                                   gridTemplateColumns: "1fr 1fr",
                                                   gap: "var(--bw-spacing)",
-                                              }, children: [u$2("div", { className: "print-detail-item", style: { marginBottom: "span 2" }, children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                              }, children: [u$2("div", { className: "print-detail-item", style: { marginBottom: "span 2" }, children: [u$2("div", { className: "print-detail-label", style: {
                                                                   color: "var(--bw-text-muted)",
                                                                   fontSize: "var(--bw-font-size-small)",
                                                                   fontFamily: "var(--bw-font-family)",
-                                                              }, children: "Buchungs-ID" }), u$2("p", { className: "font-semibold print-detail-value", style: {
+                                                                  fontWeight: 500,
+                                                              }, children: "Buchungs-ID" }), u$2("p", { className: "print-detail-value", style: {
                                                                   fontWeight: "600",
                                                                   color: "var(--bw-text-color)",
                                                                   fontFamily: "var(--bw-font-family)",
                                                                   fontSize: "var(--bw-font-size-medium)",
                                                                   margin: "0px 0px 6px 0",
-                                                              }, children: booking.bookingHash })] }), u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                              }, children: booking.bookingHash })] }), u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "print-detail-label", style: {
                                                                   color: "var(--bw-text-muted)",
                                                                   fontSize: "var(--bw-font-size-small)",
                                                                   fontFamily: "var(--bw-font-family)",
+                                                                  fontWeight: 500,
                                                               }, children: "Bezahl-Status" }), u$2("div", { children: [u$2("span", { className: "print-hidden", style: {
                                                                           backgroundColor: "var(--bw-success-color, #10B981)",
                                                                           color: "white",
@@ -9174,34 +10182,37 @@
                                                                           ? "erfolgreich"
                                                                           : paymentStatus === "canceled" || paymentStatus === "failed"
                                                                               ? "fehlgeschlagen"
-                                                                              : "in Bearbeitung" }), u$2("span", { className: "print-only print-status-badge print-status-paid", children: "Bezahlt" })] })] })] }), u$2("div", { className: "print-detail-item print-only:col-span-2", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                              : "in Bearbeitung" }), u$2("span", { className: "print-only print-status-badge print-status-paid", children: "Bezahlt" })] })] })] }), u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "print-detail-label", style: {
                                                           color: "var(--bw-text-muted)",
                                                           fontSize: "var(--bw-font-size-small)",
                                                           fontFamily: "var(--bw-font-family)",
-                                                      }, children: "Event" }), u$2("p", { className: "font-semibold print-detail-value", style: {
+                                                          fontWeight: 500,
+                                                      }, children: "Event" }), u$2("p", { className: "print-detail-value", style: {
                                                           fontWeight: "600",
                                                           color: "var(--bw-text-color)",
                                                           fontFamily: "var(--bw-font-family)",
                                                           fontSize: "var(--bw-font-size-large)",
                                                           margin: "0 0 6px 0",
-                                                      }, children: eventDetails.name })] }), u$2("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                                      }, children: eventDetails.name })] }), u$2("div", { className: "print-detail-grid", style: {
                                                   display: "grid",
                                                   gridTemplateColumns: "1fr 1fr",
                                                   gap: "var(--bw-spacing)",
-                                              }, children: [u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                              }, children: [u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "print-detail-label", style: {
                                                                   color: "var(--bw-text-muted)",
                                                                   fontSize: "var(--bw-font-size-small)",
                                                                   fontFamily: "var(--bw-font-family)",
+                                                                  fontWeight: 500,
                                                               }, children: "Datum" }), u$2("p", { className: "print-detail-value", style: {
                                                                   fontWeight: "600",
                                                                   color: "var(--bw-text-color)",
                                                                   fontFamily: "var(--bw-font-family)",
                                                                   fontSize: "var(--bw-font-size-large)",
                                                                   margin: "0 0 6px 0",
-                                                              }, children: formatDate12(eventDetails.startTime) })] }), u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                              }, children: formatDate12(eventDetails.startTime) })] }), u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "print-detail-label", style: {
                                                                   color: "var(--bw-text-muted)",
                                                                   fontSize: "var(--bw-font-size-small)",
                                                                   fontFamily: "var(--bw-font-family)",
+                                                                  fontWeight: 500,
                                                               }, children: "Zeit" }), u$2("p", { className: "print-detail-value", style: {
                                                                   fontWeight: "600",
                                                                   color: "var(--bw-text-color)",
@@ -9219,13 +10230,13 @@
                                               color: "var(--bw-text-color)",
                                               margin: "0",
                                               fontFamily: "var(--bw-font-family)",
-                                          }, children: ["Teilnehmer (", formData.participants.length, ")"] }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: ["Teilnehmer (", formData.participants.length, ")"] }) }), u$2("div", { className: "print-only:p-0", children: u$2("div", { className: "space-y-3 print-only:space-y-1", style: {
+                                          }, children: ["Teilnehmer (", formData.participants.length, ")"] }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: ["Teilnehmer (", formData.participants.length, ")"] }) }), u$2("div", { children: u$2("div", { style: {
                                               display: "flex",
                                               flexDirection: "column",
                                               gap: "var(--bw-spacing-small)",
                                           }, children: formData.participants
                                               .filter((p) => p.name.trim())
-                                              .map((participant, index) => (u$2("div", { className: "flex justify-between items-center bg-muted p-3 rounded-lg print-participant", style: {
+                                              .map((participant, index) => (u$2("div", { className: "print-participant", style: {
                                                   display: "flex",
                                                   justifyContent: "space-between",
                                                   alignItems: "center",
@@ -9235,7 +10246,7 @@
                                               }, children: u$2("div", { className: "print-participant-info", children: [u$2("div", { className: "print-participant-name", style: {
                                                               color: "var(--bw-text-color)",
                                                               fontFamily: "var(--bw-font-family)",
-                                                          }, children: participant.name }), participant.age && (u$2("div", { className: "text-muted-foreground text-sm print-participant-age", style: {
+                                                          }, children: participant.name }), participant.age && (u$2("div", { className: "print-participant-age", style: {
                                                               color: "var(--bw-text-muted)",
                                                               fontSize: "var(--bw-font-size-small)",
                                                               fontFamily: "var(--bw-font-family)",
@@ -9251,7 +10262,14 @@
                                               color: "var(--bw-text-color)",
                                               margin: "0",
                                               fontFamily: "var(--bw-font-family)",
-                                          }, children: "Zahlungs\u00FCbersicht" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Zahlungs\u00FCbersicht" }) }), u$2("div", { className: "space-y-2 print-only:p-0 print-only:space-y-1", children: [u$2("div", { className: "print-payment-summary print-only", children: [u$2("div", { className: "print-payment-row", children: [u$2("span", { children: "Gesamtbetrag" }), u$2("span", { children: formatCurrency(booking.total) })] }), u$2("div", { className: "print-payment-row", children: [u$2("span", { children: "Bezahlt" }), u$2("span", { children: formatCurrency(booking.total) })] })] }), u$2("div", { className: "print-hidden space-y-2", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Bezahlt" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] })] })] })] }), u$2("div", { className: "print-booking-card", style: {
+                                          }, children: "Zahlungs\u00FCbersicht" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Zahlungs\u00FCbersicht" }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [u$2("div", { className: "print-hidden", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "var(--bw-font-size-small)" }, children: [eventDetails.name, " (", booking.participantCount, "x ", formatCurrency(eventDetails.price), ")"] }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(eventDetails.price * booking.participantCount) })] }), bookingData.purchases && bookingData.purchases.length > 0 && (u$2(k$3, { children: bookingData.purchases.map((purchase) => (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "var(--bw-font-size-small)" }, children: [purchase.product?.name || "Produkt", " (", purchase.quantity, "x ", formatCurrency(purchase.unitPrice), ")"] }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(purchase.totalPrice) })] }, purchase.id))) })), u$2("div", { style: {
+                                                          display: "flex",
+                                                          justifyContent: "space-between",
+                                                          alignItems: "center",
+                                                          borderTop: "1px solid var(--bw-border-color)",
+                                                          paddingTop: "var(--bw-spacing-small)",
+                                                          marginTop: "var(--bw-spacing-small)"
+                                                      }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)", fontWeight: "600" }, children: "Gesamtbetrag" }), u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)", fontWeight: "700" }, children: formatCurrency(bookingData.order.total) })] })] }), u$2("div", { className: "print-payment-summary print-only", children: u$2("div", { className: "print-payment-row", children: [u$2("span", { children: "Gesamtbetrag" }), u$2("span", { children: formatCurrency(bookingData.order.total) })] }) })] })] }), u$2("div", { className: "print-booking-card", style: {
                                   backgroundColor: "var(--bw-surface-color)",
                                   border: `1px solid var(--bw-border-color)`,
                                   borderRadius: "var(--bw-border-radius)",
@@ -9263,7 +10281,7 @@
                                               color: "var(--bw-text-color)",
                                               margin: "0",
                                               fontFamily: "var(--bw-font-family)",
-                                          }, children: "Kontaktdaten" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Kontaktdaten" }) }), u$2("div", { className: "space-y-2 print-only:p-0 print-only:space-y-1", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), u$2("div", { className: "print-booking-card", style: {
+                                          }, children: "Kontaktdaten" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Kontaktdaten" }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), u$2("div", { className: "print-booking-card", style: {
                                   backgroundColor: "var(--bw-surface-color)",
                                   border: `1px solid var(--bw-border-color)`,
                                   borderRadius: "var(--bw-border-radius)",
@@ -9350,9 +10368,51 @@
           onEventTypeSelect(eventType);
           onClose();
       };
-      return (u$2(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: u$2("div", { className: "p-6", children: [u$2("div", { className: "mb-6 p-4 bg-background rounded border border-solid border-border", children: [u$2("div", { children: [u$2("div", { className: "text-sm font-semibold text-highlight mb-2 font-sans", children: eventType.category.name }), u$2("h2", { className: "text-[28px] font-bold text-text-primary mb-4 leading-tight font-sans m-0", children: eventType.name })] }), eventType.highlights && eventType.highlights.length > 0 && (u$2("div", { className: "flex items-center gap-2", children: u$2("div", { className: "mb-6", children: u$2("ul", { className: "list-none p-0 m-0 flex flex-col gap-0.5", children: eventType.highlights
+      return (u$2(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: u$2("div", { style: { padding: "24px" }, children: [u$2("div", { style: {
+                          marginBottom: "24px",
+                          padding: "16px",
+                          backgroundColor: "var(--bw-background-color)",
+                          borderRadius: "var(--bw-border-radius)",
+                          border: "1px solid var(--bw-border-color)",
+                      }, children: [u$2("div", { children: [u$2("div", { style: {
+                                          fontSize: "14px",
+                                          fontWeight: 600,
+                                          color: "var(--bw-highlight-color)",
+                                          marginBottom: "8px",
+                                          fontFamily: "var(--bw-font-family)",
+                                      }, children: eventType.category.name }), u$2("h2", { style: {
+                                          fontSize: "28px",
+                                          fontWeight: 700,
+                                          color: "var(--bw-text-color)",
+                                          marginBottom: "16px",
+                                          lineHeight: 1.25,
+                                          fontFamily: "var(--bw-font-family)",
+                                          margin: "0 0 16px 0",
+                                      }, children: eventType.name })] }), eventType.highlights && eventType.highlights.length > 0 && (u$2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: u$2("div", { style: { marginBottom: "24px" }, children: u$2("ul", { style: {
+                                          listStyle: "none",
+                                          padding: 0,
+                                          margin: 0,
+                                          display: "flex",
+                                          flexDirection: "column",
+                                          gap: "2px",
+                                      }, children: eventType.highlights
                                           .filter((highlight) => highlight.trim())
-                                          .map((highlight, index) => (u$2("li", { className: "flex items-start gap-2.5 font-sans text-base leading-relaxed text-text-primary", children: [u$2("div", { className: "mt-1 shrink-0", children: u$2(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), u$2("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (u$2("div", { className: "mb-6 text-text-muted text-base leading-relaxed font-sans px-5", children: [u$2("style", { dangerouslySetInnerHTML: {
+                                          .map((highlight, index) => (u$2("li", { style: {
+                                              display: "flex",
+                                              alignItems: "flex-start",
+                                              gap: "10px",
+                                              fontFamily: "var(--bw-font-family)",
+                                              fontSize: "16px",
+                                              lineHeight: 1.625,
+                                              color: "var(--bw-text-color)",
+                                          }, children: [u$2("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$2(IconCheck, { 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",
+                          lineHeight: 1.625,
+                          fontFamily: "var(--bw-font-family)",
+                          padding: "0 20px",
+                      }, children: [u$2("style", { dangerouslySetInnerHTML: {
                                   __html: `
 							.markdown-content p {
 								margin: 0 0 12px 0 !important;
@@ -9424,11 +10484,76 @@
 								text-decoration: none !important;
 							}
 						`,
-                              } }), u$2("div", { className: "markdown-content", children: Markdown({ children: preprocessMarkdown$1(eventType.description) }) })] })), u$2("div", { className: "flex justify-between items-center mt-8 p-5 bg-background rounded border border-solid border-border", children: [u$2("div", { children: [u$2("div", { className: "font-bold text-text-primary font-sans text-left", children: eventType.groupedDurations && u$2("span", { children: eventType.groupedDurations }) }), u$2("div", { className: "text-[clamp(1.72rem,4vw,32px)] font-bold text-text-primary font-sans text-right", children: u$2("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (u$2("button", { onClick: handleBookingClick, className: "bg-highlight text-white px-7 py-3.5 border-0 rounded text-base font-semibold font-sans flex items-center gap-2 cursor-pointer transition-all duration-200 hover:opacity-90 hover:-translate-y-0.5", children: [u$2(IconWave, { size: 20, color: "white" }), "Jetzt buchen"] }))] }), !isAvailable && (u$2("div", { className: "absolute inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center rounded", children: u$2("div", { className: "bg-white/90 px-8 py-4 rounded text-text-primary font-semibold text-lg font-sans shadow-md", children: "Ausgebucht" }) }))] }) }));
+                              } }), u$2("div", { className: "markdown-content", children: Markdown({ children: preprocessMarkdown$1(eventType.description) }) })] })), u$2("div", { style: {
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          marginTop: "32px",
+                          padding: "20px",
+                          backgroundColor: "var(--bw-background-color)",
+                          borderRadius: "var(--bw-border-radius)",
+                          border: "1px solid var(--bw-border-color)",
+                      }, children: [u$2("div", { children: [u$2("div", { style: {
+                                          fontWeight: 700,
+                                          color: "var(--bw-text-color)",
+                                          fontFamily: "var(--bw-font-family)",
+                                          textAlign: "left",
+                                      }, children: eventType.groupedDurations && u$2("span", { children: eventType.groupedDurations }) }), u$2("div", { style: {
+                                          fontSize: "clamp(1.72rem, 4vw, 32px)",
+                                          fontWeight: 700,
+                                          color: "var(--bw-text-color)",
+                                          fontFamily: "var(--bw-font-family)",
+                                          textAlign: "right",
+                                      }, children: u$2("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (u$2("button", { onClick: handleBookingClick, style: {
+                                  backgroundColor: "var(--bw-highlight-color)",
+                                  color: "#ffffff",
+                                  padding: "14px 28px",
+                                  border: "none",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  fontSize: "16px",
+                                  fontWeight: 600,
+                                  fontFamily: "var(--bw-font-family)",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "8px",
+                                  cursor: "pointer",
+                                  transition: "all 0.2s ease",
+                              }, children: [u$2(IconWave, { size: 20, color: "white" }), "Jetzt buchen"] }))] }), !isAvailable && (u$2("div", { style: {
+                          position: "absolute",
+                          inset: 0,
+                          backgroundColor: "rgba(0, 0, 0, 0.3)",
+                          backdropFilter: "blur(4px)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "var(--bw-border-radius)",
+                      }, children: u$2("div", { style: {
+                              backgroundColor: "rgba(255, 255, 255, 0.9)",
+                              padding: "16px 32px",
+                              borderRadius: "var(--bw-border-radius)",
+                              color: "var(--bw-text-color)",
+                              fontWeight: 600,
+                              fontSize: "18px",
+                              fontFamily: "var(--bw-font-family)",
+                              boxShadow: "var(--bw-shadow-md)",
+                          }, children: "Ausgebucht" }) }))] }) }));
   }
 
   // A placeholder SVG for events without an image.
-  const EventImagePlaceholder = () => (u$2("div", { className: "w-full h-full bg-gradient-to-br from-highlight/20 to-highlight flex items-center justify-center overflow-hidden relative", children: u$2("svg", { width: "60%", height: "60%", viewBox: "0 0 120 40", preserveAspectRatio: "xMidYMid meet", className: "absolute opacity-[0.18] blur-[0.5px]", children: [u$2("path", { d: "M0 30 Q 15 10, 30 30 T 60 30 T 90 30 T 120 30", stroke: "white", strokeWidth: "4", fill: "none", strokeLinecap: "round" }), u$2("circle", { cx: "20", cy: "25", r: "3", fill: "white", opacity: "0.7" }), u$2("circle", { cx: "100", cy: "28", r: "2", fill: "white", opacity: "0.5" })] }) }));
+  const EventImagePlaceholder = () => (u$2("div", { style: {
+          width: "100%",
+          height: "100%",
+          background: "linear-gradient(to bottom right, rgba(var(--bw-highlight-color-rgb), 0.2), var(--bw-highlight-color))",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          position: "relative",
+      }, children: u$2("svg", { width: "60%", height: "60%", viewBox: "0 0 120 40", preserveAspectRatio: "xMidYMid meet", style: {
+              position: "absolute",
+              opacity: 0.18,
+              filter: "blur(0.5px)",
+          }, children: [u$2("path", { d: "M0 30 Q 15 10, 30 30 T 60 30 T 90 30 T 120 30", stroke: "white", strokeWidth: "4", fill: "none", strokeLinecap: "round" }), u$2("circle", { cx: "20", cy: "25", r: "3", fill: "white", opacity: "0.7" }), u$2("circle", { cx: "100", cy: "28", r: "2", fill: "white", opacity: "0.5" })] }) }));
   // Image Carousel Component with smooth slide animations
   const ImageCarousel = ({ images, eventName }) => {
       const [currentIndex, setCurrentIndex] = d$1(0);
@@ -9460,16 +10585,92 @@
       if (images.length === 0) {
           return u$2(EventImagePlaceholder, {});
       }
-      return (u$2("div", { className: "relative w-full h-full overflow-hidden rounded-[inherit]", children: [u$2("div", { className: "flex h-full transition-transform duration-400 ease-[cubic-bezier(0.4,0,0.2,1)]", style: {
+      return (u$2("div", { style: {
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              overflow: "hidden",
+              borderRadius: "inherit",
+          }, children: [u$2("div", { style: {
+                      display: "flex",
+                      height: "100%",
+                      transition: "transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
                       width: `${images.length * 100}%`,
                       transform: `translateX(-${(currentIndex * 100) / images.length}%)`,
-                  }, children: images.map((image, index) => (u$2("div", { className: "h-full shrink-0 overflow-hidden relative rounded-[inherit]", style: { width: `${100 / images.length}%` }, children: u$2("img", { src: image, alt: `${eventName} - Bild ${index + 1}`, className: "w-full h-full object-cover block absolute top-0 left-0 rounded-[inherit]" }) }, index))) }), images.length > 1 && (u$2(k$3, { children: [u$2("button", { onClick: prevImage, disabled: isTransitioning, className: `absolute left-3 top-1/2 -translate-y-1/2 bg-black/50 border-0 rounded-full w-10 h-10 flex items-center justify-center transition-all duration-200 z-[2] ${isTransitioning
-                            ? "cursor-not-allowed opacity-50"
-                            : "cursor-pointer hover:bg-black/70 hover:scale-110"}`, children: u$2(IconChevronLeft, { size: 20, color: "white" }) }), u$2("button", { onClick: nextImage, disabled: isTransitioning, className: `absolute right-3 top-1/2 -translate-y-1/2 bg-black/50 border-0 rounded-full w-10 h-10 flex items-center justify-center transition-all duration-200 z-[2] ${isTransitioning
-                            ? "cursor-not-allowed opacity-50"
-                            : "cursor-pointer hover:bg-black/70 hover:scale-110"}`, children: u$2(IconChevronRight, { size: 20, color: "white" }) })] })), images.length > 1 && (u$2("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 z-[2]", children: images.map((_, index) => (u$2("button", { onClick: (e) => goToImage(index, e), disabled: isTransitioning, className: `h-2 border-0 rounded transition-all duration-300 ${isTransitioning ? "cursor-not-allowed opacity-70" : "cursor-pointer"} ${index === currentIndex
-                        ? "w-4 bg-white"
-                        : "w-2 bg-white/50 hover:bg-white/80 hover:scale-125"}` }, index))) })), isTransitioning && (u$2("div", { className: "absolute inset-0 bg-black/10 z-[1] pointer-events-none" }))] }));
+                  }, children: images.map((image, index) => (u$2("div", { style: {
+                          height: "100%",
+                          flexShrink: 0,
+                          overflow: "hidden",
+                          position: "relative",
+                          borderRadius: "inherit",
+                          width: `${100 / images.length}%`,
+                      }, children: u$2("img", { src: image, alt: `${eventName} - Bild ${index + 1}`, style: {
+                              width: "100%",
+                              height: "100%",
+                              objectFit: "cover",
+                              display: "block",
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              borderRadius: "inherit",
+                          } }) }, index))) }), images.length > 1 && (u$2(k$3, { children: [u$2("button", { onClick: prevImage, disabled: isTransitioning, style: {
+                              position: "absolute",
+                              left: "12px",
+                              top: "50%",
+                              transform: "translateY(-50%)",
+                              backgroundColor: "rgba(0, 0, 0, 0.5)",
+                              border: "none",
+                              borderRadius: "50%",
+                              width: "40px",
+                              height: "40px",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.2s ease",
+                              zIndex: 2,
+                              cursor: isTransitioning ? "not-allowed" : "pointer",
+                              opacity: isTransitioning ? 0.5 : 1,
+                          }, children: u$2(IconChevronLeft, { size: 20, color: "white" }) }), u$2("button", { onClick: nextImage, disabled: isTransitioning, style: {
+                              position: "absolute",
+                              right: "12px",
+                              top: "50%",
+                              transform: "translateY(-50%)",
+                              backgroundColor: "rgba(0, 0, 0, 0.5)",
+                              border: "none",
+                              borderRadius: "50%",
+                              width: "40px",
+                              height: "40px",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              transition: "all 0.2s ease",
+                              zIndex: 2,
+                              cursor: isTransitioning ? "not-allowed" : "pointer",
+                              opacity: isTransitioning ? 0.5 : 1,
+                          }, children: u$2(IconChevronRight, { size: 20, color: "white" }) })] })), images.length > 1 && (u$2("div", { style: {
+                      position: "absolute",
+                      bottom: "12px",
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                      display: "flex",
+                      gap: "8px",
+                      zIndex: 2,
+                  }, children: images.map((_, index) => (u$2("button", { onClick: (e) => goToImage(index, e), disabled: isTransitioning, style: {
+                          height: "8px",
+                          border: "none",
+                          borderRadius: "var(--bw-border-radius)",
+                          transition: "all 0.3s ease",
+                          cursor: isTransitioning ? "not-allowed" : "pointer",
+                          opacity: isTransitioning ? 0.7 : 1,
+                          width: index === currentIndex ? "16px" : "8px",
+                          backgroundColor: index === currentIndex ? "#ffffff" : "rgba(255, 255, 255, 0.5)",
+                      } }, index))) })), isTransitioning && (u$2("div", { style: {
+                      position: "absolute",
+                      inset: 0,
+                      backgroundColor: "rgba(0, 0, 0, 0.1)",
+                      zIndex: 1,
+                      pointerEvents: "none",
+                  } }))] }));
   };
 
   // Helper function to preprocess markdown for underline support
@@ -9495,160 +10696,240 @@
       if (isLoading) {
           return u$2(EventCardSkeleton, { count: skeletonCount });
       }
-      return (u$2(k$3, { children: [u$2("style", { dangerouslySetInnerHTML: {
-                      __html: `
-				@media (max-width: 600px) {
-					.event-type-list {
-						padding: 8px !important;
-						gap: 12px !important;
-					}
-					.event-type-card {
-						max-width: 100% !important;
-						flex: 1 1 100% !important;
-						padding: 0 !important;
-					}
-					.event-type-img {
-						height: 160px !important;
-					}
-					.event-type-title {
-						font-size: 1.1rem !important;
-					}
-					.event-type-desc {
-						font-size: 0.8rem !important;
-						min-height: 100px !important;
-						max-height: 100px !important;
-					}
-					.event-type-content {
-						padding: 16px 24px !important;
-					}
-				}
-				
-				/* Markdown content styling for event type cards */
-				.event-type-markdown {
-					overflow: visible !important;
-				}
-				.event-type-markdown p {
-					margin: 0 0 8px 0;
-					color: var(--bw-text-muted);
-					font-family: var(--bw-font-family);
-					line-height: 1.6;
-				}
-				.event-type-markdown p:last-child {
-					margin-bottom: 0;
-				}
-				.event-type-markdown h2 {
-					font-size: 18px !important;
-					font-weight: 700 !important;
-					color: var(--bw-text-color) !important;
-					margin: 12px 0 6px 0 !important;
-					line-height: 1.3 !important;
-				}
-				.event-type-markdown h3 {
-					font-size: 16px !important;
-					font-weight: 600 !important;
-					color: var(--bw-text-color) !important;
-					margin: 10px 0 4px 0 !important;
-					line-height: 1.3 !important;
-				}
-				.event-type-markdown strong {
-					font-weight: 600;
-					color: var(--bw-text-color);
-				}
-				.event-type-markdown em {
-					font-style: italic;
-				}
-				.event-type-markdown u {
-					text-decoration: underline;
-				}
-				.event-type-markdown ul {
-					margin: 6px 0 !important;
-					padding: 0 !important;
-					padding-left: 24px !important;
-					list-style: none !important;
-					position: relative !important;
-				}
-				.event-type-markdown ul li {
-					margin-bottom: 2px !important;
-					padding-left: 0 !important;
-					position: relative !important;
-					color: var(--bw-text-muted) !important;
-					font-family: var(--bw-font-family) !important;
-				}
-				.event-type-markdown ul li::before {
-					content: "•" !important;
-					color: var(--bw-text-color) !important;
-					position: absolute !important;
-					left: -16px !important;
-					top: 0 !important;
-					font-weight: bold !important;
-				}
-				.event-type-markdown ol {
-					margin: 6px 0 !important;
-					padding: 0 !important;
-					padding-left: 24px !important;
-					counter-reset: list-counter !important;
-					list-style: none !important;
-					position: relative !important;
-				}
-				.event-type-markdown ol li {
-					margin-bottom: 2px !important;
-					padding-left: 0 !important;
-					position: relative !important;
-					counter-increment: list-counter !important;
-					color: var(--bw-text-muted) !important;
-					font-family: var(--bw-font-family) !important;
-				}
-				.event-type-markdown ol li::before {
-					content: counter(list-counter) "." !important;
-					color: var(--bw-text-color) !important;
-					position: absolute !important;
-					left: -20px !important;
-					top: 0 !important;
-					font-weight: bold !important;
-				}
-				.event-type-markdown blockquote {
-					margin: 4px 0;
-					padding-left: 12px;
-					border-left: 2px solid var(--bw-border-color);
-					font-style: italic;
-					color: var(--bw-text-muted);
-				}
-				.event-type-markdown a {
-					color: var(--bw-highlight-color);
-					text-decoration: underline;
-				}
-			`,
-                  } }), eventTypes.length === 0 ? (u$2("div", { className: "max-w-[600px] mx-auto p-6", children: u$2("div", { className: "bg-surface border border-solid border-border rounded p-6 text-center font-sans min-h-[400px] flex flex-col items-center justify-center", children: [u$2("div", { className: "w-16 h-16 bg-highlight rounded-full mx-auto mb-4 flex items-center justify-center text-[32px] text-white opacity-80", children: "\uD83D\uDCC5" }), u$2("h3", { className: "text-xl font-semibold text-text-primary m-0 mb-2 font-sans", children: "Keine Veranstaltungen verf\u00FCgbar" }), u$2("p", { className: "text-text-muted text-base leading-relaxed m-0 mb-6 font-sans max-w-[400px]", children: "Derzeit sind keine Veranstaltungen in dieser Kategorie verf\u00FCgbar. Bitte schaue sp\u00E4ter noch einmal vorbei oder kontaktiere uns direkt." }), u$2("button", { onClick: () => window.location.reload(), className: "bg-surface text-highlight px-6 py-3 border border-solid border-highlight rounded text-base font-semibold cursor-pointer font-sans transition-all duration-200 flex items-center gap-2 hover:bg-highlight hover:text-white hover:-translate-y-0.5", children: [u$2("span", { className: "text-base", children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$2("div", { className: "event-type-list p-0", children: u$2("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] gap-6 auto-rows-fr", children: eventTypes.map((eventType) => {
+      return (u$2(k$3, { children: [eventTypes.length === 0 ? (u$2("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: u$2("div", { style: {
+                          backgroundColor: "var(--bw-surface-color)",
+                          border: "1px solid var(--bw-border-color)",
+                          borderRadius: "var(--bw-border-radius)",
+                          padding: "24px",
+                          textAlign: "center",
+                          fontFamily: "var(--bw-font-family)",
+                          minHeight: "400px",
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                      }, children: [u$2("div", { style: {
+                                  width: "64px",
+                                  height: "64px",
+                                  backgroundColor: "var(--bw-highlight-color)",
+                                  borderRadius: "50%",
+                                  margin: "0 auto 16px auto",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  fontSize: "32px",
+                                  color: "#ffffff",
+                                  opacity: 0.8,
+                              }, children: "\uD83D\uDCC5" }), u$2("h3", { style: {
+                                  fontSize: "20px",
+                                  fontWeight: 600,
+                                  color: "var(--bw-text-color)",
+                                  margin: "0 0 8px 0",
+                                  fontFamily: "var(--bw-font-family)",
+                              }, children: "Keine Veranstaltungen verf\u00FCgbar" }), u$2("p", { style: {
+                                  color: "var(--bw-text-muted)",
+                                  fontSize: "16px",
+                                  lineHeight: 1.6,
+                                  margin: "0 0 24px 0",
+                                  fontFamily: "var(--bw-font-family)",
+                                  maxWidth: "400px",
+                              }, children: "Derzeit sind keine Veranstaltungen in dieser Kategorie verf\u00FCgbar. Bitte schaue sp\u00E4ter noch einmal vorbei oder kontaktiere uns direkt." }), u$2("button", { onClick: () => window.location.reload(), style: {
+                                  backgroundColor: "var(--bw-surface-color)",
+                                  color: "var(--bw-highlight-color)",
+                                  padding: "12px 24px",
+                                  border: "1px solid var(--bw-highlight-color)",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  fontSize: "16px",
+                                  fontWeight: 600,
+                                  cursor: "pointer",
+                                  fontFamily: "var(--bw-font-family)",
+                                  transition: "all 0.2s ease",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "8px",
+                              }, children: [u$2("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$2("div", { className: "event-type-list", style: { padding: 0 }, children: u$2("div", { style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(auto-fill, minmax(350px, 1fr))",
+                          gap: "24px",
+                          gridAutoRows: "1fr",
+                      }, children: eventTypes.map((eventType) => {
                           const isAvailable = eventType.hasAvailableInstances;
-                          return (u$2("div", { className: `event-type-card relative bg-surface border border-solid border-border rounded overflow-hidden transition-all duration-300 shadow-md font-sans ${isAvailable
-                                ? "cursor-pointer opacity-100 hover:shadow-lg"
-                                : "cursor-not-allowed opacity-60"}`, onClick: () => isAvailable && onEventTypeSelect(eventType), children: [u$2("div", { className: "absolute top-4 right-4 z-10", children: u$2("div", { className: `px-2 py-1 rounded-sm text-xs font-semibold text-white font-sans ${isAvailable ? "bg-success" : "bg-error"}`, children: isAvailable ? "freie Plätze" : "Ausgebucht" }) }), u$2("div", { className: "absolute top-4 left-4 z-10", children: u$2("div", { className: "text-[13px] text-surface font-semibold bg-highlight px-2 py-0.5 rounded font-sans", children: eventType.category.name }) }), u$2("div", { className: "event-type-img relative w-full h-[300px]", children: u$2(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$2("div", { className: "event-type-content p-3 px-[18px] flex flex-col justify-between h-[400px]", children: [u$2("div", { children: [u$2("h2", { className: "event-type-title text-[clamp(1.1rem,2.5vw,24px)] font-bold text-text-primary leading-tight font-sans m-0 mb-3", children: eventType.name }), u$2("div", { className: "flex items-center gap-1.5", children: [u$2(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), u$2("span", { className: "font-sans text-sm text-text-muted", children: eventType.nextAvailableDate
+                          return (u$2("div", { className: "event-type-card", style: {
+                                  position: "relative",
+                                  backgroundColor: "var(--bw-surface-color)",
+                                  border: "1px solid var(--bw-border-color)",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  overflow: "hidden",
+                                  transition: "all 0.3s ease",
+                                  boxShadow: "var(--bw-shadow-md)",
+                                  fontFamily: "var(--bw-font-family)",
+                                  cursor: isAvailable ? "pointer" : "not-allowed",
+                                  opacity: isAvailable ? 1 : 0.6,
+                              }, onClick: () => isAvailable && onEventTypeSelect(eventType), children: [u$2("div", { style: { position: "absolute", top: "16px", right: "16px", zIndex: 10 }, children: u$2("div", { style: {
+                                              padding: "4px 8px",
+                                              borderRadius: "var(--bw-border-radius-small)",
+                                              fontSize: "12px",
+                                              fontWeight: 600,
+                                              color: "#ffffff",
+                                              fontFamily: "var(--bw-font-family)",
+                                              backgroundColor: isAvailable
+                                                  ? "var(--bw-success-color)"
+                                                  : "var(--bw-error-color)",
+                                          }, children: isAvailable ? "freie Plätze" : "Ausgebucht" }) }), u$2("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$2("div", { style: {
+                                              fontSize: "13px",
+                                              color: "var(--bw-surface-color)",
+                                              fontWeight: 600,
+                                              backgroundColor: "var(--bw-highlight-color)",
+                                              padding: "2px 8px",
+                                              borderRadius: "var(--bw-border-radius)",
+                                              fontFamily: "var(--bw-font-family)",
+                                          }, children: eventType.category.name }) }), u$2("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$2(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$2("div", { className: "event-type-content", style: {
+                                          padding: "12px 18px",
+                                          display: "flex",
+                                          flexDirection: "column",
+                                          justifyContent: "space-between",
+                                          height: "400px",
+                                      }, children: [u$2("div", { children: [u$2("h2", { className: "event-type-title", style: {
+                                                          fontSize: "clamp(1.1rem, 2.5vw, 24px)",
+                                                          fontWeight: 700,
+                                                          color: "var(--bw-text-color)",
+                                                          lineHeight: 1.25,
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          margin: "0 0 12px 0",
+                                                      }, children: eventType.name }), u$2("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$2(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), u$2("span", { style: {
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  fontSize: "14px",
+                                                                  color: "var(--bw-text-muted)",
+                                                              }, children: eventType.nextAvailableDate
                                                                   ? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
-                                                                  : "Keine Termine frei" })] }), u$2("div", { className: "cursor-pointer", onClick: (e) => {
+                                                                  : "Keine Termine frei" })] }), u$2("div", { style: { cursor: "pointer" }, onClick: (e) => {
                                                           e.stopPropagation();
                                                           handleShowDetails(eventType);
                                                       }, children: eventType.highlights && eventType.highlights.length > 0 ? (
                                                       // Show highlights as list
-                                                      u$2("div", { className: "event-type-highlights my-2.5 min-h-[128px] text-[clamp(0.95rem,2vw,16px)]", children: u$2("ul", { className: "list-none p-0 m-0 flex-col gap-0.5 relative max-h-[128px]", style: {
-                                                                  display: "-webkit-box",
-                                                                  WebkitLineClamp: 5,
-                                                                  WebkitBoxOrient: "vertical",
+                                                      // Uses em-based sizing so it scales with font size
+                                                      // Fixed 5 rows * 1.5em line-height = 7.5em total
+                                                      u$2("div", { className: "event-type-highlights", style: {
+                                                              margin: "10px 0",
+                                                              height: "7.5em", // Fixed height in em units
+                                                              fontSize: "clamp(0.9rem, 2vw, 15px)",
+                                                          }, children: u$2("ul", { style: {
+                                                                  listStyle: "none",
+                                                                  padding: 0,
+                                                                  margin: 0,
+                                                                  display: "grid",
+                                                                  // 5 rows of exactly 1.5em each (lineHeight)
+                                                                  gridTemplateRows: "repeat(5, 1.5em)",
+                                                                  gap: 0,
+                                                                  overflow: "hidden",
                                                               }, children: eventType.highlights
                                                                   .filter((highlight) => highlight.trim())
-                                                                  .map((highlight, index) => (u$2("li", { className: "flex items-start gap-2 font-sans leading-[1.55] text-text-muted relative max-w-full", children: [u$2("div", { className: "mt-1 shrink-0", children: u$2(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), u$2("span", { className: "text-ellipsis overflow-hidden whitespace-nowrap flex-1", children: highlight.trim() })] }, index))) }) })) : eventType.description ? (u$2("div", { className: "event-type-desc text-text-muted text-[clamp(0.95rem,2vw,16px)] leading-relaxed font-sans my-2.5 min-h-[128px] max-h-[128px] overflow-hidden text-left", children: u$2("div", { className: "event-type-markdown", style: {
+                                                                  .slice(0, 5)
+                                                                  .map((highlight, index) => (u$2("li", { style: {
+                                                                      display: "flex",
+                                                                      alignItems: "center",
+                                                                      gap: "0.5em",
+                                                                      fontFamily: "var(--bw-font-family)",
+                                                                      lineHeight: 1.5,
+                                                                      height: "1.5em",
+                                                                      color: "var(--bw-text-muted)",
+                                                                      overflow: "hidden",
+                                                                  }, children: [u$2("div", { style: { flexShrink: 0, display: "flex", alignItems: "center" }, children: u$2(IconCheck, { size: 14, color: "var(--bw-success-color)" }) }), u$2("span", { style: {
+                                                                              whiteSpace: "nowrap",
+                                                                              overflow: "hidden",
+                                                                              textOverflow: "ellipsis",
+                                                                              flex: 1,
+                                                                          }, children: highlight.trim() })] }, index))) }) })) : eventType.description ? (u$2("div", { className: "event-type-desc", style: {
+                                                              color: "var(--bw-text-muted)",
+                                                              fontSize: "clamp(0.9rem, 2vw, 15px)",
+                                                              lineHeight: 1.5,
+                                                              fontFamily: "var(--bw-font-family)",
+                                                              margin: "10px 0",
+                                                              height: "7.5em", // Same height as highlights
+                                                              overflow: "hidden",
+                                                              textAlign: "left",
+                                                          }, children: u$2("div", { className: "event-type-markdown", style: {
                                                                   display: "-webkit-box",
                                                                   WebkitLineClamp: 5,
                                                                   WebkitBoxOrient: "vertical",
                                                                   overflow: "hidden",
                                                               }, children: Markdown({
                                                                   children: preprocessMarkdown(eventType.description),
-                                                              }) }) })) : (u$2("div", { className: "event-type-desc text-text-muted text-[clamp(0.95rem,2vw,16px)] leading-relaxed font-sans my-2.5 min-h-[128px] max-h-[128px] overflow-hidden text-left", children: "\u00A0" })) })] }), u$2("div", { children: [u$2("div", { children: [u$2("div", { className: "event-type-price font-bold text-text-primary font-sans text-right", children: eventType.groupedDurations.length > 1 ? (u$2("span", { children: eventType.groupedDurations })) : (u$2("span", { children: eventType.cheapestDurationPerDay % 60 === 0
+                                                              }) }) })) : (u$2("div", { className: "event-type-desc", style: {
+                                                              margin: "10px 0",
+                                                              height: "7.5em", // Same height as highlights
+                                                          }, children: "\u00A0" })) })] }), u$2("div", { children: [u$2("div", { children: [u$2("div", { className: "event-type-price", style: {
+                                                                  fontWeight: 700,
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  textAlign: "right",
+                                                              }, children: eventType.groupedDurations.length > 1 ? (u$2("span", { children: eventType.groupedDurations })) : (u$2("span", { children: eventType.cheapestDurationPerDay % 60 === 0
                                                                       ? `${eventType.cheapestDurationPerDay / 60} Stunde${eventType.cheapestDurationPerDay / 60 > 1 ? "n" : ""}`
-                                                                      : `${eventType.cheapestDurationPerDay} Minuten` })) }), u$2("div", { className: "event-type-price text-[clamp(1.72rem,4vw,32px)] font-bold text-text-primary font-sans text-right", children: u$2("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), u$2("div", { className: "flex justify-end items-center mt-2.5 gap-3", children: [(eventType.description ||
+                                                                      : `${eventType.cheapestDurationPerDay} Minuten` })) }), u$2("div", { className: "event-type-price", style: {
+                                                                  fontSize: "clamp(1.72rem, 4vw, 32px)",
+                                                                  fontWeight: 700,
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  textAlign: "right",
+                                                              }, children: u$2("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), u$2("div", { style: {
+                                                          display: "flex",
+                                                          justifyContent: "flex-end",
+                                                          alignItems: "center",
+                                                          marginTop: "10px",
+                                                          gap: "12px",
+                                                      }, children: [(eventType.description ||
                                                               (eventType.highlights && eventType.highlights.length > 0)) && (u$2("button", { onClick: (e) => {
                                                                   e.stopPropagation();
                                                                   handleShowDetails(eventType);
-                                                              }, className: "text-highlight bg-surface px-3 py-3 rounded text-[clamp(0.8rem,2vw,16px)] font-semibold font-sans flex items-center gap-2 border-2 border-solid border-highlight cursor-pointer opacity-60 transition-all duration-200 hover:opacity-100 hover:-translate-y-0.5", children: "Mehr Details" })), isAvailable && (u$2("div", { className: "bg-highlight text-surface px-6 py-3 rounded text-[clamp(1rem,2vw,16px)] font-semibold font-sans flex items-center justify-center text-center gap-2 border-0 cursor-pointer transition-all duration-200 hover:opacity-80 hover:-translate-y-0.5", children: [u$2(IconWave, { size: 15, color: "var(--bw-surface-color)" }), " Jetzt buchen"] }))] })] })] }), !isAvailable && (u$2("div", { className: "absolute inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center", children: u$2("div", { className: "bg-white/90 px-6 py-3 rounded text-text-primary font-semibold text-base font-sans shadow-md", children: "Ausgebucht" }) }))] }, eventType.id));
+                                                              }, style: {
+                                                                  color: "var(--bw-highlight-color)",
+                                                                  backgroundColor: "var(--bw-surface-color)",
+                                                                  padding: "12px",
+                                                                  borderRadius: "var(--bw-border-radius)",
+                                                                  fontSize: "clamp(0.8rem, 2vw, 16px)",
+                                                                  fontWeight: 600,
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  display: "flex",
+                                                                  alignItems: "center",
+                                                                  gap: "8px",
+                                                                  border: "2px solid var(--bw-highlight-color)",
+                                                                  cursor: "pointer",
+                                                                  opacity: 0.6,
+                                                                  transition: "all 0.2s ease",
+                                                              }, children: "Mehr Details" })), isAvailable && (u$2("div", { style: {
+                                                                  backgroundColor: "var(--bw-highlight-color)",
+                                                                  color: "var(--bw-surface-color)",
+                                                                  padding: "12px 24px",
+                                                                  borderRadius: "var(--bw-border-radius)",
+                                                                  fontSize: "clamp(1rem, 2vw, 16px)",
+                                                                  fontWeight: 600,
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  display: "flex",
+                                                                  alignItems: "center",
+                                                                  justifyContent: "center",
+                                                                  textAlign: "center",
+                                                                  gap: "8px",
+                                                                  border: "none",
+                                                                  cursor: "pointer",
+                                                                  transition: "all 0.2s ease",
+                                                              }, children: [u$2(IconWave, { size: 15, color: "var(--bw-surface-color)" }), " Jetzt buchen"] }))] })] })] }), !isAvailable && (u$2("div", { style: {
+                                          position: "absolute",
+                                          inset: 0,
+                                          backgroundColor: "rgba(0, 0, 0, 0.3)",
+                                          backdropFilter: "blur(4px)",
+                                          display: "flex",
+                                          alignItems: "center",
+                                          justifyContent: "center",
+                                      }, children: u$2("div", { style: {
+                                              backgroundColor: "rgba(255, 255, 255, 0.9)",
+                                              padding: "12px 24px",
+                                              borderRadius: "var(--bw-border-radius)",
+                                              color: "var(--bw-text-color)",
+                                              fontWeight: 600,
+                                              fontSize: "16px",
+                                              fontFamily: "var(--bw-font-family)",
+                                              boxShadow: "var(--bw-shadow-md)",
+                                          }, children: "Ausgebucht" }) }))] }, eventType.id));
                       }) }) })), u$2(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
   }
 
@@ -9750,7 +11031,19 @@
   // Allocation Badge Component
   const AllocationBadge = ({ availableSpots, maxParticipants, }) => {
       const badgeInfo = getAllocationBadgeInfo(availableSpots, maxParticipants);
-      return (u$2("div", { className: "flex mr-auto -mt-6 mb-1 rounded-sm font-sans z-50 whitespace-nowrap w-fit text-[11px] font-bold px-2 py-0.5", style: {
+      return (u$2("div", { style: {
+              display: "flex",
+              marginRight: "auto",
+              marginTop: "-24px",
+              marginBottom: "4px",
+              borderRadius: "var(--bw-border-radius-small)",
+              fontFamily: "var(--bw-font-family)",
+              zIndex: 50,
+              whiteSpace: "nowrap",
+              width: "fit-content",
+              fontSize: "11px",
+              fontWeight: 700,
+              padding: "2px 8px",
               backgroundColor: badgeInfo?.backgroundColor || "transparent",
               color: badgeInfo?.textColor || "transparent",
           }, children: badgeInfo?.text || " - " }));
@@ -9758,7 +11051,19 @@
   // Price Badge Component (for special prices)
   const SpecialPriceBadge = ({ price, yearPrices }) => {
       const badgeInfo = getPriceBadgeInfo(price, yearPrices);
-      return (u$2("div", { className: "flex ml-auto -mt-5 mb-1 rounded-sm font-sans z-50 whitespace-nowrap w-fit text-[11px] font-bold px-2 py-0.5", style: {
+      return (u$2("div", { style: {
+              display: "flex",
+              marginLeft: "auto",
+              marginTop: "-20px",
+              marginBottom: "4px",
+              borderRadius: "var(--bw-border-radius-small)",
+              fontFamily: "var(--bw-font-family)",
+              zIndex: 50,
+              whiteSpace: "nowrap",
+              width: "fit-content",
+              fontSize: "11px",
+              fontWeight: 700,
+              padding: "2px 8px",
               backgroundColor: badgeInfo?.backgroundColor || "transparent",
               color: badgeInfo?.textColor || "transparent",
           }, children: badgeInfo?.text || " - " }));
@@ -9766,7 +11071,14 @@
   // Price Display Component (with special price styling)
   const PriceDisplay = ({ price, yearPrices }) => {
       const displayInfo = getPriceDisplayInfo(price, yearPrices);
-      return (u$2("span", { className: "inline-flex items-center text-base font-semibold px-2 py-0.5 rounded-sm font-sans", style: {
+      return (u$2("span", { style: {
+              display: "inline-flex",
+              alignItems: "center",
+              fontSize: "16px",
+              fontWeight: 600,
+              padding: "2px 8px",
+              borderRadius: "var(--bw-border-radius-small)",
+              fontFamily: "var(--bw-font-family)",
               backgroundColor: displayInfo ? displayInfo.backgroundColor : "var(--bw-background-color)",
               color: displayInfo ? displayInfo.textColor : "var(--bw-text-color)",
               border: displayInfo ? "none" : "1px solid var(--bw-border-color)",
@@ -9833,17 +11145,117 @@
           onClose();
           onBackToEventTypes();
       };
+      const footerNav = (u$2("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: "\u2190 Zur\u00FCck" }));
       // Show loading state first if we're loading event instances
       if (isLoadingEventInstances) {
-          return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, children: u$2("div", { className: "p-6", children: u$2("div", { className: "flex flex-col gap-5", children: Array.from({ length: 3 }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer bg-surface border border-solid border-border rounded overflow-hidden", children: [u$2("div", { className: "flex justify-between items-center p-4 px-5 cursor-pointer border-b border-solid border-border", children: [u$2("div", { className: "flex items-center gap-3", children: [u$2("div", { className: "w-20 h-5 bg-border rounded-sm" }), u$2("div", { className: "w-4 h-4 bg-border rounded-sm" })] }), u$2("div", { className: "w-[70px] h-4 bg-highlight opacity-30 rounded-sm" })] }), u$2("div", { className: "flex flex-col gap-3 pt-3 p-3 px-5 pb-5", children: Array.from({ length: 2 }).map((_, eventIdx) => (u$2("div", { className: "relative border border-solid border-border bg-surface rounded p-4 px-5 font-sans", children: [u$2("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [u$2("div", { className: "flex items-start gap-3", children: [u$2("div", { className: "w-10 h-10 bg-background border border-solid border-border border-t-4 rounded-sm" }), u$2("div", { className: "flex flex-col gap-1", children: [u$2("div", { className: "w-20 h-4 bg-border rounded" }), u$2("div", { className: "w-[60px] h-3.5 bg-border rounded" })] })] }), u$2("div", { className: "flex flex-col items-end", children: u$2("div", { className: "w-[70px] h-5 bg-highlight opacity-30 rounded" }) })] }), u$2("div", { className: "flex items-center gap-2 mb-1", children: [u$2("div", { className: "w-[120px] h-4 bg-border rounded" }), u$2("div", { className: "w-[50px] h-5 bg-border rounded-lg" })] })] }, eventIdx))) })] }, idx))) }) }) }));
+          return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, footer: footerNav, children: u$2("div", { style: { padding: "24px" }, children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer", style: {
+                              backgroundColor: "var(--bw-surface-color)",
+                              border: "1px solid var(--bw-border-color)",
+                              borderRadius: "var(--bw-border-radius)",
+                              overflow: "hidden",
+                          }, children: [u$2("div", { style: {
+                                      display: "flex",
+                                      justifyContent: "space-between",
+                                      alignItems: "center",
+                                      padding: "16px 20px",
+                                      cursor: "pointer",
+                                      borderBottom: "1px solid var(--bw-border-color)",
+                                  }, children: [u$2("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [u$2("div", { style: {
+                                                      width: "80px",
+                                                      height: "20px",
+                                                      backgroundColor: "var(--bw-border-color)",
+                                                      borderRadius: "var(--bw-border-radius-small)",
+                                                  } }), u$2("div", { style: {
+                                                      width: "16px",
+                                                      height: "16px",
+                                                      backgroundColor: "var(--bw-border-color)",
+                                                      borderRadius: "var(--bw-border-radius-small)",
+                                                  } })] }), u$2("div", { style: {
+                                              width: "70px",
+                                              height: "16px",
+                                              backgroundColor: "var(--bw-highlight-color)",
+                                              opacity: 0.3,
+                                              borderRadius: "var(--bw-border-radius-small)",
+                                          } })] }), u$2("div", { style: {
+                                      display: "flex",
+                                      flexDirection: "column",
+                                      gap: "12px",
+                                      paddingTop: "12px",
+                                      padding: "12px 20px 20px 20px",
+                                  }, children: Array.from({ length: 2 }).map((_, eventIdx) => (u$2("div", { style: {
+                                          position: "relative",
+                                          border: "1px solid var(--bw-border-color)",
+                                          backgroundColor: "var(--bw-surface-color)",
+                                          borderRadius: "var(--bw-border-radius)",
+                                          padding: "16px 20px",
+                                          fontFamily: "var(--bw-font-family)",
+                                      }, children: [u$2("div", { style: {
+                                                  display: "flex",
+                                                  justifyContent: "space-between",
+                                                  width: "100%",
+                                                  alignItems: "flex-start",
+                                                  gap: "12px",
+                                                  marginBottom: "4px",
+                                              }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
+                                                                  width: "40px",
+                                                                  height: "40px",
+                                                                  backgroundColor: "var(--bw-background-color)",
+                                                                  border: "1px solid var(--bw-border-color)",
+                                                                  borderTopWidth: "4px",
+                                                                  borderRadius: "var(--bw-border-radius-small)",
+                                                              } }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [u$2("div", { style: {
+                                                                          width: "80px",
+                                                                          height: "16px",
+                                                                          backgroundColor: "var(--bw-border-color)",
+                                                                          borderRadius: "var(--bw-border-radius)",
+                                                                      } }), u$2("div", { style: {
+                                                                          width: "60px",
+                                                                          height: "14px",
+                                                                          backgroundColor: "var(--bw-border-color)",
+                                                                          borderRadius: "var(--bw-border-radius)",
+                                                                      } })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: u$2("div", { style: {
+                                                              width: "70px",
+                                                              height: "20px",
+                                                              backgroundColor: "var(--bw-highlight-color)",
+                                                              opacity: 0.3,
+                                                              borderRadius: "var(--bw-border-radius)",
+                                                          } }) })] }), u$2("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [u$2("div", { style: {
+                                                          width: "120px",
+                                                          height: "16px",
+                                                          backgroundColor: "var(--bw-border-color)",
+                                                          borderRadius: "var(--bw-border-radius)",
+                                                      } }), u$2("div", { style: {
+                                                          width: "50px",
+                                                          height: "20px",
+                                                          backgroundColor: "var(--bw-border-color)",
+                                                          borderRadius: "16px",
+                                                      } })] })] }, eventIdx))) })] }, idx))) }) }) }));
       }
       // Show empty state only if not loading and no event instances
       if (eventInstances.length === 0) {
-          return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", children: u$2("div", { className: "flex items-center justify-center min-h-[400px] text-center p-4", children: u$2("div", { children: [u$2("h3", { className: "mb-2 font-semibold text-lg text-text-muted font-sans", children: "Keine verf\u00FCgbaren Termine" }), u$2("p", { className: "text-text-muted font-sans", children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) }));
+          return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", footer: footerNav, children: u$2("div", { style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      minHeight: "400px",
+                      textAlign: "center",
+                      padding: "16px",
+                  }, children: u$2("div", { children: [u$2("h3", { style: {
+                                  marginBottom: "8px",
+                                  fontWeight: 600,
+                                  fontSize: "18px",
+                                  color: "var(--bw-text-muted)",
+                                  fontFamily: "var(--bw-font-family)",
+                              }, children: "Keine verf\u00FCgbaren Termine" }), u$2("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) }));
       }
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, children: u$2("div", { className: "p-6", children: u$2("div", { className: "flex flex-col gap-5", children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "20px 10px" }, children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, 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", { className: "h-px bg-border my-1" })), u$2(Accordion, { title: label, priceInfo: u$2("div", { className: "text-base font-medium ml-auto px-2 py-1 rounded-sm", style: {
+                      return (u$2(k$3, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (u$2("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), u$2(Accordion, { title: label, priceInfo: u$2("div", { style: {
+                                          fontSize: "16px",
+                                          fontWeight: 500,
+                                          marginLeft: "auto",
+                                          padding: "4px 8px",
+                                          borderRadius: "var(--bw-border-radius-small)",
                                           backgroundColor: monthPriceDisplayInfo
                                               ? monthPriceDisplayInfo.backgroundColor
                                               : "#14532d",
@@ -9853,21 +11265,97 @@
                                           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", { className: "flex flex-col gap-3 pt-3", children: events.map((event) => {
+                                      }, 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();
                                           const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
-                                          return (u$2("div", { className: `relative border border-solid border-border bg-surface rounded p-4 px-5 transition-all duration-200 font-sans ${isDisabled
-                                                ? "opacity-30 grayscale-[40%] cursor-not-allowed"
-                                                : "cursor-pointer hover:scale-[1.02] hover:bg-highlight/10"}`, onClick: () => {
+                                          return (u$2("div", { style: {
+                                                  position: "relative",
+                                                  border: "1px solid var(--bw-border-color)",
+                                                  backgroundColor: "var(--bw-surface-color)",
+                                                  borderRadius: "var(--bw-border-radius)",
+                                                  padding: "16px 10px",
+                                                  transition: "all 0.2s ease",
+                                                  fontFamily: "var(--bw-font-family)",
+                                                  opacity: isDisabled ? 0.3 : 1,
+                                                  filter: isDisabled ? "grayscale(40%)" : "none",
+                                                  cursor: isDisabled ? "not-allowed" : "pointer",
+                                              }, onClick: () => {
                                                   if (!isDisabled) {
                                                       handleEventInstanceSelect(event);
                                                   }
-                                              }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { className: "absolute inset-0 bg-slate-900/80 rounded flex items-center justify-center", children: u$2("div", { className: "w-8 h-8 text-highlight/80 text-[32px]", children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [u$2("div", { className: "flex items-start gap-3", children: [u$2("div", { className: "text-base transition-all duration-200 rounded-sm border-t-4 border border-solid border-border w-10 h-10 flex items-center justify-center font-bold text-text-primary bg-background", children: startDate.getDate() }), u$2("div", { className: "text-base text-text-primary flex flex-col items-start justify-start leading-tight", children: [u$2("div", { children: [u$2("span", { className: "font-semibold mb-0.5", children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
-                                                                                      formatWeekday(event.endTime) && (u$2(k$3, { children: [u$2("span", { className: "text-text-muted text-sm", children: " - " }), u$2("span", { className: "font-semibold mb-0.5", children: formatWeekday(event.endTime) })] }))] }), u$2("div", { children: formatWeekday(event.startTime) ===
-                                                                                  formatWeekday(event.endTime) ? (u$2(k$3, { children: [u$2("span", { className: "text-text-muted text-sm", children: formatTime(event.startTime) }), u$2("span", { className: "text-text-muted text-sm", children: " - " }), u$2("span", { className: "text-text-muted text-sm", children: formatTime(event.endTime) })] })) : (u$2("span", { className: "text-text-muted text-sm", children: [formatTime(event.startTime), " Uhr"] })) })] }), u$2("span", { className: "text-xs font-normal text-text-muted ml-1.5 bg-black/5 whitespace-nowrap", children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), u$2("div", { className: "text-right flex flex-col items-end", children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { className: "text-base font-semibold text-text-primary leading-tight m-0 mb-0.5 flex items-center gap-2 max-w-[230px]", children: event.name }))] }, event.id));
+                                              }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
+                                                          position: "absolute",
+                                                          inset: 0,
+                                                          backgroundColor: "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)",
+                                                              opacity: 0.8,
+                                                              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: "flex-start",
+                                                          gap: "12px",
+                                                          marginBottom: "4px",
+                                                      }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
+                                                                          fontSize: "16px",
+                                                                          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: 700,
+                                                                          color: "var(--bw-text-color)",
+                                                                          backgroundColor: "var(--bw-background-color)",
+                                                                      }, children: startDate.getDate() }), u$2("div", { style: {
+                                                                          fontSize: "16px",
+                                                                          color: "var(--bw-text-color)",
+                                                                          display: "flex",
+                                                                          flexDirection: "column",
+                                                                          alignItems: "flex-start",
+                                                                          justifyContent: "flex-start",
+                                                                          lineHeight: 1.25,
+                                                                      }, children: [u$2("div", { children: [u$2("span", { 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", { 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",
+                                                                          backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                                                          whiteSpace: "nowrap",
+                                                                          padding: "2px 6px",
+                                                                          borderRadius: "var(--bw-border-radius-small)",
+                                                                      }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), u$2("div", { style: {
+                                                                  textAlign: "right",
+                                                                  display: "flex",
+                                                                  flexDirection: "column",
+                                                                  alignItems: "flex-end",
+                                                              }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { style: {
+                                                          fontSize: "16px",
+                                                          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));
                   }) }) }) }));
   }
@@ -9883,9 +11371,76 @@
           return u$2(NextEventsSkeleton, { count: 3 });
       }
       if (events.length === 0) {
-          return (u$2("div", { className: "mx-auto max-w-[500px] p-4", children: u$2("div", { className: "flex flex-col items-center justify-center text-center bg-surface border border-solid border-border rounded p-6 font-sans min-h-[300px]", children: [u$2("div", { className: "flex items-center justify-center rounded-full w-16 h-16 bg-highlight mx-auto mb-4 text-[32px] text-white opacity-80", children: "\uD83D\uDCC5" }), u$2("h3", { className: "font-semibold m-0 text-xl text-text-primary mb-2 font-sans", children: "Keine bevorstehenden Termine" }), u$2("p", { className: "m-0 text-text-muted text-base leading-relaxed mb-6 font-sans max-w-[400px]", children: "Aktuell sind keine Termine verf\u00FCgbar. Bitte schaue sp\u00E4ter noch einmal vorbei oder kontaktiere uns direkt." }), u$2("button", { onClick: () => window.location.reload(), className: "flex items-center cursor-pointer bg-surface text-highlight px-6 py-3 border border-solid border-highlight rounded text-base font-semibold font-sans transition-all duration-200 gap-2 hover:bg-highlight hover:text-white hover:-translate-y-0.5", children: [u$2("span", { className: "text-base", children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) }));
-      }
-      return (u$2("div", { className: "mx-auto max-w-[500px] p-4 font-sans", children: [u$2("div", { className: "text-center mb-6", children: [u$2("h2", { className: "font-semibold m-0 mb-2 text-lg text-text-primary font-sans", children: "N\u00E4chste verf\u00FCgbare Termine" }), u$2("p", { className: "m-0 text-base text-text-muted font-sans", children: "W\u00E4hle einen Termin aus oder zeige alle verf\u00FCgbaren Termine an" })] }), u$2("div", { className: "flex flex-col gap-3 mb-6", children: events.map((event) => {
+          return (u$2("div", { style: { maxWidth: "500px", margin: "0 auto", padding: "16px" }, children: u$2("div", { style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      textAlign: "center",
+                      backgroundColor: "var(--bw-surface-color)",
+                      border: "1px solid var(--bw-border-color)",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "24px",
+                      fontFamily: "var(--bw-font-family)",
+                      minHeight: "300px",
+                  }, children: [u$2("div", { style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              borderRadius: "50%",
+                              width: "64px",
+                              height: "64px",
+                              backgroundColor: "var(--bw-highlight-color)",
+                              marginBottom: "16px",
+                              fontSize: "32px",
+                              color: "#ffffff",
+                              opacity: 0.8,
+                          }, children: "\uD83D\uDCC5" }), u$2("h3", { style: {
+                              fontWeight: 600,
+                              margin: "0 0 8px 0",
+                              fontSize: "20px",
+                              color: "var(--bw-text-color)",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: "Keine bevorstehenden Termine" }), u$2("p", { style: {
+                              margin: "0 0 24px 0",
+                              color: "var(--bw-text-muted)",
+                              fontSize: "16px",
+                              lineHeight: 1.6,
+                              fontFamily: "var(--bw-font-family)",
+                              maxWidth: "400px",
+                          }, children: "Aktuell sind keine Termine verf\u00FCgbar. Bitte schaue sp\u00E4ter noch einmal vorbei oder kontaktiere uns direkt." }), u$2("button", { onClick: () => window.location.reload(), style: {
+                              display: "flex",
+                              alignItems: "center",
+                              cursor: "pointer",
+                              backgroundColor: "var(--bw-surface-color)",
+                              color: "var(--bw-highlight-color)",
+                              padding: "12px 24px",
+                              border: "1px solid var(--bw-highlight-color)",
+                              borderRadius: "var(--bw-border-radius)",
+                              fontSize: "16px",
+                              fontWeight: 600,
+                              fontFamily: "var(--bw-font-family)",
+                              transition: "all 0.2s ease",
+                              gap: "8px",
+                          }, children: [u$2("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) }));
+      }
+      return (u$2("div", { style: {
+              maxWidth: "500px",
+              margin: "0 auto",
+              padding: "16px",
+              fontFamily: "var(--bw-font-family)",
+          }, children: [u$2("div", { style: { textAlign: "center", marginBottom: "24px" }, children: [u$2("h2", { style: {
+                              fontWeight: 600,
+                              margin: "0 0 8px 0",
+                              fontSize: "18px",
+                              color: "var(--bw-text-color)",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: "N\u00E4chste verf\u00FCgbare Termine" }), u$2("p", { style: {
+                              margin: 0,
+                              fontSize: "16px",
+                              color: "var(--bw-text-muted)",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: "W\u00E4hle einen Termin aus oder zeige alle verf\u00FCgbaren Termine an" })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", marginBottom: "24px" }, children: events.map((event) => {
                       const availableSpots = event.maxParticipants - event.participantCount;
                       const isFullyBooked = availableSpots === 0;
                       const startDate = new Date(event.startTime);
@@ -9907,26 +11462,123 @@
                           return "var(--bw-highlight-color)";
                       };
                       const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
-                      return (u$2("div", { className: `relative bg-surface rounded p-2 px-2.5 transition-all duration-200 border border-solid font-sans ${isDisabled
-                            ? "opacity-30 grayscale cursor-not-allowed"
-                            : "cursor-pointer hover:scale-[1.02] hover:bg-black/5"}`, style: { borderColor: getAvailabilityColor() }, onClick: () => {
+                      return (u$2("div", { style: {
+                              position: "relative",
+                              backgroundColor: "var(--bw-surface-color)",
+                              borderRadius: "var(--bw-border-radius)",
+                              padding: "8px 10px",
+                              transition: "all 0.2s ease",
+                              border: `1px solid ${getAvailabilityColor()}`,
+                              fontFamily: "var(--bw-font-family)",
+                              opacity: isDisabled ? 0.3 : 1,
+                              filter: isDisabled ? "grayscale(100%)" : "none",
+                              cursor: isDisabled ? "not-allowed" : "pointer",
+                          }, onClick: () => {
                               if (!isDisabled) {
                                   handleEventSelect(event.id);
                               }
-                          }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { className: "absolute inset-0 flex items-center justify-center bg-slate-900/80 rounded", children: u$2("div", { className: "animate-spin w-8 h-8 text-highlight/80 text-[32px]", children: "\u27F3" }) })), u$2("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [u$2("div", { className: "flex items-start gap-3", children: [u$2("div", { className: "flex items-center justify-center font-bold text-base rounded-sm w-10 h-10 text-text-primary bg-background border border-solid transition-all duration-200", style: {
-                                                      borderColor: getAvailabilityColor(),
+                          }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
+                                      position: "absolute",
+                                      inset: 0,
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      backgroundColor: "rgba(15, 23, 42, 0.8)",
+                                      borderRadius: "var(--bw-border-radius)",
+                                  }, children: u$2("div", { style: {
+                                          width: "32px",
+                                          height: "32px",
+                                          color: "var(--bw-highlight-color)",
+                                          fontSize: "32px",
+                                          animation: "spin 1s linear infinite",
+                                      }, children: "\u27F3" }) })), u$2("div", { style: {
+                                      display: "flex",
+                                      justifyContent: "space-between",
+                                      width: "100%",
+                                      alignItems: "flex-start",
+                                      gap: "12px",
+                                      marginBottom: "4px",
+                                  }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
+                                                      display: "flex",
+                                                      alignItems: "center",
+                                                      justifyContent: "center",
+                                                      fontWeight: 700,
+                                                      fontSize: "16px",
+                                                      borderRadius: "var(--bw-border-radius-small)",
+                                                      width: "40px",
+                                                      height: "40px",
+                                                      color: "var(--bw-text-color)",
+                                                      backgroundColor: "var(--bw-background-color)",
+                                                      border: "1px solid var(--bw-border-color)",
                                                       borderTopWidth: "4px",
-                                                  }, children: startDate.getDate() }), u$2("div", { className: "flex flex-col items-start justify-start text-base text-text-primary leading-tight", children: [u$2("span", { className: "font-semibold mb-0.5", children: formatWeekday(event.startTime) }), u$2("span", { className: "text-text-muted text-sm", children: formatTime(event.startTime) })] })] }), u$2("div", { className: "flex flex-col items-end text-right", children: [u$2("div", { className: "font-bold text-highlight text-lg", children: event.price !== null ? formatCurrency(event.price) : "Preis auf Anfrage" }), event.deposit && event.deposit > 0 && (u$2("div", { className: "text-xs text-text-muted", children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$2("h4", { className: "flex items-center font-semibold m-0 text-base text-text-primary leading-tight mb-0.5 gap-2", children: [event.name, u$2("span", { className: "text-xs font-normal text-text-muted ml-1.5 bg-black/5 rounded-lg px-2 py-0.5", children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$2("p", { className: "m-0 text-xs text-text-muted mt-2 overflow-hidden leading-snug", style: {
+                                                      borderTopColor: getAvailabilityColor(),
+                                                      transition: "all 0.2s ease",
+                                                  }, children: startDate.getDate() }), u$2("div", { style: {
+                                                      display: "flex",
+                                                      flexDirection: "column",
+                                                      alignItems: "flex-start",
+                                                      justifyContent: "flex-start",
+                                                      fontSize: "16px",
+                                                      color: "var(--bw-text-color)",
+                                                      lineHeight: 1.25,
+                                                  }, children: [u$2("span", { style: { fontWeight: 600, marginBottom: "2px" }, children: formatWeekday(event.startTime) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) })] })] }), u$2("div", { style: {
+                                              display: "flex",
+                                              flexDirection: "column",
+                                              alignItems: "flex-end",
+                                              textAlign: "right",
+                                          }, children: [u$2("div", { style: {
+                                                      fontWeight: 700,
+                                                      color: "var(--bw-highlight-color)",
+                                                      fontSize: "18px",
+                                                  }, children: event.price !== null ? formatCurrency(event.price) : "Preis auf Anfrage" }), event.deposit && event.deposit > 0 && (u$2("div", { style: { fontSize: "12px", color: "var(--bw-text-muted)" }, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$2("h4", { style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      fontWeight: 600,
+                                      margin: "0 0 2px 0",
+                                      fontSize: "16px",
+                                      color: "var(--bw-text-color)",
+                                      lineHeight: 1.25,
+                                      gap: "8px",
+                                  }, children: [event.name, u$2("span", { style: {
+                                              fontSize: "12px",
+                                              fontWeight: 400,
+                                              color: "var(--bw-text-muted)",
+                                              marginLeft: "6px",
+                                              backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                              borderRadius: "16px",
+                                              padding: "2px 8px",
+                                          }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$2("p", { style: {
+                                      margin: "8px 0 0 0",
+                                      fontSize: "12px",
+                                      color: "var(--bw-text-muted)",
+                                      overflow: "hidden",
+                                      lineHeight: 1.375,
                                       display: "-webkit-box",
                                       WebkitBoxOrient: "vertical",
                                       WebkitLineClamp: 2,
                                   }, children: event.notes }))] }, event.id));
-                  }) }), showAllButton && (u$2("div", { className: "text-center", children: u$2("button", { type: "button", disabled: isLoadingShowAll, className: `relative bg-surface text-highlight border border-solid border-highlight px-6 py-3 rounded text-base font-medium font-sans transition-all duration-200 ${isLoadingShowAll
-                        ? "cursor-not-allowed opacity-70"
-                        : "cursor-pointer hover:bg-highlight hover:text-white"}`, onClick: onShowAll, children: isLoadingShowAll ? (u$2("div", { className: "flex items-center gap-2", children: [u$2("div", { className: "animate-spin w-4 h-4 text-highlight text-base", children: "\u27F3" }), "L\u00E4dt..."] })) : (showAllButtonText) }) }))] }));
+                  }) }), showAllButton && (u$2("div", { style: { textAlign: "center" }, children: u$2("button", { type: "button", disabled: isLoadingShowAll, style: {
+                          position: "relative",
+                          backgroundColor: "var(--bw-surface-color)",
+                          color: "var(--bw-highlight-color)",
+                          border: "1px solid var(--bw-highlight-color)",
+                          padding: "12px 24px",
+                          borderRadius: "var(--bw-border-radius)",
+                          fontSize: "16px",
+                          fontWeight: 500,
+                          fontFamily: "var(--bw-font-family)",
+                          transition: "all 0.2s ease",
+                          cursor: isLoadingShowAll ? "not-allowed" : "pointer",
+                          opacity: isLoadingShowAll ? 0.7 : 1,
+                      }, onClick: onShowAll, children: isLoadingShowAll ? (u$2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [u$2("div", { style: {
+                                      width: "16px",
+                                      height: "16px",
+                                      color: "var(--bw-highlight-color)",
+                                      fontSize: "16px",
+                                      animation: "spin 1s linear infinite",
+                                  }, children: "\u27F3" }), "L\u00E4dt..."] })) : (showAllButtonText) }) }))] }));
   }
 
-  // Theme configurations
   const getThemeConfig = (theme = "generic") => {
       switch (theme) {
           case "christmas":
@@ -9987,23 +11639,19 @@
       const [copied, setCopied] = d$1(false);
       const [isVisible, setIsVisible] = d$1(false);
       const [portalContainer, setPortalContainer] = d$1(null);
-      // Get theme config
       const themeConfig = getThemeConfig(config.theme);
-      // Use config values with fallbacks
       const discountCode = config.discountCode || "DISCOUNT";
-      // Create portal container on mount to escape stacking context issues
       y$1(() => {
           const container = document.createElement("div");
           container.id = "bigz-promo-dialog-portal";
           container.style.position = "relative";
-          container.style.zIndex = "2147483647"; // Maximum z-index value
+          container.style.zIndex = "2147483647";
           document.body.appendChild(container);
           setPortalContainer(container);
           return () => {
               document.body.removeChild(container);
           };
       }, []);
-      // Animate in on mount
       y$1(() => {
           const timer = setTimeout(() => setIsVisible(true), 50);
           return () => clearTimeout(timer);
@@ -10015,7 +11663,6 @@
               setTimeout(() => setCopied(false), 2000);
           }
           catch {
-              // Fallback for older browsers
               const textArea = document.createElement("textarea");
               textArea.value = discountCode;
               document.body.appendChild(textArea);
@@ -10034,33 +11681,74 @@
           setIsVisible(false);
           setTimeout(onCtaClick, 200);
       };
-      // Don't render until portal container is ready
       if (!portalContainer) {
           return null;
       }
-      const dialogContent = (u$2(k$3, { children: [u$2("div", { onClick: handleClose, className: "fixed inset-0 z-[60] bg-[rgba(0,20,40,0.85)] backdrop-blur-sm transition-opacity duration-300 ease-out", style: { opacity: isVisible ? 1 : 0 } }), u$2("div", { className: "fixed z-[61] w-[92%] max-w-[440px] transition-all duration-300", style: {
+      const dialogContent = (u$2(k$3, { children: [u$2("div", { onClick: handleClose, style: {
+                      position: "fixed",
+                      inset: 0,
+                      zIndex: 60,
+                      backgroundColor: "rgba(0, 20, 40, 0.85)",
+                      backdropFilter: "blur(4px)",
+                      transition: "opacity 0.3s ease-out",
+                      opacity: isVisible ? 1 : 0,
+                  } }), u$2("div", { style: {
+                      position: "fixed",
+                      zIndex: 61,
+                      width: "92%",
+                      maxWidth: "440px",
+                      transition: "all 0.3s",
                       top: "50%",
                       left: "50%",
                       transform: `translate(-50%, -50%) scale(${isVisible ? 1 : 0.9})`,
                       opacity: isVisible ? 1 : 0,
                       transitionTimingFunction: "cubic-bezier(0.34, 1.56, 0.64, 1)",
-                  }, children: u$2("div", { className: "relative overflow-hidden rounded-[28px] shadow-[0_25px_60px_-12px_rgba(0,0,0,0.5),0_0_0_1px_rgba(255,255,255,0.1),inset_0_1px_0_rgba(255,255,255,0.2)]", style: {
+                  }, children: u$2("div", { style: {
+                          position: "relative",
+                          overflow: "hidden",
+                          borderRadius: "28px",
+                          boxShadow: "0 25px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2)",
                           background: `linear-gradient(165deg, ${themeConfig.primaryColor} 0%, ${themeConfig.primaryColor} 40%, ${themeConfig.secondaryColor} 100%)`,
                       }, children: [themeConfig.animation?.snowfallEnabled &&
-                              Array.from({ length: 15 }).map((_, i) => (u$2("div", { className: "absolute pointer-events-none z-[1] text-white opacity-0", style: {
+                              Array.from({ length: 15 }).map((_, i) => (u$2("div", { style: {
+                                      position: "absolute",
+                                      pointerEvents: "none",
+                                      zIndex: 1,
+                                      color: "white",
+                                      opacity: 0,
                                       left: `${5 + Math.random() * 90}%`,
                                       top: "-10px",
                                       fontSize: `${10 + Math.random() * 14}px`,
                                       animation: `promo-snow ${4 + Math.random() * 3}s linear infinite`,
                                       animationDelay: `${Math.random() * 4}s`,
-                                  }, children: "\u2744" }, i))), u$2("div", { className: "relative flex items-center justify-center overflow-hidden h-[180px]", style: {
+                                  }, children: "\u2744" }, i))), u$2("div", { style: {
+                                  position: "relative",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  overflow: "hidden",
+                                  height: "180px",
                                   background: `linear-gradient(180deg, rgba(0,0,0,0) 0%, ${themeConfig.primaryColor}cc 100%)`,
-                              }, children: [themeConfig.backgroundImage && (u$2("img", { src: themeConfig.backgroundImage, alt: "Background", className: "absolute inset-0 w-full h-full object-cover opacity-60" })), u$2("div", { className: "absolute inset-0", style: {
+                              }, children: [themeConfig.backgroundImage && (u$2("img", { src: themeConfig.backgroundImage, alt: "Background", style: {
+                                          position: "absolute",
+                                          inset: 0,
+                                          width: "100%",
+                                          height: "100%",
+                                          objectFit: "cover",
+                                          opacity: 0.6,
+                                      } })), u$2("div", { style: {
+                                          position: "absolute",
+                                          inset: 0,
                                           background: `linear-gradient(180deg, ${themeConfig.primaryColor}4d 0%, ${themeConfig.primaryColor}e6 100%)`,
-                                      } }), u$2("div", { className: "relative z-[2] text-[64px] drop-shadow-[0_8px_16px_rgba(0,0,0,0.4)]", style: {
+                                      } }), u$2("div", { style: {
+                                          position: "relative",
+                                          zIndex: 2,
+                                          fontSize: "64px",
+                                          filter: "drop-shadow(0 8px 16px rgba(0,0,0,0.4))",
                                           animation: `promo-float ${themeConfig.animation?.floatDuration || 3}s ease-in-out infinite`,
                                       }, children: themeConfig.icon }), themeConfig.decorations &&
-                                      themeConfig.decorations.map((decoration, i) => (u$2("div", { className: "absolute", style: {
+                                      themeConfig.decorations.map((decoration, i) => (u$2("div", { style: {
+                                              position: "absolute",
                                               top: i === 0 ? "16px" : "20px",
                                               left: i === 0 ? "20px" : "auto",
                                               right: i === 1 ? "20px" : "auto",
@@ -10068,23 +11756,325 @@
                                               animation: themeConfig.animation?.sparkleEnabled
                                                   ? `promo-sparkle 2s ease-in-out infinite ${i * 0.5}s`
                                                   : undefined,
-                                          }, children: decoration }, i)))] }), u$2("button", { onClick: handleClose, className: "absolute top-4 right-4 flex items-center justify-center cursor-pointer z-10 w-9 h-9 rounded-full border-0 bg-black/30 backdrop-blur-sm text-white text-[22px] leading-none transition-all duration-150 hover:bg-black/50 hover:scale-110", children: "\u00D7" }), u$2("div", { className: "relative text-center z-[2] px-7 pt-7 pb-8", children: [u$2("h2", { className: "font-extrabold text-[26px] text-white mb-1.5 tracking-tight drop-shadow-[0_2px_8px_rgba(0,0,0,0.3)]", children: config.title }), u$2("p", { className: "text-[17px] text-white/90 mb-5 leading-relaxed", children: [config.subtitle, config.discountAmount && (u$2(k$3, { children: [u$2("br", {}), u$2("strong", { style: { color: themeConfig.secondaryColor }, children: [config.discountAmount, " Rabatt"] }), " ", "auf alle Kurse!"] }))] }), config.discountCode && (u$2("div", { className: "mb-5 bg-white rounded-2xl p-[18px_20px] shadow-[0_8px_24px_rgba(0,0,0,0.15),inset_0_-2px_0_rgba(0,0,0,0.05)]", children: [u$2("p", { className: "uppercase font-semibold text-[11px] tracking-[1.5px] text-slate-500 mb-2.5", children: "Dein Geschenk-Code" }), u$2("div", { className: "flex items-center justify-center gap-3", children: [u$2("div", { className: "px-5 py-2.5 rounded-[10px]", style: {
+                                          }, children: decoration }, i)))] }), u$2("button", { onClick: handleClose, style: {
+                                  position: "absolute",
+                                  top: "16px",
+                                  right: "16px",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  cursor: "pointer",
+                                  zIndex: 10,
+                                  width: "36px",
+                                  height: "36px",
+                                  borderRadius: "50%",
+                                  border: "none",
+                                  backgroundColor: "rgba(0, 0, 0, 0.3)",
+                                  backdropFilter: "blur(4px)",
+                                  color: "white",
+                                  fontSize: "22px",
+                                  lineHeight: 1,
+                                  transition: "all 0.15s ease",
+                              }, children: "\u00D7" }), u$2("div", { style: {
+                                  position: "relative",
+                                  textAlign: "center",
+                                  zIndex: 2,
+                                  padding: "28px 28px 32px 28px",
+                              }, children: [u$2("h2", { style: {
+                                          fontWeight: 800,
+                                          fontSize: "26px",
+                                          color: "white",
+                                          marginBottom: "6px",
+                                          letterSpacing: "-0.025em",
+                                          filter: "drop-shadow(0 2px 8px rgba(0,0,0,0.3))",
+                                          margin: "0 0 6px 0",
+                                      }, children: config.title }), u$2("p", { style: {
+                                          fontSize: "17px",
+                                          color: "rgba(255, 255, 255, 0.9)",
+                                          marginBottom: "20px",
+                                          lineHeight: 1.5,
+                                          margin: "0 0 20px 0",
+                                      }, children: [config.subtitle, config.discountAmount && (u$2(k$3, { children: [u$2("br", {}), u$2("strong", { style: { color: themeConfig.secondaryColor }, children: [config.discountAmount, " Rabatt"] }), " ", "auf alle Kurse!"] }))] }), config.discountCode && (u$2("div", { style: {
+                                          marginBottom: "20px",
+                                          backgroundColor: "white",
+                                          borderRadius: "16px",
+                                          padding: "18px 20px",
+                                          boxShadow: "0 8px 24px rgba(0,0,0,0.15), inset 0 -2px 0 rgba(0,0,0,0.05)",
+                                      }, children: [u$2("p", { style: {
+                                                  textTransform: "uppercase",
+                                                  fontWeight: 600,
+                                                  fontSize: "11px",
+                                                  letterSpacing: "1.5px",
+                                                  color: "#64748b",
+                                                  marginBottom: "10px",
+                                                  margin: "0 0 10px 0",
+                                              }, children: "Dein Geschenk-Code" }), u$2("div", { style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  justifyContent: "center",
+                                                  gap: "12px",
+                                              }, children: [u$2("div", { style: {
+                                                          padding: "10px 20px",
+                                                          borderRadius: "10px",
                                                           background: `linear-gradient(135deg, ${themeConfig.secondaryColor} 0%, ${themeConfig.primaryColor} 100%)`,
                                                           boxShadow: `0 4px 12px ${themeConfig.secondaryColor}4d`,
-                                                      }, children: u$2("span", { className: "font-black text-[28px] text-white tracking-[6px] drop-shadow-[0_2px_4px_rgba(0,0,0,0.2)]", children: discountCode }) }), u$2("button", { onClick: handleCopyCode, className: `flex items-center cursor-pointer whitespace-nowrap px-4 py-3 rounded-[10px] border-2 border-solid text-[13px] font-semibold transition-all duration-150 gap-1.5 ${copied
-                                                        ? "border-green-500 bg-green-100 text-green-700"
-                                                        : "border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300"}`, children: copied ? (u$2(k$3, { children: "\u2713 Kopiert!" })) : (u$2(k$3, { children: [u$2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [u$2("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), u$2("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "Kopieren"] })) })] })] })), config.activities && config.activities.length > 0 && (u$2("div", { className: "flex justify-center gap-2 mb-5 flex-wrap", children: config.activities.map((activity) => (u$2("span", { className: "font-medium bg-white/15 backdrop-blur-sm px-3 py-1.5 rounded-[20px] text-[13px] text-white", children: activity }, activity))) })), u$2("button", { onClick: handleCtaClick, className: "w-full flex items-center justify-center cursor-pointer font-bold px-6 py-[18px] rounded-[14px] border-0 text-white text-[18px] transition-all duration-150 gap-2.5 hover:-translate-y-0.5", style: {
+                                                      }, children: u$2("span", { style: {
+                                                              fontWeight: 900,
+                                                              fontSize: "28px",
+                                                              color: "white",
+                                                              letterSpacing: "6px",
+                                                              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))",
+                                                          }, children: discountCode }) }), u$2("button", { onClick: handleCopyCode, style: {
+                                                          display: "flex",
+                                                          alignItems: "center",
+                                                          cursor: "pointer",
+                                                          whiteSpace: "nowrap",
+                                                          padding: "12px 16px",
+                                                          borderRadius: "10px",
+                                                          border: "2px solid",
+                                                          borderColor: copied ? "#22c55e" : "#e2e8f0",
+                                                          backgroundColor: copied ? "#dcfce7" : "#f8fafc",
+                                                          color: copied ? "#15803d" : "#475569",
+                                                          fontSize: "13px",
+                                                          fontWeight: 600,
+                                                          transition: "all 0.15s ease",
+                                                          gap: "6px",
+                                                      }, children: copied ? (u$2(k$3, { children: "\u2713 Kopiert!" })) : (u$2(k$3, { children: [u$2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [u$2("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), u$2("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "Kopieren"] })) })] })] })), config.activities && config.activities.length > 0 && (u$2("div", { style: {
+                                          display: "flex",
+                                          justifyContent: "center",
+                                          gap: "8px",
+                                          marginBottom: "20px",
+                                          flexWrap: "wrap",
+                                      }, children: config.activities.map((activity) => (u$2("span", { style: {
+                                              fontWeight: 500,
+                                              backgroundColor: "rgba(255, 255, 255, 0.15)",
+                                              backdropFilter: "blur(4px)",
+                                              padding: "6px 12px",
+                                              borderRadius: "20px",
+                                              fontSize: "13px",
+                                              color: "white",
+                                          }, children: activity }, activity))) })), u$2("button", { onClick: handleCtaClick, style: {
+                                          width: "100%",
+                                          display: "flex",
+                                          alignItems: "center",
+                                          justifyContent: "center",
+                                          cursor: "pointer",
+                                          fontWeight: 700,
+                                          padding: "18px 24px",
+                                          borderRadius: "14px",
+                                          border: "none",
+                                          color: "white",
+                                          fontSize: "18px",
+                                          transition: "all 0.15s ease",
+                                          gap: "10px",
                                           background: `linear-gradient(135deg, ${themeConfig.secondaryColor} 0%, ${themeConfig.primaryColor} 100%)`,
                                           boxShadow: `0 8px 24px ${themeConfig.secondaryColor}66, inset 0 1px 0 rgba(255,255,255,0.2)`,
-                                      }, onMouseEnter: (e) => {
-                                          e.currentTarget.style.boxShadow = `0 12px 28px ${themeConfig.secondaryColor}80, inset 0 1px 0 rgba(255,255,255,0.2)`;
-                                      }, onMouseLeave: (e) => {
-                                          e.currentTarget.style.boxShadow = `0 8px 24px ${themeConfig.secondaryColor}66, inset 0 1px 0 rgba(255,255,255,0.2)`;
-                                      }, children: [config.ctaText, u$2("span", { children: "\u2192" })] }), config.validityText && (u$2("p", { className: "mt-4 text-xs text-white/60", children: config.validityText }))] })] }) })] }));
-      // Use portal to render at document body level, escaping any stacking context
+                                      }, children: [config.ctaText, u$2("span", { children: "\u2192" })] }), config.validityText && (u$2("p", { style: {
+                                          marginTop: "16px",
+                                          fontSize: "12px",
+                                          color: "rgba(255, 255, 255, 0.6)",
+                                          margin: "16px 0 0 0",
+                                      }, children: config.validityText }))] })] }) })] }));
       return $$1(dialogContent, portalContainer);
   }
 
+  // Upsell card styles
+  const cardBaseStyles = {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      padding: "16px",
+      backgroundColor: "var(--bw-surface-color)",
+      border: "2px solid var(--bw-border-color)",
+      borderRadius: "var(--bw-border-radius)",
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      fontFamily: "var(--bw-font-family)",
+  };
+  const cardSelectedStyles = {
+      ...cardBaseStyles,
+      borderColor: "var(--bw-highlight-color)",
+      backgroundColor: "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.08)",
+  };
+  const cardDisabledStyles = {
+      ...cardBaseStyles,
+      opacity: 0.6,
+      cursor: "not-allowed",
+  };
+  const checkboxContainerStyles = {
+      position: "absolute",
+      top: "12px",
+      right: "12px",
+      zIndex: 1,
+  };
+  const checkboxInnerStyles = {
+      width: "24px",
+      height: "24px",
+      border: "2px solid var(--bw-border-color)",
+      borderRadius: "6px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "var(--bw-surface-color)",
+      transition: "all 0.2s ease",
+  };
+  const checkboxSelectedStyles = {
+      ...checkboxInnerStyles,
+      borderColor: "var(--bw-highlight-color)",
+      backgroundColor: "var(--bw-highlight-color)",
+  };
+  const imageContainerStyles = {
+      width: "100%",
+      height: "120px",
+      marginBottom: "12px",
+      borderRadius: "calc(var(--bw-border-radius) - 4px)",
+      overflow: "hidden",
+      backgroundColor: "var(--bw-background-color)",
+  };
+  const imageStyles = {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+  };
+  const imagePlaceholderStyles = {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "var(--bw-text-muted)",
+  };
+  const nameStyles = {
+      fontSize: "16px",
+      fontWeight: 600,
+      color: "var(--bw-text-color)",
+      margin: "0 0 6px 0",
+      paddingRight: "36px",
+      fontFamily: "var(--bw-font-family)",
+  };
+  const descriptionStyles = {
+      fontSize: "13px",
+      color: "var(--bw-text-muted)",
+      margin: "0 0 10px 0",
+      lineHeight: 1.4,
+      display: "-webkit-box",
+      WebkitLineClamp: 5,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      fontFamily: "var(--bw-font-family)",
+  };
+  const itemsContainerStyles = {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "6px",
+      marginBottom: "10px",
+  };
+  const itemStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "4px 8px",
+      backgroundColor: "var(--bw-background-color)",
+      borderRadius: "4px",
+      fontSize: "12px",
+      color: "var(--bw-text-muted)",
+      fontFamily: "var(--bw-font-family)",
+  };
+  const eventInfoStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      padding: "8px 10px",
+      backgroundColor: "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)",
+      borderRadius: "6px",
+      fontSize: "12px",
+      marginBottom: "10px",
+      fontFamily: "var(--bw-font-family)",
+  };
+  const priceContainerStyles = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      marginTop: "8px",
+      paddingTop: "8px",
+      borderTop: "1px solid var(--bw-border-color)",
+  };
+  const pricePerPersonStyles = {
+      fontSize: "15px",
+      fontWeight: 600,
+      color: "var(--bw-highlight-color)",
+      fontFamily: "var(--bw-font-family)",
+  };
+  const priceTotalStyles = {
+      fontSize: "12px",
+      color: "var(--bw-text-muted)",
+      fontFamily: "var(--bw-font-family)",
+  };
+  const unavailableOverlayStyles = {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "rgba(var(--bw-background-color-rgb, 248, 253, 254), 0.85)",
+      borderRadius: "var(--bw-border-radius)",
+      fontSize: "13px",
+      color: "var(--bw-text-muted)",
+      textAlign: "center",
+      padding: "16px",
+      fontFamily: "var(--bw-font-family)",
+  };
+  function UpsellCard({ upsell, isSelected, participantCount, onSelect, }) {
+      const totalPrice = upsell.price * participantCount;
+      const isDisabled = !upsell.available;
+      const getCardStyles = () => {
+          if (isDisabled)
+              return cardDisabledStyles;
+          if (isSelected)
+              return cardSelectedStyles;
+          return cardBaseStyles;
+      };
+      return (u$2("div", { style: getCardStyles(), onClick: !isDisabled ? onSelect : undefined, role: "checkbox", "aria-checked": isSelected, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
+              if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onSelect();
+              }
+          }, children: [u$2("div", { style: checkboxContainerStyles, children: u$2("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "16px", height: "16px" }, children: u$2("polyline", { points: "20 6 9 17 4 12" }) })) }) }), u$2("div", { style: imageContainerStyles, children: upsell.image ? (u$2("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (u$2("div", { style: imagePlaceholderStyles, children: u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: u$2("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), u$2("div", { style: { flex: 1 }, children: [u$2("h4", { style: nameStyles, children: upsell.name }), upsell.description && (u$2("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (u$2("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (u$2("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (u$2("div", { style: eventInfoStyles, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontWeight: 500 }, children: ["\uD83D\uDCC5 ", new Date(upsell.suggestedEventInstance.date).toLocaleDateString("de-DE", {
+                                          weekday: "short",
+                                          day: "numeric",
+                                          month: "short",
+                                      })] }), u$2("span", { style: { color: "var(--bw-text-muted)" }, children: [upsell.suggestedEventInstance.availableSpots, " Pl\u00E4tze frei"] })] }))] }), u$2("div", { style: priceContainerStyles, children: [u$2("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/Person"] }), participantCount > 1 && (u$2("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] }))] }), isDisabled && (u$2("div", { style: unavailableOverlayStyles, children: u$2("span", { children: upsell.unavailableReason || "Nicht verfügbar" }) }))] }));
+  }
+
+  function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, isOpen, onClose, onSelect, onContinue, onBack, }) {
+      const selectUpsell = (upsellId) => {
+          const exists = selectedUpsells.find((s) => s.upsellPackageId === upsellId);
+          if (exists) {
+              // Deselect - remove this upsell from selection
+              onSelect(selectedUpsells.filter((s) => s.upsellPackageId !== upsellId));
+          }
+          else {
+              // Add this upsell to selection (checkbox behavior - allows multiple)
+              onSelect([...selectedUpsells, { upsellPackageId: upsellId, quantity: participantCount }]);
+          }
+      };
+      const isSelected = (upsellId) => selectedUpsells.some((s) => s.upsellPackageId === upsellId);
+      // Calculate total for selected upsells
+      const calculateTotal = () => {
+          return selectedUpsells.reduce((total, selection) => {
+              const upsell = upsells.find((u) => u.id === selection.upsellPackageId);
+              if (upsell) {
+                  return total + upsell.price * selection.quantity;
+              }
+              return total;
+          }, 0);
+      };
+      const selectedTotal = calculateTotal();
+      const selectedCount = selectedUpsells.length;
+      const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: "\u2190 Zur\u00FCck" }), u$2("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: selectedCount === 0 ? "Weiter ohne Extras" : `Weiter` })] }));
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: "Extras hinzuf\u00FCgen", footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: "Lade verf\u00FCgbare Extras..." })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: "Keine Extras f\u00FCr diese Buchung verf\u00FCgbar." }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: [u$2("span", { style: textStyles.muted, children: [selectedCount, " ", selectedCount === 1 ? "Extra" : "Extras", " ausgew\u00E4hlt"] }), u$2("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
+  }
+
   // Main widget component
   function UniversalBookingWidget({ config: baseConfig }) {
       // Apply URL parameter inference
@@ -10106,6 +12096,11 @@
       const [selectedEventType, setSelectedEventType] = d$1(null);
       const [eventInstances, setEventInstances] = d$1([]);
       const [selectedEventInstance, setSelectedEventInstance] = d$1(null);
+      // Upsells state
+      const [upsells, setUpsells] = d$1([]);
+      const [selectedUpsells, setSelectedUpsells] = d$1([]);
+      const [isLoadingUpsells, setIsLoadingUpsells] = d$1(false);
+      const [tempParticipantCount, setTempParticipantCount] = d$1(1); // Used during upsell step
       // State for upcoming events (next-events view mode)
       const [upcomingEvents, setUpcomingEvents] = d$1([]);
       const [showingPreview, setShowingPreview] = d$1(true);
@@ -10125,6 +12120,7 @@
       const [systemConfig, setSystemConfig] = d$1(null);
       // PERFORMANCE OPTIMIZATION: Lazy component loading
       const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d$1(false);
+      const [shouldRenderUpsells, setShouldRenderUpsells] = d$1(false);
       const [shouldRenderBookingForm, setShouldRenderBookingForm] = d$1(false);
       // Promo dialog state
       const [showPromoDialog, setShowPromoDialog] = d$1(false);
@@ -10399,15 +12395,42 @@
               setError("Fehler beim Laden der Veranstaltungsdetails");
           }
       };
+      // Load available upsells for the selected event instance
+      const loadUpsells = async (eventTypeId, eventInstanceId, participantCount) => {
+          try {
+              const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/upsells"), {
+                  method: "POST",
+                  headers: createApiHeaders(config),
+                  body: JSON.stringify({
+                      organizationId: config.organizationId,
+                      eventTypeId,
+                      eventInstanceId,
+                      participantCount,
+                  }),
+              });
+              const data = await response.json();
+              if (response.ok) {
+                  return data.upsells || [];
+              }
+              else {
+                  console.error("Upsells API error:", data.error);
+                  return [];
+              }
+          }
+          catch (err) {
+              console.error("Upsells fetch error:", err);
+              return [];
+          }
+      };
       // Validate configuration
       if (!config.organizationId) {
-          return (u$2("div", { className: "max-w-2xl mx-auto p-6", children: u$2("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: [u$2("h2", { className: "text-red-800 font-semibold", children: "Konfigurationsfehler" }), u$2("p", { className: "text-red-600", children: "organizationId muss in der Konfiguration angegeben werden." })] }) }));
+          return (u$2("div", { style: { maxWidth: "672px", margin: "0 auto", padding: "24px" }, children: u$2("div", { style: { backgroundColor: "#fef2f2", border: "1px solid #fecaca", borderRadius: "var(--bw-border-radius)", padding: "16px" }, children: [u$2("h2", { style: { color: "#991b1b", fontWeight: 600, fontFamily: "var(--bw-font-family)", margin: "0 0 8px 0" }, children: "Konfigurationsfehler" }), u$2("p", { style: { color: "#dc2626", fontFamily: "var(--bw-font-family)", margin: 0 }, children: "organizationId muss in der Konfiguration angegeben werden." })] }) }));
       }
       if (!config.eventInstanceId &&
           !config.categoryId &&
           !config.eventTypeIds &&
           !config.eventTypeId) {
-          return (u$2("div", { className: "max-w-2xl mx-auto p-6", children: u$2("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: [u$2("h2", { className: "text-red-800 font-semibold", children: "Konfigurationsfehler" }), u$2("p", { className: "text-red-600", children: "Es muss eine der folgenden Optionen angegeben werden: eventInstanceId, categoryId, eventTypeIds oder eventTypeId." })] }) }));
+          return (u$2("div", { style: { maxWidth: "672px", margin: "0 auto", padding: "24px" }, children: u$2("div", { style: { backgroundColor: "#fef2f2", border: "1px solid #fecaca", borderRadius: "var(--bw-border-radius)", padding: "16px" }, children: [u$2("h2", { style: { color: "#991b1b", fontWeight: 600, fontFamily: "var(--bw-font-family)", margin: "0 0 8px 0" }, children: "Konfigurationsfehler" }), u$2("p", { style: { color: "#dc2626", fontFamily: "var(--bw-font-family)", margin: 0 }, children: "Es muss eine der folgenden Optionen angegeben werden: eventInstanceId, categoryId, eventTypeIds oder eventTypeId." })] }) }));
       }
       // Event type selection handlers
       const handleEventTypeSelect = async (eventType) => {
@@ -10425,6 +12448,32 @@
       // Event instance selection handlers
       const handleEventInstanceSelect = async (eventInstance) => {
           setSelectedEventInstance(eventInstance);
+          // Set default participant count for upsell calculations
+          const defaultParticipantCount = 1;
+          setTempParticipantCount(defaultParticipantCount);
+          // Check for available upsells
+          if (selectedEventType) {
+              setIsLoadingUpsells(true);
+              setShouldRenderUpsells(true);
+              try {
+                  const availableUpsells = await loadUpsells(selectedEventType.id, eventInstance.id, defaultParticipantCount);
+                  if (availableUpsells.length > 0) {
+                      // Show upsells step
+                      setUpsells(availableUpsells);
+                      setSelectedUpsells([]);
+                      setCurrentStep("upsells");
+                      setIsLoadingUpsells(false);
+                      return; // Don't proceed to booking yet
+                  }
+              }
+              catch (err) {
+                  console.error("Error loading upsells:", err);
+              }
+              finally {
+                  setIsLoadingUpsells(false);
+              }
+          }
+          // No upsells available, go directly to booking
           setCurrentStep("booking");
           setShouldRenderBookingForm(true);
           setIsLoadingEventDetails(true);
@@ -10455,6 +12504,30 @@
           setError(errorMessage);
           config.onError?.(errorMessage);
       };
+      // Upsells handlers
+      const handleUpsellsSelect = (selections) => {
+          setSelectedUpsells(selections);
+      };
+      const handleUpsellsContinue = async () => {
+          // Move to booking step
+          setCurrentStep("booking");
+          setShouldRenderBookingForm(true);
+          setIsLoadingEventDetails(true);
+          try {
+              if (selectedEventInstance) {
+                  await loadEventDetails(selectedEventInstance.id);
+              }
+          }
+          finally {
+              setIsLoadingEventDetails(false);
+          }
+      };
+      const handleUpsellsBack = () => {
+          // Go back to event instance selection
+          setCurrentStep("eventInstances");
+          setSelectedUpsells([]);
+          setUpsells([]);
+      };
       const handleUpcomingEventSelect = async (eventInstanceId) => {
           const upcomingEvent = upcomingEvents.find((event) => event.id === eventInstanceId);
           if (upcomingEvent) {
@@ -10524,7 +12597,83 @@
       };
       // Error state
       if (error) {
-          return (u$2(StyleProvider, { config: config, children: u$2("div", { className: "max-w-[600px] mx-auto p-6", children: u$2("div", { className: "bg-surface border border-solid border-error rounded p-6 text-center font-sans", children: [u$2("div", { className: "w-16 h-16 bg-error rounded-full mx-auto mb-4 flex items-center justify-center text-[32px] text-white", children: "\u26A0\uFE0F" }), u$2("h2", { className: "text-xl font-semibold text-text-primary m-0 mb-2 font-sans", children: "Buchungen vor\u00FCbergehend nicht verf\u00FCgbar" }), u$2("p", { className: "text-text-muted text-base leading-relaxed m-0 mb-6 font-sans", children: "Es gab ein Problem beim Laden der verf\u00FCgbaren Termine. Bitte versuche es in einem Moment erneut." }), u$2("details", { className: "mb-6 text-left bg-background rounded-sm p-1 border border-solid border-border", children: [u$2("summary", { className: "cursor-pointer font-medium text-text-muted text-sm font-sans mb-2", children: "Technische Details anzeigen" }), u$2("code", { className: "block text-sm text-text-muted font-mono break-words whitespace-pre-wrap", children: error })] }), u$2("div", { className: "flex gap-4 justify-center flex-wrap", children: u$2("button", { onClick: () => window.location.reload(), className: "bg-highlight text-white px-6 py-3 border-0 rounded text-base font-semibold cursor-pointer font-sans transition-all duration-200 flex items-center gap-2 hover:opacity-90 hover:-translate-y-0.5", children: [u$2("span", { className: "text-base", children: "\uD83D\uDD04" }), "Seite neu laden"] }) }), u$2("p", { className: "text-text-muted text-sm mt-6 m-0 font-sans", children: "Falls das Problem weiterhin besteht, kontaktiere bitte den Support." })] }) }) }));
+          return (u$2(StyleProvider, { config: config, children: u$2("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: u$2("div", { style: {
+                          backgroundColor: "var(--bw-surface-color)",
+                          border: "1px solid var(--bw-error-color)",
+                          borderRadius: "var(--bw-border-radius)",
+                          padding: "24px",
+                          textAlign: "center",
+                          fontFamily: "var(--bw-font-family)",
+                      }, children: [u$2("div", { style: {
+                                  width: "64px",
+                                  height: "64px",
+                                  backgroundColor: "var(--bw-error-color)",
+                                  borderRadius: "50%",
+                                  margin: "0 auto 16px auto",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  fontSize: "32px",
+                                  color: "white",
+                              }, children: "\u26A0\uFE0F" }), u$2("h2", { style: {
+                                  fontSize: "20px",
+                                  fontWeight: 600,
+                                  color: "var(--bw-text-color)",
+                                  margin: "0 0 8px 0",
+                                  fontFamily: "var(--bw-font-family)",
+                              }, children: "Buchungen vor\u00FCbergehend nicht verf\u00FCgbar" }), u$2("p", { style: {
+                                  color: "var(--bw-text-muted)",
+                                  fontSize: "16px",
+                                  lineHeight: 1.5,
+                                  margin: "0 0 24px 0",
+                                  fontFamily: "var(--bw-font-family)",
+                              }, children: "Es gab ein Problem beim Laden der verf\u00FCgbaren Termine. Bitte versuche es in einem Moment erneut." }), u$2("details", { style: {
+                                  marginBottom: "24px",
+                                  textAlign: "left",
+                                  backgroundColor: "var(--bw-background-color)",
+                                  borderRadius: "var(--bw-border-radius-small)",
+                                  padding: "4px",
+                                  border: "1px solid var(--bw-border-color)",
+                              }, children: [u$2("summary", { style: {
+                                          cursor: "pointer",
+                                          fontWeight: 500,
+                                          color: "var(--bw-text-muted)",
+                                          fontSize: "14px",
+                                          fontFamily: "var(--bw-font-family)",
+                                          marginBottom: "8px",
+                                      }, children: "Technische Details anzeigen" }), u$2("code", { style: {
+                                          display: "block",
+                                          fontSize: "14px",
+                                          color: "var(--bw-text-muted)",
+                                          fontFamily: "ui-monospace, monospace",
+                                          wordBreak: "break-word",
+                                          whiteSpace: "pre-wrap",
+                                      }, children: error })] }), u$2("div", { style: {
+                                  display: "flex",
+                                  gap: "16px",
+                                  justifyContent: "center",
+                                  flexWrap: "wrap",
+                              }, children: u$2("button", { onClick: () => window.location.reload(), style: {
+                                      backgroundColor: "var(--bw-highlight-color)",
+                                      color: "white",
+                                      padding: "12px 24px",
+                                      border: "none",
+                                      borderRadius: "var(--bw-border-radius)",
+                                      fontSize: "16px",
+                                      fontWeight: 600,
+                                      cursor: "pointer",
+                                      fontFamily: "var(--bw-font-family)",
+                                      transition: "all 0.2s ease",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "8px",
+                                  }, children: [u$2("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] }) }), u$2("p", { style: {
+                                  color: "var(--bw-text-muted)",
+                                  fontSize: "14px",
+                                  marginTop: "24px",
+                                  margin: "24px 0 0 0",
+                                  fontFamily: "var(--bw-font-family)",
+                              }, children: "Falls das Problem weiterhin besteht, kontaktiere bitte den Support." })] }) }) }));
       }
       // Main view based on view mode
       if (viewMode === "next-events" && showingPreview) {
@@ -10540,13 +12689,16 @@
                                   setCurrentStep("eventTypes");
                                   setShowingPreview(true);
                                   setEventDetails(null);
-                              }, systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                              }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setShowingPreview(true);
                                   setSuccessPaymentIntentId(null);
                                   setShouldRenderInstanceSelection(false);
+                                  setShouldRenderUpsells(false);
                                   setShouldRenderBookingForm(false);
+                                  setSelectedUpsells([]);
+                                  setUpsells([]);
                                   const url = new URL(window.location.href);
                                   url.searchParams.delete("payment_intent");
                                   url.searchParams.delete("payment_intent_client_secret");
@@ -10576,7 +12728,23 @@
                               }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
-          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, className: "flex justify-center items-center min-h-[120px]", children: [u$2("button", { type: "button", className: "bg-highlight text-white px-8 py-4 border-0 rounded text-lg font-semibold font-sans shadow-md cursor-pointer", onClick: () => {
+          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, style: {
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          minHeight: "120px",
+                      }, children: [u$2("button", { type: "button", style: {
+                                  backgroundColor: "var(--bw-highlight-color)",
+                                  color: "white",
+                                  padding: "16px 32px",
+                                  border: "none",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  fontSize: "18px",
+                                  fontWeight: 600,
+                                  fontFamily: "var(--bw-font-family)",
+                                  boxShadow: "var(--bw-shadow-md)",
+                                  cursor: "pointer",
+                              }, onClick: () => {
                                   if (isDirectInstanceMode) {
                                       setCurrentStep("booking");
                                       setShouldRenderBookingForm(true);
@@ -10586,13 +12754,16 @@
                                       setShouldRenderInstanceSelection(true);
                                   }
                               }, children: config.buttonText ||
-                                  (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                  (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setSidebarOpen(false);
                                   setSuccessPaymentIntentId(null);
                                   setShouldRenderInstanceSelection(false);
+                                  setShouldRenderUpsells(false);
                                   setShouldRenderBookingForm(false);
+                                  setSelectedUpsells([]);
+                                  setUpsells([]);
                                   const url = new URL(window.location.href);
                                   url.searchParams.delete("payment_intent");
                                   url.searchParams.delete("payment_intent_client_secret");
@@ -10630,12 +12801,15 @@
           };
       };
       const backHandlers = getBackHandlers();
-      return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+      return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                               setIsSuccess(false);
                               setCurrentStep("eventTypes");
                               setSuccessPaymentIntentId(null);
                               setShouldRenderInstanceSelection(false);
+                              setShouldRenderUpsells(false);
                               setShouldRenderBookingForm(false);
+                              setSelectedUpsells([]);
+                              setUpsells([]);
                               const url = new URL(window.location.href);
                               url.searchParams.delete("payment_intent");
                               url.searchParams.delete("payment_intent_client_secret");
@@ -10676,7 +12850,7 @@
     }
   }
 
-  var css_248z = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */:host,:root{--font-sans:var(--bw-font-family,Inter),system-ui,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-50:oklch(97.1% 0.013 17.38);--color-red-100:oklch(93.6% 0.032 17.717);--color-red-200:oklch(88.5% 0.062 18.334);--color-red-500:oklch(63.7% 0.237 25.331);--color-red-600:oklch(57.7% 0.245 27.325);--color-red-800:oklch(44.4% 0.177 26.899);--color-green-100:oklch(96.2% 0.044 156.743);--color-green-500:oklch(72.3% 0.219 149.579);--color-green-700:oklch(52.7% 0.154 150.069);--color-slate-50:oklch(98.4% 0.003 247.858);--color-slate-200:oklch(92.9% 0.013 255.508);--color-slate-300:oklch(86.9% 0.022 252.894);--color-slate-500:oklch(55.4% 0.046 257.417);--color-slate-600:oklch(44.6% 0.043 257.281);--color-slate-700:oklch(37.2% 0.044 257.287);--color-slate-900:oklch(20.8% 0.042 265.755);--color-gray-600:oklch(44.6% 0.03 256.802);--color-black:#000;--color-white:#fff;--spacing:0.25rem;--container-2xl:42rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:var(--bw-font-size-small,12px);--text-sm--line-height:1.42857;--text-base:var(--bw-font-size,14px);--text-base--line-height:1.5;--text-lg:var(--bw-font-size-large,18px);--text-lg--line-height:1.55556;--text-xl:1.25rem;--text-xl--line-height:1.4;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--text-3xl:1.875rem;--text-3xl--line-height:1.2;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-tight:-0.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:var(--bw-border-radius-small,14px);--radius-lg:0.5rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0,0,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:var(--bw-border-radius,18px);--color-surface:var(--bw-surface-color,#fff);--color-background:var(--bw-background-color,#f8fdfe);--color-highlight:var(--bw-highlight-color,#00b1aa);--color-text-primary:var(--bw-text-color,#0e7490);--color-text-muted:var(--bw-text-muted,rgba(14,116,144,.7));--color-border:var(--bw-border-color,#bae6fd);--color-success:var(--bw-success-color,#38bdf8);--color-warning:var(--bw-warning-color,#fbbf24);--color-error:var(--bw-error-color,#f43f5e)}*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}.absolute,.sr-only{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-1\\/2{top:50%}.top-4{top:calc(var(--spacing)*4)}.right-0{right:calc(var(--spacing)*0)}.right-3{right:calc(var(--spacing)*3)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-3{bottom:calc(var(--spacing)*3)}.left-0{left:calc(var(--spacing)*0)}.left-1\\/2{left:50%}.left-3{left:calc(var(--spacing)*3)}.left-4{left:calc(var(--spacing)*4)}.z-10{z-index:10}.z-50{z-index:50}.z-\\[1\\]{z-index:1}.z-\\[2\\]{z-index:2}.z-\\[60\\]{z-index:60}.z-\\[61\\]{z-index:61}.z-\\[1000\\]{z-index:1000}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.my-1{margin-block:calc(var(--spacing)*1)}.my-2\\.5{margin-block:calc(var(--spacing)*2.5)}.-mt-5{margin-top:calc(var(--spacing)*-5)}.-mt-6{margin-top:calc(var(--spacing)*-6)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-2\\.5{margin-top:calc(var(--spacing)*2.5)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-auto{margin-right:auto}.mb-0\\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-1\\.5{margin-bottom:calc(var(--spacing)*1.5)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-2\\.5{margin-bottom:calc(var(--spacing)*2.5)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.ml-1\\.5{margin-left:calc(var(--spacing)*1.5)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.list-item{display:list-item}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-3\\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-\\[180px\\]{height:180px}.h-\\[300px\\]{height:300px}.h-\\[400px\\]{height:400px}.h-full{height:100%}.h-px{height:1px}.max-h-\\[128px\\]{max-height:128px}.min-h-\\[80px\\]{min-height:80px}.min-h-\\[120px\\]{min-height:120px}.min-h-\\[128px\\]{min-height:128px}.min-h-\\[300px\\]{min-height:300px}.min-h-\\[400px\\]{min-height:400px}.w-2{width:calc(var(--spacing)*2)}.w-3\\/5{width:60%}.w-4{width:calc(var(--spacing)*4)}.w-4\\/5{width:80%}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-11{width:calc(var(--spacing)*11)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-\\[50px\\]{width:50px}.w-\\[60px\\]{width:60px}.w-\\[70\\%\\]{width:70%}.w-\\[70px\\]{width:70px}.w-\\[90\\%\\]{width:90%}.w-\\[92\\%\\]{width:92%}.w-\\[100px\\]{width:100px}.w-\\[120px\\]{width:120px}.w-\\[280px\\]{width:280px}.w-\\[320px\\]{width:320px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\\[230px\\]{max-width:230px}.max-w-\\[400px\\]{max-width:400px}.max-w-\\[440px\\]{max-width:440px}.max-w-\\[500px\\]{max-width:500px}.max-w-\\[600px\\]{max-width:600px}.max-w-\\[calc\\(100\\%-32px\\)\\]{max-width:calc(100% - 32px)}.max-w-full{max-width:100%}.min-w-\\[100px\\]{min-width:100px}.flex-1{flex:1}.flex-\\[1_1_350px\\]{flex:1 1 350px}.shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y:-50%}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.list-none{list-style-type:none}.auto-rows-fr{grid-auto-rows:minmax(0,1fr)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\\[repeat\\(auto-fill\\,minmax\\(350px\\,1fr\\)\\)\\]{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.grid-cols-\\[repeat\\(auto-fit\\,minmax\\(200px\\,1fr\\)\\)\\]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.space-y-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}}.space-y-4{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*4*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*4*var(--tw-space-y-reverse))}}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:var(--radius)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[10px\\]{border-radius:10px}.rounded-\\[14px\\]{border-radius:14px}.rounded-\\[20px\\]{border-radius:20px}.rounded-\\[28px\\]{border-radius:28px}.rounded-\\[inherit\\]{border-radius:inherit}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-4{border-top-style:var(--tw-border-style);border-top-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-current{border-color:currentcolor}.border-error,.border-error\\/40{border-color:var(--color-error);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-error) 40%,transparent)}}.border-green-500{border-color:var(--color-green-500)}.border-highlight{border-color:var(--color-highlight)}.border-red-200{border-color:var(--color-red-200)}.border-slate-200{border-color:var(--color-slate-200)}.border-success\\/40{border-color:var(--color-success);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-success) 40%,transparent)}}.border-white{border-color:var(--color-white)}.border-t-transparent{border-top-color:transparent}.bg-\\[rgba\\(0\\,20\\,40\\,0\\.85\\)\\]{background-color:rgba(0,20,40,.85)}.bg-background{background-color:var(--color-background)}.bg-black\\/5{background-color:color-mix(in srgb,#000 5%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 5%,transparent)}}.bg-black\\/10{background-color:color-mix(in srgb,#000 10%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 10%,transparent)}}.bg-black\\/30{background-color:color-mix(in srgb,#000 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.bg-black\\/50{background-color:color-mix(in srgb,#000 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-border{background-color:var(--color-border)}.bg-error,.bg-error\\/10,.bg-error\\/15{background-color:var(--color-error);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-error) 15%,transparent)}}.bg-green-100{background-color:var(--color-green-100)}.bg-highlight{background-color:var(--color-highlight)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-700\\/30{background-color:color-mix(in srgb,oklch(37.2% .044 257.287) 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-slate-700) 30%,transparent)}}.bg-slate-900\\/80{background-color:color-mix(in srgb,oklch(20.8% .042 265.755) 80%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-slate-900) 80%,transparent)}}.bg-success,.bg-success\\/15{background-color:var(--color-success);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-success) 15%,transparent)}}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.bg-white\\/15{background-color:color-mix(in srgb,#fff 15%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 15%,transparent)}}.bg-white\\/20{background-color:color-mix(in srgb,#fff 20%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.bg-white\\/50{background-color:color-mix(in srgb,#fff 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 50%,transparent)}}.bg-white\\/90{background-color:color-mix(in srgb,#fff 90%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 90%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-highlight\\/20{--tw-gradient-from:var(--color-highlight);@supports (color:color-mix(in lab,red,red)){--tw-gradient-from:color-mix(in oklab,var(--color-highlight) 20%,transparent)}--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-highlight{--tw-gradient-to:var(--color-highlight);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-\\[18px_20px\\]{padding:18px 20px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-7{padding-inline:calc(var(--spacing)*7)}.px-8{padding-inline:calc(var(--spacing)*8)}.px-\\[18px\\]{padding-inline:18px}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-3\\.5{padding-block:calc(var(--spacing)*3.5)}.py-4{padding-block:calc(var(--spacing)*4)}.py-\\[18px\\]{padding-block:18px}.pt-3{padding-top:calc(var(--spacing)*3)}.pt-7{padding-top:calc(var(--spacing)*7)}.pr-3{padding-right:calc(var(--spacing)*3)}.pr-10{padding-right:calc(var(--spacing)*10)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[11px\\]{font-size:11px}.text-\\[13px\\]{font-size:13px}.text-\\[17px\\]{font-size:17px}.text-\\[18px\\]{font-size:18px}.text-\\[22px\\]{font-size:22px}.text-\\[26px\\]{font-size:26px}.text-\\[28px\\]{font-size:28px}.text-\\[32px\\]{font-size:32px}.text-\\[48px\\]{font-size:48px}.text-\\[64px\\]{font-size:64px}.text-\\[clamp\\(0\\.8rem\\,2vw\\,16px\\)\\]{font-size:clamp(.8rem,2vw,16px)}.text-\\[clamp\\(0\\.95rem\\,2vw\\,16px\\)\\]{font-size:clamp(.95rem,2vw,16px)}.text-\\[clamp\\(1\\.1rem\\,2\\.5vw\\,24px\\)\\]{font-size:clamp(1.1rem,2.5vw,24px)}.text-\\[clamp\\(1\\.72rem\\,4vw\\,32px\\)\\]{font-size:clamp(1.72rem,4vw,32px)}.text-\\[clamp\\(1rem\\,2vw\\,16px\\)\\]{font-size:clamp(1rem,2vw,16px)}.leading-\\[1\\.55\\]{--tw-leading:1.55;line-height:1.55}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\\[1\\.5px\\]{--tw-tracking:1.5px;letter-spacing:1.5px}.tracking-\\[6px\\]{--tw-tracking:6px;letter-spacing:6px}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.break-words{overflow-wrap:break-word}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-error{color:var(--color-error)}.text-gray-600{color:var(--color-gray-600)}.text-green-700{color:var(--color-green-700)}.text-highlight,.text-highlight\\/80{color:var(--color-highlight);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-highlight) 80%,transparent)}}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-success{color:var(--color-success)}.text-surface{color:var(--color-surface)}.text-text-muted{color:var(--color-text-muted)}.text-text-primary{color:var(--color-text-primary)}.text-white{color:var(--color-white)}.text-white\\/60{color:color-mix(in srgb,#fff 60%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-white) 60%,transparent)}}.text-white\\/90{color:color-mix(in srgb,#fff 90%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-white) 90%,transparent)}}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.accent-highlight{accent-color:var(--color-highlight)}.opacity-0{opacity:0}.opacity-30{opacity:30%}.opacity-50{opacity:50%}.opacity-60{opacity:60%}.opacity-70{opacity:70%}.opacity-80{opacity:80%}.opacity-100{opacity:100%}.opacity-\\[0\\.18\\]{opacity:.18}.shadow-\\[0_0_0_2px_var\\(--bw-highlight-color\\)\\]{--tw-shadow:0 0 0 2px var(--tw-shadow-color,var(--bw-highlight-color))}.shadow-\\[0_0_0_2px_var\\(--bw-highlight-color\\)\\],.shadow-\\[0_2px_8px_0_var\\(--bw-highlight-color\\)\\]{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_2px_8px_0_var\\(--bw-highlight-color\\)\\]{--tw-shadow:0 2px 8px 0 var(--tw-shadow-color,var(--bw-highlight-color))}.shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.15\\)\\,inset_0_-2px_0_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,rgba(0,0,0,.15)),inset 0 -2px 0 var(--tw-shadow-color,rgba(0,0,0,.05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_25px_60px_-12px_rgba\\(0\\,0\\,0\\,0\\.5\\)\\,0_0_0_1px_rgba\\(255\\,255\\,255\\,0\\.1\\)\\,inset_0_1px_0_rgba\\(255\\,255\\,255\\,0\\.2\\)\\]{--tw-shadow:0 25px 60px -12px var(--tw-shadow-color,rgba(0,0,0,.5)),0 0 0 1px var(--tw-shadow-color,hsla(0,0%,100%,.1)),inset 0 1px 0 var(--tw-shadow-color,hsla(0,0%,100%,.2));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--bw-shadow-lg,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05))}.shadow-lg,.shadow-md{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:var(--bw-shadow-md,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06))}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur-\\[0\\.5px\\]{--tw-blur:blur(0.5px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-\\[0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\]{--tw-drop-shadow-size:drop-shadow(0 2px 4px var(--tw-drop-shadow-color,rgba(0,0,0,.2)));--tw-drop-shadow:var(--tw-drop-shadow-size)}.drop-shadow-\\[0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\],.drop-shadow-\\[0_2px_8px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-\\[0_2px_8px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-drop-shadow-size:drop-shadow(0 2px 8px var(--tw-drop-shadow-color,rgba(0,0,0,.3)));--tw-drop-shadow:var(--tw-drop-shadow-size)}.drop-shadow-\\[0_8px_16px_rgba\\(0\\,0\\,0\\,0\\.4\\)\\]{--tw-drop-shadow-size:drop-shadow(0 8px 16px var(--tw-drop-shadow-color,rgba(0,0,0,.4)));--tw-drop-shadow:var(--tw-drop-shadow-size)}.drop-shadow-\\[0_8px_16px_rgba\\(0\\,0\\,0\\,0\\.4\\)\\],.grayscale{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale-\\[40\\%\\]{--tw-grayscale:grayscale(40%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-opacity{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-transform{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.duration-150{--tw-duration:150ms;transition-duration:.15s}.duration-200{--tw-duration:200ms;transition-duration:.2s}.duration-250{--tw-duration:250ms;transition-duration:.25s}.duration-300{--tw-duration:300ms;transition-duration:.3s}.duration-400{--tw-duration:400ms;transition-duration:.4s}.ease-\\[cubic-bezier\\(0\\.4\\,0\\,0\\.2\\,1\\)\\]{--tw-ease:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.will-change-transform{will-change:transform}.outline-none{--tw-outline-style:none;outline-style:none}.hover\\:-translate-y-0\\.5{&:hover{@media (hover:hover){--tw-translate-y:calc(var(--spacing)*-0.5);translate:var(--tw-translate-x) var(--tw-translate-y)}}}.hover\\:scale-110{&:hover{@media (hover:hover){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\\:scale-125{&:hover{@media (hover:hover){--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\\:scale-\\[1\\.02\\]{&:hover{@media (hover:hover){scale:1.02}}}.hover\\:border-slate-300{&:hover{@media (hover:hover){border-color:var(--color-slate-300)}}}.hover\\:bg-black\\/5{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#000 5%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 5%,transparent)}}}}.hover\\:bg-black\\/50{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#000 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}}}.hover\\:bg-black\\/70{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#000 70%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 70%,transparent)}}}}.hover\\:bg-border{&:hover{@media (hover:hover){background-color:var(--color-border)}}}.hover\\:bg-error\\/10{&:hover{@media (hover:hover){background-color:var(--color-error);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-error) 10%,transparent)}}}}.hover\\:bg-highlight{&:hover{@media (hover:hover){background-color:var(--color-highlight)}}}.hover\\:bg-highlight\\/10{&:hover{@media (hover:hover){background-color:var(--color-highlight);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-highlight) 10%,transparent)}}}}.hover\\:bg-white\\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff 80%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 80%,transparent)}}}}.hover\\:text-text-primary{&:hover{@media (hover:hover){color:var(--color-text-primary)}}}.hover\\:text-white{&:hover{@media (hover:hover){color:var(--color-white)}}}.hover\\:opacity-80{&:hover{@media (hover:hover){opacity:80%}}}.hover\\:opacity-90{&:hover{@media (hover:hover){opacity:90%}}}.hover\\:opacity-100{&:hover{@media (hover:hover){opacity:100%}}}.hover\\:shadow-lg{&:hover{@media (hover:hover){--tw-shadow:var(--bw-shadow-lg,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}.hover\\:brightness-95{&:hover{@media (hover:hover){--tw-brightness:brightness(95%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}}.hover\\:brightness-110{&:hover{@media (hover:hover){--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}}.focus\\:border-highlight{&:focus{border-color:var(--color-highlight)}}.focus\\:shadow-\\[0_0_0_2px_var\\(--bw-highlight-color\\)33\\]{&:focus{--tw-shadow:0 0 0 2px var(--tw-shadow-color,var(--bw-highlight-color)33);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\\:shadow-\\[0_0_0_2px_var\\(--bw-highlight-color\\)\\]{&:focus{--tw-shadow:0 0 0 2px var(--tw-shadow-color,var(--bw-highlight-color));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\\:ring-highlight{&:focus{--tw-ring-color:var(--color-highlight)}}.focus\\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.booking-widget-container{color:var(--bw-text-color,#1e293b);direction:ltr;display:block;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;position:relative;text-align:left}.booking-widget-container,.booking-widget-container *,.booking-widget-container :after,.booking-widget-container :before{box-sizing:border-box}.booking-widget-container input,.booking-widget-container select,.booking-widget-container textarea{font-family:inherit;font-size:inherit;line-height:inherit}.booking-widget-container button{cursor:pointer;font-family:inherit;font-size:inherit}.booking-widget-container a{color:inherit}.booking-widget-container img{height:auto;max-width:100%;vertical-align:middle}#booking-widget-portal{color:var(--bw-text-color,#1e293b);direction:ltr;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;text-align:left}#booking-widget-portal *,#booking-widget-portal :after,#booking-widget-portal :before{box-sizing:border-box}.print-only{display:none}.print-hidden{display:block}@media print{.print-only{display:block}.print-hidden{display:none}}:root{--bw-highlight-color:#00b1aa;--bw-highlight-color-rgb:0,177,170;--bw-background-color:#f8fdfe;--bw-surface-color:#fff;--bw-text-color:#0e7490;--bw-text-muted:rgba(14,116,144,.7);--bw-border-color:#bae6fd;--bw-success-color:#38bdf8;--bw-warning-color:#fbbf24;--bw-error-color:#f43f5e;--bw-border-radius:18px;--bw-border-radius-small:calc(var(--bw-border-radius)*0.8);--bw-spacing:16px;--bw-spacing-large:24px;--bw-font-family:\"Inter\",system-ui,sans-serif;--bw-font-size:14px;--bw-font-size-large:18px;--bw-font-size-small:12px;--bw-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--bw-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--bw-highlight-muted:rgba(0,177,170,.1);--bw-highlight-subtle:rgba(0,177,170,.05);--bw-text-subtle:rgba(14,116,144,.4)}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes promo-wave{0%,to{transform:translateX(0) translateY(0)}25%{transform:translateX(5px) translateY(-3px)}50%{transform:translateX(0) translateY(-5px)}75%{transform:translateX(-5px) translateY(-3px)}}@keyframes promo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes promo-shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes promo-sparkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}@keyframes promo-snow{0%{opacity:0;transform:translateY(-10px) rotate(0deg)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(350px) rotate(1turn)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-in-right{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes slide-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-spin{animation:spin 1s linear infinite}.animate-shimmer{animation:shimmer 2s infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-in-up{animation:slide-in-up .3s ease-out}.animate-scale-in{animation:scale-in .2s ease-out}.skeleton-shimmer{overflow:hidden;position:relative}.skeleton-shimmer:after{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}@media (max-width:768px){.sidebar-mobile{border-radius:0!important;max-width:100%!important;width:100%!important}}.input-focus:focus{border-color:var(--bw-highlight-color);box-shadow:0 0 0 3px var(--bw-highlight-muted);outline:none}.btn-primary{background-color:var(--bw-highlight-color);color:#fff;transition:filter .2s ease}.btn-primary:hover{filter:brightness(1.1)}.btn-primary:active{filter:brightness(.95)}.btn-primary:disabled{cursor:not-allowed;opacity:.5}.card-interactive{transition:transform .2s ease,box-shadow .2s ease}.card-interactive:hover{box-shadow:var(--bw-shadow-lg);transform:translateY(-2px)}.custom-scrollbar::-webkit-scrollbar{height:6px;width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--bw-border-color);border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--bw-text-muted)}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{color:var(--bw-text-color);font-weight:600;margin-bottom:.5em}.markdown-content h1{font-size:1.5em}.markdown-content h2{font-size:1.25em}.markdown-content h3{font-size:1.1em}.markdown-content p{line-height:1.6;margin-bottom:1em}.markdown-content ol,.markdown-content ul{margin-bottom:1em;padding-left:1.5em}.markdown-content ul{list-style-type:disc}.markdown-content ol{list-style-type:decimal}.markdown-content li{margin-bottom:.25em}.markdown-content a{color:var(--bw-highlight-color);text-decoration:underline}.markdown-content a:hover{opacity:.8}.markdown-content strong{font-weight:600}.markdown-content em{font-style:italic}.markdown-content code{background:var(--bw-highlight-subtle);border-radius:4px;font-family:monospace;font-size:.9em;padding:.125em .25em}.markdown-content blockquote{border-left:3px solid var(--bw-highlight-color);color:var(--bw-text-muted);margin:1em 0;padding-left:1em}.next-events-skeleton{overflow:hidden;position:relative}.next-events-skeleton:after{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.stripe-element{background:var(--bw-surface-color);border:1px solid var(--bw-border-color);border-radius:var(--bw-border-radius-small);padding:12px;transition:border-color .2s ease,box-shadow .2s ease}.stripe-element:focus-within{border-color:var(--bw-highlight-color);box-shadow:0 0 0 3px var(--bw-highlight-muted)}.backdrop{backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);inset:0;position:fixed}.accordion-content{overflow:hidden;transition:max-height .3s ease-out}.accordion-trigger{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.accordion-trigger[data-state=open] .accordion-chevron{transform:rotate(180deg)}.accordion-chevron{transition:transform .2s ease}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:\"*\";inherits:false}@property --tw-gradient-from{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:\"*\";inherits:false}@property --tw-gradient-via-stops{syntax:\"*\";inherits:false}@property --tw-gradient-from-position{syntax:\"<length-percentage>\";inherits:false;initial-value:0}@property --tw-gradient-via-position{syntax:\"<length-percentage>\";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:\"<length-percentage>\";inherits:false;initial-value:100%}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-tracking{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-backdrop-blur{syntax:\"*\";inherits:false}@property --tw-backdrop-brightness{syntax:\"*\";inherits:false}@property --tw-backdrop-contrast{syntax:\"*\";inherits:false}@property --tw-backdrop-grayscale{syntax:\"*\";inherits:false}@property --tw-backdrop-hue-rotate{syntax:\"*\";inherits:false}@property --tw-backdrop-invert{syntax:\"*\";inherits:false}@property --tw-backdrop-opacity{syntax:\"*\";inherits:false}@property --tw-backdrop-saturate{syntax:\"*\";inherits:false}@property --tw-backdrop-sepia{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.5}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}";
+  var css_248z = ".booking-widget-container{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;color:var(--bw-text-color,#1e293b);direction:ltr;display:block;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;position:relative;text-align:left}.booking-widget-container *,.booking-widget-container :after,.booking-widget-container :before{box-sizing:border-box;margin:0;padding:0}.booking-widget-container input,.booking-widget-container select,.booking-widget-container textarea{font-family:inherit;font-size:inherit;line-height:inherit}.booking-widget-container button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit}.booking-widget-container a{color:inherit;text-decoration:none}.booking-widget-container img{display:block;height:auto;max-width:100%;vertical-align:middle}.booking-widget-container ol,.booking-widget-container ul{list-style:none}.booking-widget-container h1,.booking-widget-container h2,.booking-widget-container h3,.booking-widget-container h4,.booking-widget-container h5,.booking-widget-container h6{font-size:inherit;font-weight:inherit}#booking-widget-portal{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--bw-text-color,#1e293b);direction:ltr;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;text-align:left}#booking-widget-portal *,#booking-widget-portal :after,#booking-widget-portal :before{box-sizing:border-box}#booking-widget-portal-root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--bw-text-color,#1e293b);font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);line-height:1.5}:root{--bw-highlight-color:#00b1aa;--bw-highlight-color-rgb:0,177,170;--bw-background-color:#f8fdfe;--bw-surface-color:#fff;--bw-text-color:#0e7490;--bw-text-muted:rgba(14,116,144,.7);--bw-border-color:#bae6fd;--bw-success-color:#38bdf8;--bw-warning-color:#fbbf24;--bw-error-color:#f43f5e;--bw-border-radius:18px;--bw-border-radius-small:calc(var(--bw-border-radius)*0.8);--bw-spacing:16px;--bw-spacing-large:24px;--bw-font-family:\"Inter\",system-ui,sans-serif;--bw-font-size:14px;--bw-font-size-large:18px;--bw-font-size-small:12px;--bw-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--bw-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--bw-highlight-muted:rgba(0,177,170,.1);--bw-highlight-subtle:rgba(0,177,170,.05);--bw-text-subtle:rgba(14,116,144,.4)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes promo-wave{0%,to{transform:translateX(0) translateY(0)}25%{transform:translateX(5px) translateY(-3px)}50%{transform:translateX(0) translateY(-5px)}75%{transform:translateX(-5px) translateY(-3px)}}@keyframes promo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes promo-shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes promo-sparkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}@keyframes promo-snow{0%{opacity:0;transform:translateY(-10px) rotate(0deg)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(350px) rotate(1turn)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-in-right{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes slide-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-spin{animation:spin 1s linear infinite}.animate-shimmer{animation:shimmer 2s infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-in-up{animation:slide-in-up .3s ease-out}.animate-scale-in{animation:scale-in .2s ease-out}.skeleton-shimmer{overflow:hidden;position:relative}.skeleton-shimmer:after{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}@media (max-width:768px){.sidebar-mobile{border-radius:0!important;max-width:100%!important;width:100%!important}}@media (max-width:600px){.event-type-list{gap:12px!important;padding:8px!important}.event-type-card{flex:1 1 100%!important;max-width:100%!important;padding:0!important}.event-type-img{height:160px!important}.event-type-title{font-size:1.1rem!important}.event-type-desc{font-size:.8rem!important;max-height:100px!important;min-height:100px!important}.event-type-content{padding:16px 24px!important}}.event-type-markdown{overflow:visible!important}.event-type-markdown p{color:var(--bw-text-muted);font-family:var(--bw-font-family);line-height:1.6;margin:0 0 8px}.event-type-markdown p:last-child{margin-bottom:0}.event-type-markdown h2{font-size:18px!important;font-weight:700!important;margin:12px 0 6px!important}.event-type-markdown h2,.event-type-markdown h3{color:var(--bw-text-color)!important;line-height:1.3!important}.event-type-markdown h3{font-size:16px!important;font-weight:600!important;margin:10px 0 4px!important}.event-type-markdown strong{color:var(--bw-text-color);font-weight:600}.event-type-markdown em{font-style:italic}.event-type-markdown u{text-decoration:underline}.event-type-markdown ul{list-style:none!important;margin:6px 0!important;padding:0 0 0 24px!important;position:relative!important}.event-type-markdown ul li{color:var(--bw-text-muted)!important;font-family:var(--bw-font-family)!important;margin-bottom:2px!important;padding-left:0!important;position:relative!important}.event-type-markdown ul li:before{color:var(--bw-text-color)!important;content:\"•\"!important;font-weight:700!important;left:-16px!important;position:absolute!important;top:0!important}.event-type-markdown ol{counter-reset:list-counter!important;list-style:none!important;margin:6px 0!important;padding:0 0 0 24px!important;position:relative!important}.event-type-markdown ol li{color:var(--bw-text-muted)!important;counter-increment:list-counter!important;font-family:var(--bw-font-family)!important;margin-bottom:2px!important;padding-left:0!important;position:relative!important}.event-type-markdown ol li:before{color:var(--bw-text-color)!important;content:counter(list-counter) \".\"!important;font-weight:700!important;left:-20px!important;position:absolute!important;top:0!important}.event-type-markdown blockquote{border-left:2px solid var(--bw-border-color);color:var(--bw-text-muted);font-style:italic;margin:4px 0;padding-left:12px}.event-type-markdown a{color:var(--bw-highlight-color);text-decoration:underline}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{color:var(--bw-text-color);font-weight:600;margin-bottom:.5em}.markdown-content h1{font-size:1.5em}.markdown-content h2{font-size:1.25em}.markdown-content h3{font-size:1.1em}.markdown-content p{line-height:1.6;margin-bottom:1em}.markdown-content ol,.markdown-content ul{margin-bottom:1em;padding-left:1.5em}.markdown-content ul{list-style-type:disc}.markdown-content ol{list-style-type:decimal}.markdown-content li{margin-bottom:.25em}.markdown-content a{color:var(--bw-highlight-color);text-decoration:underline}.markdown-content a:hover{opacity:.8}.markdown-content strong{font-weight:600}.markdown-content em{font-style:italic}.markdown-content code{background:var(--bw-highlight-subtle);border-radius:4px;font-family:monospace;font-size:.9em;padding:.125em .25em}.markdown-content blockquote{border-left:3px solid var(--bw-highlight-color);color:var(--bw-text-muted);margin:1em 0;padding-left:1em}.print-only{display:none}.print-hidden{display:block}@media print{.print-only{display:block}.print-hidden{display:none!important}.print-booking-header{border-bottom:2px solid #000;display:block;margin-bottom:24px;padding-bottom:16px;text-align:center}.print-booking-header h1{font-size:24px;margin:0 0 8px}.print-booking-header .subtitle{color:#666;font-size:14px}.print-booking-card{border:1px solid #ccc;border-radius:8px;margin-bottom:16px;padding:16px;page-break-inside:avoid}.print-section-title{border-bottom:1px solid #ddd;display:block;font-size:16px;font-weight:600;margin-bottom:12px;padding-bottom:8px}.print-detail-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.print-detail-item{margin-bottom:8px}.print-detail-label{color:#666;font-size:12px;margin-bottom:4px}.print-detail-value{font-size:14px;font-weight:600}.print-status-badge{border-radius:9999px;display:inline-block;font-size:12px;font-weight:600;padding:4px 12px}.print-status-paid{background-color:#dcfce7;color:#166534;display:inline-block}.print-participant{align-items:center;background-color:#f9fafb;border-radius:4px;display:flex;justify-content:space-between;margin-bottom:8px;padding:8px}.print-participant-name{font-weight:600}.print-participant-age{color:#666;font-size:12px}.print-payment-summary{display:block}.print-payment-row{border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:4px 0}.print-payment-row:last-child{border-bottom:none;font-weight:600}.print-footer{border-top:1px solid #ddd;color:#666;display:block;font-size:12px;margin-top:24px;padding-top:16px;text-align:center}.print-footer p{margin:4px 0}}";
   styleInject(css_248z);
 
   // Export init function for vanilla JS usage with Preact