@bigz-app/booking-widget 1.0.0 → 1.0.1

package/dist/index.cjs

@@ -3994,25 +3994,72 @@ var reactStripe_umdExports = reactStripe_umd.exports;
  * A reusable input component with focus states, labels, and error handling.
  * Uses forwardRef to support react-hook-form integration.
  */
-const Input = React__default.forwardRef(({ label, error, helperText, leftIcon, rightIcon, fullWidth = false, className = "", containerClassName = "", id, ...props }, ref) => {
+const Input = React__default.forwardRef(({ label, error, helperText, leftIcon, rightIcon, fullWidth = false, className = "", containerClassName = "", id, style, ...props }, ref) => {
     const [isFocused, setIsFocused] = React__default.useState(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 (jsxRuntime.jsxs("div", { className: containerClasses, children: [label && (jsxRuntime.jsx("label", { htmlFor: id, className: "text-base font-medium text-text-primary font-sans", children: label })), jsxRuntime.jsxs("div", { className: inputWrapperClasses, children: [leftIcon && jsxRuntime.jsx("span", { className: `${iconClasses} left-3`, children: leftIcon }), jsxRuntime.jsx("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 (jsxRuntime.jsxs("div", { className: containerClassName, style: containerStyles, children: [label && (jsxRuntime.jsx("label", { htmlFor: id, style: {
+                    fontSize: "16px",
+                    fontWeight: 500,
+                    color: "var(--bw-text-color)",
+                    fontFamily: "var(--bw-font-family)",
+                }, children: label })), jsxRuntime.jsxs("div", { style: inputWrapperStyles, children: [leftIcon && (jsxRuntime.jsx("span", { style: { ...iconStyles, left: "12px" }, children: leftIcon })), jsxRuntime.jsx("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 && jsxRuntime.jsx("span", { className: `${iconClasses} right-3`, children: rightIcon })] }), error && jsxRuntime.jsx("p", { className: "text-error text-base mt-1 font-sans", children: error }), helperText && !error && (jsxRuntime.jsx("p", { className: "text-text-muted text-sm font-sans", children: helperText }))] }));
+                        }, ...props }), rightIcon && (jsxRuntime.jsx("span", { style: { ...iconStyles, right: "12px" }, children: rightIcon }))] }), error && (jsxRuntime.jsx("p", { style: {
+                    color: "var(--bw-error-color)",
+                    fontSize: "14px",
+                    marginTop: "4px",
+                    fontFamily: "var(--bw-font-family)",
+                    margin: 0,
+                }, children: error })), helperText && !error && (jsxRuntime.jsx("p", { style: {
+                    color: "var(--bw-text-muted)",
+                    fontSize: "14px",
+                    fontFamily: "var(--bw-font-family)",
+                    margin: 0,
+                }, children: helperText }))] }));
 });
 Input.displayName = "Input";
 
@@ -4020,10 +4067,16 @@ Input.displayName = "Input";
  * 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 = "", }) => (jsxRuntime.jsx("div", { className: `flex justify-center items-center ${className}`, children: jsxRuntime.jsx("div", { className: "rounded-full animate-spin", style: {
+const Spinner = ({ size = 16, borderColor = "var(--bw-highlight-color)", className = "", }) => (jsxRuntime.jsx("div", { className: `bw-spinner ${className}`, style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+    }, children: jsxRuntime.jsx("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.
@@ -4219,13 +4272,173 @@ function DialogWrapper({ isOpen, onClose, children, maxWidth = "700px", classNam
  * Skeleton loading state for event type cards.
  * Matches the layout of EventTypeSelection cards.
  */
-const EventCardSkeleton = ({ count = 4 }) => (jsxRuntime.jsx("div", { className: "p-0", children: jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-6", children: Array.from({ length: count }).map((_, idx) => (jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { className: "absolute top-4 left-4 z-10", children: jsxRuntime.jsx("div", { className: "w-20 h-6 bg-white/20 rounded-sm" }) }), jsxRuntime.jsx("div", { className: "relative w-full h-[300px] bg-border" }), jsxRuntime.jsxs("div", { className: "p-4 px-6 flex-1", children: [jsxRuntime.jsx("div", { className: "w-3/5 h-3.5 bg-border rounded mb-2" }), jsxRuntime.jsx("div", { className: "w-4/5 h-6 bg-border rounded mb-3" }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "w-full h-3 bg-border rounded mb-2" }), jsxRuntime.jsx("div", { className: "w-[90%] h-3 bg-border rounded mb-2" }), jsxRuntime.jsx("div", { className: "w-[70%] h-3 bg-border rounded" })] }), jsxRuntime.jsxs("div", { className: "flex gap-4 mb-4", children: [jsxRuntime.jsx("div", { className: "w-20 h-4 bg-border rounded" }), jsxRuntime.jsx("div", { className: "w-[100px] h-4 bg-border rounded" })] }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center pt-3 border-t border-solid border-border", children: [jsxRuntime.jsx("div", { className: "w-[100px] h-7 bg-border rounded" }), jsxRuntime.jsx("div", { className: "w-[120px] h-10 bg-highlight opacity-30 rounded" })] })] })] }, idx))) }) }));
+const EventCardSkeleton = ({ count = 4 }) => (jsxRuntime.jsx("div", { style: { padding: 0 }, children: jsxRuntime.jsx("div", { style: {
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            gap: "24px",
+        }, children: Array.from({ length: count }).map((_, idx) => (jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: jsxRuntime.jsx("div", { style: {
+                            width: "80px",
+                            height: "24px",
+                            backgroundColor: "rgba(255, 255, 255, 0.2)",
+                            borderRadius: "var(--bw-border-radius-small)",
+                        } }) }), jsxRuntime.jsx("div", { style: {
+                        position: "relative",
+                        width: "100%",
+                        height: "300px",
+                        backgroundColor: "var(--bw-border-color)",
+                    } }), jsxRuntime.jsxs("div", { style: { padding: "16px 24px", flex: 1 }, children: [jsxRuntime.jsx("div", { style: {
+                                width: "60%",
+                                height: "14px",
+                                backgroundColor: "var(--bw-border-color)",
+                                borderRadius: "var(--bw-border-radius)",
+                                marginBottom: "8px",
+                            } }), jsxRuntime.jsx("div", { style: {
+                                width: "80%",
+                                height: "24px",
+                                backgroundColor: "var(--bw-border-color)",
+                                borderRadius: "var(--bw-border-radius)",
+                                marginBottom: "12px",
+                            } }), jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [jsxRuntime.jsx("div", { style: {
+                                        width: "100%",
+                                        height: "12px",
+                                        backgroundColor: "var(--bw-border-color)",
+                                        borderRadius: "var(--bw-border-radius)",
+                                        marginBottom: "8px",
+                                    } }), jsxRuntime.jsx("div", { style: {
+                                        width: "90%",
+                                        height: "12px",
+                                        backgroundColor: "var(--bw-border-color)",
+                                        borderRadius: "var(--bw-border-radius)",
+                                        marginBottom: "8px",
+                                    } }), jsxRuntime.jsx("div", { style: {
+                                        width: "70%",
+                                        height: "12px",
+                                        backgroundColor: "var(--bw-border-color)",
+                                        borderRadius: "var(--bw-border-radius)",
+                                    } })] }), jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", marginBottom: "16px" }, children: [jsxRuntime.jsx("div", { style: {
+                                        width: "80px",
+                                        height: "16px",
+                                        backgroundColor: "var(--bw-border-color)",
+                                        borderRadius: "var(--bw-border-radius)",
+                                    } }), jsxRuntime.jsx("div", { style: {
+                                        width: "100px",
+                                        height: "16px",
+                                        backgroundColor: "var(--bw-border-color)",
+                                        borderRadius: "var(--bw-border-radius)",
+                                    } })] }), jsxRuntime.jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                paddingTop: "12px",
+                                borderTop: "1px solid var(--bw-border-color)",
+                            }, children: [jsxRuntime.jsx("div", { style: {
+                                        width: "100px",
+                                        height: "28px",
+                                        backgroundColor: "var(--bw-border-color)",
+                                        borderRadius: "var(--bw-border-radius)",
+                                    } }), jsxRuntime.jsx("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 }) => (jsxRuntime.jsxs("div", { className: "max-w-[500px] mx-auto p-4 font-sans", children: [jsxRuntime.jsxs("div", { className: "mb-6 text-center", children: [jsxRuntime.jsx("div", { className: "skeleton-shimmer w-[280px] h-6 bg-border rounded mx-auto mb-2" }), jsxRuntime.jsx("div", { className: "skeleton-shimmer w-[320px] h-4 bg-border rounded mx-auto" })] }), jsxRuntime.jsx("div", { className: "flex flex-col gap-3 mb-6", children: Array.from({ length: count }).map((_, idx) => (jsxRuntime.jsxs("div", { className: "skeleton-shimmer bg-surface border border-solid border-border rounded p-2 px-2.5 font-sans", children: [jsxRuntime.jsxs("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 bg-border rounded-sm" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: "w-20 h-4 bg-border rounded" }), jsxRuntime.jsx("div", { className: "w-[60px] h-3.5 bg-border rounded" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-1", children: [jsxRuntime.jsx("div", { className: "w-[70px] h-5 bg-border rounded" }), jsxRuntime.jsx("div", { className: "w-[50px] h-3.5 bg-border rounded" })] })] }), jsxRuntime.jsx("div", { className: "w-[70%] h-4 bg-border rounded mt-2" })] }, idx))) }), jsxRuntime.jsx("div", { className: "skeleton-shimmer w-full h-12 bg-highlight opacity-30 rounded" })] }));
+const NextEventsSkeleton = ({ count = 3 }) => (jsxRuntime.jsxs("div", { style: {
+        maxWidth: "500px",
+        margin: "0 auto",
+        padding: "16px",
+        fontFamily: "var(--bw-font-family)",
+    }, children: [jsxRuntime.jsxs("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [jsxRuntime.jsx("div", { className: "skeleton-shimmer", style: {
+                        width: "280px",
+                        height: "24px",
+                        backgroundColor: "var(--bw-border-color)",
+                        borderRadius: "var(--bw-border-radius)",
+                        margin: "0 auto 8px auto",
+                    } }), jsxRuntime.jsx("div", { className: "skeleton-shimmer", style: {
+                        width: "320px",
+                        height: "16px",
+                        backgroundColor: "var(--bw-border-color)",
+                        borderRadius: "var(--bw-border-radius)",
+                        margin: "0 auto",
+                    } })] }), jsxRuntime.jsx("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "12px",
+                marginBottom: "24px",
+            }, children: Array.from({ length: count }).map((_, idx) => (jsxRuntime.jsxs("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: [jsxRuntime.jsxs("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            alignItems: "flex-start",
+                            gap: "12px",
+                            marginBottom: "4px",
+                        }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
+                                            width: "40px",
+                                            height: "40px",
+                                            backgroundColor: "var(--bw-border-color)",
+                                            borderRadius: "var(--bw-border-radius-small)",
+                                        } }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                    width: "80px",
+                                                    height: "16px",
+                                                    backgroundColor: "var(--bw-border-color)",
+                                                    borderRadius: "var(--bw-border-radius)",
+                                                } }), jsxRuntime.jsx("div", { style: {
+                                                    width: "60px",
+                                                    height: "14px",
+                                                    backgroundColor: "var(--bw-border-color)",
+                                                    borderRadius: "var(--bw-border-radius)",
+                                                } })] })] }), jsxRuntime.jsxs("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "flex-end",
+                                    gap: "4px",
+                                }, children: [jsxRuntime.jsx("div", { style: {
+                                            width: "70px",
+                                            height: "20px",
+                                            backgroundColor: "var(--bw-border-color)",
+                                            borderRadius: "var(--bw-border-radius)",
+                                        } }), jsxRuntime.jsx("div", { style: {
+                                            width: "50px",
+                                            height: "14px",
+                                            backgroundColor: "var(--bw-border-color)",
+                                            borderRadius: "var(--bw-border-radius)",
+                                        } })] })] }), jsxRuntime.jsx("div", { style: {
+                            width: "70%",
+                            height: "16px",
+                            backgroundColor: "var(--bw-border-color)",
+                            borderRadius: "var(--bw-border-radius)",
+                            marginTop: "8px",
+                        } })] }, idx))) }), jsxRuntime.jsx("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, }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })] }));
@@ -4251,14 +4464,13 @@ const IconChevronLeft = ({ size = 20, color = "white", className, }) => (jsxRunt
 const IconChevronRight = ({ size = 20, color = "white", className, }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: jsxRuntime.jsx("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] = React__default.useState(false);
     const [error, setError] = React__default.useState(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,
@@ -4270,6 +4482,7 @@ function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, gif
                 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",
@@ -4298,7 +4511,56 @@ function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, gif
         }
     };
     const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsxs("div", { className: "bg-success/15 border border-solid border-success/40 rounded p-4", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-2 text-success font-sans font-semibold", children: "\uD83C\uDF81 Vollst\u00E4ndig durch Gutschein(e) gedeckt" }), jsxRuntime.jsxs("div", { className: "text-base text-text-muted font-sans", children: ["Gutschein-Guthaben: ", formatCurrency(totalGiftCardAmount)] })] }), error && (jsxRuntime.jsxs("div", { className: "bg-error/15 border border-solid border-error/40 rounded p-4 text-error text-base font-sans", children: ["\u26A0\uFE0F ", error] })), jsxRuntime.jsx("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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" }), "Buchung wird erstellt..."] })) : ("Mit Gutschein buchen") })] }));
+    return (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [jsxRuntime.jsxs("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: [jsxRuntime.jsx("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" }), jsxRuntime.jsxs("div", { style: {
+                            fontSize: "16px",
+                            color: "var(--bw-text-muted)",
+                            fontFamily: "var(--bw-font-family)",
+                        }, children: ["Gutschein-Guthaben: ", formatCurrency(totalGiftCardAmount)] })] }), error && (jsxRuntime.jsxs("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] })), jsxRuntime.jsx("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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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, }) {
@@ -4314,7 +4576,6 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, onSucce
         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) {
@@ -4325,7 +4586,6 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, onSucce
                 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 = {
@@ -4352,7 +4612,6 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, onSucce
                 }
                 return;
             }
-            // Payment succeeded, now create the booking
             if (paymentIntent && paymentIntent.status === "succeeded") {
                 onSuccess({
                     paymentIntent: paymentIntent,
@@ -4370,7 +4629,12 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, onSucce
             setIsLoading(false);
         }
     };
-    return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [jsxRuntime.jsx("div", { className: "bg-slate-700/30 border border-solid border-border rounded p-4", children: jsxRuntime.jsx(reactStripe_umdExports.PaymentElement, { options: {
+    return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [jsxRuntime.jsx("div", { style: {
+                    backgroundColor: "rgba(71, 85, 105, 0.3)",
+                    border: "1px solid var(--bw-border-color)",
+                    borderRadius: "var(--bw-border-radius)",
+                    padding: "16px",
+                }, children: jsxRuntime.jsx(reactStripe_umdExports.PaymentElement, { options: {
                         layout: "accordion",
                         defaultValues: {
                             billingDetails: {
@@ -4379,22 +4643,46 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, onSucce
                                 phone: formData.customerPhone,
                             },
                         },
-                    } }) }), paymentError && (jsxRuntime.jsxs("div", { className: "bg-error/10 border border-solid border-error rounded p-4 text-error text-base font-sans", children: ["\u26A0\uFE0F ", paymentError] })), jsxRuntime.jsx("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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: totalAmount <
+                    } }) }), paymentError && (jsxRuntime.jsxs("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] })), jsxRuntime.jsx("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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { 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] = React__default.useState(null);
     const [paymentIntentId, setPaymentIntentId] = React__default.useState(null);
     const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = React__default.useState(false);
     const [paymentError, setPaymentError] = React__default.useState(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;
@@ -4432,7 +4720,6 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
         }
         catch { }
     }
-    // On mount (and when scope changes), restore persisted paymentIntentId
     React__default.useEffect(() => {
         if (!paymentIntentId) {
             const restored = loadPersistedPaymentIntent();
@@ -4441,20 +4728,16 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
             }
         }
     }, [storageKey]);
-    // Persist whenever paymentIntentId changes
     React__default.useEffect(() => {
         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
     React__default.useEffect(() => {
         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;
@@ -4475,8 +4758,8 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                     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");
                 }
@@ -4520,7 +4803,6 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                 setIsCreatingPaymentIntent(false);
             }
         };
-        // Debounce the payment intent creation
         const timer = setTimeout(createPaymentIntent, 500);
         return () => clearTimeout(timer);
     }, [
@@ -4533,8 +4815,8 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
         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)
@@ -4542,19 +4824,33 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
     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 (jsxRuntime.jsx(GiftCardOnlyBooking, { config: config, eventDetails: eventDetails, formData: formData, discountCode: discountCode, giftCards: giftCards, onSuccess: onSuccess, onError: onError }));
+        return (jsxRuntime.jsx(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 (jsxRuntime.jsxs("div", { className: "flex items-center justify-center p-4 gap-2", children: [spinner(), jsxRuntime.jsx("span", { className: "text-text-muted font-sans text-base", children: "Zahlungsm\u00F6glichkeiten werden geladen..." })] }));
+        return (jsxRuntime.jsxs("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "16px",
+                gap: "8px",
+            }, children: [spinner(), jsxRuntime.jsx("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 (jsxRuntime.jsxs("div", { className: "bg-error/10 border border-solid border-error rounded p-4 text-error text-base font-sans", children: ["\u26A0\uFE0F ", paymentError] }));
+        return (jsxRuntime.jsxs("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
     jsxRuntime.jsx(reactStripe_umdExports.Elements, { stripe: stripePromise, options: {
@@ -4562,7 +4858,6 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
             appearance: stripeAppearance || { theme: "stripe" },
             locale: (config.locale) || "de",
         }, children: jsxRuntime.jsx(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, onSuccess: (result) => {
-                // Clear persisted PI data on successful payment
                 clearPersistedPaymentIntent();
                 setPaymentIntentId(null);
                 setClientSecret(null);
@@ -4571,7 +4866,7 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
 }
 
 const SidebarGlobal = Sidebar;
-function Sidebar({ isOpen, onClose, title, children, width = "450px", }) {
+function Sidebar({ isOpen, onClose, title, children, width = "450px", footer, }) {
     const [isVisible, setIsVisible] = React__default.useState(false);
     const [isAnimating, setIsAnimating] = React__default.useState(false);
     const themedStyles = useStyles();
@@ -4644,36 +4939,135 @@ function Sidebar({ isOpen, onClose, title, children, width = "450px", }) {
     }, [isOpen, onClose]);
     if (!isVisible)
         return null;
-    const sidebarContent = (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[1000] font-sans", style: themedStyles, children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-250 ease-out", style: { opacity: isAnimating ? 1 : 0 }, onClick: onClose }), jsxRuntime.jsxs("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 = (jsxRuntime.jsxs("div", { style: {
+            ...themedStyles,
+            position: "fixed",
+            inset: 0,
+            zIndex: 1000,
+            fontFamily: "var(--bw-font-family)",
+        }, children: [jsxRuntime.jsx("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 }), jsxRuntime.jsxs("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: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between shrink-0 p-4 border-b border-solid border-border bg-background", children: [jsxRuntime.jsx("h2", { className: "m-0 font-semibold text-lg text-text-primary font-sans", children: title }), jsxRuntime.jsx("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" })] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto bg-background", children: children })] })] }));
+                }, children: [jsxRuntime.jsxs("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: [jsxRuntime.jsx("h2", { style: {
+                                    margin: 0,
+                                    fontWeight: 600,
+                                    fontSize: "16px",
+                                    color: "var(--bw-text-color)",
+                                    fontFamily: "var(--bw-font-family)",
+                                    flex: 1,
+                                    paddingRight: "12px",
+                                }, children: title }), jsxRuntime.jsx("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" })] }), jsxRuntime.jsx("div", { style: {
+                            flex: 1,
+                            overflow: "auto",
+                            backgroundColor: "var(--bw-background-color)",
+                        }, children: children }), footer && (jsxRuntime.jsx("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
         ? ReactDOM.createPortal(sidebarContent, portalRootRef.current)
         : null;
 }
 function Accordion({ title, priceInfo, children, isOpen, onToggle, }) {
-    return (jsxRuntime.jsxs("div", { className: "overflow-hidden bg-surface border border-solid border-border rounded", children: [jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { className: "font-bold text-xl text-text-primary", children: title }), priceInfo && (jsxRuntime.jsx("div", { className: "ml-auto font-medium text-base text-highlight", children: priceInfo })), jsxRuntime.jsx("span", { className: "accordion-chevron ml-4 text-base transition-transform duration-200", style: {
+    return (jsxRuntime.jsxs("div", { style: {
+            overflow: "hidden",
+            backgroundColor: "var(--bw-surface-color)",
+            border: "1px solid var(--bw-border-color)",
+            borderRadius: "var(--bw-border-radius)",
+        }, children: [jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { style: {
+                            fontWeight: 700,
+                            fontSize: "18px",
+                            color: "var(--bw-text-color)",
+                        }, children: title }), priceInfo && (jsxRuntime.jsx("div", { style: {
+                            marginLeft: "auto",
+                            fontWeight: 500,
+                            fontSize: "16px",
+                            color: "var(--bw-highlight-color)",
+                        }, children: priceInfo })), jsxRuntime.jsx("span", { className: "accordion-chevron", style: {
+                            marginLeft: "16px",
+                            fontSize: "16px",
+                            transition: "transform 0.2s ease",
                             transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
-                        }, children: "\u25BC" })] }), isOpen && (jsxRuntime.jsx("div", { className: "px-4 pb-4 border-t border-solid border-border bg-background", children: children }))] }));
+                        }, children: "\u25BC" })] }), isOpen && (jsxRuntime.jsx("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" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "animate-spin", children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+const IconSpinner = ({ size = 16, color = "currentColor" }) => (jsxRuntime.jsx("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: jsxRuntime.jsx("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] = React__default.useState("");
     const [isLoading, setIsLoading] = React__default.useState(false);
     const [error, setError] = React__default.useState(null);
     const [isExpanded, setIsExpanded] = React__default.useState(false);
-    // Check if a discount code is already applied (only one allowed)
     const hasDiscountCode = appliedVouchers.some((v) => v.type === "discount");
     const validateVoucher = React__default.useCallback(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;
@@ -4693,7 +5087,6 @@ function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVo
             });
             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");
@@ -4738,18 +5131,122 @@ function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVo
             }
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border rounded overflow-hidden", children: [jsxRuntime.jsxs("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: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(IconTicket, { size: 18, color: "var(--bw-highlight-color)" }), "Rabattcode oder Gutschein", appliedVouchers.length > 0 && (jsxRuntime.jsx("span", { className: "bg-highlight text-white px-2 py-0.5 rounded-full text-xs font-semibold", children: appliedVouchers.length }))] }), jsxRuntime.jsx("span", { className: "transition-transform duration-200", style: { transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)" }, children: "\u25BC" })] }), isExpanded && (jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [appliedVouchers.length > 0 && (jsxRuntime.jsx("div", { className: "mb-3", children: appliedVouchers.map((voucher) => (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2.5 bg-surface border border-solid border-border rounded mb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [voucher.type === "discount" ? (jsxRuntime.jsx(IconTicket, { size: 18, color: "var(--bw-success-color)" })) : (jsxRuntime.jsx(IconGift, { size: 18, color: "var(--bw-success-color)" })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "font-sans text-base font-semibold text-text-primary flex items-center gap-1.5", children: [jsxRuntime.jsx("span", { className: "font-mono", children: voucher.code }), jsxRuntime.jsx(IconCheck, { size: 14, color: "var(--bw-success-color)" })] }), jsxRuntime.jsxs("div", { className: "font-sans text-xs text-success", children: [voucher.type === "discount"
+    return (jsxRuntime.jsxs("div", { style: {
+            backgroundColor: "var(--bw-surface-color)",
+            border: "1px solid var(--bw-border-color)",
+            borderRadius: "var(--bw-border-radius)",
+            overflow: "hidden",
+        }, children: [jsxRuntime.jsxs("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: [jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [jsxRuntime.jsx(IconTicket, { size: 18, color: "var(--bw-highlight-color)" }), "Rabattcode oder Gutschein", appliedVouchers.length > 0 && (jsxRuntime.jsx("span", { style: {
+                                    backgroundColor: "var(--bw-highlight-color)",
+                                    color: "#ffffff",
+                                    padding: "2px 8px",
+                                    borderRadius: "9999px",
+                                    fontSize: "12px",
+                                    fontWeight: 600,
+                                }, children: appliedVouchers.length }))] }), jsxRuntime.jsx("span", { style: {
+                            transition: "transform 0.2s ease",
+                            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                        }, children: "\u25BC" })] }), isExpanded && (jsxRuntime.jsxs("div", { style: { padding: "0 16px 16px 16px" }, children: [appliedVouchers.length > 0 && (jsxRuntime.jsx("div", { style: { marginBottom: "12px" }, children: appliedVouchers.map((voucher) => (jsxRuntime.jsxs("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: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [voucher.type === "discount" ? (jsxRuntime.jsx(IconTicket, { size: 18, color: "var(--bw-success-color)" })) : (jsxRuntime.jsx(IconGift, { size: 18, color: "var(--bw-success-color)" })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { style: {
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        fontSize: "16px",
+                                                        fontWeight: 600,
+                                                        color: "var(--bw-text-color)",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
+                                                    }, children: [jsxRuntime.jsx("span", { style: { fontFamily: "ui-monospace, monospace" }, children: voucher.code }), jsxRuntime.jsx(IconCheck, { size: 14, color: "var(--bw-success-color)" })] }), jsxRuntime.jsxs("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 && (jsxRuntime.jsxs("span", { className: "text-text-muted ml-2", children: ["(Rest: ", formatCurrency(voucher.remainingBalance), ")"] }))] })] })] }), jsxRuntime.jsx("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: jsxRuntime.jsx(IconX, { size: 16 }) })] }, voucher.code))) })), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: (e) => {
+                                                            voucher.remainingBalance > 0 && (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", marginLeft: "8px" }, children: ["(Rest: ", formatCurrency(voucher.remainingBalance), ")"] }))] })] })] }), jsxRuntime.jsx("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: jsxRuntime.jsx(IconX, { size: 16 }) })] }, voucher.code))) })), jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px" }, children: [jsxRuntime.jsx("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 }), jsxRuntime.jsx("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 ? (jsxRuntime.jsx(IconSpinner, { size: 16, color: "#fff" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconCheck, { size: 16 }), "Einl\u00F6sen"] })) })] }), error && (jsxRuntime.jsxs("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: [jsxRuntime.jsx(IconX, { size: 16 }), error] })), hasDiscountCode && (jsxRuntime.jsx("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 }), jsxRuntime.jsx("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 ? (jsxRuntime.jsx(IconSpinner, { size: 16, color: "#fff" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconCheck, { size: 16 }), "Einl\u00F6sen"] })) })] }), error && (jsxRuntime.jsxs("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: [jsxRuntime.jsx(IconX, { size: 16 }), error] })), hasDiscountCode && (jsxRuntime.jsx("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;
@@ -8555,12 +9052,199 @@ function createBookingFormSchema() {
 // 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] = React__default.useState([]);
+    const paymentSectionRef = React__default.useRef(null);
+    // Payment option: "deposit" or "full" - only relevant when deposit is available
+    const [paymentOption, setPaymentOption] = React__default.useState("deposit");
+    // Per-participant upsell selections: participantIndex -> array of upsell package IDs
+    const [participantUpsells, setParticipantUpsells] = React__default.useState({});
     const form = useForm({
         resolver: bookingResolver,
         defaultValues: {
@@ -8574,18 +9258,64 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         },
     });
     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
+    React__default.useEffect(() => {
+        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 = React__default.useCallback(() => {
         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 = React__default.useCallback(() => {
+        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 = React__default.useCallback(() => {
         return appliedVouchers.reduce((total, voucher) => {
             if (voucher.type === "discount") {
@@ -8597,12 +9327,12 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
             return total;
         }, 0);
     }, [appliedVouchers]);
-    // Calculate total amount after discounts
     const calculateTotal = React__default.useCallback(() => {
         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;
@@ -8610,16 +9340,39 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         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 = React__default.useCallback(() => {
+        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 = React__default.useCallback((voucher, _error) => {
         if (voucher) {
             setAppliedVouchers((prev) => [...prev, voucher]);
@@ -8628,13 +9381,20 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const handleRemoveVoucher = React__default.useCallback((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)
     React__default.useEffect(() => {
         if (appliedVouchers.length > 0) {
             const newBaseTotal = eventDetails?.price
@@ -8673,7 +9433,6 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
             }));
         }
     }, [watchedParticipants, eventDetails]);
-    // Helper functions
     const addParticipant = () => {
         const currentParticipants = form.getValues("participants");
         const availableSpots = eventDetails?.availableSpots || 0;
@@ -8690,7 +9449,6 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
             form.setValue("participants", currentParticipants.filter((_, i) => i !== index));
         }
     };
-    // Stripe appearance based on theme CSS variables
     const [stripeAppearance, setStripeAppearance] = React__default.useState(null);
     React__default.useEffect(() => {
         const container = document.querySelector(".booking-widget-container");
@@ -8726,10 +9484,79 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
             onBackToEventTypes?.();
         }
     };
+    const scrollToPayment = () => {
+        paymentSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    };
+    // Footer navigation
+    const footerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: "\u2190 Zur\u00FCck" }), jsxRuntime.jsx("button", { type: "button", onClick: scrollToPayment, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: "Zur Zahlung \u2193" })] }));
     if (!eventDetails.bookingOpen) {
-        return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", children: jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[400px] text-center p-4", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "mx-auto mb-4 text-[48px]", children: jsxRuntime.jsx(IconWarning, { size: 48, color: "var(--bw-error-color)" }) }), jsxRuntime.jsx("h3", { className: "mb-2 font-semibold text-lg text-text-muted font-sans", children: "Buchung nicht m\u00F6glich" }), jsxRuntime.jsx("p", { className: "text-text-muted font-sans", children: "F\u00FCr diese Veranstaltung sind derzeit keine Buchungen m\u00F6glich." })] }) }) }));
-    }
-    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, children: jsxRuntime.jsxs("div", { className: "booking-widget-container p-4", children: [jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4 mb-6", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-highlight mb-3 font-sans border-b-2 border-highlight pb-1", children: "Event Details" }), jsxRuntime.jsxs("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-3 text-base", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [jsxRuntime.jsx(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " Datum:"] }), jsxRuntime.jsx("span", { className: "text-text-primary font-medium font-sans", children: formatEventDate(eventDetails.startTime) })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [jsxRuntime.jsx(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " Uhrzeit:"] }), jsxRuntime.jsx("span", { className: "text-text-primary font-medium font-sans", children: formatTime(eventDetails.startTime, "Europe/Berlin", "de") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [jsxRuntime.jsx(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " Dauer:"] }), jsxRuntime.jsxs("span", { className: "text-text-primary font-medium font-sans", children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("span", { className: "text-text-muted font-sans flex items-center gap-1", children: [jsxRuntime.jsx(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " Preis:"] }), jsxRuntime.jsxs("span", { className: "text-text-primary font-medium font-sans", children: [formatCurrency(eventDetails.price), " pro Person"] })] })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4 mb-6", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-highlight mb-3 font-sans border-b-2 border-highlight pb-1", children: "Kontaktdaten" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { htmlFor: "customerName", className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Name *" }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("p", { className: "text-error text-base mt-1 font-sans", children: customerNameError.message }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { htmlFor: "customerEmail", className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "E-Mail *" }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("p", { className: "text-error text-base mt-1 font-sans", children: customerEmailError.message }))] })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { htmlFor: "customerPhone", className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Telefon (optional)" }), jsxRuntime.jsx("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" })] })] })] }), jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4 mb-6", children: [jsxRuntime.jsx("div", { className: "flex justify-between items-center mb-4", children: jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-highlight m-0 font-sans border-b-2 border-highlight pb-1", children: "Teilnehmer" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [watchedParticipants.map((_, index) => (jsxRuntime.jsxs("div", { className: "flex gap-3 items-center", children: [jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("label", { htmlFor: `participant-name-${index}`, className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Name *" }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("p", { className: "text-error text-base mt-1 font-sans", children: form.formState.errors.participants[index]?.name?.message }))] }), jsxRuntime.jsxs("div", { className: "w-20", children: [jsxRuntime.jsx("label", { htmlFor: `participant-age-${index}`, className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "Alter" }), jsxRuntime.jsx("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
+        return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", children: jsxRuntime.jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minHeight: "400px",
+                    textAlign: "center",
+                    padding: "16px",
+                }, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: { margin: "0 auto 16px auto", fontSize: "48px" }, children: jsxRuntime.jsx(IconWarning, { size: 48, color: "var(--bw-error-color)" }) }), jsxRuntime.jsx("h3", { style: {
+                                marginBottom: "8px",
+                                fontWeight: 600,
+                                fontSize: "18px",
+                                color: "var(--bw-text-muted)",
+                                fontFamily: "var(--bw-font-family)",
+                            }, children: "Buchung nicht m\u00F6glich" }), jsxRuntime.jsx("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "F\u00FCr diese Veranstaltung sind derzeit keine Buchungen m\u00F6glich." })] }) }) }));
+    }
+    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, footer: footerContent, children: jsxRuntime.jsxs("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [jsxRuntime.jsxs("div", { style: cardStyles, children: [jsxRuntime.jsx("h2", { style: sectionHeaderStyles, children: "Event Details" }), jsxRuntime.jsxs("div", { style: {
+                                display: "grid",
+                                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                gap: "12px",
+                                fontSize: "14px",
+                            }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxRuntime.jsxs("span", { style: {
+                                                color: "var(--bw-text-muted)",
+                                                fontFamily: "var(--bw-font-family)",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: "4px",
+                                            }, children: [jsxRuntime.jsx(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " Datum:"] }), jsxRuntime.jsxs("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")] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxRuntime.jsxs("span", { style: {
+                                                color: "var(--bw-text-muted)",
+                                                fontFamily: "var(--bw-font-family)",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: "4px",
+                                            }, children: [jsxRuntime.jsx(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " Dauer:"] }), jsxRuntime.jsxs("span", { style: {
+                                                color: "var(--bw-text-color)",
+                                                fontWeight: 500,
+                                                fontFamily: "var(--bw-font-family)",
+                                            }, children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [jsxRuntime.jsxs("span", { style: {
+                                                color: "var(--bw-text-muted)",
+                                                fontFamily: "var(--bw-font-family)",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: "4px",
+                                            }, children: [jsxRuntime.jsx(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " Preis:"] }), jsxRuntime.jsxs("span", { style: {
+                                                color: "var(--bw-text-color)",
+                                                fontWeight: 500,
+                                                fontFamily: "var(--bw-font-family)",
+                                            }, children: [formatCurrency(eventDetails.price), " pro Person"] })] })] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [jsxRuntime.jsxs("div", { style: cardStyles, children: [jsxRuntime.jsx("h2", { style: sectionHeaderStyles, children: "Kontaktdaten" }), jsxRuntime.jsxs("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [jsxRuntime.jsxs("div", { style: {
+                                                display: "grid",
+                                                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                                gap: "16px",
+                                            }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { htmlFor: "customerName", style: labelStyles, children: "Name *" }), jsxRuntime.jsx("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles, placeholder: "Dein vollst\u00E4ndiger Name" }), customerNameError && (jsxRuntime.jsx("p", { style: errorTextStyles, children: customerNameError.message }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { htmlFor: "customerEmail", style: labelStyles, children: "E-Mail *" }), jsxRuntime.jsx("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles, placeholder: "deine@email.de" }), customerEmailError && (jsxRuntime.jsx("p", { style: errorTextStyles, children: customerEmailError.message }))] })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { htmlFor: "customerPhone", style: labelStyles, children: "Telefon (optional)" }), jsxRuntime.jsx("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles, placeholder: "+49 123 456789" })] }), jsxRuntime.jsxs("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), jsxRuntime.jsxs("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", " ", jsxRuntime.jsx("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: "AGBs" }), "*"] })] }), form.formState.errors.acceptTerms && (jsxRuntime.jsx("p", { style: { ...errorTextStyles, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), jsxRuntime.jsxs("div", { style: cardStyles, children: [jsxRuntime.jsx("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "space-between",
+                                        alignItems: "center",
+                                        marginBottom: "16px",
+                                    }, children: jsxRuntime.jsx("h2", { style: { ...sectionHeaderStyles, marginBottom: 0 }, children: "Teilnehmer" }) }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [jsxRuntime.jsx("label", { htmlFor: `participant-name-${index}`, style: labelStyles, children: "Name *" }), jsxRuntime.jsx("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles, placeholder: "Teilnehmername" }), form.formState.errors.participants?.[index]?.name && (jsxRuntime.jsx("p", { style: errorTextStyles, children: form.formState.errors.participants[index]?.name?.message }))] }), jsxRuntime.jsxs("div", { style: { width: "80px" }, children: [jsxRuntime.jsx("label", { htmlFor: `participant-age-${index}`, style: labelStyles, children: "Alter" }), jsxRuntime.jsx("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
                                                                         setValueAs: (value) => {
                                                                             if (value === "" || value === null || value === undefined) {
                                                                                 return undefined;
@@ -8737,44 +9564,205 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                             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 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { className: "block text-base font-medium text-text-muted mb-2 font-sans", children: "\u00A0" }), jsxRuntime.jsx("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 ? (jsxRuntime.jsx("div", { className: "flex flex-col items-center mt-3", children: jsxRuntime.jsx("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" }) })) : (jsxRuntime.jsxs("p", { className: "text-error text-base font-sans", children: ["Maximal ", eventDetails.availableSpots, " Pl\u00E4tze verf\u00FCgbar."] }))] })] }), jsxRuntime.jsx(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [jsxRuntime.jsx("label", { htmlFor: "booking-comment", className: "block text-base font-medium text-text-primary mb-2 font-sans", children: "Kommentar (optional)" }), jsxRuntime.jsx("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" })] }), jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("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",
-                                                    } }), jsxRuntime.jsxs("label", { htmlFor: "acceptTerms", className: "text-base text-text-muted font-sans max-w-[calc(100%-32px)] break-words", children: ["Ich akzeptiere die", " ", jsxRuntime.jsx("a", { href: eventDetails.agbUrl || "/terms", className: "text-highlight no-underline", target: "_blank", rel: "noopener noreferrer", children: "AGBs" }), "*"] })] }), form.formState.errors.acceptTerms && (jsxRuntime.jsx("p", { className: "text-error text-base mt-2 font-sans", children: form.formState.errors.acceptTerms.message }))] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-highlight mb-4 font-sans border-b-2 border-highlight pb-1", children: "Buchungszusammenfassung" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("span", { className: "text-text-muted font-sans", children: "Anzahl Teilnehmer:" }), jsxRuntime.jsx("span", { className: "text-text-primary font-medium font-sans", children: watchedParticipants.filter((p) => p.name.trim()).length })] }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("span", { className: "text-text-muted font-sans", children: "Preis pro Person:" }), jsxRuntime.jsx("span", { className: "text-text-primary font-medium font-sans", children: formatCurrency(eventDetails.price) })] }), depositAmount > 0 && (jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("span", { className: "text-text-muted font-sans", children: "Anzahlung pro Person:" }), jsxRuntime.jsx("span", { className: "text-text-primary font-medium font-sans", children: formatCurrency(eventDetails.deposit || 0) })] })), appliedVouchers.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("span", { className: "text-text-muted font-sans", children: "Zwischensumme:" }), jsxRuntime.jsx("span", { className: `font-sans ${totalDiscount > 0 ? "text-text-muted line-through" : "text-text-muted"}`, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("span", { className: "text-success font-sans text-base", children: ["Rabatt (", appliedDiscountCode.code, "):"] }), jsxRuntime.jsxs("span", { className: "text-success font-sans", children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("span", { className: "text-success font-sans text-base", children: ["Gutschein (", giftCard.code, "):"] }), jsxRuntime.jsxs("span", { className: "text-success font-sans", children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), jsxRuntime.jsxs("div", { className: "border-t border-solid border-border pt-3", children: [depositAmount > 0 && (jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-base mb-2", children: [jsxRuntime.jsx("span", { className: "text-text-muted font-sans", children: "Gesamtbetrag:" }), jsxRuntime.jsx("span", { className: "text-text-muted font-sans font-medium", children: formatCurrency(totalAmount) })] })), jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-lg font-semibold", children: [jsxRuntime.jsx("span", { className: "text-text-primary font-sans", children: depositAmount > 0 ? "Heute zu zahlen (Anzahlung):" : "Gesamtbetrag:" }), jsxRuntime.jsx("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 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { style: { ...labelStyles, visibility: "hidden" }, children: "\u00A0" }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
+                                                        const isSelected = (participantUpsells[index] || []).includes(upsell.id);
+                                                        return (jsxRuntime.jsxs("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [jsxRuntime.jsx("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: upsell.name }), jsxRuntime.jsxs("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
+                                                    }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (jsxRuntime.jsx("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: "center",
+                                                marginTop: "12px",
+                                            }, children: jsxRuntime.jsxs("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"] }) })) : (jsxRuntime.jsxs("p", { style: { ...errorTextStyles, margin: 0 }, children: ["Maximal ", eventDetails.availableSpots, " Pl\u00E4tze verf\u00FCgbar."] }))] })] }), jsxRuntime.jsx(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), jsxRuntime.jsxs("div", { style: cardStyles, children: [jsxRuntime.jsx("label", { htmlFor: "booking-comment", style: labelStyles, children: "Kommentar (optional)" }), jsxRuntime.jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zur Buchung...", rows: 3, style: {
+                                        ...inputStyles,
+                                        resize: "vertical",
+                                        minHeight: "80px",
+                                    } })] }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [jsxRuntime.jsxs("div", { style: cardStyles, children: [jsxRuntime.jsx("h2", { style: { ...sectionHeaderStyles, marginBottom: "16px" }, children: "Buchungszusammenfassung" }), jsxRuntime.jsxs("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Preis:" }), jsxRuntime.jsxs("div", { style: {
+                                                                color: "var(--bw-text-color)",
+                                                                fontWeight: 500,
+                                                                fontFamily: "var(--bw-font-family)",
+                                                            }, children: [jsxRuntime.jsxs("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.filter((p) => p.name.trim()).length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), depositAmount > 0 && (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Anzahlung:" }), jsxRuntime.jsxs("span", { style: {
+                                                                color: "var(--bw-text-color)",
+                                                                fontWeight: 500,
+                                                                fontFamily: "var(--bw-font-family)",
+                                                            }, children: [jsxRuntime.jsxs("span", { style: { fontWeight: 200 }, children: [watchedParticipants.filter((p) => p.name.trim()).length, " x"] }), " ", formatCurrency(eventDetails.deposit || 0)] })] })), upsellsTotal > 0 && (jsxRuntime.jsxs("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [jsxRuntime.jsx("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 (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px" }, children: [jsxRuntime.jsxs("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), jsxRuntime.jsx("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }, upsell.id));
+                                                        })] })), appliedVouchers.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Zwischensumme:" }), jsxRuntime.jsx("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 && (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsxs("span", { style: {
+                                                                        color: "var(--bw-success-color)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        fontSize: "14px",
+                                                                    }, children: ["Rabatt (", appliedDiscountCode.code, "):"] }), jsxRuntime.jsxs("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsxs("span", { style: {
+                                                                        color: "var(--bw-success-color)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        fontSize: "14px",
+                                                                    }, children: ["Gutschein (", giftCard.code, "):"] }), jsxRuntime.jsxs("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), jsxRuntime.jsxs("div", { style: {
+                                                        borderTop: "1px solid var(--bw-border-color)",
+                                                        paddingTop: "12px",
+                                                    }, children: [hasDepositOption && (jsxRuntime.jsxs("div", { style: {
+                                                                display: "flex",
+                                                                gap: "8px",
+                                                                marginBottom: "16px",
+                                                            }, children: [jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: {
+                                                                                fontSize: "13px",
+                                                                                color: "var(--bw-text-muted)",
+                                                                                marginBottom: "4px",
+                                                                            }, children: "Anzahlung" }), jsxRuntime.jsx("div", { style: {
+                                                                                fontSize: "18px",
+                                                                                fontWeight: 700,
+                                                                                color: paymentOption === "deposit"
+                                                                                    ? "var(--bw-highlight-color)"
+                                                                                    : "var(--bw-text-color)",
+                                                                            }, children: formatCurrency(depositAmount) })] }), jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: {
+                                                                                fontSize: "13px",
+                                                                                color: "var(--bw-text-muted)",
+                                                                                marginBottom: "4px",
+                                                                            }, children: "Vollst\u00E4ndig bezahlen" }), jsxRuntime.jsx("div", { style: {
+                                                                                fontSize: "18px",
+                                                                                fontWeight: 700,
+                                                                                color: paymentOption === "full"
+                                                                                    ? "var(--bw-highlight-color)"
+                                                                                    : "var(--bw-text-color)",
+                                                                            }, children: formatCurrency(totalAmount) })] })] })), hasDepositOption && paymentOption === "deposit" && (jsxRuntime.jsxs("div", { style: {
+                                                                display: "flex",
+                                                                justifyContent: "space-between",
+                                                                alignItems: "center",
+                                                                fontSize: "14px",
+                                                                marginBottom: "8px",
+                                                            }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag:" }), jsxRuntime.jsx("span", { style: {
+                                                                        color: "var(--bw-text-muted)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        fontWeight: 500,
+                                                                    }, children: formatCurrency(totalAmount) })] })), jsxRuntime.jsxs("div", { style: {
+                                                                display: "flex",
+                                                                justifyContent: "space-between",
+                                                                alignItems: "center",
+                                                                fontSize: "18px",
+                                                                fontWeight: 600,
+                                                            }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
+                                                                        ? "Heute zu zahlen (Anzahlung):"
+                                                                        : "Gesamtbetrag:" }), jsxRuntime.jsx("span", { style: {
+                                                                        color: "var(--bw-highlight-color)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        fontWeight: 700,
+                                                                    }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (jsxRuntime.jsxs("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."] }))] })] })] }), jsxRuntime.jsx("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 (jsxRuntime.jsx("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 (jsxRuntime.jsx("div", { className: "bg-surface border border-solid border-border rounded p-4 text-text-muted font-sans text-center", children: message }));
-                                        }
-                                        return (jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-border backdrop-blur-sm rounded p-4", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-highlight mb-4 font-sans border-b-2 border-highlight pb-1", children: "Zahlung" }), jsxRuntime.jsx(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 (jsxRuntime.jsxs("div", { style: cardStyles, children: [jsxRuntime.jsx("h2", { style: { ...sectionHeaderStyles }, children: "Zahlung" }), jsxRuntime.jsx(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() })] }));
+                                        })() })] })] })] }) }));
 }
 
 /**
@@ -8918,6 +9906,7 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                         order: data.order,
                         payments: data.payments,
                         orderItems: data.orderItems,
+                        purchases: data.purchases || [],
                         stripePaymentIntent: data.stripePaymentIntent,
                     });
                     setEventDetails({
@@ -8926,7 +9915,7 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                         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,
@@ -9005,18 +9994,21 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                 fontFamily: "var(--bw-font-family)",
                 padding: "var(--bw-spacing-large)",
                 maxWidth: "100%",
-            }, children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center print-hidden", style: {
+            }, children: [jsxRuntime.jsxs("div", { className: "print-hidden", style: {
                         marginBottom: "var(--bw-spacing-large)",
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "space-between",
-                    }, children: [jsxRuntime.jsxs("h1", { className: "font-bold text-3xl flex items-center gap-2", style: {
+                    }, children: [jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: {
                                         width: "32px",
                                         height: "32px",
@@ -9052,24 +10044,26 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                             color: "var(--bw-text-color)",
                                             margin: "0",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: "Buchungsdetails" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Buchungsdetails" }) }), jsxRuntime.jsxs("div", { className: "space-y-4 print-only:space-y-2 print-only:p-0", children: [jsxRuntime.jsxs("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                        }, children: "Buchungsdetails" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Buchungsdetails" }) }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [jsxRuntime.jsxs("div", { className: "print-detail-grid", style: {
                                                 display: "grid",
                                                 gridTemplateColumns: "1fr 1fr",
                                                 gap: "var(--bw-spacing)",
-                                            }, children: [jsxRuntime.jsxs("div", { className: "print-detail-item", style: { marginBottom: "span 2" }, children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                            }, children: [jsxRuntime.jsxs("div", { className: "print-detail-item", style: { marginBottom: "span 2" }, children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("p", { className: "font-semibold print-detail-value", style: {
+                                                                fontWeight: 500,
+                                                            }, children: "Buchungs-ID" }), jsxRuntime.jsx("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 })] }), jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                            }, children: booking.bookingHash })] }), jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("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" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "print-hidden", style: {
                                                                         backgroundColor: "var(--bw-success-color, #10B981)",
                                                                         color: "white",
@@ -9082,34 +10076,37 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                                                         ? "erfolgreich"
                                                                         : paymentStatus === "canceled" || paymentStatus === "failed"
                                                                             ? "fehlgeschlagen"
-                                                                            : "in Bearbeitung" }), jsxRuntime.jsx("span", { className: "print-only print-status-badge print-status-paid", children: "Bezahlt" })] })] })] }), jsxRuntime.jsxs("div", { className: "print-detail-item print-only:col-span-2", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                            : "in Bearbeitung" }), jsxRuntime.jsx("span", { className: "print-only print-status-badge print-status-paid", children: "Bezahlt" })] })] })] }), jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("div", { className: "print-detail-label", style: {
                                                         color: "var(--bw-text-muted)",
                                                         fontSize: "var(--bw-font-size-small)",
                                                         fontFamily: "var(--bw-font-family)",
-                                                    }, children: "Event" }), jsxRuntime.jsx("p", { className: "font-semibold print-detail-value", style: {
+                                                        fontWeight: 500,
+                                                    }, children: "Event" }), jsxRuntime.jsx("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 })] }), jsxRuntime.jsxs("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                                    }, children: eventDetails.name })] }), jsxRuntime.jsxs("div", { className: "print-detail-grid", style: {
                                                 display: "grid",
                                                 gridTemplateColumns: "1fr 1fr",
                                                 gap: "var(--bw-spacing)",
-                                            }, children: [jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                            }, children: [jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("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) })] }), jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                            }, children: formatDate12(eventDetails.startTime) })] }), jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("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" }), jsxRuntime.jsxs("p", { className: "print-detail-value", style: {
                                                                 fontWeight: "600",
                                                                 color: "var(--bw-text-color)",
@@ -9127,13 +10124,13 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                             color: "var(--bw-text-color)",
                                             margin: "0",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: ["Teilnehmer (", formData.participants.length, ")"] }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsxs("div", { className: "print-section-title", children: ["Teilnehmer (", formData.participants.length, ")"] }) }), jsxRuntime.jsx("div", { className: "print-only:p-0", children: jsxRuntime.jsx("div", { className: "space-y-3 print-only:space-y-1", style: {
+                                        }, children: ["Teilnehmer (", formData.participants.length, ")"] }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsxs("div", { className: "print-section-title", children: ["Teilnehmer (", formData.participants.length, ")"] }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { style: {
                                             display: "flex",
                                             flexDirection: "column",
                                             gap: "var(--bw-spacing-small)",
                                         }, children: formData.participants
                                             .filter((p) => p.name.trim())
-                                            .map((participant, index) => (jsxRuntime.jsx("div", { className: "flex justify-between items-center bg-muted p-3 rounded-lg print-participant", style: {
+                                            .map((participant, index) => (jsxRuntime.jsx("div", { className: "print-participant", style: {
                                                 display: "flex",
                                                 justifyContent: "space-between",
                                                 alignItems: "center",
@@ -9143,7 +10140,7 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                             }, children: jsxRuntime.jsxs("div", { className: "print-participant-info", children: [jsxRuntime.jsx("div", { className: "print-participant-name", style: {
                                                             color: "var(--bw-text-color)",
                                                             fontFamily: "var(--bw-font-family)",
-                                                        }, children: participant.name }), participant.age && (jsxRuntime.jsxs("div", { className: "text-muted-foreground text-sm print-participant-age", style: {
+                                                        }, children: participant.name }), participant.age && (jsxRuntime.jsxs("div", { className: "print-participant-age", style: {
                                                             color: "var(--bw-text-muted)",
                                                             fontSize: "var(--bw-font-size-small)",
                                                             fontFamily: "var(--bw-font-family)",
@@ -9159,7 +10156,14 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                             color: "var(--bw-text-color)",
                                             margin: "0",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: "Zahlungs\u00FCbersicht" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Zahlungs\u00FCbersicht" }) }), jsxRuntime.jsxs("div", { className: "space-y-2 print-only:p-0 print-only:space-y-1", children: [jsxRuntime.jsxs("div", { className: "print-payment-summary print-only", children: [jsxRuntime.jsxs("div", { className: "print-payment-row", children: [jsxRuntime.jsx("span", { children: "Gesamtbetrag" }), jsxRuntime.jsx("span", { children: formatCurrency(booking.total) })] }), jsxRuntime.jsxs("div", { className: "print-payment-row", children: [jsxRuntime.jsx("span", { children: "Bezahlt" }), jsxRuntime.jsx("span", { children: formatCurrency(booking.total) })] })] }), jsxRuntime.jsxs("div", { className: "print-hidden space-y-2", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Bezahlt" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] })] })] })] }), jsxRuntime.jsxs("div", { className: "print-booking-card", style: {
+                                        }, children: "Zahlungs\u00FCbersicht" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Zahlungs\u00FCbersicht" }) }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [jsxRuntime.jsxs("div", { className: "print-hidden", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsxs("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), ")"] }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(eventDetails.price * booking.participantCount) })] }), bookingData.purchases && bookingData.purchases.length > 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: bookingData.purchases.map((purchase) => (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsxs("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), ")"] }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(purchase.totalPrice) })] }, purchase.id))) })), jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)", fontWeight: "600" }, children: "Gesamtbetrag" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)", fontWeight: "700" }, children: formatCurrency(bookingData.order.total) })] })] }), jsxRuntime.jsx("div", { className: "print-payment-summary print-only", children: jsxRuntime.jsxs("div", { className: "print-payment-row", children: [jsxRuntime.jsx("span", { children: "Gesamtbetrag" }), jsxRuntime.jsx("span", { children: formatCurrency(bookingData.order.total) })] }) })] })] }), jsxRuntime.jsxs("div", { className: "print-booking-card", style: {
                                 backgroundColor: "var(--bw-surface-color)",
                                 border: `1px solid var(--bw-border-color)`,
                                 borderRadius: "var(--bw-border-radius)",
@@ -9171,7 +10175,7 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                             color: "var(--bw-text-color)",
                                             margin: "0",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: "Kontaktdaten" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Kontaktdaten" }) }), jsxRuntime.jsxs("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: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), jsxRuntime.jsx("div", { className: "print-booking-card", style: {
+                                        }, children: "Kontaktdaten" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Kontaktdaten" }) }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), jsxRuntime.jsx("div", { className: "print-booking-card", style: {
                                 backgroundColor: "var(--bw-surface-color)",
                                 border: `1px solid var(--bw-border-color)`,
                                 borderRadius: "var(--bw-border-radius)",
@@ -9258,9 +10262,51 @@ function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect,
         onEventTypeSelect(eventType);
         onClose();
     };
-    return (jsxRuntime.jsx(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: jsxRuntime.jsxs("div", { className: "p-6", children: [jsxRuntime.jsxs("div", { className: "mb-6 p-4 bg-background rounded border border-solid border-border", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-sm font-semibold text-highlight mb-2 font-sans", children: eventType.category.name }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: jsxRuntime.jsx("div", { className: "mb-6", children: jsxRuntime.jsx("ul", { className: "list-none p-0 m-0 flex flex-col gap-0.5", children: eventType.highlights
+    return (jsxRuntime.jsx(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: jsxRuntime.jsxs("div", { style: { padding: "24px" }, children: [jsxRuntime.jsxs("div", { style: {
+                        marginBottom: "24px",
+                        padding: "16px",
+                        backgroundColor: "var(--bw-background-color)",
+                        borderRadius: "var(--bw-border-radius)",
+                        border: "1px solid var(--bw-border-color)",
+                    }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: {
+                                        fontSize: "14px",
+                                        fontWeight: 600,
+                                        color: "var(--bw-highlight-color)",
+                                        marginBottom: "8px",
+                                        fontFamily: "var(--bw-font-family)",
+                                    }, children: eventType.category.name }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: jsxRuntime.jsx("div", { style: { marginBottom: "24px" }, children: jsxRuntime.jsx("ul", { style: {
+                                        listStyle: "none",
+                                        padding: 0,
+                                        margin: 0,
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "2px",
+                                    }, children: eventType.highlights
                                         .filter((highlight) => highlight.trim())
-                                        .map((highlight, index) => (jsxRuntime.jsxs("li", { className: "flex items-start gap-2.5 font-sans text-base leading-relaxed text-text-primary", children: [jsxRuntime.jsx("div", { className: "mt-1 shrink-0", children: jsxRuntime.jsx(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (jsxRuntime.jsxs("div", { className: "mb-6 text-text-muted text-base leading-relaxed font-sans px-5", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: {
+                                        .map((highlight, index) => (jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsxRuntime.jsx(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (jsxRuntime.jsxs("div", { style: {
+                        marginBottom: "24px",
+                        color: "var(--bw-text-muted)",
+                        fontSize: "16px",
+                        lineHeight: 1.625,
+                        fontFamily: "var(--bw-font-family)",
+                        padding: "0 20px",
+                    }, children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: {
                                 __html: `
 							.markdown-content p {
 								margin: 0 0 12px 0 !important;
@@ -9332,11 +10378,76 @@ function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect,
 								text-decoration: none !important;
 							}
 						`,
-                            } }), jsxRuntime.jsx("div", { className: "markdown-content", children: Markdown({ children: preprocessMarkdown$1(eventType.description) }) })] })), jsxRuntime.jsxs("div", { className: "flex justify-between items-center mt-8 p-5 bg-background rounded border border-solid border-border", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-bold text-text-primary font-sans text-left", children: eventType.groupedDurations && jsxRuntime.jsx("span", { children: eventType.groupedDurations }) }), jsxRuntime.jsx("div", { className: "text-[clamp(1.72rem,4vw,32px)] font-bold text-text-primary font-sans text-right", children: jsxRuntime.jsxs("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (jsxRuntime.jsxs("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: [jsxRuntime.jsx(IconWave, { size: 20, color: "white" }), "Jetzt buchen"] }))] }), !isAvailable && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center rounded", children: jsxRuntime.jsx("div", { className: "bg-white/90 px-8 py-4 rounded text-text-primary font-semibold text-lg font-sans shadow-md", children: "Ausgebucht" }) }))] }) }));
+                            } }), jsxRuntime.jsx("div", { className: "markdown-content", children: Markdown({ children: preprocessMarkdown$1(eventType.description) }) })] })), jsxRuntime.jsxs("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: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: {
+                                        fontWeight: 700,
+                                        color: "var(--bw-text-color)",
+                                        fontFamily: "var(--bw-font-family)",
+                                        textAlign: "left",
+                                    }, children: eventType.groupedDurations && jsxRuntime.jsx("span", { children: eventType.groupedDurations }) }), jsxRuntime.jsx("div", { style: {
+                                        fontSize: "clamp(1.72rem, 4vw, 32px)",
+                                        fontWeight: 700,
+                                        color: "var(--bw-text-color)",
+                                        fontFamily: "var(--bw-font-family)",
+                                        textAlign: "right",
+                                    }, children: jsxRuntime.jsxs("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (jsxRuntime.jsxs("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: [jsxRuntime.jsx(IconWave, { size: 20, color: "white" }), "Jetzt buchen"] }))] }), !isAvailable && (jsxRuntime.jsx("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: jsxRuntime.jsx("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 = () => (jsxRuntime.jsx("div", { className: "w-full h-full bg-gradient-to-br from-highlight/20 to-highlight flex items-center justify-center overflow-hidden relative", children: jsxRuntime.jsxs("svg", { width: "60%", height: "60%", viewBox: "0 0 120 40", preserveAspectRatio: "xMidYMid meet", className: "absolute opacity-[0.18] blur-[0.5px]", children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("circle", { cx: "20", cy: "25", r: "3", fill: "white", opacity: "0.7" }), jsxRuntime.jsx("circle", { cx: "100", cy: "28", r: "2", fill: "white", opacity: "0.5" })] }) }));
+const EventImagePlaceholder = () => (jsxRuntime.jsx("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: jsxRuntime.jsxs("svg", { width: "60%", height: "60%", viewBox: "0 0 120 40", preserveAspectRatio: "xMidYMid meet", style: {
+            position: "absolute",
+            opacity: 0.18,
+            filter: "blur(0.5px)",
+        }, children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("circle", { cx: "20", cy: "25", r: "3", fill: "white", opacity: "0.7" }), jsxRuntime.jsx("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] = React__default.useState(0);
@@ -9368,16 +10479,92 @@ const ImageCarousel = ({ images, eventName }) => {
     if (images.length === 0) {
         return jsxRuntime.jsx(EventImagePlaceholder, {});
     }
-    return (jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-[inherit]", children: [jsxRuntime.jsx("div", { className: "flex h-full transition-transform duration-400 ease-[cubic-bezier(0.4,0,0.2,1)]", style: {
+    return (jsxRuntime.jsxs("div", { style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+            borderRadius: "inherit",
+        }, children: [jsxRuntime.jsx("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) => (jsxRuntime.jsx("div", { className: "h-full shrink-0 overflow-hidden relative rounded-[inherit]", style: { width: `${100 / images.length}%` }, children: jsxRuntime.jsx("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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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: jsxRuntime.jsx(IconChevronLeft, { size: 20, color: "white" }) }), jsxRuntime.jsx("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: jsxRuntime.jsx(IconChevronRight, { size: 20, color: "white" }) })] })), images.length > 1 && (jsxRuntime.jsx("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 z-[2]", children: images.map((_, index) => (jsxRuntime.jsx("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 && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/10 z-[1] pointer-events-none" }))] }));
+                }, children: images.map((image, index) => (jsxRuntime.jsx("div", { style: {
+                        height: "100%",
+                        flexShrink: 0,
+                        overflow: "hidden",
+                        position: "relative",
+                        borderRadius: "inherit",
+                        width: `${100 / images.length}%`,
+                    }, children: jsxRuntime.jsx("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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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: jsxRuntime.jsx(IconChevronLeft, { size: 20, color: "white" }) }), jsxRuntime.jsx("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: jsxRuntime.jsx(IconChevronRight, { size: 20, color: "white" }) })] })), images.length > 1 && (jsxRuntime.jsx("div", { style: {
+                    position: "absolute",
+                    bottom: "12px",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    display: "flex",
+                    gap: "8px",
+                    zIndex: 2,
+                }, children: images.map((_, index) => (jsxRuntime.jsx("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 && (jsxRuntime.jsx("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
@@ -9403,160 +10590,240 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
     if (isLoading) {
         return jsxRuntime.jsx(EventCardSkeleton, { count: skeletonCount });
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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 ? (jsxRuntime.jsx("div", { className: "max-w-[600px] mx-auto p-6", children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-text-primary m-0 mb-2 font-sans", children: "Keine Veranstaltungen verf\u00FCgbar" }), jsxRuntime.jsx("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." }), jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { className: "text-base", children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (jsxRuntime.jsx("div", { className: "event-type-list p-0", children: jsxRuntime.jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] gap-6 auto-rows-fr", children: eventTypes.map((eventType) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [eventTypes.length === 0 ? (jsxRuntime.jsx("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("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" }), jsxRuntime.jsx("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." }), jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (jsxRuntime.jsx("div", { className: "event-type-list", style: { padding: 0 }, children: jsxRuntime.jsx("div", { style: {
+                        display: "grid",
+                        gridTemplateColumns: "repeat(auto-fill, minmax(350px, 1fr))",
+                        gap: "24px",
+                        gridAutoRows: "1fr",
+                    }, children: eventTypes.map((eventType) => {
                         const isAvailable = eventType.hasAvailableInstances;
-                        return (jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: jsxRuntime.jsx("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" }) }), jsxRuntime.jsx("div", { className: "absolute top-4 left-4 z-10", children: jsxRuntime.jsx("div", { className: "text-[13px] text-surface font-semibold bg-highlight px-2 py-0.5 rounded font-sans", children: eventType.category.name }) }), jsxRuntime.jsx("div", { className: "event-type-img relative w-full h-[300px]", children: jsxRuntime.jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), jsxRuntime.jsxs("div", { className: "event-type-content p-3 px-[18px] flex flex-col justify-between h-[400px]", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("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 }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntime.jsx(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), jsxRuntime.jsx("span", { className: "font-sans text-sm text-text-muted", children: eventType.nextAvailableDate
+                        return (jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: { position: "absolute", top: "16px", right: "16px", zIndex: 10 }, children: jsxRuntime.jsx("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" }) }), jsxRuntime.jsx("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: jsxRuntime.jsx("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 }) }), jsxRuntime.jsx("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: jsxRuntime.jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), jsxRuntime.jsxs("div", { className: "event-type-content", style: {
+                                        padding: "12px 18px",
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        justifyContent: "space-between",
+                                        height: "400px",
+                                    }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("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 }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [jsxRuntime.jsx(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), jsxRuntime.jsx("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" })] }), jsxRuntime.jsx("div", { className: "cursor-pointer", onClick: (e) => {
+                                                                : "Keine Termine frei" })] }), jsxRuntime.jsx("div", { style: { cursor: "pointer" }, onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleShowDetails(eventType);
                                                     }, children: eventType.highlights && eventType.highlights.length > 0 ? (
                                                     // Show highlights as list
-                                                    jsxRuntime.jsx("div", { className: "event-type-highlights my-2.5 min-h-[128px] text-[clamp(0.95rem,2vw,16px)]", children: jsxRuntime.jsx("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
+                                                    jsxRuntime.jsx("div", { className: "event-type-highlights", style: {
+                                                            margin: "10px 0",
+                                                            height: "7.5em", // Fixed height in em units
+                                                            fontSize: "clamp(0.9rem, 2vw, 15px)",
+                                                        }, children: jsxRuntime.jsx("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) => (jsxRuntime.jsxs("li", { className: "flex items-start gap-2 font-sans leading-[1.55] text-text-muted relative max-w-full", children: [jsxRuntime.jsx("div", { className: "mt-1 shrink-0", children: jsxRuntime.jsx(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { className: "text-ellipsis overflow-hidden whitespace-nowrap flex-1", children: highlight.trim() })] }, index))) }) })) : eventType.description ? (jsxRuntime.jsx("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: jsxRuntime.jsx("div", { className: "event-type-markdown", style: {
+                                                                .slice(0, 5)
+                                                                .map((highlight, index) => (jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: { flexShrink: 0, display: "flex", alignItems: "center" }, children: jsxRuntime.jsx(IconCheck, { size: 14, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { style: {
+                                                                            whiteSpace: "nowrap",
+                                                                            overflow: "hidden",
+                                                                            textOverflow: "ellipsis",
+                                                                            flex: 1,
+                                                                        }, children: highlight.trim() })] }, index))) }) })) : eventType.description ? (jsxRuntime.jsx("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: jsxRuntime.jsx("div", { className: "event-type-markdown", style: {
                                                                 display: "-webkit-box",
                                                                 WebkitLineClamp: 5,
                                                                 WebkitBoxOrient: "vertical",
                                                                 overflow: "hidden",
                                                             }, children: Markdown({
                                                                 children: preprocessMarkdown(eventType.description),
-                                                            }) }) })) : (jsxRuntime.jsx("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" })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "event-type-price font-bold text-text-primary font-sans text-right", children: eventType.groupedDurations.length > 1 ? (jsxRuntime.jsx("span", { children: eventType.groupedDurations })) : (jsxRuntime.jsx("span", { children: eventType.cheapestDurationPerDay % 60 === 0
+                                                            }) }) })) : (jsxRuntime.jsx("div", { className: "event-type-desc", style: {
+                                                            margin: "10px 0",
+                                                            height: "7.5em", // Same height as highlights
+                                                        }, children: "\u00A0" })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("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 ? (jsxRuntime.jsx("span", { children: eventType.groupedDurations })) : (jsxRuntime.jsx("span", { children: eventType.cheapestDurationPerDay % 60 === 0
                                                                     ? `${eventType.cheapestDurationPerDay / 60} Stunde${eventType.cheapestDurationPerDay / 60 > 1 ? "n" : ""}`
-                                                                    : `${eventType.cheapestDurationPerDay} Minuten` })) }), jsxRuntime.jsx("div", { className: "event-type-price text-[clamp(1.72rem,4vw,32px)] font-bold text-text-primary font-sans text-right", children: jsxRuntime.jsxs("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), jsxRuntime.jsxs("div", { className: "flex justify-end items-center mt-2.5 gap-3", children: [(eventType.description ||
+                                                                    : `${eventType.cheapestDurationPerDay} Minuten` })) }), jsxRuntime.jsx("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: jsxRuntime.jsxs("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), jsxRuntime.jsxs("div", { style: {
+                                                        display: "flex",
+                                                        justifyContent: "flex-end",
+                                                        alignItems: "center",
+                                                        marginTop: "10px",
+                                                        gap: "12px",
+                                                    }, children: [(eventType.description ||
                                                             (eventType.highlights && eventType.highlights.length > 0)) && (jsxRuntime.jsx("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 && (jsxRuntime.jsxs("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: [jsxRuntime.jsx(IconWave, { size: 15, color: "var(--bw-surface-color)" }), " Jetzt buchen"] }))] })] })] }), !isAvailable && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center", children: jsxRuntime.jsx("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 && (jsxRuntime.jsxs("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: [jsxRuntime.jsx(IconWave, { size: 15, color: "var(--bw-surface-color)" }), " Jetzt buchen"] }))] })] })] }), !isAvailable && (jsxRuntime.jsx("div", { style: {
+                                        position: "absolute",
+                                        inset: 0,
+                                        backgroundColor: "rgba(0, 0, 0, 0.3)",
+                                        backdropFilter: "blur(4px)",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                    }, children: jsxRuntime.jsx("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));
                     }) }) })), jsxRuntime.jsx(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
 }
 
@@ -9658,7 +10925,19 @@ const getPriceDisplayInfo = (price, yearPrices) => {
 // Allocation Badge Component
 const AllocationBadge = ({ availableSpots, maxParticipants, }) => {
     const badgeInfo = getAllocationBadgeInfo(availableSpots, maxParticipants);
-    return (jsxRuntime.jsx("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 (jsxRuntime.jsx("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 || " - " }));
@@ -9666,7 +10945,19 @@ const AllocationBadge = ({ availableSpots, maxParticipants, }) => {
 // Price Badge Component (for special prices)
 const SpecialPriceBadge = ({ price, yearPrices }) => {
     const badgeInfo = getPriceBadgeInfo(price, yearPrices);
-    return (jsxRuntime.jsx("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 (jsxRuntime.jsx("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 || " - " }));
@@ -9674,7 +10965,14 @@ const SpecialPriceBadge = ({ price, yearPrices }) => {
 // Price Display Component (with special price styling)
 const PriceDisplay = ({ price, yearPrices }) => {
     const displayInfo = getPriceDisplayInfo(price, yearPrices);
-    return (jsxRuntime.jsx("span", { className: "inline-flex items-center text-base font-semibold px-2 py-0.5 rounded-sm font-sans", style: {
+    return (jsxRuntime.jsx("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)",
@@ -9741,17 +11039,117 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
         onClose();
         onBackToEventTypes();
     };
+    const footerNav = (jsxRuntime.jsx("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 (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, children: jsxRuntime.jsx("div", { className: "p-6", children: jsxRuntime.jsx("div", { className: "flex flex-col gap-5", children: Array.from({ length: 3 }).map((_, idx) => (jsxRuntime.jsxs("div", { className: "skeleton-shimmer bg-surface border border-solid border-border rounded overflow-hidden", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center p-4 px-5 cursor-pointer border-b border-solid border-border", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "w-20 h-5 bg-border rounded-sm" }), jsxRuntime.jsx("div", { className: "w-4 h-4 bg-border rounded-sm" })] }), jsxRuntime.jsx("div", { className: "w-[70px] h-4 bg-highlight opacity-30 rounded-sm" })] }), jsxRuntime.jsx("div", { className: "flex flex-col gap-3 pt-3 p-3 px-5 pb-5", children: Array.from({ length: 2 }).map((_, eventIdx) => (jsxRuntime.jsxs("div", { className: "relative border border-solid border-border bg-surface rounded p-4 px-5 font-sans", children: [jsxRuntime.jsxs("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 bg-background border border-solid border-border border-t-4 rounded-sm" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: "w-20 h-4 bg-border rounded" }), jsxRuntime.jsx("div", { className: "w-[60px] h-3.5 bg-border rounded" })] })] }), jsxRuntime.jsx("div", { className: "flex flex-col items-end", children: jsxRuntime.jsx("div", { className: "w-[70px] h-5 bg-highlight opacity-30 rounded" }) })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsx("div", { className: "w-[120px] h-4 bg-border rounded" }), jsxRuntime.jsx("div", { className: "w-[50px] h-5 bg-border rounded-lg" })] })] }, eventIdx))) })] }, idx))) }) }) }));
+        return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, footer: footerNav, children: jsxRuntime.jsx("div", { style: { padding: "24px" }, children: jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (jsxRuntime.jsxs("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: [jsxRuntime.jsxs("div", { style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    padding: "16px 20px",
+                                    cursor: "pointer",
+                                    borderBottom: "1px solid var(--bw-border-color)",
+                                }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                    width: "80px",
+                                                    height: "20px",
+                                                    backgroundColor: "var(--bw-border-color)",
+                                                    borderRadius: "var(--bw-border-radius-small)",
+                                                } }), jsxRuntime.jsx("div", { style: {
+                                                    width: "16px",
+                                                    height: "16px",
+                                                    backgroundColor: "var(--bw-border-color)",
+                                                    borderRadius: "var(--bw-border-radius-small)",
+                                                } })] }), jsxRuntime.jsx("div", { style: {
+                                            width: "70px",
+                                            height: "16px",
+                                            backgroundColor: "var(--bw-highlight-color)",
+                                            opacity: 0.3,
+                                            borderRadius: "var(--bw-border-radius-small)",
+                                        } })] }), jsxRuntime.jsx("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "12px",
+                                    paddingTop: "12px",
+                                    padding: "12px 20px 20px 20px",
+                                }, children: Array.from({ length: 2 }).map((_, eventIdx) => (jsxRuntime.jsxs("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: [jsxRuntime.jsxs("div", { style: {
+                                                display: "flex",
+                                                justifyContent: "space-between",
+                                                width: "100%",
+                                                alignItems: "flex-start",
+                                                gap: "12px",
+                                                marginBottom: "4px",
+                                            }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("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)",
+                                                            } }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                                        width: "80px",
+                                                                        height: "16px",
+                                                                        backgroundColor: "var(--bw-border-color)",
+                                                                        borderRadius: "var(--bw-border-radius)",
+                                                                    } }), jsxRuntime.jsx("div", { style: {
+                                                                        width: "60px",
+                                                                        height: "14px",
+                                                                        backgroundColor: "var(--bw-border-color)",
+                                                                        borderRadius: "var(--bw-border-radius)",
+                                                                    } })] })] }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: jsxRuntime.jsx("div", { style: {
+                                                            width: "70px",
+                                                            height: "20px",
+                                                            backgroundColor: "var(--bw-highlight-color)",
+                                                            opacity: 0.3,
+                                                            borderRadius: "var(--bw-border-radius)",
+                                                        } }) })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                        width: "120px",
+                                                        height: "16px",
+                                                        backgroundColor: "var(--bw-border-color)",
+                                                        borderRadius: "var(--bw-border-radius)",
+                                                    } }), jsxRuntime.jsx("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 (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", children: jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[400px] text-center p-4", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h3", { className: "mb-2 font-semibold text-lg text-text-muted font-sans", children: "Keine verf\u00FCgbaren Termine" }), jsxRuntime.jsx("p", { className: "text-text-muted font-sans", children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) }));
+        return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", footer: footerNav, children: jsxRuntime.jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minHeight: "400px",
+                    textAlign: "center",
+                    padding: "16px",
+                }, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h3", { style: {
+                                marginBottom: "8px",
+                                fontWeight: 600,
+                                fontSize: "18px",
+                                color: "var(--bw-text-muted)",
+                                fontFamily: "var(--bw-font-family)",
+                            }, children: "Keine verf\u00FCgbaren Termine" }), jsxRuntime.jsx("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 (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, children: jsxRuntime.jsx("div", { className: "p-6", children: jsxRuntime.jsx("div", { className: "flex flex-col gap-5", children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
+    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsxRuntime.jsx("div", { style: { padding: "20px 10px" }, children: jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
                     const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
-                    return (jsxRuntime.jsxs(React__default.Fragment, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (jsxRuntime.jsx("div", { className: "h-px bg-border my-1" })), jsxRuntime.jsx(Accordion, { title: label, priceInfo: jsxRuntime.jsx("div", { className: "text-base font-medium ml-auto px-2 py-1 rounded-sm", style: {
+                    return (jsxRuntime.jsxs(React__default.Fragment, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (jsxRuntime.jsx("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), jsxRuntime.jsx(Accordion, { title: label, priceInfo: jsxRuntime.jsx("div", { style: {
+                                        fontSize: "16px",
+                                        fontWeight: 500,
+                                        marginLeft: "auto",
+                                        padding: "4px 8px",
+                                        borderRadius: "var(--bw-border-radius-small)",
                                         backgroundColor: monthPriceDisplayInfo
                                             ? monthPriceDisplayInfo.backgroundColor
                                             : "#14532d",
@@ -9761,21 +11159,97 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                         boxShadow: monthPriceDisplayInfo
                                             ? "0 2px 4px rgba(0, 0, 0, 0.2)"
                                             : undefined,
-                                    }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsxRuntime.jsx("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: jsxRuntime.jsx("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 (jsxRuntime.jsxs("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 (jsxRuntime.jsxs("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 && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-slate-900/80 rounded flex items-center justify-center", children: jsxRuntime.jsx("div", { className: "w-8 h-8 text-highlight/80 text-[32px]", children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxRuntime.jsxs("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("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() }), jsxRuntime.jsxs("div", { className: "text-base text-text-primary flex flex-col items-start justify-start leading-tight", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "font-semibold mb-0.5", children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
-                                                                                    formatWeekday(event.endTime) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-text-muted text-sm", children: " - " }), jsxRuntime.jsx("span", { className: "font-semibold mb-0.5", children: formatWeekday(event.endTime) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime) ===
-                                                                                formatWeekday(event.endTime) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-text-muted text-sm", children: formatTime(event.startTime) }), jsxRuntime.jsx("span", { className: "text-text-muted text-sm", children: " - " }), jsxRuntime.jsx("span", { className: "text-text-muted text-sm", children: formatTime(event.endTime) })] })) : (jsxRuntime.jsxs("span", { className: "text-text-muted text-sm", children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxRuntime.jsxs("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" : ""] })] }), jsxRuntime.jsx("div", { className: "text-right flex flex-col items-end", children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("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 && (jsxRuntime.jsx("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: jsxRuntime.jsx("div", { style: {
+                                                            width: "32px",
+                                                            height: "32px",
+                                                            color: "var(--bw-highlight-color)",
+                                                            opacity: 0.8,
+                                                            fontSize: "32px",
+                                                        }, children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxRuntime.jsxs("div", { style: {
+                                                        display: "flex",
+                                                        justifyContent: "space-between",
+                                                        width: "100%",
+                                                        alignItems: "flex-start",
+                                                        gap: "12px",
+                                                        marginBottom: "4px",
+                                                    }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("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() }), jsxRuntime.jsxs("div", { style: {
+                                                                        fontSize: "16px",
+                                                                        color: "var(--bw-text-color)",
+                                                                        display: "flex",
+                                                                        flexDirection: "column",
+                                                                        alignItems: "flex-start",
+                                                                        justifyContent: "flex-start",
+                                                                        lineHeight: 1.25,
+                                                                    }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
+                                                                                    formatWeekday(event.endTime) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime) ===
+                                                                                formatWeekday(event.endTime) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxRuntime.jsxs("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" : ""] })] }), jsxRuntime.jsx("div", { style: {
+                                                                textAlign: "right",
+                                                                display: "flex",
+                                                                flexDirection: "column",
+                                                                alignItems: "flex-end",
+                                                            }, children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("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));
                 }) }) }) }));
 }
@@ -9791,9 +11265,76 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
         return jsxRuntime.jsx(NextEventsSkeleton, { count: 3 });
     }
     if (events.length === 0) {
-        return (jsxRuntime.jsx("div", { className: "mx-auto max-w-[500px] p-4", children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("h3", { className: "font-semibold m-0 text-xl text-text-primary mb-2 font-sans", children: "Keine bevorstehenden Termine" }), jsxRuntime.jsx("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." }), jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { className: "text-base", children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) }));
-    }
-    return (jsxRuntime.jsxs("div", { className: "mx-auto max-w-[500px] p-4 font-sans", children: [jsxRuntime.jsxs("div", { className: "text-center mb-6", children: [jsxRuntime.jsx("h2", { className: "font-semibold m-0 mb-2 text-lg text-text-primary font-sans", children: "N\u00E4chste verf\u00FCgbare Termine" }), jsxRuntime.jsx("p", { className: "m-0 text-base text-text-muted font-sans", children: "W\u00E4hle einen Termin aus oder zeige alle verf\u00FCgbaren Termine an" })] }), jsxRuntime.jsx("div", { className: "flex flex-col gap-3 mb-6", children: events.map((event) => {
+        return (jsxRuntime.jsx("div", { style: { maxWidth: "500px", margin: "0 auto", padding: "16px" }, children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("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" }), jsxRuntime.jsx("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." }), jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) }));
+    }
+    return (jsxRuntime.jsxs("div", { style: {
+            maxWidth: "500px",
+            margin: "0 auto",
+            padding: "16px",
+            fontFamily: "var(--bw-font-family)",
+        }, children: [jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "24px" }, children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("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" })] }), jsxRuntime.jsx("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);
@@ -9815,26 +11356,123 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                         return "var(--bw-highlight-color)";
                     };
                     const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
-                    return (jsxRuntime.jsxs("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 (jsxRuntime.jsxs("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 && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-slate-900/80 rounded", children: jsxRuntime.jsx("div", { className: "animate-spin w-8 h-8 text-highlight/80 text-[32px]", children: "\u27F3" }) })), jsxRuntime.jsxs("div", { className: "flex justify-between w-full items-start gap-3 mb-1", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("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 && (jsxRuntime.jsx("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: jsxRuntime.jsx("div", { style: {
+                                        width: "32px",
+                                        height: "32px",
+                                        color: "var(--bw-highlight-color)",
+                                        fontSize: "32px",
+                                        animation: "spin 1s linear infinite",
+                                    }, children: "\u27F3" }) })), jsxRuntime.jsxs("div", { style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                    alignItems: "flex-start",
+                                    gap: "12px",
+                                    marginBottom: "4px",
+                                }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("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() }), jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-start text-base text-text-primary leading-tight", children: [jsxRuntime.jsx("span", { className: "font-semibold mb-0.5", children: formatWeekday(event.startTime) }), jsxRuntime.jsx("span", { className: "text-text-muted text-sm", children: formatTime(event.startTime) })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end text-right", children: [jsxRuntime.jsx("div", { className: "font-bold text-highlight text-lg", children: event.price !== null ? formatCurrency(event.price) : "Preis auf Anfrage" }), event.deposit && event.deposit > 0 && (jsxRuntime.jsxs("div", { className: "text-xs text-text-muted", children: ["ab ", formatCurrency(event.deposit)] }))] })] }), jsxRuntime.jsxs("h4", { className: "flex items-center font-semibold m-0 text-base text-text-primary leading-tight mb-0.5 gap-2", children: [event.name, jsxRuntime.jsxs("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 && (jsxRuntime.jsx("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() }), jsxRuntime.jsxs("div", { style: {
+                                                    display: "flex",
+                                                    flexDirection: "column",
+                                                    alignItems: "flex-start",
+                                                    justifyContent: "flex-start",
+                                                    fontSize: "16px",
+                                                    color: "var(--bw-text-color)",
+                                                    lineHeight: 1.25,
+                                                }, children: [jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px" }, children: formatWeekday(event.startTime) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) })] })] }), jsxRuntime.jsxs("div", { style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            alignItems: "flex-end",
+                                            textAlign: "right",
+                                        }, children: [jsxRuntime.jsx("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 && (jsxRuntime.jsxs("div", { style: { fontSize: "12px", color: "var(--bw-text-muted)" }, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), jsxRuntime.jsxs("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, jsxRuntime.jsxs("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 && (jsxRuntime.jsx("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 && (jsxRuntime.jsx("div", { className: "text-center", children: jsxRuntime.jsx("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 ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "animate-spin w-4 h-4 text-highlight text-base", children: "\u27F3" }), "L\u00E4dt..."] })) : (showAllButtonText) }) }))] }));
+                }) }), showAllButton && (jsxRuntime.jsx("div", { style: { textAlign: "center" }, children: jsxRuntime.jsx("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 ? (jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [jsxRuntime.jsx("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":
@@ -9895,23 +11533,19 @@ function PromoDialog({ config, onClose, onCtaClick }) {
     const [copied, setCopied] = React__default.useState(false);
     const [isVisible, setIsVisible] = React__default.useState(false);
     const [portalContainer, setPortalContainer] = React__default.useState(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
     React__default.useEffect(() => {
         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
     React__default.useEffect(() => {
         const timer = setTimeout(() => setIsVisible(true), 50);
         return () => clearTimeout(timer);
@@ -9923,7 +11557,6 @@ function PromoDialog({ config, onClose, onCtaClick }) {
             setTimeout(() => setCopied(false), 2000);
         }
         catch {
-            // Fallback for older browsers
             const textArea = document.createElement("textarea");
             textArea.value = discountCode;
             document.body.appendChild(textArea);
@@ -9942,33 +11575,74 @@ function PromoDialog({ config, onClose, onCtaClick }) {
         setIsVisible(false);
         setTimeout(onCtaClick, 200);
     };
-    // Don't render until portal container is ready
     if (!portalContainer) {
         return null;
     }
-    const dialogContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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 } }), jsxRuntime.jsx("div", { className: "fixed z-[61] w-[92%] max-w-[440px] transition-all duration-300", style: {
+    const dialogContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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,
+                } }), jsxRuntime.jsx("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: jsxRuntime.jsxs("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: jsxRuntime.jsxs("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) => (jsxRuntime.jsx("div", { className: "absolute pointer-events-none z-[1] text-white opacity-0", style: {
+                            Array.from({ length: 15 }).map((_, i) => (jsxRuntime.jsx("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))), jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center overflow-hidden h-[180px]", style: {
+                                }, children: "\u2744" }, i))), jsxRuntime.jsxs("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 && (jsxRuntime.jsx("img", { src: themeConfig.backgroundImage, alt: "Background", className: "absolute inset-0 w-full h-full object-cover opacity-60" })), jsxRuntime.jsx("div", { className: "absolute inset-0", style: {
+                            }, children: [themeConfig.backgroundImage && (jsxRuntime.jsx("img", { src: themeConfig.backgroundImage, alt: "Background", style: {
+                                        position: "absolute",
+                                        inset: 0,
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                        opacity: 0.6,
+                                    } })), jsxRuntime.jsx("div", { style: {
+                                        position: "absolute",
+                                        inset: 0,
                                         background: `linear-gradient(180deg, ${themeConfig.primaryColor}4d 0%, ${themeConfig.primaryColor}e6 100%)`,
-                                    } }), jsxRuntime.jsx("div", { className: "relative z-[2] text-[64px] drop-shadow-[0_8px_16px_rgba(0,0,0,0.4)]", style: {
+                                    } }), jsxRuntime.jsx("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) => (jsxRuntime.jsx("div", { className: "absolute", style: {
+                                    themeConfig.decorations.map((decoration, i) => (jsxRuntime.jsx("div", { style: {
+                                            position: "absolute",
                                             top: i === 0 ? "16px" : "20px",
                                             left: i === 0 ? "20px" : "auto",
                                             right: i === 1 ? "20px" : "auto",
@@ -9976,23 +11650,325 @@ function PromoDialog({ config, onClose, onCtaClick }) {
                                             animation: themeConfig.animation?.sparkleEnabled
                                                 ? `promo-sparkle 2s ease-in-out infinite ${i * 0.5}s`
                                                 : undefined,
-                                        }, children: decoration }, i)))] }), jsxRuntime.jsx("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" }), jsxRuntime.jsxs("div", { className: "relative text-center z-[2] px-7 pt-7 pb-8", children: [jsxRuntime.jsx("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 }), jsxRuntime.jsxs("p", { className: "text-[17px] text-white/90 mb-5 leading-relaxed", children: [config.subtitle, config.discountAmount && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("br", {}), jsxRuntime.jsxs("strong", { style: { color: themeConfig.secondaryColor }, children: [config.discountAmount, " Rabatt"] }), " ", "auf alle Kurse!"] }))] }), config.discountCode && (jsxRuntime.jsxs("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: [jsxRuntime.jsx("p", { className: "uppercase font-semibold text-[11px] tracking-[1.5px] text-slate-500 mb-2.5", children: "Dein Geschenk-Code" }), jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3", children: [jsxRuntime.jsx("div", { className: "px-5 py-2.5 rounded-[10px]", style: {
+                                        }, children: decoration }, i)))] }), jsxRuntime.jsx("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" }), jsxRuntime.jsxs("div", { style: {
+                                position: "relative",
+                                textAlign: "center",
+                                zIndex: 2,
+                                padding: "28px 28px 32px 28px",
+                            }, children: [jsxRuntime.jsx("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 }), jsxRuntime.jsxs("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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("br", {}), jsxRuntime.jsxs("strong", { style: { color: themeConfig.secondaryColor }, children: [config.discountAmount, " Rabatt"] }), " ", "auf alle Kurse!"] }))] }), config.discountCode && (jsxRuntime.jsxs("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: [jsxRuntime.jsx("p", { style: {
+                                                textTransform: "uppercase",
+                                                fontWeight: 600,
+                                                fontSize: "11px",
+                                                letterSpacing: "1.5px",
+                                                color: "#64748b",
+                                                marginBottom: "10px",
+                                                margin: "0 0 10px 0",
+                                            }, children: "Dein Geschenk-Code" }), jsxRuntime.jsxs("div", { style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                gap: "12px",
+                                            }, children: [jsxRuntime.jsx("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: jsxRuntime.jsx("span", { className: "font-black text-[28px] text-white tracking-[6px] drop-shadow-[0_2px_4px_rgba(0,0,0,0.2)]", children: discountCode }) }), jsxRuntime.jsx("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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2713 Kopiert!" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("div", { className: "flex justify-center gap-2 mb-5 flex-wrap", children: config.activities.map((activity) => (jsxRuntime.jsx("span", { className: "font-medium bg-white/15 backdrop-blur-sm px-3 py-1.5 rounded-[20px] text-[13px] text-white", children: activity }, activity))) })), jsxRuntime.jsxs("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: jsxRuntime.jsx("span", { style: {
+                                                            fontWeight: 900,
+                                                            fontSize: "28px",
+                                                            color: "white",
+                                                            letterSpacing: "6px",
+                                                            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))",
+                                                        }, children: discountCode }) }), jsxRuntime.jsx("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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2713 Kopiert!" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), jsxRuntime.jsx("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 && (jsxRuntime.jsx("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "center",
+                                        gap: "8px",
+                                        marginBottom: "20px",
+                                        flexWrap: "wrap",
+                                    }, children: config.activities.map((activity) => (jsxRuntime.jsx("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))) })), jsxRuntime.jsxs("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, jsxRuntime.jsx("span", { children: "\u2192" })] }), config.validityText && (jsxRuntime.jsx("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, jsxRuntime.jsx("span", { children: "\u2192" })] }), config.validityText && (jsxRuntime.jsx("p", { style: {
+                                        marginTop: "16px",
+                                        fontSize: "12px",
+                                        color: "rgba(255, 255, 255, 0.6)",
+                                        margin: "16px 0 0 0",
+                                    }, children: config.validityText }))] })] }) })] }));
     return ReactDOM.createPortal(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 (jsxRuntime.jsxs("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: [jsxRuntime.jsx("div", { style: checkboxContainerStyles, children: jsxRuntime.jsx("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "16px", height: "16px" }, children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) })) }) }), jsxRuntime.jsx("div", { style: imageContainerStyles, children: upsell.image ? (jsxRuntime.jsx("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (jsxRuntime.jsx("div", { style: imagePlaceholderStyles, children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: jsxRuntime.jsx("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [jsxRuntime.jsx("h4", { style: nameStyles, children: upsell.name }), upsell.description && (jsxRuntime.jsx("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (jsxRuntime.jsx("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (jsxRuntime.jsxs("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (jsxRuntime.jsxs("div", { style: eventInfoStyles, children: [jsxRuntime.jsxs("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",
+                                    })] }), jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)" }, children: [upsell.suggestedEventInstance.availableSpots, " Pl\u00E4tze frei"] })] }))] }), jsxRuntime.jsxs("div", { style: priceContainerStyles, children: [jsxRuntime.jsxs("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/Person"] }), participantCount > 1 && (jsxRuntime.jsxs("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] }))] }), isDisabled && (jsxRuntime.jsx("div", { style: unavailableOverlayStyles, children: jsxRuntime.jsx("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 = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: "\u2190 Zur\u00FCck" }), jsxRuntime.jsx("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: selectedCount === 0 ? "Weiter ohne Extras" : `Weiter` })] }));
+    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: onClose, title: "Extras hinzuf\u00FCgen", footer: footerContent, children: jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), jsxRuntime.jsx("span", { children: "Lade verf\u00FCgbare Extras..." })] })), !isLoading && upsells.length === 0 && (jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: jsxRuntime.jsx("p", { children: "Keine Extras f\u00FCr diese Buchung verf\u00FCgbar." }) })), !isLoading && upsells.length > 0 && (jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (jsxRuntime.jsx(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (jsxRuntime.jsxs("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: [jsxRuntime.jsxs("span", { style: textStyles.muted, children: [selectedCount, " ", selectedCount === 1 ? "Extra" : "Extras", " ausgew\u00E4hlt"] }), jsxRuntime.jsxs("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
@@ -10014,6 +11990,11 @@ function UniversalBookingWidget({ config: baseConfig }) {
     const [selectedEventType, setSelectedEventType] = React__default.useState(null);
     const [eventInstances, setEventInstances] = React__default.useState([]);
     const [selectedEventInstance, setSelectedEventInstance] = React__default.useState(null);
+    // Upsells state
+    const [upsells, setUpsells] = React__default.useState([]);
+    const [selectedUpsells, setSelectedUpsells] = React__default.useState([]);
+    const [isLoadingUpsells, setIsLoadingUpsells] = React__default.useState(false);
+    const [tempParticipantCount, setTempParticipantCount] = React__default.useState(1); // Used during upsell step
     // State for upcoming events (next-events view mode)
     const [upcomingEvents, setUpcomingEvents] = React__default.useState([]);
     const [showingPreview, setShowingPreview] = React__default.useState(true);
@@ -10033,6 +12014,7 @@ function UniversalBookingWidget({ config: baseConfig }) {
     const [systemConfig, setSystemConfig] = React__default.useState(null);
     // PERFORMANCE OPTIMIZATION: Lazy component loading
     const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = React__default.useState(false);
+    const [shouldRenderUpsells, setShouldRenderUpsells] = React__default.useState(false);
     const [shouldRenderBookingForm, setShouldRenderBookingForm] = React__default.useState(false);
     // Promo dialog state
     const [showPromoDialog, setShowPromoDialog] = React__default.useState(false);
@@ -10307,15 +12289,42 @@ function UniversalBookingWidget({ config: baseConfig }) {
             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 (jsxRuntime.jsx("div", { className: "max-w-2xl mx-auto p-6", children: jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: [jsxRuntime.jsx("h2", { className: "text-red-800 font-semibold", children: "Konfigurationsfehler" }), jsxRuntime.jsx("p", { className: "text-red-600", children: "organizationId muss in der Konfiguration angegeben werden." })] }) }));
+        return (jsxRuntime.jsx("div", { style: { maxWidth: "672px", margin: "0 auto", padding: "24px" }, children: jsxRuntime.jsxs("div", { style: { backgroundColor: "#fef2f2", border: "1px solid #fecaca", borderRadius: "var(--bw-border-radius)", padding: "16px" }, children: [jsxRuntime.jsx("h2", { style: { color: "#991b1b", fontWeight: 600, fontFamily: "var(--bw-font-family)", margin: "0 0 8px 0" }, children: "Konfigurationsfehler" }), jsxRuntime.jsx("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 (jsxRuntime.jsx("div", { className: "max-w-2xl mx-auto p-6", children: jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: [jsxRuntime.jsx("h2", { className: "text-red-800 font-semibold", children: "Konfigurationsfehler" }), jsxRuntime.jsx("p", { className: "text-red-600", children: "Es muss eine der folgenden Optionen angegeben werden: eventInstanceId, categoryId, eventTypeIds oder eventTypeId." })] }) }));
+        return (jsxRuntime.jsx("div", { style: { maxWidth: "672px", margin: "0 auto", padding: "24px" }, children: jsxRuntime.jsxs("div", { style: { backgroundColor: "#fef2f2", border: "1px solid #fecaca", borderRadius: "var(--bw-border-radius)", padding: "16px" }, children: [jsxRuntime.jsx("h2", { style: { color: "#991b1b", fontWeight: 600, fontFamily: "var(--bw-font-family)", margin: "0 0 8px 0" }, children: "Konfigurationsfehler" }), jsxRuntime.jsx("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) => {
@@ -10333,6 +12342,32 @@ function UniversalBookingWidget({ config: baseConfig }) {
     // 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);
@@ -10363,6 +12398,30 @@ function UniversalBookingWidget({ config: baseConfig }) {
         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) {
@@ -10432,7 +12491,83 @@ function UniversalBookingWidget({ config: baseConfig }) {
     };
     // Error state
     if (error) {
-        return (jsxRuntime.jsx(StyleProvider, { config: config, children: jsxRuntime.jsx("div", { className: "max-w-[600px] mx-auto p-6", children: jsxRuntime.jsxs("div", { className: "bg-surface border border-solid border-error rounded p-6 text-center font-sans", children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-text-primary m-0 mb-2 font-sans", children: "Buchungen vor\u00FCbergehend nicht verf\u00FCgbar" }), jsxRuntime.jsx("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." }), jsxRuntime.jsxs("details", { className: "mb-6 text-left bg-background rounded-sm p-1 border border-solid border-border", children: [jsxRuntime.jsx("summary", { className: "cursor-pointer font-medium text-text-muted text-sm font-sans mb-2", children: "Technische Details anzeigen" }), jsxRuntime.jsx("code", { className: "block text-sm text-text-muted font-mono break-words whitespace-pre-wrap", children: error })] }), jsxRuntime.jsx("div", { className: "flex gap-4 justify-center flex-wrap", children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { className: "text-base", children: "\uD83D\uDD04" }), "Seite neu laden"] }) }), jsxRuntime.jsx("p", { className: "text-text-muted text-sm mt-6 m-0 font-sans", children: "Falls das Problem weiterhin besteht, kontaktiere bitte den Support." })] }) }) }));
+        return (jsxRuntime.jsx(StyleProvider, { config: config, children: jsxRuntime.jsx("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("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" }), jsxRuntime.jsx("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." }), jsxRuntime.jsxs("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: [jsxRuntime.jsx("summary", { style: {
+                                        cursor: "pointer",
+                                        fontWeight: 500,
+                                        color: "var(--bw-text-muted)",
+                                        fontSize: "14px",
+                                        fontFamily: "var(--bw-font-family)",
+                                        marginBottom: "8px",
+                                    }, children: "Technische Details anzeigen" }), jsxRuntime.jsx("code", { style: {
+                                        display: "block",
+                                        fontSize: "14px",
+                                        color: "var(--bw-text-muted)",
+                                        fontFamily: "ui-monospace, monospace",
+                                        wordBreak: "break-word",
+                                        whiteSpace: "pre-wrap",
+                                    }, children: error })] }), jsxRuntime.jsx("div", { style: {
+                                display: "flex",
+                                gap: "16px",
+                                justifyContent: "center",
+                                flexWrap: "wrap",
+                            }, children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] }) }), jsxRuntime.jsx("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) {
@@ -10448,13 +12583,16 @@ function UniversalBookingWidget({ config: baseConfig }) {
                                 setCurrentStep("eventTypes");
                                 setShowingPreview(true);
                                 setEventDetails(null);
-                            }, systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), jsxRuntime.jsx(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");
@@ -10484,7 +12622,23 @@ function UniversalBookingWidget({ config: baseConfig }) {
                             }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && config.promo && (jsxRuntime.jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
-        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, className: "flex justify-center items-center min-h-[120px]", children: [jsxRuntime.jsx("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 (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, style: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        minHeight: "120px",
+                    }, children: [jsxRuntime.jsx("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);
@@ -10494,13 +12648,16 @@ function UniversalBookingWidget({ config: baseConfig }) {
                                     setShouldRenderInstanceSelection(true);
                                 }
                             }, children: config.buttonText ||
-                                (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                (isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(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");
@@ -10538,12 +12695,15 @@ function UniversalBookingWidget({ config: baseConfig }) {
         };
     };
     const backHandlers = getBackHandlers();
-    return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+    return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(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");
@@ -10579,7 +12739,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{: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)}}@layer base{*,::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}}@layer utilities{.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}}}@layer base{.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}}@layer utilities{.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