@heycater/qualification-funnel 1.19.21 → 1.19.23

package/dist/index.esm.js

@@ -2,13 +2,13 @@ var _a;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { createContext, useContext, useMemo, useReducer, useCallback, useEffect, useRef, useState, isValidElement, cloneElement, Children, forwardRef, useLayoutEffect } from "react";
-import { darken as darken$1, lighten as lighten$1, ButtonBase as ButtonBase$2, Typography as Typography$1, useMediaQuery, Input as Input$1, IconButton as IconButton$2, useTheme as useTheme$1, FormControlLabel, Tooltip, Menu, Hidden, SnackbarContent, Snackbar, TextField, CircularProgress, Modal, ThemeProvider as ThemeProvider$1, StylesProvider as StylesProvider$1, CssBaseline } from "@material-ui/core";
+import { darken as darken$1, lighten as lighten$1, ButtonBase as ButtonBase$2, Typography as Typography$1, useMediaQuery, Input as Input$2, IconButton as IconButton$2, useTheme as useTheme$1, FormControlLabel, Tooltip, Menu, Hidden, SnackbarContent, Snackbar, TextField, CircularProgress, Modal, ThemeProvider as ThemeProvider$1, StylesProvider as StylesProvider$1, CssBaseline } from "@material-ui/core";
 import { useTranslation, initReactI18next, I18nextProvider } from "react-i18next";
-import styled, { css as css$1, createGlobalStyle, ThemeProvider } from "styled-components";
+import styled, { css as css$1, keyframes, createGlobalStyle, ThemeProvider } from "styled-components";
 import { gql, useQuery, useClient, mapExchange, Client, cacheExchange, fetchExchange, Provider } from "urql";
 import { breakpoints as breakpoints$1, compose, display, flexbox, palette, positions, sizing, spacing, typography, borders, shadows as shadows$1, createUnarySpacing } from "@material-ui/system";
 import i18next from "i18next";
-import { DayPicker, useActiveModifiers, useDayPicker, Day, Row, useNavigation, IconLeft, IconRight } from "react-day-picker";
+import { DayPicker, useActiveModifiers, useDayPicker, Day, Row as Row$1, useNavigation, IconLeft, IconRight } from "react-day-picker";
 import { useFormikContext, useField, getIn as getIn$1, Form, Formik, Field } from "formik";
 import * as ReactDOM from "react-dom";
 import { useInView } from "react-intersection-observer";
@@ -298,12 +298,12 @@ const FormControl = ({
   if (required) {
     classes.push("hc-form-control--required");
   }
-  return /* @__PURE__ */ jsx(FormWrapper$2, { className: classes.join(" "), children: childrenWithProps });
+  return /* @__PURE__ */ jsx(FormWrapper$3, { className: classes.join(" "), children: childrenWithProps });
 };
-const FormWrapper$2 = styled.div`
+const FormWrapper$3 = styled.div`
   margin-bottom: ${(props) => props.theme.spacing(2)}px;
 `;
-const Input = styled.input`
+const Input$1 = styled.input`
   background-color: ${(props) => props.theme.palette.text.disabled};
   font-family: ${(props) => props.theme.typography.fontFamily};
   font-weight: ${(props) => props.theme.typography.body1.fontWeight};
@@ -398,7 +398,7 @@ const ProgressIndicator = ({ stepCount, currentStep }) => {
       " ",
       t2("qualification:steps")
     ] }),
-    /* @__PURE__ */ jsx(ProgressBar, { percent: percent2 })
+    /* @__PURE__ */ jsx(ProgressBar$1, { percent: percent2 })
   ] });
 };
 const Wrapper$6 = styled.div`
@@ -414,7 +414,7 @@ const Wrapper$6 = styled.div`
     gap: ${({ theme }) => theme.spacing(2)}px;
   }
 `;
-const ProgressBar = styled.div`
+const ProgressBar$1 = styled.div`
   height: 10px;
   background: ${(props) => props.theme.palette.grey[100]};
   position: relative;
@@ -459,7 +459,7 @@ const StyledContainer$1 = styled(Box).withConfig({
 
   width: clamp(100px, 100%, var(--maxWidthIncludingPadding));
 `;
-const Container = StyledContainer$1;
+const Container$4 = StyledContainer$1;
 const QUALIFICATION_STATUS = {
   initial: "initial",
   answering: "answering",
@@ -4991,6 +4991,7 @@ const CITY_VALUES = [
   "duesseldorf",
   "koeln",
   "stuttgart",
+  "wien",
   "london",
   "other"
 ];
@@ -7157,6 +7158,109 @@ const teamSizeQuestion = Object.freeze(
     ]
   })
 );
+const EVENT_TYPES = [
+  "lunch",
+  "breakfast",
+  "party",
+  "meeting",
+  "conference",
+  "workshop",
+  "other"
+];
+const EVENT_TYPE_MAPPINGS = {
+  lunch: {
+    service_type: "meetings_events",
+    catering_category: "business_lunch"
+  },
+  breakfast: {
+    service_type: "meetings_events",
+    catering_category: "breakfast"
+  },
+  party: {
+    service_type: "meetings_events",
+    catering_category: "buffet"
+  },
+  meeting: {
+    service_type: "meetings_events",
+    catering_category: "fingerfood"
+  },
+  conference: {
+    service_type: "full_service_event",
+    catering_category: "buffet"
+  },
+  workshop: {
+    service_type: "meetings_events",
+    catering_category: "business_lunch"
+  },
+  other: {
+    service_type: "meetings_events",
+    catering_category: "other"
+  }
+};
+const EVENT_TYPE_ITEMS = [
+  {
+    value: "lunch",
+    labelDe: "Mittagessen",
+    labelEn: "Lunch",
+    iconName: "lunch"
+  },
+  {
+    value: "breakfast",
+    labelDe: "Frühstück",
+    labelEn: "Breakfast",
+    iconName: "breakfast"
+  },
+  {
+    value: "party",
+    labelDe: "Firmenfeier",
+    labelEn: "Company Party",
+    iconName: "party"
+  },
+  {
+    value: "meeting",
+    labelDe: "Meeting",
+    labelEn: "Meeting",
+    iconName: "meeting"
+  },
+  {
+    value: "conference",
+    labelDe: "Konferenz/Messe",
+    labelEn: "Conference/Trade Show",
+    iconName: "conference"
+  },
+  {
+    value: "workshop",
+    labelDe: "Workshop/Teamtag",
+    labelEn: "Workshop/Team Day",
+    iconName: "workshop"
+  }
+];
+function mapEventTypeToServiceAndCategory(eventType) {
+  return EVENT_TYPE_MAPPINGS[eventType];
+}
+const eventTypeQuestion = Object.freeze(
+  createSelectorQuestion({
+    id: "event_type",
+    getValidator: () => {
+      return yup.mixed().oneOf([...EVENT_TYPES]).required();
+    },
+    getItems: () => {
+      return EVENT_TYPE_ITEMS.map((item) => ({
+        value: item.value,
+        labelEn: item.labelEn,
+        labelDe: item.labelDe
+      }));
+    }
+  })
+);
+const dateUnknownQuestion = Object.freeze(
+  createQuestion({
+    id: "date_unknown",
+    getValidator: () => {
+      return yup.boolean();
+    }
+  })
+);
 const questions$2 = {
   leadType: leadTypeQuestion,
   peopleCount: peopleCountQuestion,
@@ -7187,7 +7291,9 @@ const SCHEMA_QUESTIONS = {
   number_of_vegetarians: numberOfVegetariansQuestion,
   number_of_carnivore: numberOfCarnivoresQuestion,
   team_size: teamSizeQuestion,
-  delivery_frequency: deliveryFrequencyQuestion
+  delivery_frequency: deliveryFrequencyQuestion,
+  event_type: eventTypeQuestion,
+  date_unknown: dateUnknownQuestion
 };
 const STEP_IDS = {
   serviceSelection: "service_selection",
@@ -8444,7 +8550,7 @@ function isDataInStorageInvalid(data) {
       })
     });
     validator.validateSync(data);
-    const cityItems = cityQuestion.getItems({});
+    const cityItems = cityQuestion.getItems({ answers: {} });
     if (cityItems.length === 1) {
       const storedData = data;
       const cityStep2 = (_b = (_a2 = storedData.qualification) == null ? void 0 : _a2.steps) == null ? void 0 : _b.find((s3) => s3.id === "city");
@@ -8474,7 +8580,7 @@ const EmbeddedQuestionControls = ({ onBackground, mode = "embedded" }) => {
   const isLastStep = Boolean(step2 && stepIndex === steps2.length - 1);
   const enabledSteps = state.qualification.steps.filter((q2) => !q2.disabled);
   const StyledButton = isFullscreen ? FullscreenButton : EmbeddedButton;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Container, { size: "sm", display: "flex", flexDirection: "column", children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Container$4, { size: "sm", display: "flex", flexDirection: "column", children: [
     !isFullscreen && /* @__PURE__ */ jsx(
       Box,
       {
@@ -9532,7 +9638,7 @@ const EmbeddedQuestionLayout = ({
   title,
   subtitle,
   content,
-  containerSize = "sm",
+  containerSize,
   disableGutters,
   answerContainerSize = 826,
   side,
@@ -9541,6 +9647,7 @@ const EmbeddedQuestionLayout = ({
   ...boxProps
 }) => {
   const isFullscreen = mode === "fullscreen";
+  const effectiveContainerSize = containerSize ?? (isFullscreen ? "md" : "sm");
   const { state } = useQualification();
   const isMobile = useBreakpointDown("sm");
   if (state.status !== QUALIFICATION_STATUS.answered && state.status !== QUALIFICATION_STATUS.answering && state.status !== QUALIFICATION_STATUS.qualifiedForRequest) {
@@ -9551,9 +9658,9 @@ const EmbeddedQuestionLayout = ({
   const stepIndex = step2 ? steps2.findIndex(({ id }) => id === step2.id) : -1;
   const showSelectedAnswerPills = state.status === QUALIFICATION_STATUS.answering && stepIndex > 0;
   return /* @__PURE__ */ jsxs(
-    Container,
+    Container$4,
     {
-      size: containerSize,
+      size: effectiveContainerSize,
       disableGutters,
       ...isFullscreen ? { style: { display: "flex", flexDirection: "column", flexGrow: 1 } } : {},
       ...boxProps,
@@ -9604,7 +9711,7 @@ const EmbeddedQuestionLayout = ({
                             /* @__PURE__ */ jsx(Box, { textAlign: "center", mb: isFullscreen ? 4 : 2, maxWidth: isFullscreen ? 650 : 550, mx: "auto", children: typeof title === "string" ? isFullscreen ? /* @__PURE__ */ jsxs(FullscreenTitle, { children: [
                               title,
                               " "
-                            ] }) : /* @__PURE__ */ jsxs(Subtitle$1, { variant: "subtitle2", children: [
+                            ] }) : /* @__PURE__ */ jsxs(Subtitle$2, { variant: "subtitle2", children: [
                               title,
                               " "
                             ] }) : title }),
@@ -9622,7 +9729,7 @@ const EmbeddedQuestionLayout = ({
                 }
               ),
               !isFullscreen && /* @__PURE__ */ jsx(
-                Container,
+                Container$4,
                 {
                   mt: "auto",
                   size: answerContainerSize,
@@ -9642,7 +9749,7 @@ const EmbeddedQuestionLayout = ({
           }
         ),
         isFullscreen && /* @__PURE__ */ jsxs(StickyFooter, { children: [
-          showSelectedAnswerPills && /* @__PURE__ */ jsx(Container, { size: answerContainerSize, disableGutters, children: /* @__PURE__ */ jsx(
+          showSelectedAnswerPills && /* @__PURE__ */ jsx(Container$4, { size: answerContainerSize, disableGutters, children: /* @__PURE__ */ jsx(
             Box,
             {
               bgcolor: "white",
@@ -9679,7 +9786,7 @@ const WrapperBox$1 = styled(Box)`
 const TextWrapper = styled.div`
   color: var(--embedded-text-color, inherit);
 `;
-const Subtitle$1 = styled(Typography)`
+const Subtitle$2 = styled(Typography)`
   font-weight: 600;
   font-size: 16px;
   white-space: pre-line;
@@ -9704,6 +9811,10 @@ const FullscreenTitle = styled.h2`
   ${({ theme }) => theme.breakpoints.up("md")} {
     font-size: 30px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    font-size: 34px;
+  }
 `;
 const StickyFooter = styled.div`
   position: sticky;
@@ -9813,7 +9924,7 @@ const QuantityStepperField = ({
     )
   ] });
 };
-const StepperInput$1 = styled(Input$1)`
+const StepperInput$1 = styled(Input$2)`
   .MuiInputBase-input {
     text-align: center !important;
     background-color: ${(props) => props.theme.palette.text.disabled} !important;
@@ -10038,7 +10149,7 @@ function PriceStepperField({
     )
   ] });
 }
-const StepperInput = styled(Input$1)`
+const StepperInput = styled(Input$2)`
   .MuiInputBase-input {
     text-align: center !important;
     background-color: ${(props) => props.theme.palette.text.disabled} !important;
@@ -10156,6 +10267,9 @@ function trackAnswerSelected(context, answer) {
   if (context.city) {
     properties.city = context.city;
   }
+  if (context.funnel_variant) {
+    properties.funnel_variant = context.funnel_variant;
+  }
   captureEvent("qf_v14_answer_selected", properties);
 }
 function trackFormSubmitted(context, metadata) {
@@ -10174,6 +10288,9 @@ function trackFormSubmitted(context, metadata) {
   if (context.city) {
     properties.city = context.city;
   }
+  if (context.funnel_variant) {
+    properties.funnel_variant = context.funnel_variant;
+  }
   captureEvent("qf_v14_form_submitted", properties);
 }
 function trackCompleted(context) {
@@ -10191,6 +10308,9 @@ function trackCompleted(context) {
   if (context.city) {
     properties.city = context.city;
   }
+  if (context.funnel_variant) {
+    properties.funnel_variant = context.funnel_variant;
+  }
   captureEvent("qf_v14_completed", properties);
 }
 function trackAbandoned(context, lastStep) {
@@ -10210,6 +10330,9 @@ function trackAbandoned(context, lastStep) {
   if (context.city) {
     properties.city = context.city;
   }
+  if (context.funnel_variant) {
+    properties.funnel_variant = context.funnel_variant;
+  }
   captureEvent("qf_v14_abandoned", properties);
 }
 function trackStarted(context, initialStepId) {
@@ -10218,6 +10341,9 @@ function trackStarted(context, initialStepId) {
     session_id: context.session_id,
     initial_step: initialStepId
   };
+  if (context.funnel_variant) {
+    properties.funnel_variant = context.funnel_variant;
+  }
   captureEvent("qf_v14_started", properties);
   trackOptimeleonConversion("funnel_started");
 }
@@ -10476,7 +10602,7 @@ function BudgetQuestionWithPeopleCount() {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx(Divider, { my: 4 }),
+    /* @__PURE__ */ jsx(Divider$1, { my: 4 }),
     /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(Typography, { as: "label", htmlFor: pricePerPersonQuestion.id, children: t2("common:questions.budgetProPerson") }) }),
     /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(
       PriceStepperField,
@@ -10523,7 +10649,7 @@ const ErrorWrapper = styled.div`
   color: #F95524;
   font-weight: 500;
 `;
-const Divider = styled(Box)`
+const Divider$1 = styled(Box)`
   height: 2px;
   background-color: ${({ theme }) => theme.palette.grey[100]};
   width: 100%;
@@ -10542,7 +10668,7 @@ const Wrapper$4 = styled.div`
     grid-template-columns: 1fr auto;
   }
 `;
-const TilesWrapper = styled(Box)`
+const TilesWrapper$2 = styled(Box)`
   display: flex;
   flex-direction: row;
   height: auto;
@@ -10558,6 +10684,11 @@ const TilesWrapper = styled(Box)`
     flex-wrap: wrap;
     justify-content: center;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    max-width: 1200px;
+    gap: ${({ theme, $size }) => $size === "sm" ? theme.spacing(2) : theme.spacing(3)}px;
+  }
 `;
 const StyledTileTypography = styled(Typography)`
   line-height: 172.5%;
@@ -10646,7 +10777,7 @@ const BudgetRangeTiles = ({
     onSelect(range2);
     trackAnswer("budget_range", range2);
   };
-  return /* @__PURE__ */ jsx(TilesWrapper, { children: BUDGET_RANGE_ITEMS.map((item) => {
+  return /* @__PURE__ */ jsx(TilesWrapper$2, { children: BUDGET_RANGE_ITEMS.map((item) => {
     const label = isGerman ? item.labelDe : item.labelEn;
     return /* @__PURE__ */ jsxs(
       BudgetTile,
@@ -10942,7 +11073,7 @@ function DatePickerEmbedded() {
           DayPicker,
           {
             components: {
-              Caption: CustomCaption,
+              Caption: CustomCaption$1,
               Row: OnlyAfterToday,
               Day: DayWithOutsideMonthLabel
             },
@@ -10983,7 +11114,7 @@ function DayWithOutsideMonthLabel(props) {
   }
   return /* @__PURE__ */ jsx(Day, { ...props });
 }
-function CustomCaption(props) {
+function CustomCaption$1(props) {
   const { goToMonth, nextMonth, previousMonth } = useNavigation();
   const daypicker = useDayPicker();
   return /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", py: 1.5, children: [
@@ -11025,7 +11156,7 @@ function OnlyAfterToday(props) {
     );
     if (!hasDateInMonth) return /* @__PURE__ */ jsx(Fragment, {});
     return /* @__PURE__ */ jsx(
-      Row,
+      Row$1,
       {
         ...props,
         weekNumber: props.weekNumber + weekOffset,
@@ -11033,7 +11164,7 @@ function OnlyAfterToday(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(Row, { ...props });
+  return /* @__PURE__ */ jsx(Row$1, { ...props });
 }
 const MonthNavigationButton = styled.button`
   background-color: transparent;
@@ -11190,7 +11321,7 @@ const DeliveryFrequencyTiles = ({
     onSelect(frequency);
     trackAnswer("delivery_frequency", frequency);
   };
-  return /* @__PURE__ */ jsx(TilesWrapper, { children: DELIVERY_FREQUENCY_ITEMS.map((item) => {
+  return /* @__PURE__ */ jsx(TilesWrapper$2, { children: DELIVERY_FREQUENCY_ITEMS.map((item) => {
     const label = isGerman ? item.labelDe : item.labelEn;
     const isNotSure = item.value === "not_sure";
     return /* @__PURE__ */ jsxs(
@@ -11275,7 +11406,7 @@ const DietaryStepper = ({ question, autoFocus }) => {
         justifyContent: { xs: "center", sm: "start" },
         children: [
           (localizedOptions == null ? void 0 : localizedOptions.image) && /* @__PURE__ */ jsx(IconWrapper$3, { children: /* @__PURE__ */ jsx(
-            StyledImg$1,
+            StyledImg$2,
             {
               alt: "",
               src: localizedOptions == null ? void 0 : localizedOptions.image
@@ -11305,7 +11436,7 @@ const IconWrapper$3 = styled.div`
   justify-content: center;
   flex-shrink: 0;
 `;
-const StyledImg$1 = styled.img`
+const StyledImg$2 = styled.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -11451,7 +11582,7 @@ const ServiceTypeTiles = ({
   const { i18n } = useTranslation();
   const isGerman = i18n.language === "de";
   const { trackAnswer } = useTracking();
-  return /* @__PURE__ */ jsx(TilesWrapper, { children: tileIcons$1.map(({ id, Icon, labelDe, labelEn, subtitleDe, subtitleEn }) => {
+  return /* @__PURE__ */ jsx(TilesWrapper$2, { children: tileIcons$1.map(({ id, Icon, labelDe, labelEn, subtitleDe, subtitleEn }) => {
     const label = isGerman ? labelDe : labelEn;
     const subtitle = isGerman ? subtitleDe : subtitleEn;
     return /* @__PURE__ */ jsxs(
@@ -11491,6 +11622,11 @@ const ServiceTile = styled(Tile)`
     flex-shrink: 0;
     gap: ${({ theme }) => theme.spacing(1)}px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    height: 220px;
+    width: 220px;
+  }
 `;
 const IconWrapper$2 = styled(Box)`
   min-width: 32px;
@@ -11503,6 +11639,11 @@ const IconWrapper$2 = styled(Box)`
     height: 40px;
     font-size: 36px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    height: 48px;
+    font-size: 42px;
+  }
 `;
 const ServiceTileLabel = styled(Typography)`
   font-size: 11px;
@@ -11512,6 +11653,10 @@ const ServiceTileLabel = styled(Typography)`
   ${({ theme }) => theme.breakpoints.up("sm")} {
     font-size: 15px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    font-size: 16px;
+  }
 `;
 const SubtitleText = styled(Typography)`
   font-size: 9px;
@@ -11523,9 +11668,14 @@ const SubtitleText = styled(Typography)`
   ${({ theme }) => theme.breakpoints.up("sm")} {
     font-size: 12px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    font-size: 13px;
+    max-width: 180px;
+  }
 `;
-const ICON_BASE_PATH = "/artifacts/icons/catering_category";
-const getIconUrl = (name) => getAssetUrl(`${ICON_BASE_PATH}/${name}.svg`);
+const ICON_BASE_PATH$1 = "/artifacts/icons/catering_category";
+const getIconUrl$1 = (name) => getAssetUrl(`${ICON_BASE_PATH$1}/${name}.svg`);
 const DEFAULT_IMAGE_SIZE = {
   SM: 40,
   MD: 60
@@ -11544,7 +11694,7 @@ const CateringCategoryTiles = ({
   const cateringCategories = useCateringCategories(items);
   const smUp = useBreakpointUp("sm");
   const { trackAnswer } = useTracking();
-  return /* @__PURE__ */ jsxs(TilesWrapper, { children: [
+  return /* @__PURE__ */ jsxs(TilesWrapper$2, { children: [
     cateringCategories.map(({ src, text, scale, id }) => /* @__PURE__ */ jsxs(
       Tile,
       {
@@ -11559,7 +11709,7 @@ const CateringCategoryTiles = ({
         },
         children: [
           /* @__PURE__ */ jsx(ImageWrapper, { $scale: scale, children: /* @__PURE__ */ jsx(
-            StyledImg,
+            StyledImg$1,
             {
               alt: "",
               width: smUp ? DEFAULT_IMAGE_SIZE.MD : DEFAULT_IMAGE_SIZE.SM,
@@ -11601,7 +11751,7 @@ const CateringCategoryTiles = ({
     )
   ] });
 };
-const StyledImg = styled.img`
+const StyledImg$1 = styled.img`
   object-fit: contain;
 `;
 const ImageWrapper = styled(Box)`
@@ -11626,42 +11776,42 @@ function useCateringCategories(items) {
   const allCategories = [
     {
       id: "fingerfood",
-      src: getIconUrl("fingerfood"),
+      src: getIconUrl$1("fingerfood"),
       text: t2("occasion.fingerfood")
     },
     {
       id: "buffet",
-      src: getIconUrl("buffet"),
+      src: getIconUrl$1("buffet"),
       text: t2("occasion.buffet")
     },
     {
       id: "street_food",
-      src: getIconUrl("street_food"),
+      src: getIconUrl$1("street_food"),
       text: t2("occasion.street_food")
     },
     {
       id: "business_lunch",
-      src: getIconUrl("business_lunch"),
+      src: getIconUrl$1("business_lunch"),
       text: t2("occasion.business_lunch")
     },
     {
       id: "breakfast",
-      src: getIconUrl("breakfast"),
+      src: getIconUrl$1("breakfast"),
       text: t2("occasion.breakfast")
     },
     {
       id: "cakes_and_sweets",
-      src: getIconUrl("cakes_and_sweets"),
+      src: getIconUrl$1("cakes_and_sweets"),
       text: t2("occasion.cakes_and_sweets")
     },
     {
       id: "fine_dining",
-      src: getIconUrl("fine_dining"),
+      src: getIconUrl$1("fine_dining"),
       text: t2("occasion.fine_dining_short")
     },
     {
       id: "drinks",
-      src: getIconUrl("drinks"),
+      src: getIconUrl$1("drinks"),
       text: t2("occasion.drinks_short")
     }
   ];
@@ -11673,6 +11823,36 @@ function useCateringCategories(items) {
   }
   return preFilteredCategories;
 }
+function Vienna(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 100 100",
+      fill: "#F95524",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "50", cy: "45", r: "28", fill: "none", stroke: "#F95524", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "50", cy: "45", r: "3", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("line", { x1: "50", y1: "17", x2: "50", y2: "73", stroke: "#F95524", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "22", y1: "45", x2: "78", y2: "45", stroke: "#F95524", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "30", y1: "25", x2: "70", y2: "65", stroke: "#F95524", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "70", y1: "25", x2: "30", y2: "65", stroke: "#F95524", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "50", y1: "45", x2: "35", y2: "88", stroke: "#F95524", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("line", { x1: "50", y1: "45", x2: "65", y2: "88", stroke: "#F95524", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("line", { x1: "25", y1: "88", x2: "75", y2: "88", stroke: "#F95524", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("rect", { x: "47", y: "14", width: "6", height: "8", rx: "1", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("rect", { x: "47", y: "70", width: "6", height: "8", rx: "1", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("rect", { x: "19", y: "42", width: "6", height: "8", rx: "1", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("rect", { x: "75", y: "42", width: "6", height: "8", rx: "1", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("rect", { x: "27", y: "22", width: "6", height: "8", rx: "1", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("rect", { x: "67", y: "22", width: "6", height: "8", rx: "1", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("rect", { x: "27", y: "62", width: "6", height: "8", rx: "1", fill: "#F95524" }),
+        /* @__PURE__ */ jsx("rect", { x: "67", y: "62", width: "6", height: "8", rx: "1", fill: "#F95524" })
+      ]
+    }
+  );
+}
 const tileIcons = [
   createIconEntry("berlin", Berlin),
   createIconEntry("muenchen", Munich),
@@ -11695,7 +11875,7 @@ const CityTiles = ({
 }) => {
   const { t: t2 } = useTranslation();
   const { trackAnswer } = useTracking();
-  return /* @__PURE__ */ jsx(TilesWrapper, { $size: size, children: tileIcons.map(({ id, Icon, translationKey }) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TilesWrapper$2, { $size: size, children: tileIcons.map(({ id, Icon, translationKey }) => /* @__PURE__ */ jsxs(
     Tile,
     {
       $variant: variant,
@@ -11822,7 +12002,7 @@ const EmbeddedQuestion = ({
           mode,
           title: getTitleContent(title),
           ratings,
-          content: /* @__PURE__ */ jsx(Container, { size: "sm", disableGutters: true, children: /* @__PURE__ */ jsx(
+          content: /* @__PURE__ */ jsx(Container$4, { size: "sm", disableGutters: true, children: /* @__PURE__ */ jsx(
             CityTiles,
             {
               size: "md",
@@ -11873,7 +12053,7 @@ const EmbeddedQuestion = ({
           subtitle: t2(
             "qualification:embeddedFunnel.dietaryRestrictions.subtitle"
           ),
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 3, px: 2, children: /* @__PURE__ */ jsx(DietaryDistribution, {}) }) }) })
+          content: /* @__PURE__ */ jsx(Container$4, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 3, px: 2, children: /* @__PURE__ */ jsx(DietaryDistribution, {}) }) }) })
         }
       );
     case steps$2.eventDateAndLeadType.id: {
@@ -11884,7 +12064,7 @@ const EmbeddedQuestion = ({
           wrapper: ((_c = slides == null ? void 0 : slides.dateAndLead) == null ? void 0 : _c.whiteWrapper) ? "white" : "transparent",
           ratings,
           title: getTitleContent(title),
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(DatePickerEmbedded, {}) }) }) })
+          content: /* @__PURE__ */ jsx(Container$4, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(DatePickerEmbedded, {}) }) }) })
         }
       );
     }
@@ -11896,7 +12076,7 @@ const EmbeddedQuestion = ({
           wrapper: ((_d = slides == null ? void 0 : slides.budgetAndPeople) == null ? void 0 : _d.whiteWrapper) ? "white" : "transparent",
           ratings,
           title: getTitleContent(title),
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(BudgetQuestionWithPeopleCount, {}) }) }) })
+          content: /* @__PURE__ */ jsx(Container$4, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(BudgetQuestionWithPeopleCount, {}) }) }) })
         }
       );
     case steps$2.serviceSelection.id:
@@ -11906,7 +12086,7 @@ const EmbeddedQuestion = ({
           mode,
           title: getTitleContent(title),
           ratings,
-          content: /* @__PURE__ */ jsx(Container, { size: "sm", disableGutters: true, children: /* @__PURE__ */ jsx(
+          content: /* @__PURE__ */ jsx(Container$4, { size: "sm", disableGutters: true, children: /* @__PURE__ */ jsx(
             ServiceTypeTiles,
             {
               variant: highlightColor,
@@ -11927,7 +12107,7 @@ const EmbeddedQuestion = ({
           mode,
           title: getTitleContent(title),
           ratings,
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(
+          content: /* @__PURE__ */ jsx(Container$4, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(
             TeamSizeInput,
             {
               label: t2("qualification:embeddedFunnel.teamSize.label", (_e = teamSizeQuestion.content) == null ? void 0 : _e.titleDe),
@@ -11947,7 +12127,7 @@ const EmbeddedQuestion = ({
           mode,
           title: getTitleContent(title),
           ratings,
-          content: /* @__PURE__ */ jsxs(Container, { size: "sm", disableGutters: true, children: [
+          content: /* @__PURE__ */ jsxs(Container$4, { size: "sm", disableGutters: true, children: [
             /* @__PURE__ */ jsx(
               DeliveryFrequencyTiles,
               {
@@ -11971,7 +12151,7 @@ const EmbeddedQuestion = ({
           mode,
           title: getTitleContent(title),
           ratings,
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(
+          content: /* @__PURE__ */ jsx(Container$4, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(
             TeamSizeInput,
             {
               label: t2("common:questions.min_order_number"),
@@ -11991,7 +12171,7 @@ const EmbeddedQuestion = ({
           mode,
           title: getTitleContent(title),
           ratings,
-          content: /* @__PURE__ */ jsxs(Container, { size: "sm", disableGutters: true, children: [
+          content: /* @__PURE__ */ jsxs(Container$4, { size: "sm", disableGutters: true, children: [
             /* @__PURE__ */ jsx(
               BudgetRangeTiles,
               {
@@ -14711,7 +14891,7 @@ function NavbarBase({
   const isMediumScreen = useBreakpointUp("md");
   const mobile = !isMediumScreen;
   const { t: t2 } = useTranslation("common");
-  return /* @__PURE__ */ jsx(Navbar, { bgcolor, children: /* @__PURE__ */ jsx(Container, { size: "md", children: /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [
+  return /* @__PURE__ */ jsx(Navbar, { bgcolor, children: /* @__PURE__ */ jsx(Container$4, { size: "md", children: /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [
     /* @__PURE__ */ jsx(NavbarLogo, { href: logoHref }),
     isMediumScreen && ratings && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       Box,
@@ -14721,10 +14901,10 @@ function NavbarBase({
         alignItems: "center",
         flexWrap: "nowrap",
         children: /* @__PURE__ */ jsxs(TrustedShopsBox, { children: [
-          /* @__PURE__ */ jsx(Stars, { children: /* @__PURE__ */ jsx(TrustedShopsStars, {}) }),
+          /* @__PURE__ */ jsx(Stars$1, { children: /* @__PURE__ */ jsx(TrustedShopsStars, {}) }),
           /* @__PURE__ */ jsxs(Text, { children: [
             /* @__PURE__ */ jsx("strong", { children: formatRating(getRating(ratings)) }),
-            /* @__PURE__ */ jsxs(RatingText, { children: [
+            /* @__PURE__ */ jsxs(RatingText$1, { children: [
               " ",
               t2("trustedShops.ratingText")
             ] })
@@ -14903,11 +15083,11 @@ const TrustedShopsBox = styled(Box)`
   gap: 10px;
   text-decoration: none;
 `;
-const Stars = styled(Box)`
+const Stars$1 = styled(Box)`
   width: 100%;
   min-width: 70px;
 `;
-const RatingText = styled.span`
+const RatingText$1 = styled.span`
   flex-shrink: 0;
 `;
 const RatingCount = styled.span`
@@ -17473,11 +17653,11 @@ var KeyframesRule = /* @__PURE__ */ function() {
 }();
 var keyRegExp$1 = /@keyframes\s+/;
 var refRegExp$1 = /\$([\w-]+)/g;
-var findReferencedKeyframe = function findReferencedKeyframe2(val, keyframes) {
+var findReferencedKeyframe = function findReferencedKeyframe2(val, keyframes2) {
   if (typeof val === "string") {
     return val.replace(refRegExp$1, function(match2, name) {
-      if (name in keyframes) {
-        return keyframes[name];
+      if (name in keyframes2) {
+        return keyframes2[name];
       }
       process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Referenced keyframes rule "' + name + '" is not defined.') : void 0;
       return match2;
@@ -17485,9 +17665,9 @@ var findReferencedKeyframe = function findReferencedKeyframe2(val, keyframes) {
   }
   return val;
 };
-var replaceRef = function replaceRef2(style, prop, keyframes) {
+var replaceRef = function replaceRef2(style, prop, keyframes2) {
   var value = style[prop];
-  var refKeyframe = findReferencedKeyframe(value, keyframes);
+  var refKeyframe = findReferencedKeyframe(value, keyframes2);
   if (refKeyframe !== value) {
     style[prop] = refKeyframe;
   }
@@ -23846,7 +24026,7 @@ var styles$1 = function styles26(theme) {
 function isDeleteKeyboardEvent(keyboardEvent) {
   return keyboardEvent.key === "Backspace" || keyboardEvent.key === "Delete";
 }
-var Chip = /* @__PURE__ */ React.forwardRef(function Chip2(props, ref2) {
+var Chip$1 = /* @__PURE__ */ React.forwardRef(function Chip2(props, ref2) {
   var avatarProp = props.avatar, classes = props.classes, className = props.className, clickableProp = props.clickable, _props$color = props.color, color = _props$color === void 0 ? "default" : _props$color, ComponentProp = props.component, deleteIconProp = props.deleteIcon, _props$disabled = props.disabled, disabled = _props$disabled === void 0 ? false : _props$disabled, iconProp = props.icon, label = props.label, onClick = props.onClick, onDelete = props.onDelete, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, _props$size = props.size, size = _props$size === void 0 ? "medium" : _props$size, _props$variant = props.variant, variant = _props$variant === void 0 ? "default" : _props$variant, other = _objectWithoutProperties(props, ["avatar", "classes", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"]);
   var chipRef = React.useRef(null);
   var handleRef = useForkRef(chipRef, ref2);
@@ -23926,7 +24106,7 @@ var Chip = /* @__PURE__ */ React.forwardRef(function Chip2(props, ref2) {
     className: clsx(classes.label, small && classes.labelSmall)
   }, label), deleteIcon);
 });
-process.env.NODE_ENV !== "production" ? Chip.propTypes = {
+process.env.NODE_ENV !== "production" ? Chip$1.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -24008,9 +24188,9 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes = {
    */
   variant: PropTypes.oneOf(["default", "outlined"])
 } : void 0;
-const Chip$1 = withStyles(styles$1, {
+const Chip$2 = withStyles(styles$1, {
   name: "MuiChip"
-})(Chip);
+})(Chip$1);
 function useControlled(_ref3) {
   var controlled = _ref3.controlled, defaultProp = _ref3.default, name = _ref3.name, _ref$state = _ref3.state, state = _ref$state === void 0 ? "value" : _ref$state;
   var _React$useRef = React.useRef(controlled !== void 0), isControlled = _React$useRef.current;
@@ -25159,7 +25339,7 @@ var Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(props
       startAdornment = renderTags(value, getCustomizedTagProps);
     } else {
       startAdornment = value.map(function(option, index) {
-        return /* @__PURE__ */ React.createElement(Chip$1, _extends$2({
+        return /* @__PURE__ */ React.createElement(Chip$2, _extends$2({
           label: getOptionLabel(option),
           size
         }, getCustomizedTagProps({
@@ -26218,7 +26398,7 @@ function AutocompleteAddress({
         return /* @__PURE__ */ jsx("div", { ref: params.InputProps.ref, children: /* @__PURE__ */ jsx(FormControl, { error: showError, required, children: /* @__PURE__ */ jsxs(Fragment, { children: [
           label && /* @__PURE__ */ jsx(InputLabel, { required: true, htmlFor: field.name, children: label }),
           /* @__PURE__ */ jsx(
-            Input,
+            Input$1,
             {
               name: "delivery_address",
               placeholder,
@@ -26464,7 +26644,7 @@ function FormikFormField({
         ref: inputRef
       }
     ) : /* @__PURE__ */ jsx(
-      Input,
+      Input$1,
       {
         ...field,
         type: type2,
@@ -26512,7 +26692,7 @@ function PhoneField({ label, name, formik, helperText }) {
     helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
   ] });
 }
-const StyledInput = styled(Input)`
+const StyledInput = styled(Input$1)`
   border-color: ${(props) => props.$hasError ? props.theme.palette.error.main : "transparent"};
 `;
 function Success({ isUkLead = false }) {
@@ -26539,18 +26719,18 @@ function Success({ isUkLead = false }) {
           alt: ""
         }
       ) }),
-      /* @__PURE__ */ jsx(Title, { children: t2("embeddedFunnel.success.title") }),
-      /* @__PURE__ */ jsx(Box, { mt: 4, children: /* @__PURE__ */ jsx(Subtitle, { children: t2("embeddedFunnel.success.subtitle") }) })
+      /* @__PURE__ */ jsx(Title$2, { children: t2("embeddedFunnel.success.title") }),
+      /* @__PURE__ */ jsx(Box, { mt: 4, children: /* @__PURE__ */ jsx(Subtitle$1, { children: t2("embeddedFunnel.success.subtitle") }) })
     ] }) }) })
   ] });
 }
-const Title = styled(Typography)`
+const Title$2 = styled(Typography)`
   font-size: 20px;
   font-weight: 700;
   text-align: center;
   margin-bottom: ${({ theme }) => theme.spacing(4)}px;
 `;
-const Subtitle = styled(Typography)`
+const Subtitle$1 = styled(Typography)`
   font-size: 16px;
   font-weight: 400;
   text-align: center;
@@ -26778,8 +26958,17 @@ function useRequestForm() {
       );
     }
     const leadSource = ((_c = qualification.leadSource) == null ? void 0 : _c.includes("/events")) ? "events-landingpage" : "Qualification Funnel";
+    const answers = qualification.answers;
+    const isRedesignFunnel = !!answers.event_type;
+    const peopleCount = answers.min_order_number || 0;
+    const dietaryDefaults = isRedesignFunnel ? {
+      number_of_carnivore: peopleCount,
+      number_of_vegans: 0,
+      number_of_vegetarians: 0
+    } : {};
     return {
-      ...qualification.answers,
+      ...answers,
+      ...dietaryDefaults,
       ...values2,
       phone: values2.phone || "",
       catererSlug: (_d = qualification == null ? void 0 : qualification.selectedCaterer) == null ? void 0 : _d.slug,
@@ -26814,9 +27003,10 @@ function useRequestForm() {
     if (isLeadOnlyFunnel || isUkLead) {
       try {
         const leadSource = ((_b = qualification == null ? void 0 : qualification.leadSource) == null ? void 0 : _b.includes("/events")) ? "events-landingpage" : "Qualification Funnel";
+        const answers = (qualification == null ? void 0 : qualification.answers) || {};
         const response = await createQfLead({
           ...values2,
-          ...qualification == null ? void 0 : qualification.answers,
+          ...answers,
           leadSource,
           conversionUrl: window.location.href,
           entranceUrl: getCookie("entrance_url"),
@@ -27018,7 +27208,7 @@ function RequestForm({ header = null }) {
     actions.setRequest(values2);
     redirectToCustomerAccountRequest(redirectRoute);
   };
-  const SubmitButton = ({ isFormValid }) => {
+  const SubmitButton2 = ({ isFormValid }) => {
     const content = /* @__PURE__ */ jsxs(
       Button,
       {
@@ -27191,7 +27381,7 @@ function RequestForm({ header = null }) {
                 `${pill.stepId}_${pill.text}`
               )) })
             ] }),
-            /* @__PURE__ */ jsx(Box, { ref: ref2, children: /* @__PURE__ */ jsx(SubmitButton, { isFormValid: formik.isValid }) })
+            /* @__PURE__ */ jsx(Box, { ref: ref2, children: /* @__PURE__ */ jsx(SubmitButton2, { isFormValid: formik.isValid }) })
           ] });
         }
       }
@@ -27267,7 +27457,7 @@ function EmbeddedRequestPage({ ratings }) {
       "aria-labelledby": TITLE_ID,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Box, { position: xsDown ? "relative" : "absolute", left: "0", right: "0", children: /* @__PURE__ */ jsx(NavbarBase, { ratings, bgcolor: "white", showLogin: true }) }),
-        /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsxs(FormWrapper$1, { children: [
+        /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsxs(FormWrapper$2, { children: [
           /* @__PURE__ */ jsx(Box, { visibility: xsDown ? "hidden" : "visible", children: /* @__PURE__ */ jsx(CateringCategoryBackgroundImage, { category: cateringCategory }) }),
           /* @__PURE__ */ jsx(FormContainer, { children: /* @__PURE__ */ jsx(StyledBox, { py: xsDown ? 1 : 4, pt: 2, children: /* @__PURE__ */ jsx(
             RequestForm,
@@ -27304,7 +27494,7 @@ const PageWrapper = styled.div`
     pointer-events: none;
   }
 `;
-const FormWrapper$1 = styled.div`
+const FormWrapper$2 = styled.div`
   min-height: 100vh;
 
   ${({ theme }) => theme.breakpoints.up("sm")} {
@@ -30103,75 +30293,2747 @@ const LoadingIndicator = ({ variant }) => {
 const WrapperBox = styled(Box)`
   color: var(--embedded-text-color, inherit);
 `;
-function useAbandonmentTracking(funnelContextRef, state) {
-  const hasTrackedAbandonmentRef = useRef(false);
-  const hasCompletedRef = useRef(false);
-  useEffect(() => {
-    if (state.status === QUALIFICATION_STATUS.answered || state.status === QUALIFICATION_STATUS.qualifiedForRequest || state.status === QUALIFICATION_STATUS.qualifiedForMarketplace || state.status === QUALIFICATION_STATUS.qualifiedForCate) {
-      hasCompletedRef.current = true;
-      return;
-    }
-    if (state.status !== QUALIFICATION_STATUS.answering) {
-      hasTrackedAbandonmentRef.current = false;
-      return;
+const REDESIGN_COLORS = {
+  orange: "#F95524",
+  mainText: "#000416",
+  secondaryText: "#585858",
+  beige: "#F5F2ED",
+  white: "#FFFFFF",
+  white200: "#F7F7F8",
+  border: "#EBEBEB",
+  success: "#2E8B4A",
+  successLight: "#EAF4EC",
+  error: "#D1381C",
+  muted: "#8a8a8a",
+  railConnector: "#DCD6CB",
+  railInactive: "#E7E2D9",
+  railMuted: "#a8a29a",
+  inputBorder: "#E4E4E4",
+  disabledOrange: "#FBC7B5",
+  orangeLighter: "#FFF6F2",
+  starColor: "#FFC53D",
+  progressBg: "#F1EDE7"
+};
+const REDESIGN_FONTS = {
+  family: "'Poppins', system-ui, -apple-system, 'Helvetica Neue', sans-serif",
+  weight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600
+  },
+  letterSpacing: {
+    tight: "-0.02em"
+  }
+};
+const REDESIGN_SPACING = {
+  railWidth: "392px",
+  railPadding: "38px",
+  stepCircleSize: "30px",
+  connectorHeight: "18px"
+};
+const CITY_LABELS = {
+  berlin: "Berlin",
+  muenchen: "München",
+  "frankfurt-am-main": "Frankfurt a.M.",
+  hamburg: "Hamburg",
+  duesseldorf: "Düsseldorf",
+  koeln: "Köln",
+  stuttgart: "Stuttgart",
+  wien: "Wien",
+  other: "Andere Stadt"
+};
+const EVENT_LABELS_DE = {
+  lunch: "Mittagessen",
+  breakfast: "Frühstück",
+  party: "Firmenfeier",
+  meeting: "Meeting",
+  conference: "Konferenz / Messe",
+  workshop: "Workshop / Teamtag",
+  other: "Individueller Anlass"
+};
+const EVENT_LABELS_EN = {
+  lunch: "Lunch",
+  breakfast: "Breakfast",
+  party: "Company Party",
+  meeting: "Meeting",
+  conference: "Conference / Fair",
+  workshop: "Workshop / Team Day",
+  other: "Other Event"
+};
+const LOADING_STEPS_DE = [
+  "Ort und Termin werden geprüft",
+  "Passende Caterer werden gesucht",
+  "Deine Anfrage wird vorbereitet"
+];
+const LOADING_STEPS_EN = [
+  "Checking location and date",
+  "Finding matching caterers",
+  "Preparing your request"
+];
+const CITY_ITEMS = [
+  { value: "berlin", labelDe: "Berlin", labelEn: "Berlin" },
+  { value: "muenchen", labelDe: "München", labelEn: "Munich" },
+  { value: "frankfurt-am-main", labelDe: "Frankfurt a.M.", labelEn: "Frankfurt" },
+  { value: "hamburg", labelDe: "Hamburg", labelEn: "Hamburg" },
+  { value: "duesseldorf", labelDe: "Düsseldorf", labelEn: "Düsseldorf" },
+  { value: "koeln", labelDe: "Köln", labelEn: "Cologne" },
+  { value: "stuttgart", labelDe: "Stuttgart", labelEn: "Stuttgart" },
+  { value: "wien", labelDe: "Wien", labelEn: "Vienna" },
+  { value: "other", labelDe: "Andere Stadt", labelEn: "Other City" }
+];
+const RedesignCityTiles = ({ selected, onSelect }) => {
+  var _a2;
+  const { i18n } = useTranslation();
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  return /* @__PURE__ */ jsx(TilesWrapper$1, { children: CITY_ITEMS.map((item) => {
+    const label = isGerman ? item.labelDe : item.labelEn;
+    const isSelected = selected === item.value;
+    return /* @__PURE__ */ jsxs(
+      CityTile,
+      {
+        $selected: isSelected,
+        id: `tile__city--${item.value}`,
+        "data-ph-capture-attribute-value": item.value,
+        onClick: (e2) => {
+          e2.currentTarget.blur();
+          onSelect(item.value);
+        },
+        children: [
+          isSelected && /* @__PURE__ */ jsx(SelectionBadge$1, { children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) }),
+          /* @__PURE__ */ jsx(IconContainer$1, { children: /* @__PURE__ */ jsx(CityIcon, { city: item.value }) }),
+          /* @__PURE__ */ jsx(TileLabel$1, { children: label })
+        ]
+      },
+      item.value
+    );
+  }) });
+};
+const CITY_ICON_MAP = {
+  berlin: Berlin,
+  muenchen: Munich,
+  "frankfurt-am-main": FrankfurtMain,
+  hamburg: Hamburg,
+  duesseldorf: Dusseldorf,
+  koeln: Cologne,
+  stuttgart: Stuttgart,
+  wien: Vienna,
+  other: Other
+};
+const CityIcon = ({ city }) => {
+  const IconComponent = CITY_ICON_MAP[city] || Other;
+  return /* @__PURE__ */ jsx(IconComponent, { height: "46px" });
+};
+const popIn$1 = keyframes`
+  0% { transform: scale(0.4); opacity: 0; }
+  60% { transform: scale(1.12); }
+  100% { transform: scale(1); opacity: 1; }
+`;
+const TilesWrapper$1 = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  width: 100%;
+
+  @media (min-width: 640px) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    justify-content: center;
+    max-width: 790px;
+  }
+`;
+const CityTile = styled.button`
+  position: relative;
+  background: ${({ $selected }) => $selected ? REDESIGN_COLORS.orangeLighter : REDESIGN_COLORS.white};
+  border-radius: 12px;
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+  box-sizing: border-box;
+  border: ${({ $selected }) => $selected ? `2px solid ${REDESIGN_COLORS.orange}` : `1px solid ${REDESIGN_COLORS.border}`};
+  min-height: 144px;
+  justify-content: center;
+
+  @media (min-width: 640px) {
+    width: 144px;
+    height: 144px;
+    padding: 16px 12px;
+  }
+
+  @media (max-width: 639px) {
+    height: 118px;
+    padding: 12px 8px;
+  }
+
+  &:hover {
+    border-color: ${REDESIGN_COLORS.orange};
+    transform: translateY(-1px);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(249, 85, 36, 0.2);
+  }
+`;
+const SelectionBadge$1 = styled.div`
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: ${REDESIGN_COLORS.success};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${popIn$1} 0.3s both;
+`;
+const IconContainer$1 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  color: ${REDESIGN_COLORS.orange};
+
+  @media (max-width: 639px) {
+    height: 50px;
+  }
+`;
+const TileLabel$1 = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 14px;
+  color: ${REDESIGN_COLORS.mainText};
+  text-align: center;
+  line-height: 1.25;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ICON_BASE_PATH = "/artifacts/icons/catering_category";
+const getIconUrl = (name) => getAssetUrl(`${ICON_BASE_PATH}/${name}.svg`);
+const EVENT_TYPE_TO_ICON = {
+  lunch: "business_lunch",
+  breakfast: "breakfast",
+  party: "buffet",
+  meeting: "fingerfood",
+  conference: "buffet",
+  workshop: "business_lunch"
+};
+const EventTypeTiles = ({
+  onSelect,
+  selected
+}) => {
+  var _a2;
+  const { i18n } = useTranslation();
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  return /* @__PURE__ */ jsx(TilesWrapper, { children: EVENT_TYPE_ITEMS.map((item) => {
+    const label = isGerman ? item.labelDe : item.labelEn;
+    const isSelected = selected === item.value;
+    return /* @__PURE__ */ jsxs(
+      EventTile,
+      {
+        $selected: isSelected,
+        id: `tile__event-type--${item.value}`,
+        "data-ph-capture-attribute-value": item.value,
+        onClick: (e2) => {
+          e2.currentTarget.blur();
+          onSelect(item.value);
+        },
+        children: [
+          isSelected && /* @__PURE__ */ jsx(SelectionBadge, { children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) }),
+          /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(EventIcon, { iconName: item.iconName }) }),
+          /* @__PURE__ */ jsx(TileLabel, { children: label.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            label.split("/")[0],
+            /* @__PURE__ */ jsx("br", {}),
+            label.split("/")[1]
+          ] }) : label })
+        ]
+      },
+      item.value
+    );
+  }) });
+};
+const EventIcon = ({ iconName }) => {
+  const mappedIcon = EVENT_TYPE_TO_ICON[iconName];
+  if (!mappedIcon) {
+    return /* @__PURE__ */ jsx(QuestionMark, { height: "46px" });
+  }
+  return /* @__PURE__ */ jsx(
+    StyledImg,
+    {
+      alt: "",
+      width: 46,
+      height: 46,
+      src: getIconUrl(mappedIcon)
     }
-    if (!("qualification" in state)) return;
-    const stateSnapshot = {
-      stepId: state.qualification.step.id,
-      stepIndex: state.qualification.stepIndex
-    };
-    const handleAbandonment = () => {
-      if (hasTrackedAbandonmentRef.current) return;
-      if (hasCompletedRef.current) return;
-      trackAbandoned(funnelContextRef.current, {
-        step_id: stateSnapshot.stepId,
-        step_index: stateSnapshot.stepIndex
-      });
-      hasTrackedAbandonmentRef.current = true;
-    };
-    let invisibilityTimeout;
-    const handleVisibilityChange2 = () => {
-      if (document.hidden) {
-        invisibilityTimeout = setTimeout(handleAbandonment, 3e3);
-      } else {
-        clearTimeout(invisibilityTimeout);
-      }
-    };
-    document.addEventListener("visibilitychange", handleVisibilityChange2);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange2);
-      clearTimeout(invisibilityTimeout);
-    };
-  }, [
-    state.status,
-    "qualification" in state && "step" in state.qualification ? state.qualification.step.id : null
-  ]);
-}
-const EmbeddedFunnel = React__default.forwardRef(
-  ({
-    onBackground,
-    highlightColor,
-    ratings,
-    slides,
-    renderTitle,
-    titleTranslationKeys,
-    LayoutComponent = EmbeddedQuestionLayout,
-    mode = "embedded",
-    onCancel
-  }, ref2) => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    const scrollHelperRef = useRef(null);
-    const { state, actions, canContinue } = useQualification({});
-    const funnelContext = useRef({
-      session_id: "",
-      funnel_mode: mode,
-      service_type: "",
-      total_steps: 0
-    });
-    const updateContext = useCallback((patch) => {
-      funnelContext.current = { ...funnelContext.current, ...patch };
-      if (typeof sessionStorage !== "undefined" && funnelContext.current.session_id) {
-        try {
+  );
+};
+const StyledImg = styled.img`
+  object-fit: contain;
+`;
+const popIn = keyframes`
+  0% { transform: scale(0.4); opacity: 0; }
+  60% { transform: scale(1.12); }
+  100% { transform: scale(1); opacity: 1; }
+`;
+const TilesWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  width: 100%;
+
+  @media (min-width: 640px) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    justify-content: center;
+    max-width: 620px;
+  }
+`;
+const EventTile = styled.button`
+  position: relative;
+  background: ${({ $selected }) => $selected ? REDESIGN_COLORS.orangeLighter : REDESIGN_COLORS.white};
+  border-radius: 12px;
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+  box-sizing: border-box;
+  border: ${({ $selected }) => $selected ? `2px solid ${REDESIGN_COLORS.orange}` : `1px solid ${REDESIGN_COLORS.border}`};
+  min-height: 144px;
+  justify-content: center;
+
+  @media (min-width: 640px) {
+    width: 144px;
+    height: 144px;
+    padding: 16px 12px;
+  }
+
+  @media (max-width: 639px) {
+    height: 118px;
+    padding: 12px 8px;
+  }
+
+  &:hover {
+    border-color: ${REDESIGN_COLORS.orange};
+    transform: translateY(-1px);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(249, 85, 36, 0.2);
+  }
+`;
+const SelectionBadge = styled.div`
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: ${REDESIGN_COLORS.success};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${popIn} 0.3s both;
+`;
+const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  color: ${REDESIGN_COLORS.orange};
+
+  @media (max-width: 639px) {
+    height: 50px;
+  }
+`;
+const TileLabel = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 14px;
+  color: ${REDESIGN_COLORS.mainText};
+  text-align: center;
+  line-height: 1.25;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const SimpleDatePicker = ({
+  value,
+  onChange,
+  isMultiDay = false,
+  onMultiDayChange
+}) => {
+  var _a2;
+  const { i18n } = useTranslation();
+  const router = useRouter();
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const minimumDate = add(/* @__PURE__ */ new Date(), { days: DEFAULT_LEAD_DAYS });
+  const [month, setMonth] = useState(value || minimumDate);
+  return /* @__PURE__ */ jsx(Container$3, { children: /* @__PURE__ */ jsxs(DateRow, { children: [
+    /* @__PURE__ */ jsxs(CalendarCard, { children: [
+      /* @__PURE__ */ jsx(
+        DayPicker,
+        {
+          components: {
+            Caption: CustomCaption
+          },
+          formatters: {
+            formatWeekdayName: (day, options) => format(day, "EEEEE", { locale: options == null ? void 0 : options.locale })
+          },
+          month,
+          onDayClick: (date2) => {
+            onChange(date2);
+          },
+          selected: value,
+          fromDate: minimumDate,
+          onMonthChange: setMonth,
+          captionLayout: "buttons",
+          locale: router.locale ? localeToDateLocaleMapping[router.locale] : void 0,
+          showOutsideDays: true,
+          mode: "single"
+        }
+      ),
+      /* @__PURE__ */ jsx(LeadTimeNote, { children: isGerman ? `Vorlaufzeit mind. ${DEFAULT_LEAD_DAYS} Tage` : `Min. ${DEFAULT_LEAD_DAYS} days lead time` })
+    ] }),
+    /* @__PURE__ */ jsx(SideOptions, { children: /* @__PURE__ */ jsxs(ToggleCard, { onClick: () => onMultiDayChange == null ? void 0 : onMultiDayChange(!isMultiDay), children: [
+      /* @__PURE__ */ jsxs(ToggleRow, { children: [
+        /* @__PURE__ */ jsx(ToggleSwitch, { $active: isMultiDay, children: /* @__PURE__ */ jsx(ToggleKnob, {}) }),
+        /* @__PURE__ */ jsx(ToggleLabel, { children: isGerman ? "Mein Event geht über mehrere Tage" : "My event spans multiple days" })
+      ] }),
+      /* @__PURE__ */ jsx(ToggleDescription, { children: isGerman ? "Sag uns einfach den Starttag – die restlichen Tage planen wir gemeinsam." : "Just tell us the start date – we'll plan the remaining days together." })
+    ] }) })
+  ] }) });
+};
+function CustomCaption(props) {
+  const { goToMonth, nextMonth, previousMonth } = useNavigation();
+  const daypicker = useDayPicker();
+  const canGoPrevious = !!previousMonth;
+  return /* @__PURE__ */ jsxs(CaptionContainer, { children: [
+    /* @__PURE__ */ jsx(
+      NavButton,
+      {
+        type: "button",
+        disabled: !canGoPrevious,
+        onClick: () => previousMonth && goToMonth(previousMonth),
+        children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(MonthLabel, { children: format(props.displayMonth, "MMMM yyyy", { locale: daypicker.locale }) }),
+    /* @__PURE__ */ jsx(
+      NavButton,
+      {
+        type: "button",
+        disabled: !nextMonth,
+        onClick: () => nextMonth && goToMonth(nextMonth),
+        children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) })
+      }
+    )
+  ] });
+}
+const Container$3 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 720px;
+  margin: 0 auto;
+`;
+const DateRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 24px;
+  }
+`;
+const CalendarCard = styled.div`
+  background: ${REDESIGN_COLORS.white};
+  border-radius: 32px;
+  padding: 20px 24px;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
+
+  .rdp {
+    --rdp-accent-color: ${REDESIGN_COLORS.orange};
+    --rdp-background-color: ${REDESIGN_COLORS.orangeLighter};
+    --rdp-cell-size: 38px;
+    margin: 0;
+  }
+
+  .rdp-month {
+    margin: 0;
+  }
+
+  .rdp-table {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+
+  .rdp-head_cell {
+    font-family: ${REDESIGN_FONTS.family};
+    font-size: 12px;
+    font-weight: ${REDESIGN_FONTS.weight.medium};
+    color: ${REDESIGN_COLORS.muted};
+  }
+
+  .rdp-button {
+    border-radius: 50%;
+    transition: all 0.15s ease;
+    font-family: ${REDESIGN_FONTS.family};
+    font-weight: ${REDESIGN_FONTS.weight.regular};
+    font-size: 14px;
+    color: ${REDESIGN_COLORS.mainText};
+  }
+
+  .rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+    background-color: rgba(249, 85, 36, 0.08);
+  }
+
+  .rdp-day_selected,
+  .rdp-day_selected:hover {
+    background: ${REDESIGN_COLORS.orange};
+    font-weight: ${REDESIGN_FONTS.weight.semibold};
+    color: white;
+  }
+
+  .rdp-day_outside {
+    color: #d8d8d8;
+  }
+
+  .rdp-day_disabled {
+    color: #c8c8c8;
+  }
+`;
+const SideOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  max-width: 300px;
+`;
+const ToggleCard = styled.div`
+  background: ${REDESIGN_COLORS.white200};
+  border-radius: 12px;
+  padding: 18px 20px;
+  cursor: pointer;
+`;
+const ToggleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+`;
+const ToggleSwitch = styled.div`
+  width: 42px;
+  height: 24px;
+  border-radius: 100px;
+  padding: 2px;
+  flex: none;
+  transition: all 0.2s;
+  background: ${({ $active }) => $active ? REDESIGN_COLORS.orange : "#d4d4d4"};
+  display: flex;
+  justify-content: ${({ $active }) => $active ? "flex-end" : "flex-start"};
+`;
+const ToggleKnob = styled.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: ${REDESIGN_COLORS.white};
+`;
+const ToggleLabel = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 14.5px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  color: ${REDESIGN_COLORS.mainText};
+`;
+const ToggleDescription = styled.p`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  color: ${REDESIGN_COLORS.muted};
+  margin: 0;
+  line-height: 1.45;
+`;
+const CaptionContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+const NavButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  color: ${REDESIGN_COLORS.mainText};
+
+  &:disabled {
+    color: #d8d8d8;
+    cursor: default;
+  }
+`;
+const MonthLabel = styled.b`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 16px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  color: ${REDESIGN_COLORS.mainText};
+`;
+const LeadTimeNote = styled.p`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  color: ${REDESIGN_COLORS.muted};
+  margin: 12px 0 0;
+  text-align: center;
+`;
+const PRESETS = [10, 25, 50, 100];
+const BudgetPeopleStep = ({
+  peopleCount,
+  budgetPerPerson: budgetPerPerson2,
+  onPeopleCountChange,
+  onBudgetPerPersonChange
+}) => {
+  var _a2;
+  const { i18n } = useTranslation();
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const totalBudget = peopleCount * budgetPerPerson2;
+  const formattedTotal = totalBudget.toLocaleString("de-DE");
+  const handlePeopleIncrement = useCallback(() => {
+    onPeopleCountChange(peopleCount + 5);
+  }, [peopleCount, onPeopleCountChange]);
+  const handlePeopleDecrement = useCallback(() => {
+    onPeopleCountChange(Math.max(1, peopleCount - 5));
+  }, [peopleCount, onPeopleCountChange]);
+  const handleBudgetIncrement = useCallback(() => {
+    onBudgetPerPersonChange(budgetPerPerson2 + 5);
+  }, [budgetPerPerson2, onBudgetPerPersonChange]);
+  const handleBudgetDecrement = useCallback(() => {
+    onBudgetPerPersonChange(Math.max(5, budgetPerPerson2 - 5));
+  }, [budgetPerPerson2, onBudgetPerPersonChange]);
+  return /* @__PURE__ */ jsx(Container$2, { children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Label, { children: isGerman ? "Personenanzahl" : "Number of people" }),
+      /* @__PURE__ */ jsxs(InputGroup, { children: [
+        /* @__PURE__ */ jsx(StepButton, { onClick: handlePeopleDecrement, children: "−" }),
+        /* @__PURE__ */ jsx(ValueDisplay, { children: peopleCount }),
+        /* @__PURE__ */ jsx(StepButton, { onClick: handlePeopleIncrement, children: "+" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(PresetRow, { children: PRESETS.map((preset) => /* @__PURE__ */ jsx(
+      PresetButton,
+      {
+        $selected: peopleCount === preset,
+        onClick: () => onPeopleCountChange(preset),
+        children: preset
+      },
+      preset
+    )) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsxs(Label, { children: [
+        "Budget ",
+        isGerman ? "pro Person" : "per person"
+      ] }),
+      /* @__PURE__ */ jsxs(InputGroup, { children: [
+        /* @__PURE__ */ jsx(StepButton, { onClick: handleBudgetDecrement, children: "−" }),
+        /* @__PURE__ */ jsxs(ValueDisplay, { children: [
+          budgetPerPerson2,
+          " €"
+        ] }),
+        /* @__PURE__ */ jsx(StepButton, { onClick: handleBudgetIncrement, children: "+" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(TotalRow, { children: [
+      /* @__PURE__ */ jsxs(TotalLabel, { children: [
+        isGerman ? "Gesamtbudget" : "Total budget",
+        " ",
+        /* @__PURE__ */ jsx(NetLabel, { children: "netto" })
+      ] }),
+      /* @__PURE__ */ jsxs(TotalValue, { children: [
+        formattedTotal,
+        " €"
+      ] })
+    ] })
+  ] }) });
+};
+const Container$2 = styled.div`
+  width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Card = styled.div`
+  width: 100%;
+  background: ${REDESIGN_COLORS.white200};
+  border-radius: 20px;
+  padding: 28px 32px;
+`;
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+const Label = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 15px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  color: ${REDESIGN_COLORS.mainText};
+`;
+const InputGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const StepButton = styled.button`
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  border: 1px solid ${REDESIGN_COLORS.inputBorder};
+  background: ${REDESIGN_COLORS.white};
+  font-size: 20px;
+  color: ${REDESIGN_COLORS.secondaryText};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+
+  &:hover {
+    border-color: ${REDESIGN_COLORS.orange};
+    color: ${REDESIGN_COLORS.orange};
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const ValueDisplay = styled.div`
+  width: 96px;
+  height: 40px;
+  border-radius: 12px;
+  background: ${REDESIGN_COLORS.white};
+  border: 1px solid ${REDESIGN_COLORS.inputBorder};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 16px;
+  color: ${REDESIGN_COLORS.mainText};
+`;
+const PresetRow = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+`;
+const PresetButton = styled.button`
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  line-height: 1;
+  flex: none;
+  box-sizing: border-box;
+  transition: all 0.15s;
+  background: ${({ $selected }) => $selected ? REDESIGN_COLORS.orange : REDESIGN_COLORS.white};
+  color: ${({ $selected }) => $selected ? "#fff" : REDESIGN_COLORS.secondaryText};
+  border: 1px solid ${({ $selected }) => $selected ? REDESIGN_COLORS.orange : REDESIGN_COLORS.inputBorder};
+  font-weight: ${({ $selected }) => $selected ? REDESIGN_FONTS.weight.semibold : REDESIGN_FONTS.weight.regular};
+
+  &:hover {
+    border-color: ${REDESIGN_COLORS.orange};
+  }
+`;
+const Divider = styled.div`
+  height: 1px;
+  background: ${REDESIGN_COLORS.inputBorder};
+  margin: 4px 0 20px;
+`;
+const TotalRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+`;
+const TotalLabel = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 16px;
+  color: ${REDESIGN_COLORS.mainText};
+  white-space: nowrap;
+`;
+const NetLabel = styled.span`
+  font-weight: ${REDESIGN_FONTS.weight.regular};
+  font-size: 12.5px;
+  color: ${REDESIGN_COLORS.muted};
+`;
+const TotalValue = styled.b`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 22px;
+  color: ${REDESIGN_COLORS.orange};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  white-space: nowrap;
+`;
+const REDESIGN_STEP_IDS = {
+  city: "redesign_city",
+  eventType: "redesign_event_type",
+  date: "redesign_date",
+  peopleCount: "redesign_people_count",
+  contact: "redesign_contact"
+};
+const REDESIGN_STEP_ORDER = [
+  REDESIGN_STEP_IDS.city,
+  REDESIGN_STEP_IDS.eventType,
+  REDESIGN_STEP_IDS.date,
+  REDESIGN_STEP_IDS.peopleCount
+];
+const REDESIGN_STEPS = {
+  [REDESIGN_STEP_IDS.city]: {
+    id: REDESIGN_STEP_IDS.city,
+    titleDe: "Wo findet dein Event statt?",
+    titleEn: "Where is your event?",
+    subtitleDe: "Wähle deinen Standort – dort finden wir die passenden Caterer.",
+    subtitleEn: "Choose your location – we'll find the right caterers there.",
+    breadcrumbDe: "Stadt",
+    breadcrumbEn: "City"
+  },
+  [REDESIGN_STEP_IDS.eventType]: {
+    id: REDESIGN_STEP_IDS.eventType,
+    titleDe: "Wofür brauchst du Catering?",
+    titleEn: "What do you need catering for?",
+    breadcrumbDe: "Anlass",
+    breadcrumbEn: "Event Type"
+  },
+  [REDESIGN_STEP_IDS.date]: {
+    id: REDESIGN_STEP_IDS.date,
+    titleDe: "Wann findet dein Event statt?",
+    titleEn: "When is your event?",
+    subtitleDe: "Falls sich der Tag doch noch ändert, ist das kein Problem.",
+    subtitleEn: "If the date changes, that's no problem.",
+    breadcrumbDe: "Datum",
+    breadcrumbEn: "Date"
+  },
+  [REDESIGN_STEP_IDS.peopleCount]: {
+    id: REDESIGN_STEP_IDS.peopleCount,
+    titleDe: "Für wie viele Personen planst du?",
+    titleEn: "How many people are you planning for?",
+    subtitleDe: "Nur eine grobe Angabe – du legst dich noch nicht fest.",
+    subtitleEn: "Just a rough estimate – you're not committing yet.",
+    breadcrumbDe: "Personen",
+    breadcrumbEn: "People"
+  },
+  [REDESIGN_STEP_IDS.contact]: {
+    id: REDESIGN_STEP_IDS.contact,
+    titleDe: "Fast geschafft! Wie können wir dich erreichen?",
+    titleEn: "Almost done! How can we reach you?",
+    breadcrumbDe: "Kontakt",
+    breadcrumbEn: "Contact"
+  }
+};
+function getRedesignTotalSteps() {
+  return REDESIGN_STEP_ORDER.length + 1;
+}
+const RAIL_DISPLAY_STEPS = [
+  ...REDESIGN_STEP_ORDER,
+  REDESIGN_STEP_IDS.contact
+];
+const StepRail = ({ currentStepId, onStepClick }) => {
+  var _a2;
+  const { i18n } = useTranslation();
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const currentIndex = RAIL_DISPLAY_STEPS.indexOf(currentStepId);
+  const handleStepClick = (stepId, index) => {
+    if (index < currentIndex && onStepClick && stepId !== REDESIGN_STEP_IDS.contact) {
+      onStepClick(stepId);
+    }
+  };
+  return /* @__PURE__ */ jsxs(RailContainer, { children: [
+    /* @__PURE__ */ jsxs(TopSection, { children: [
+      /* @__PURE__ */ jsx(LogoWrapper$1, { children: /* @__PURE__ */ jsx(Logo, { height: 26 }) }),
+      /* @__PURE__ */ jsx(SectionLabel, { children: isGerman ? "Catering anfragen" : "Request catering" }),
+      /* @__PURE__ */ jsx(Title$1, { children: isGerman ? "In wenigen Schritten zum passenden Catering." : "Get the perfect catering in just a few steps." }),
+      /* @__PURE__ */ jsxs(StepList, { children: [
+        RAIL_DISPLAY_STEPS.map((stepId, index) => {
+          const step2 = REDESIGN_STEPS[stepId];
+          const isActive = index === currentIndex;
+          const isCompleted = index < currentIndex;
+          const breadcrumb = isGerman ? step2.breadcrumbDe : step2.breadcrumbEn;
+          const isClickable = index < currentIndex;
+          return /* @__PURE__ */ jsxs(StepItemWrapper, { children: [
+            index > 0 && /* @__PURE__ */ jsx(Connector, { $completed: index <= currentIndex }),
+            /* @__PURE__ */ jsxs(
+              StepRow,
+              {
+                $clickable: isClickable,
+                onClick: () => handleStepClick(stepId, index),
+                children: [
+                  /* @__PURE__ */ jsx(StepCircle, { $isActive: isActive, $isCompleted: isCompleted, children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon$2, {}) : index + 1 }),
+                  /* @__PURE__ */ jsx(StepLabel, { $isActive: isActive, $isCompleted: isCompleted, children: breadcrumb })
+                ]
+              }
+            )
+          ] }, stepId);
+        }),
+        /* @__PURE__ */ jsx(FinalConnector, {}),
+        /* @__PURE__ */ jsxs(OffersRow, { children: [
+          /* @__PURE__ */ jsx(OffersCircle, { children: /* @__PURE__ */ jsx(CheckIconMuted, {}) }),
+          /* @__PURE__ */ jsxs(OffersText, { children: [
+            /* @__PURE__ */ jsxs(OffersTitle, { children: [
+              "3 ",
+              isGerman ? "passende Angebote" : "matching offers"
+            ] }),
+            /* @__PURE__ */ jsx(OffersSubtitle, { children: isGerman ? "nach wenigen Stunden" : "within hours" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(BottomSection, { children: /* @__PURE__ */ jsxs(RatingRow, { children: [
+      /* @__PURE__ */ jsx(Stars, { children: "★★★★★" }),
+      /* @__PURE__ */ jsxs(RatingText, { children: [
+        /* @__PURE__ */ jsx(RatingNumber, { children: "4.9" }),
+        " · 3800+ ",
+        isGerman ? "Bewertungen" : "Reviews"
+      ] })
+    ] }) })
+  ] });
+};
+const CheckIcon$2 = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) });
+const CheckIconMuted = () => /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) });
+const RailContainer = styled.div`
+  display: none;
+
+  @media (min-width: 960px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: ${REDESIGN_SPACING.railWidth};
+    flex: none;
+    background: ${REDESIGN_COLORS.beige};
+    padding: ${REDESIGN_SPACING.railPadding} ${REDESIGN_SPACING.railPadding} 34px;
+    min-height: 100vh;
+  }
+`;
+const TopSection = styled.div``;
+const LogoWrapper$1 = styled.div`
+  margin-bottom: 44px;
+`;
+const SectionLabel = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: ${REDESIGN_COLORS.orange};
+  margin-bottom: 8px;
+`;
+const Title$1 = styled.h2`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 27px;
+  line-height: 1.2;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  letter-spacing: ${REDESIGN_FONTS.letterSpacing.tight};
+  color: ${REDESIGN_COLORS.mainText};
+  margin: 0 0 32px;
+  max-width: 290px;
+`;
+const StepList = styled.div``;
+const StepItemWrapper = styled.div``;
+const Connector = styled.div`
+  width: 2px;
+  height: ${REDESIGN_SPACING.connectorHeight};
+  margin: 3px 0 3px 14px;
+  background: ${({ $completed }) => $completed ? REDESIGN_COLORS.mainText : REDESIGN_COLORS.railConnector};
+`;
+const FinalConnector = styled.div`
+  width: 2px;
+  height: ${REDESIGN_SPACING.connectorHeight};
+  margin: 3px 0 3px 14px;
+  background: ${REDESIGN_COLORS.railConnector};
+`;
+const StepRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  border-radius: 100px;
+  margin: -4px -8px;
+  padding: 4px 8px;
+  transition: background 0.15s;
+  cursor: ${({ $clickable }) => $clickable ? "pointer" : "default"};
+
+  &:hover {
+    background: ${({ $clickable }) => $clickable ? "rgba(0, 0, 0, 0.03)" : "transparent"};
+  }
+`;
+const StepCircle = styled.div`
+  width: ${REDESIGN_SPACING.stepCircleSize};
+  height: ${REDESIGN_SPACING.stepCircleSize};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  flex: none;
+  background: ${({ $isActive, $isCompleted }) => {
+  if ($isCompleted) return REDESIGN_COLORS.mainText;
+  if ($isActive) return REDESIGN_COLORS.orange;
+  return REDESIGN_COLORS.railInactive;
+}};
+  color: ${({ $isActive, $isCompleted }) => {
+  if ($isCompleted || $isActive) return "#fff";
+  return REDESIGN_COLORS.railMuted;
+}};
+`;
+const StepLabel = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 14px;
+  font-weight: ${({ $isActive }) => $isActive ? REDESIGN_FONTS.weight.semibold : REDESIGN_FONTS.weight.regular};
+  color: ${({ $isActive, $isCompleted }) => {
+  if ($isActive) return REDESIGN_COLORS.mainText;
+  if ($isCompleted) return REDESIGN_COLORS.secondaryText;
+  return REDESIGN_COLORS.railMuted;
+}};
+`;
+const OffersRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 13px;
+`;
+const OffersCircle = styled.div`
+  width: ${REDESIGN_SPACING.stepCircleSize};
+  height: ${REDESIGN_SPACING.stepCircleSize};
+  border-radius: 50%;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${REDESIGN_COLORS.railInactive};
+  color: ${REDESIGN_COLORS.muted};
+`;
+const OffersText = styled.div``;
+const OffersTitle = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 14px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  color: ${REDESIGN_COLORS.mainText};
+  line-height: 1.25;
+`;
+const OffersSubtitle = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  color: ${REDESIGN_COLORS.muted};
+  line-height: 1.3;
+`;
+const BottomSection = styled.div``;
+const RatingRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+`;
+const Stars = styled.span`
+  color: ${REDESIGN_COLORS.starColor};
+  font-size: 15px;
+  letter-spacing: 1px;
+`;
+const RatingText = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  color: ${REDESIGN_COLORS.secondaryText};
+`;
+const RatingNumber = styled.b`
+  color: ${REDESIGN_COLORS.mainText};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+`;
+const LoadingScreen = ({ onComplete }) => {
+  var _a2;
+  const { i18n } = useTranslation();
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const [stage, setStage] = useState(0);
+  const loadingSteps = isGerman ? LOADING_STEPS_DE : LOADING_STEPS_EN;
+  useEffect(() => {
+    const timers = [1, 2, 3, 4].map(
+      (n, i2) => setTimeout(() => setStage(n), (i2 + 1) * 1250)
+    );
+    const completeTimer = setTimeout(onComplete, 6400);
+    return () => {
+      timers.forEach(clearTimeout);
+      clearTimeout(completeTimer);
+    };
+  }, [onComplete]);
+  return /* @__PURE__ */ jsxs(Container$1, { children: [
+    /* @__PURE__ */ jsx(LogoWrapper, { children: /* @__PURE__ */ jsx(Logo, { height: 26 }) }),
+    /* @__PURE__ */ jsx(Spinner, {}),
+    /* @__PURE__ */ jsx(Title, { children: isGerman ? "Die Anfrage wird verarbeitet" : "Processing your request" }),
+    /* @__PURE__ */ jsx(Subtitle, { children: isGerman ? "Einen Moment – das dauert nur ein paar Sekunden." : "Just a moment – this only takes a few seconds." }),
+    /* @__PURE__ */ jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsx(ProgressBar, { $progress: Math.min(100, stage * 33.4) }) }),
+    /* @__PURE__ */ jsx(ChecklistContainer, { children: loadingSteps.map((text, i2) => /* @__PURE__ */ jsxs(ChecklistItem, { $active: stage > i2, children: [
+      /* @__PURE__ */ jsx(CheckIcon$1, { $visible: stage > i2, children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: REDESIGN_COLORS.success, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) }),
+      /* @__PURE__ */ jsx("span", { children: text })
+    ] }, i2)) })
+  ] });
+};
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+const fadeIn$2 = keyframes`
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+`;
+const Container$1 = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  text-align: center;
+  animation: ${fadeIn$2} 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+`;
+const LogoWrapper = styled.div`
+  margin-bottom: 40px;
+`;
+const Spinner = styled.div`
+  width: 104px;
+  height: 104px;
+  border-radius: 50%;
+  border: 9px solid #FCDDD2;
+  border-top-color: ${REDESIGN_COLORS.orange};
+  animation: ${spin} 1s linear infinite;
+  margin-bottom: 34px;
+`;
+const Title = styled.h2`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 32px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  letter-spacing: -0.32px;
+  color: ${REDESIGN_COLORS.mainText};
+  margin: 0 0 8px;
+`;
+const Subtitle = styled.p`
+  font-family: ${REDESIGN_FONTS.family};
+  color: ${REDESIGN_COLORS.secondaryText};
+  font-size: 14.5px;
+  margin: 0 0 24px;
+`;
+const ProgressBarContainer = styled.div`
+  width: 280px;
+  height: 6px;
+  border-radius: 100px;
+  background: ${REDESIGN_COLORS.progressBg};
+  overflow: hidden;
+  margin-bottom: 26px;
+`;
+const ProgressBar = styled.div`
+  height: 100%;
+  border-radius: 100px;
+  background: ${REDESIGN_COLORS.orange};
+  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+  width: ${({ $progress }) => $progress}%;
+`;
+const ChecklistContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+  min-height: 150px;
+  align-items: center;
+`;
+const ChecklistItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: center;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 15px;
+  transition: all 0.3s;
+  color: ${({ $active }) => $active ? REDESIGN_COLORS.mainText : "#bdbdbd"};
+`;
+const CheckIcon$1 = styled.span`
+  display: flex;
+  opacity: ${({ $visible }) => $visible ? 1 : 0};
+  transition: opacity 0.3s;
+`;
+const NEXT_STEPS_DE = [
+  { title: "Falls wir noch Fragen haben, melden wir uns", desc: "In wenigen Minuten." },
+  { title: "Du erhältst 3 passende Angebote", desc: "In wenigen Stunden." }
+];
+const NEXT_STEPS_EN = [
+  { title: "If we have questions, we'll reach out", desc: "Within a few minutes." },
+  { title: "You'll receive 3 matching offers", desc: "Within a few hours." }
+];
+const RedesignContactForm = ({
+  onSubmit,
+  onBack,
+  isSubmitting = false
+}) => {
+  var _a2;
+  const { t: t2, i18n } = useTranslation("qualification");
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const { answerOf } = useQualification();
+  const [commentOpen, setCommentOpen] = useState(false);
+  const [hasSubmitted, setHasSubmitted] = useState(false);
+  const userTouchedRef = useRef({});
+  const markUserTouched = useCallback((fieldName) => {
+    userTouchedRef.current[fieldName] = true;
+  }, []);
+  const shouldShowError = useCallback((fieldName, formikTouched, error) => {
+    const userActuallyTouched = userTouchedRef.current[fieldName];
+    return (hasSubmitted || userActuallyTouched) && !!error;
+  }, [hasSubmitted]);
+  const nextSteps = isGerman ? NEXT_STEPS_DE : NEXT_STEPS_EN;
+  const initialValues = {
+    first_name: "",
+    last_name: "",
+    company: "",
+    email: "",
+    phone: "",
+    deliveryAddressStreet: "",
+    deliveryAddressStreetNumber: "",
+    deliveryAddressPostalCode: "",
+    deliveryAddressCity: "",
+    deliveryAddressCountry: "",
+    comment: ""
+  };
+  const validationSchema = create$2().shape({
+    first_name: create$5().required(isGerman ? "Bitte Vorname eingeben" : "Please enter first name"),
+    last_name: create$5().required(isGerman ? "Bitte Nachname eingeben" : "Please enter last name"),
+    company: create$5().required(isGerman ? "Bitte Firma eingeben" : "Please enter company"),
+    email: create$5().email(isGerman ? "Bitte gültige E-Mail eingeben" : "Please enter valid email").required(isGerman ? "Bitte E-Mail eingeben" : "Please enter email"),
+    phone: create$5().required(isGerman ? "Bitte Telefon eingeben" : "Please enter phone"),
+    deliveryAddressStreet: create$5().min(1).required(),
+    deliveryAddressCity: create$5().min(1).required()
+  });
+  const buildSummaryChips = () => {
+    const chips = [];
+    try {
+      const city = answerOf("city");
+      const eventType = answerOf("event_type");
+      const eventDate = answerOf("event_date");
+      const dateUnknown = answerOf("date_unknown");
+      const peopleCount = answerOf("min_order_number");
+      const pricePerPerson = answerOf("price_per_person");
+      if (city) {
+        chips.push({ label: isGerman ? "Stadt" : "City", value: CITY_LABELS[city] || city });
+      }
+      if (eventType) {
+        const labels2 = isGerman ? EVENT_LABELS_DE : EVENT_LABELS_EN;
+        chips.push({ label: isGerman ? "Anlass" : "Event", value: labels2[eventType] || eventType });
+      }
+      if (dateUnknown) {
+        chips.push({ label: isGerman ? "Datum" : "Date", value: isGerman ? "Noch offen" : "Still open" });
+      } else if (eventDate) {
+        try {
+          const dateObj = eventDate instanceof Date ? eventDate : new Date(eventDate);
+          chips.push({ label: isGerman ? "Datum" : "Date", value: format(dateObj, "dd.MM.yy") });
+        } catch {
+        }
+      }
+      if (typeof peopleCount === "number" && peopleCount > 0) {
+        chips.push({ label: isGerman ? "Personen" : "People", value: `${peopleCount} Pax` });
+      }
+      if (typeof pricePerPerson === "number" && pricePerPerson > 0) {
+        const total2 = (peopleCount || 0) * pricePerPerson;
+        chips.push({ label: "Budget", value: `${total2.toLocaleString("de-DE")} €` });
+      }
+    } catch (e2) {
+      console.error("Error building summary chips:", e2);
+    }
+    return chips;
+  };
+  const handleFormSubmit = useCallback((values2, { setSubmitting }) => {
+    setHasSubmitted(true);
+    const formData = {
+      vorname: values2.first_name,
+      nachname: values2.last_name,
+      firma: values2.company,
+      email: values2.email,
+      telefon: values2.phone,
+      deliveryAddressStreet: values2.deliveryAddressStreet,
+      deliveryAddressStreetNumber: values2.deliveryAddressStreetNumber,
+      deliveryAddressPostalCode: values2.deliveryAddressPostalCode,
+      deliveryAddressCity: values2.deliveryAddressCity,
+      deliveryAddressCountry: values2.deliveryAddressCountry,
+      kommentar: values2.comment
+    };
+    onSubmit(formData);
+  }, [onSubmit]);
+  const summaryChips = buildSummaryChips();
+  return /* @__PURE__ */ jsx(
+    Formik,
+    {
+      initialValues,
+      validationSchema,
+      onSubmit: handleFormSubmit,
+      validateOnMount: false,
+      validateOnBlur: true,
+      validateOnChange: true,
+      children: ({ errors, touched, handleChange, handleBlur, values: values2 }) => /* @__PURE__ */ jsxs(FormWrapper$1, { children: [
+        /* @__PURE__ */ jsx(ScrollableContent, { children: /* @__PURE__ */ jsxs(Container, { children: [
+          /* @__PURE__ */ jsxs(SummaryRow, { children: [
+            /* @__PURE__ */ jsx(SummaryLabel, { children: isGerman ? "Deine Anfrage:" : "Your request:" }),
+            summaryChips.map((chip, index) => /* @__PURE__ */ jsxs(SummaryChip, { children: [
+              /* @__PURE__ */ jsx(CheckIcon, { children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: REDESIGN_COLORS.success, strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) }),
+              chip.value
+            ] }, index))
+          ] }),
+          /* @__PURE__ */ jsx(NudgeWrap, { children: !commentOpen ? /* @__PURE__ */ jsxs(NudgeClosed, { onClick: () => setCommentOpen(true), children: [
+            /* @__PURE__ */ jsx(NudgeIconWrap, { children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) }) }),
+            /* @__PURE__ */ jsxs(NudgeContent, { children: [
+              /* @__PURE__ */ jsx(NudgeTitle, { children: isGerman ? "Du möchtest uns weitere Wünsche mitteilen?" : "Would you like to share additional preferences?" }),
+              /* @__PURE__ */ jsx(NudgeDesc, { children: isGerman ? "Schreib uns Wünsche, Ernährungspräferenzen oder den Ablauf." : "Tell us your preferences, dietary requirements or schedule." })
+            ] }),
+            /* @__PURE__ */ jsx(NudgeAction, { children: isGerman ? "Ergänzen" : "Add" })
+          ] }) : /* @__PURE__ */ jsxs(NudgeOpen, { children: [
+            /* @__PURE__ */ jsxs(FormLabel, { children: [
+              isGerman ? "Deine Wünsche" : "Your preferences",
+              " ",
+              /* @__PURE__ */ jsxs(OptionalText, { children: [
+                "(",
+                isGerman ? "optional" : "optional",
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              TextArea,
+              {
+                name: "comment",
+                rows: 3,
+                value: values2.comment,
+                onChange: handleChange,
+                onBlur: handleBlur,
+                placeholder: isGerman ? "z.B. vegetarisch/vegan, glutenfreie Optionen, Anlieferung ab 11 Uhr, Geschirr benötigt …" : "e.g. vegetarian/vegan, gluten-free options, delivery from 11am, dishes needed …"
+              }
+            ),
+            /* @__PURE__ */ jsx(FieldHint, { children: isGerman ? "Du kannst das auch später in deinem Account ergänzen." : "You can also add this later in your account." })
+          ] }) }),
+          /* @__PURE__ */ jsxs(FormGrid, { children: [
+            /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsxs(FormLabel, { children: [
+                isGerman ? "Vorname" : "First name",
+                " *"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  name: "first_name",
+                  value: values2.first_name,
+                  onChange: handleChange,
+                  onBlur: (e2) => {
+                    markUserTouched("first_name");
+                    handleBlur(e2);
+                  },
+                  placeholder: isGerman ? "Vorname" : "First name",
+                  $hasError: shouldShowError("first_name", !!touched.first_name, errors.first_name)
+                }
+              ),
+              shouldShowError("first_name", !!touched.first_name, errors.first_name) && /* @__PURE__ */ jsx(ErrorText, { children: errors.first_name })
+            ] }),
+            /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsxs(FormLabel, { children: [
+                isGerman ? "Nachname" : "Last name",
+                " *"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  name: "last_name",
+                  value: values2.last_name,
+                  onChange: handleChange,
+                  onBlur: (e2) => {
+                    markUserTouched("last_name");
+                    handleBlur(e2);
+                  },
+                  placeholder: isGerman ? "Nachname" : "Last name",
+                  $hasError: shouldShowError("last_name", !!touched.last_name, errors.last_name)
+                }
+              ),
+              shouldShowError("last_name", !!touched.last_name, errors.last_name) && /* @__PURE__ */ jsx(ErrorText, { children: errors.last_name })
+            ] }),
+            /* @__PURE__ */ jsxs(FormField, { $fullWidth: true, children: [
+              /* @__PURE__ */ jsxs(FormLabel, { children: [
+                isGerman ? "Firma" : "Company",
+                " *"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  name: "company",
+                  value: values2.company,
+                  onChange: handleChange,
+                  onBlur: (e2) => {
+                    markUserTouched("company");
+                    handleBlur(e2);
+                  },
+                  placeholder: isGerman ? "Firma" : "Company",
+                  $hasError: shouldShowError("company", !!touched.company, errors.company)
+                }
+              ),
+              shouldShowError("company", !!touched.company, errors.company) && /* @__PURE__ */ jsx(ErrorText, { children: errors.company })
+            ] }),
+            /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(FormLabel, { children: "E-Mail *" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "email",
+                  name: "email",
+                  value: values2.email,
+                  onChange: handleChange,
+                  onBlur: (e2) => {
+                    markUserTouched("email");
+                    handleBlur(e2);
+                  },
+                  placeholder: "name@firma.de",
+                  $hasError: shouldShowError("email", !!touched.email, errors.email)
+                }
+              ),
+              shouldShowError("email", !!touched.email, errors.email) && /* @__PURE__ */ jsx(ErrorText, { children: errors.email })
+            ] }),
+            /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsxs(FormLabel, { children: [
+                isGerman ? "Telefon" : "Phone",
+                " *"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "tel",
+                  name: "phone",
+                  value: values2.phone,
+                  onChange: handleChange,
+                  onBlur: (e2) => {
+                    markUserTouched("phone");
+                    handleBlur(e2);
+                  },
+                  placeholder: "+49 30 56837200",
+                  $hasError: shouldShowError("phone", !!touched.phone, errors.phone)
+                }
+              ),
+              shouldShowError("phone", !!touched.phone, errors.phone) && /* @__PURE__ */ jsx(ErrorText, { children: errors.phone })
+            ] }),
+            /* @__PURE__ */ jsx(FormField, { $fullWidth: true, children: /* @__PURE__ */ jsx(AddressFieldWrapper, { $hideInitialError: !hasSubmitted, children: /* @__PURE__ */ jsx(
+              Field,
+              {
+                name: "delivery_address",
+                label: isGerman ? "Lieferadresse" : "Delivery address",
+                placeholder: isGerman ? "Straße, PLZ, Ort" : "Street, ZIP, City",
+                helperText: isGerman ? "Kannst du später jederzeit anpassen." : "You can adjust this later anytime.",
+                component: AutocompleteAddress,
+                required: true
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ jsx(Field, { type: "hidden", name: "deliveryAddressStreet" }),
+          /* @__PURE__ */ jsx(Field, { type: "hidden", name: "deliveryAddressStreetNumber" }),
+          /* @__PURE__ */ jsx(Field, { type: "hidden", name: "deliveryAddressPostalCode" }),
+          /* @__PURE__ */ jsx(Field, { type: "hidden", name: "deliveryAddressCity" }),
+          /* @__PURE__ */ jsx(Field, { type: "hidden", name: "deliveryAddressCountry" }),
+          /* @__PURE__ */ jsxs(NextStepsSection, { children: [
+            /* @__PURE__ */ jsx(NextStepsTitle, { children: isGerman ? "So geht es weiter" : "What happens next" }),
+            /* @__PURE__ */ jsx(NextStepsGrid, { children: nextSteps.map((step2, index) => /* @__PURE__ */ jsxs(NextStepItem, { children: [
+              /* @__PURE__ */ jsxs(NextStepDotRow, { children: [
+                /* @__PURE__ */ jsx(NextStepDot, {}),
+                /* @__PURE__ */ jsx(NextStepLine, {})
+              ] }),
+              /* @__PURE__ */ jsx(NextStepItemTitle, { children: step2.title }),
+              /* @__PURE__ */ jsx(NextStepItemDesc, { children: step2.desc })
+            ] }, index)) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(FixedFooter, { children: [
+          /* @__PURE__ */ jsxs(FooterTrust, { children: [
+            /* @__PURE__ */ jsxs(TrustItem, { children: [
+              /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }),
+              isGerman ? "Deine Anfrage ist kostenlos & unverbindlich" : "Your request is free & non-binding"
+            ] }),
+            /* @__PURE__ */ jsxs(TrustItemSecondary, { children: [
+              /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+              ] }),
+              isGerman ? "SSL-verschlüsselt" : "SSL encrypted"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(ButtonRow$1, { children: [
+            /* @__PURE__ */ jsx(BackButton$1, { type: "button", onClick: onBack, children: isGerman ? "Zurück" : "Back" }),
+            /* @__PURE__ */ jsx(SubmitButton, { type: "submit", disabled: isSubmitting, children: isSubmitting ? isGerman ? "Wird gesendet..." : "Submitting..." : isGerman ? "Anfrage senden" : "Submit request" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+const fadeIn$1 = keyframes`
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+`;
+const FormWrapper$1 = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+`;
+const ScrollableContent = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: ${fadeIn$1} 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+`;
+const Container = styled.div`
+  width: 100%;
+  max-width: 520px;
+  margin: 0 auto;
+  padding: 0 16px 20px;
+
+  @media (min-width: 960px) {
+    padding: 0 0 20px;
+  }
+`;
+const SummaryRow = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+  padding: 12px 16px;
+  background: ${REDESIGN_COLORS.white200};
+  border-radius: 12px;
+`;
+const SummaryLabel = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  color: ${REDESIGN_COLORS.secondaryText};
+`;
+const SummaryChip = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  background: ${REDESIGN_COLORS.white};
+  border-radius: 100px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12.5px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  color: ${REDESIGN_COLORS.mainText};
+`;
+const CheckIcon = styled.span`
+  display: flex;
+`;
+const NudgeWrap = styled.div`
+  background: ${REDESIGN_COLORS.white200};
+  border-radius: 12px;
+  margin-bottom: 20px;
+  overflow: hidden;
+`;
+const NudgeClosed = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  padding: 13px 16px;
+`;
+const NudgeIconWrap = styled.div`
+  flex: none;
+  width: 30px;
+  height: 30px;
+  border-radius: 500px;
+  background: ${REDESIGN_COLORS.orangeLighter};
+  color: ${REDESIGN_COLORS.orange};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const NudgeContent = styled.div`
+  flex: 1;
+`;
+const NudgeTitle = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13.5px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  color: ${REDESIGN_COLORS.mainText};
+  line-height: 1.3;
+`;
+const NudgeDesc = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  color: ${REDESIGN_COLORS.muted};
+  line-height: 1.4;
+  margin-top: 1px;
+`;
+const NudgeAction = styled.span`
+  flex: none;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12.5px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  color: ${REDESIGN_COLORS.orange};
+`;
+const NudgeOpen = styled.div`
+  padding: 14px 16px;
+`;
+const FormLabel = styled.label`
+  display: block;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  color: ${REDESIGN_COLORS.mainText};
+  margin-bottom: 6px;
+`;
+const OptionalText = styled.span`
+  color: ${REDESIGN_COLORS.muted};
+  font-weight: ${REDESIGN_FONTS.weight.regular};
+`;
+const TextArea = styled.textarea`
+  width: 100%;
+  padding: 13px 16px;
+  border: 1px solid ${REDESIGN_COLORS.inputBorder};
+  border-radius: 12px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 15px;
+  color: ${REDESIGN_COLORS.mainText};
+  background: ${REDESIGN_COLORS.white};
+  resize: vertical;
+  transition: border-color 0.15s;
+
+  &::placeholder {
+    color: #a5a5a5;
+  }
+
+  &:hover {
+    border-color: #cfcfcf;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${REDESIGN_COLORS.orange};
+  }
+`;
+const FieldHint = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 11.5px;
+  color: ${REDESIGN_COLORS.muted};
+  margin-top: 5px;
+`;
+const FormGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 22px;
+
+  @media (max-width: 639px) {
+    grid-template-columns: 1fr;
+  }
+`;
+const FormField = styled.div`
+  ${({ $fullWidth }) => $fullWidth && "grid-column: 1 / -1;"}
+`;
+const AddressFieldWrapper = styled.div`
+  position: relative;
+  z-index: 1;
+
+  .MuiFormControl-root {
+    width: 100%;
+  }
+
+  .MuiAutocomplete-root {
+    width: 100%;
+  }
+
+  .MuiAutocomplete-inputRoot {
+    padding: 0 !important;
+  }
+
+  .MuiInputBase-root {
+    width: 100%;
+    padding: 13px 16px;
+    border: 1px solid ${REDESIGN_COLORS.inputBorder};
+    border-radius: 12px;
+    font-family: ${REDESIGN_FONTS.family};
+    font-size: 15px;
+    color: ${REDESIGN_COLORS.mainText};
+    background: ${REDESIGN_COLORS.white};
+    transition: border-color 0.15s;
+    cursor: text;
+
+    &::before, &::after {
+      display: none;
+    }
+
+    &:hover {
+      border-color: #cfcfcf;
+    }
+
+    &.Mui-focused {
+      border-color: ${REDESIGN_COLORS.orange};
+    }
+
+    &.Mui-error {
+      ${({ $hideInitialError }) => $hideInitialError && `border-color: ${REDESIGN_COLORS.inputBorder};`}
+    }
+
+    input {
+      padding: 0;
+      font-family: ${REDESIGN_FONTS.family};
+      font-size: 15px;
+      cursor: text;
+
+      &::placeholder {
+        color: #a5a5a5;
+        opacity: 1;
+      }
+    }
+  }
+
+  .MuiInputLabel-root {
+    font-family: ${REDESIGN_FONTS.family};
+    font-size: 13px;
+    font-weight: ${REDESIGN_FONTS.weight.semibold};
+    color: ${REDESIGN_COLORS.mainText};
+    position: relative;
+    transform: none;
+    margin-bottom: 6px;
+    pointer-events: none;
+
+    &.Mui-focused {
+      color: ${REDESIGN_COLORS.mainText};
+    }
+  }
+
+  .MuiFormHelperText-root {
+    font-family: ${REDESIGN_FONTS.family};
+    font-size: 11.5px;
+    color: ${REDESIGN_COLORS.muted};
+    margin: 5px 0 0;
+
+    &.Mui-error {
+      ${({ $hideInitialError }) => $hideInitialError && "display: none;"}
+      color: ${REDESIGN_COLORS.error};
+    }
+  }
+
+  .MuiAutocomplete-listbox {
+    font-family: ${REDESIGN_FONTS.family};
+  }
+
+  .MuiAutocomplete-popper {
+    z-index: 1300;
+  }
+`;
+const Input = styled.input`
+  width: 100%;
+  padding: 13px 16px;
+  border: 1px solid ${({ $hasError }) => $hasError ? REDESIGN_COLORS.error : REDESIGN_COLORS.inputBorder};
+  border-radius: 12px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 15px;
+  color: ${REDESIGN_COLORS.mainText};
+  background: ${REDESIGN_COLORS.white};
+  transition: border-color 0.15s;
+
+  &::placeholder {
+    color: #a5a5a5;
+  }
+
+  &:hover {
+    border-color: ${({ $hasError }) => $hasError ? REDESIGN_COLORS.error : "#cfcfcf"};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${({ $hasError }) => $hasError ? REDESIGN_COLORS.error : REDESIGN_COLORS.orange};
+  }
+`;
+const ErrorText = styled.span`
+  display: block;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 11.5px;
+  color: ${REDESIGN_COLORS.error};
+  margin-top: 4px;
+`;
+const NextStepsSection = styled.div`
+  width: 100%;
+  margin-bottom: 22px;
+`;
+const NextStepsTitle = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 11px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${REDESIGN_COLORS.orange};
+  margin-bottom: 12px;
+`;
+const NextStepsGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+
+  @media (max-width: 639px) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+`;
+const NextStepItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+const NextStepDotRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const NextStepDot = styled.div`
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 500px;
+  background: ${REDESIGN_COLORS.orange};
+`;
+const NextStepLine = styled.div`
+  height: 1px;
+  flex: 1;
+  background: ${REDESIGN_COLORS.inputBorder};
+`;
+const NextStepItemTitle = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  color: ${REDESIGN_COLORS.mainText};
+  line-height: 1.3;
+`;
+const NextStepItemDesc = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 11.5px;
+  color: ${REDESIGN_COLORS.muted};
+  line-height: 1.4;
+`;
+const FixedFooter = styled.div`
+  flex: none;
+  padding: 12px 18px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  border-top: 1px solid #f0f0f0;
+  background: ${REDESIGN_COLORS.white};
+
+  @media (min-width: 960px) {
+    padding: 16px 44px 22px;
+  }
+`;
+const FooterTrust = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+const TrustItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  color: ${REDESIGN_COLORS.success};
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+`;
+const TrustItemSecondary = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12.5px;
+  color: ${REDESIGN_COLORS.muted};
+`;
+const ButtonRow$1 = styled.div`
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  justify-content: center;
+`;
+const BackButton$1 = styled.button`
+  background: ${REDESIGN_COLORS.mainText};
+  color: ${REDESIGN_COLORS.white};
+  padding: 14px 34px;
+  border-radius: 100px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 15px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s;
+
+  &:hover {
+    background: #1a1e30;
+  }
+`;
+const SubmitButton = styled.button`
+  padding: 14px 40px;
+  border-radius: 100px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 15px;
+  transition: all 0.15s;
+  border: none;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  background: ${({ disabled }) => disabled ? REDESIGN_COLORS.disabledOrange : REDESIGN_COLORS.orange};
+  color: ${REDESIGN_COLORS.white};
+
+  &:hover:not(:disabled) {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+`;
+const RedesignedFunnel = ({
+  ratings,
+  onCancel,
+  funnelContextRef,
+  updateContext
+}) => {
+  var _a2;
+  const { i18n } = useTranslation();
+  const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const router = useRouter();
+  const { state, actions, answerOf } = useQualification();
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [phase, setPhase] = useState("questions");
+  const [budgetPerPerson2, setBudgetPerPerson] = useState(20);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submittedData, setSubmittedData] = useState(null);
+  const [redirectUrl, setRedirectUrl] = useState(null);
+  const hasTrackedStart = useRef(false);
+  const { submitAsNewCustomer } = useRequestForm();
+  const currentStepId = REDESIGN_STEP_ORDER[currentStepIndex];
+  const handleCancel = onCancel || (() => window.history.back());
+  useEffect(() => {
+    if (currentStepId === "redesign_people_count") {
+      const existingCount = answerOf("min_order_number");
+      const existingBudget = answerOf("price_per_person");
+      if (existingCount === void 0) {
+        actions.answerQuestion("min_order_number", 100);
+      }
+      if (existingBudget === void 0) {
+        actions.answerQuestion("price_per_person", budgetPerPerson2);
+      }
+    }
+  }, [currentStepId, actions, answerOf, budgetPerPerson2]);
+  useEffect(() => {
+    if (!hasTrackedStart.current && funnelContextRef.current.session_id) {
+      hasTrackedStart.current = true;
+      trackStarted(funnelContextRef.current, currentStepId);
+    }
+  }, [funnelContextRef.current.session_id, currentStepId]);
+  const trackAnswer = useCallback((questionId, value) => {
+    let serializedValue = value;
+    if (value instanceof Date) {
+      serializedValue = format(value, "yyyy-MM-dd");
+    }
+    trackAnswerSelected(funnelContextRef.current, {
+      step_id: currentStepId,
+      step_index: currentStepIndex,
+      question_id: questionId,
+      answer_value: serializedValue,
+      is_last_question: true
+    });
+  }, [funnelContextRef, currentStepIndex, currentStepId]);
+  const nextStep = useCallback(() => {
+    const nextIndex = currentStepIndex + 1;
+    if (nextIndex >= REDESIGN_STEP_ORDER.length) {
+      setPhase("loading");
+    } else {
+      setCurrentStepIndex(nextIndex);
+    }
+  }, [currentStepIndex]);
+  const previousStep = useCallback(() => {
+    if (currentStepIndex > 0) {
+      setCurrentStepIndex(currentStepIndex - 1);
+    }
+  }, [currentStepIndex]);
+  const goToStep = useCallback((stepId) => {
+    const index = REDESIGN_STEP_ORDER.indexOf(stepId);
+    if (index >= 0 && index < currentStepIndex) {
+      setCurrentStepIndex(index);
+    }
+  }, [currentStepIndex]);
+  const handleCitySelect = useCallback((city) => {
+    actions.answerQuestion("city", city);
+    trackAnswer("city", city);
+    updateContext({ city });
+    nextStep();
+  }, [actions, trackAnswer, updateContext, nextStep]);
+  const handleEventTypeSelect = useCallback((eventType) => {
+    const mapping = mapEventTypeToServiceAndCategory(eventType);
+    actions.answerQuestion("event_type", eventType);
+    actions.answerQuestion("service_type", mapping.service_type);
+    actions.answerQuestion("catering_categories", [mapping.catering_category]);
+    trackAnswer("event_type", eventType);
+    updateContext({ service_type: mapping.service_type, total_steps: getRedesignTotalSteps() });
+    nextStep();
+  }, [actions, trackAnswer, updateContext, nextStep]);
+  const handleDateChange = useCallback((date2) => {
+    if (date2) {
+      actions.answerQuestion("event_date", date2);
+      trackAnswer("event_date", date2);
+    }
+  }, [actions, trackAnswer]);
+  const handleMultiDayChange = useCallback((isMultiDay) => {
+    actions.answerQuestion("is_multi_day", isMultiDay);
+    trackAnswer("is_multi_day", isMultiDay);
+  }, [actions, trackAnswer]);
+  const handlePeopleCountChange2 = useCallback((count) => {
+    actions.answerQuestion("min_order_number", count);
+    trackAnswer("min_order_number", count);
+  }, [actions, trackAnswer]);
+  const handleBudgetPerPersonChange = useCallback((budget) => {
+    setBudgetPerPerson(budget);
+    actions.answerQuestion("price_per_person", budget);
+    trackAnswer("price_per_person", budget);
+  }, [actions, trackAnswer]);
+  const handleLoadingComplete = useCallback(() => {
+    setPhase("contact");
+  }, []);
+  const handleContactFormSubmit = useCallback(async (formData) => {
+    setIsSubmitting(true);
+    try {
+      const buildValues = {
+        first_name: formData.vorname,
+        last_name: formData.nachname,
+        company: formData.firma,
+        email: formData.email,
+        phone: formData.telefon,
+        deliveryAddressStreet: formData.deliveryAddressStreet,
+        deliveryAddressStreetNumber: formData.deliveryAddressStreetNumber,
+        deliveryAddressPostalCode: formData.deliveryAddressPostalCode,
+        deliveryAddressCity: formData.deliveryAddressCity,
+        deliveryAddressCountry: formData.deliveryAddressCountry || "Germany",
+        comment: formData.kommentar
+      };
+      const response = await submitAsNewCustomer(buildValues);
+      const { signInToken, opportunity } = response || {};
+      if (opportunity == null ? void 0 : opportunity.id) {
+        const accountUrl = signInToken ? `/${router.locale}/account/requests/${opportunity.id}?one_time_sign_in_token=${signInToken}` : `/${router.locale}/account/external/requests/${opportunity.id}`;
+        setRedirectUrl(accountUrl);
+      }
+      trackCompleted(funnelContextRef.current);
+      setSubmittedData(formData);
+      setPhase("done");
+    } catch (error) {
+      console.error("Failed to submit request:", error);
+      setIsSubmitting(false);
+    }
+  }, [submitAsNewCustomer, funnelContextRef, router.locale]);
+  const handleContactBack = useCallback(() => {
+    setPhase("questions");
+    setCurrentStepIndex(REDESIGN_STEP_ORDER.length - 1);
+  }, []);
+  const canContinue = useCallback(() => {
+    switch (currentStepId) {
+      case "redesign_city":
+        return !!answerOf("city");
+      case "redesign_event_type":
+        return !!answerOf("event_type");
+      case "redesign_date":
+        return !!answerOf("event_date");
+      case "redesign_people_count":
+        const count = answerOf("min_order_number");
+        return typeof count === "number" && count > 0;
+      default:
+        return false;
+    }
+  }, [currentStepId, answerOf]);
+  const buildSelectionChips = () => {
+    const chips2 = [];
+    const city = answerOf("city");
+    const eventType = answerOf("event_type");
+    const eventDate = answerOf("event_date");
+    if (city) {
+      chips2.push(CITY_LABELS[city] || city);
+    }
+    if (eventType && currentStepIndex >= 2) {
+      const labels2 = isGerman ? EVENT_LABELS_DE : EVENT_LABELS_EN;
+      chips2.push(labels2[eventType] || eventType);
+    }
+    if (currentStepIndex >= 3 && eventDate) {
+      chips2.push(format(eventDate, "dd.MM.yy"));
+    }
+    return chips2;
+  };
+  if (phase === "loading") {
+    return /* @__PURE__ */ jsx(FunnelContainer, { children: /* @__PURE__ */ jsx(MainContent, { $fullWidth: true, children: /* @__PURE__ */ jsx(LoadingScreen, { onComplete: handleLoadingComplete }) }) });
+  }
+  if (phase === "contact") {
+    const contactTitle = isGerman ? "Fast geschafft – nur noch deine Kontaktdaten" : "Almost done – just your contact details";
+    const contactSubtitle = isGerman ? "Danach meldet sich dein Cateringexperte und schickt dir passende Angebote." : "Your catering expert will then get in touch and send you matching offers.";
+    return /* @__PURE__ */ jsxs(FunnelContainer, { children: [
+      /* @__PURE__ */ jsx(StepRail, { currentStepId: REDESIGN_STEP_IDS.contact, onStepClick: () => {
+      } }),
+      /* @__PURE__ */ jsxs(MainContent, { children: [
+        /* @__PURE__ */ jsxs(MobileHeader, { children: [
+          /* @__PURE__ */ jsx(MobileLogoWrapper, { children: /* @__PURE__ */ jsx(Logo, { height: 20 }) }),
+          /* @__PURE__ */ jsx(MobileStepInfo, { children: /* @__PURE__ */ jsx(MobileStepCount, { children: isGerman ? `Schritt 5 von 5` : `Step 5 of 5` }) }),
+          /* @__PURE__ */ jsx(MobileProgressBar, { children: /* @__PURE__ */ jsx(MobileProgress, { $progress: 100 }) })
+        ] }),
+        /* @__PURE__ */ jsxs(DesktopTopBar, { children: [
+          /* @__PURE__ */ jsx(CancelText, { onClick: handleCancel, children: isGerman ? "Abbrechen" : "Cancel" }),
+          /* @__PURE__ */ jsx(DesktopStepCount, { children: isGerman ? `Schritt 5 von 5` : `Step 5 of 5` })
+        ] }),
+        /* @__PURE__ */ jsxs(ContactContentArea, { children: [
+          /* @__PURE__ */ jsx(StepTitle, { children: contactTitle }),
+          /* @__PURE__ */ jsx(StepSubtitle, { children: contactSubtitle }),
+          /* @__PURE__ */ jsx(
+            RedesignContactForm,
+            {
+              onSubmit: handleContactFormSubmit,
+              onBack: handleContactBack,
+              isSubmitting
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  if (phase === "done") {
+    const firstName = (submittedData == null ? void 0 : submittedData.vorname) || "";
+    const email = (submittedData == null ? void 0 : submittedData.email) || "";
+    const doneSteps = isGerman ? [
+      { n: "1", title: "Wir prüfen deine Anfrage", desc: "Unser Team schaut sich deine Anfrage an." },
+      { n: "2", title: "Du erhältst Angebote", desc: "Innerhalb weniger Stunden bekommst du bis zu 3 passende Angebote." },
+      { n: "3", title: "Buche deinen Favoriten", desc: "Vergleiche die Angebote und buche, wenn du bereit bist." }
+    ] : [
+      { n: "1", title: "We review your request", desc: "Our team will look at your request." },
+      { n: "2", title: "You receive offers", desc: "Within a few hours you'll receive up to 3 matching offers." },
+      { n: "3", title: "Book your favorite", desc: "Compare the offers and book when you're ready." }
+    ];
+    return /* @__PURE__ */ jsx(FunnelContainer, { children: /* @__PURE__ */ jsx(MainContent, { $fullWidth: true, children: /* @__PURE__ */ jsxs(DoneScreen, { children: [
+      /* @__PURE__ */ jsx(DoneLogoWrapper, { children: /* @__PURE__ */ jsx(Logo, { height: 24 }) }),
+      /* @__PURE__ */ jsxs(DoneBadge, { children: [
+        /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }),
+        isGerman ? "Anfrage gesendet" : "Request sent"
+      ] }),
+      /* @__PURE__ */ jsx(DoneTitle, { children: isGerman ? `Danke, ${firstName}!` : `Thank you, ${firstName}!` }),
+      /* @__PURE__ */ jsx(DoneSubtitle, { children: isGerman ? "Wir haben deine Anfrage erhalten und stellen jetzt passende Angebote für dich zusammen." : "We have received your request and are now putting together matching offers for you." }),
+      /* @__PURE__ */ jsxs(DoneCard, { children: [
+        /* @__PURE__ */ jsx(DoneStepsTitle, { children: isGerman ? "So geht es weiter" : "What happens next" }),
+        /* @__PURE__ */ jsx(DoneStepsList, { children: doneSteps.map((step2) => /* @__PURE__ */ jsxs(DoneStepItem, { children: [
+          /* @__PURE__ */ jsx(DoneStepNumber, { children: step2.n }),
+          /* @__PURE__ */ jsxs(DoneStepContent, { children: [
+            /* @__PURE__ */ jsx(DoneStepItemTitle, { children: step2.title }),
+            /* @__PURE__ */ jsx(DoneStepItemDesc, { children: step2.desc })
+          ] })
+        ] }, step2.n)) })
+      ] }),
+      /* @__PURE__ */ jsx(DoneEmailNote, { children: isGerman ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Eine Bestätigung ist unterwegs an ",
+        /* @__PURE__ */ jsx("strong", { children: email }),
+        "."
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        "A confirmation is on its way to ",
+        /* @__PURE__ */ jsx("strong", { children: email }),
+        "."
+      ] }) }),
+      redirectUrl && /* @__PURE__ */ jsx(DoneCTA, { onClick: () => window.location.href = redirectUrl, children: isGerman ? "Zu meiner Anfrage" : "View my request" })
+    ] }) }) });
+  }
+  const currentStep = REDESIGN_STEPS[currentStepId];
+  const stepTitle = isGerman ? currentStep.titleDe : currentStep.titleEn;
+  const stepSubtitle = isGerman ? currentStep.subtitleDe : currentStep.subtitleEn;
+  const totalSteps = getRedesignTotalSteps();
+  const chips = buildSelectionChips();
+  const showBack = currentStepIndex > 0;
+  const showChips = currentStepIndex >= 1 && chips.length > 0;
+  const renderStepContent = () => {
+    switch (currentStepId) {
+      case "redesign_city":
+        return /* @__PURE__ */ jsx(
+          RedesignCityTiles,
+          {
+            selected: answerOf("city"),
+            onSelect: handleCitySelect
+          }
+        );
+      case "redesign_event_type":
+        return /* @__PURE__ */ jsx(
+          EventTypeTiles,
+          {
+            selected: answerOf("event_type"),
+            onSelect: handleEventTypeSelect,
+            variant: "primary"
+          }
+        );
+      case "redesign_date":
+        return /* @__PURE__ */ jsx(
+          SimpleDatePicker,
+          {
+            value: answerOf("event_date"),
+            onChange: handleDateChange,
+            isMultiDay: !!answerOf("is_multi_day"),
+            onMultiDayChange: handleMultiDayChange
+          }
+        );
+      case "redesign_people_count":
+        return /* @__PURE__ */ jsx(
+          BudgetPeopleStep,
+          {
+            peopleCount: answerOf("min_order_number") || 100,
+            budgetPerPerson: budgetPerPerson2,
+            onPeopleCountChange: handlePeopleCountChange2,
+            onBudgetPerPersonChange: handleBudgetPerPersonChange
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs(FunnelContainer, { children: [
+    /* @__PURE__ */ jsx(StepRail, { currentStepId, onStepClick: goToStep }),
+    /* @__PURE__ */ jsxs(MainContent, { children: [
+      /* @__PURE__ */ jsxs(MobileHeader, { children: [
+        /* @__PURE__ */ jsx(MobileLogoWrapper, { children: /* @__PURE__ */ jsx(Logo, { height: 20 }) }),
+        /* @__PURE__ */ jsxs(MobileStepInfo, { children: [
+          /* @__PURE__ */ jsx(MobileStepCount, { children: isGerman ? `Schritt ${currentStepIndex + 1} von ${totalSteps}` : `Step ${currentStepIndex + 1} of ${totalSteps}` }),
+          /* @__PURE__ */ jsx(MobileCancelButton, { onClick: handleCancel, children: isGerman ? "Abbrechen" : "Cancel" })
+        ] }),
+        /* @__PURE__ */ jsx(MobileProgressBar, { children: /* @__PURE__ */ jsx(MobileProgress, { $progress: (currentStepIndex + 1) / totalSteps * 100 }) })
+      ] }),
+      /* @__PURE__ */ jsxs(DesktopTopBar, { children: [
+        /* @__PURE__ */ jsx(CancelText, { onClick: handleCancel, children: isGerman ? "Abbrechen" : "Cancel" }),
+        /* @__PURE__ */ jsx(DesktopStepCount, { children: isGerman ? `Schritt ${currentStepIndex + 1} von ${totalSteps}` : `Step ${currentStepIndex + 1} of ${totalSteps}` })
+      ] }),
+      /* @__PURE__ */ jsxs(ContentArea, { children: [
+        /* @__PURE__ */ jsx(StepTitle, { children: stepTitle }),
+        stepSubtitle && /* @__PURE__ */ jsx(StepSubtitle, { children: stepSubtitle }),
+        /* @__PURE__ */ jsx(StepContent, { children: renderStepContent() })
+      ] }),
+      /* @__PURE__ */ jsxs(FooterBar, { children: [
+        showChips && /* @__PURE__ */ jsxs(ChipRow, { children: [
+          /* @__PURE__ */ jsx(ChipLabel, { children: isGerman ? "Deine Auswahl:" : "Your selection:" }),
+          chips.map((chip, index) => /* @__PURE__ */ jsx(Chip, { children: chip }, index))
+        ] }),
+        /* @__PURE__ */ jsxs(TrustText, { children: [
+          /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }),
+          isGerman ? "Deine Anfrage ist kostenlos & unverbindlich" : "Your request is free & non-binding"
+        ] }),
+        /* @__PURE__ */ jsxs(ButtonRow, { children: [
+          showBack && /* @__PURE__ */ jsx(BackButton, { type: "button", onClick: previousStep, children: isGerman ? "Zurück" : "Back" }),
+          /* @__PURE__ */ jsx(
+            ContinueButton,
+            {
+              type: "button",
+              onClick: nextStep,
+              disabled: !canContinue(),
+              children: isGerman ? "Weiter" : "Continue"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const fadeIn = keyframes`
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+`;
+const FunnelContainer = styled.div`
+  display: flex;
+  min-height: 100vh;
+  background: ${REDESIGN_COLORS.white};
+`;
+const MainContent = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
+`;
+const MobileHeader = styled.div`
+  flex: none;
+  padding: 16px 18px 10px;
+
+  @media (min-width: 960px) {
+    display: none;
+  }
+`;
+const MobileLogoWrapper = styled.div`
+  margin-bottom: 12px;
+`;
+const MobileStepInfo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+`;
+const MobileStepCount = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  color: ${REDESIGN_COLORS.muted};
+`;
+const MobileCancelButton = styled.button`
+  background: none;
+  border: none;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  color: ${REDESIGN_COLORS.muted};
+  cursor: pointer;
+  padding: 0;
+`;
+const MobileProgressBar = styled.div`
+  height: 4px;
+  border-radius: 100px;
+  background: ${REDESIGN_COLORS.progressBg};
+  overflow: hidden;
+`;
+const MobileProgress = styled.div`
+  height: 100%;
+  border-radius: 100px;
+  background: ${REDESIGN_COLORS.orange};
+  transition: width 0.3s ease;
+  width: ${({ $progress }) => $progress}%;
+`;
+const DesktopTopBar = styled.div`
+  display: none;
+
+  @media (min-width: 960px) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 22px 44px;
+    flex: none;
+  }
+`;
+const CancelText = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 14px;
+  color: ${REDESIGN_COLORS.muted};
+  cursor: pointer;
+
+  &:hover {
+    color: ${REDESIGN_COLORS.mainText};
+  }
+`;
+const DesktopStepCount = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  color: ${REDESIGN_COLORS.muted};
+`;
+const ContentArea = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 14px 18px 10px;
+  animation: ${fadeIn} 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+
+  @media (min-width: 960px) {
+    padding: 40px 44px 20px;
+  }
+`;
+const StepTitle = styled.h1`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 23px;
+  line-height: 1.22;
+  letter-spacing: -0.32px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  text-align: center;
+  margin: 0 0 6px;
+  color: ${REDESIGN_COLORS.mainText};
+
+  @media (min-width: 640px) {
+    font-size: 32px;
+    line-height: 1.2;
+    letter-spacing: -0.32px;
+  }
+`;
+const StepSubtitle = styled.p`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13.5px;
+  color: #585858;
+  text-align: center;
+  margin: 0 0 20px;
+  max-width: 500px;
+
+  @media (min-width: 640px) {
+    font-size: 15px;
+    margin: 0 0 28px;
+  }
+`;
+const StepContent = styled.div`
+  width: 100%;
+  max-width: 800px;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media (min-width: 960px) {
+    margin-top: 32px;
+  }
+`;
+const FooterBar = styled.div`
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 18px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 9px;
+  border-top: 1px solid #f0f0f0;
+  background: ${REDESIGN_COLORS.white};
+  z-index: 10;
+
+  @media (min-width: 960px) {
+    padding: 16px 44px 22px;
+    gap: 12px;
+  }
+`;
+const ChipRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  @media (min-width: 960px) {
+    gap: 8px;
+  }
+`;
+const ChipLabel = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 11px;
+  color: #9a9a9a;
+
+  @media (min-width: 640px) {
+    font-size: 13px;
+  }
+`;
+const TrustText = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  color: ${REDESIGN_COLORS.success};
+`;
+const Chip = styled.span`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  color: ${REDESIGN_COLORS.mainText};
+  background: ${REDESIGN_COLORS.beige};
+  padding: 6px 12px;
+  border-radius: 100px;
+`;
+const ButtonRow = styled.div`
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  justify-content: center;
+`;
+const BackButton = styled.button`
+  background: ${REDESIGN_COLORS.mainText};
+  color: ${REDESIGN_COLORS.white};
+  padding: 14px 34px;
+  border-radius: 100px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 15px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s;
+
+  &:hover {
+    background: #1a1e30;
+  }
+`;
+const ContinueButton = styled.button`
+  padding: 14px 40px;
+  border-radius: 100px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 15px;
+  transition: all 0.15s;
+  border: none;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  background: ${({ disabled }) => disabled ? REDESIGN_COLORS.disabledOrange : REDESIGN_COLORS.orange};
+  color: ${REDESIGN_COLORS.white};
+  pointer-events: ${({ disabled }) => disabled ? "none" : "auto"};
+
+  &:hover:not(:disabled) {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+`;
+const ContactContentArea = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 0;
+  padding: 14px 18px 0;
+
+  @media (min-width: 960px) {
+    padding: 12px 44px 0;
+  }
+`;
+const DoneScreen = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  animation: ${fadeIn} 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+`;
+const DoneLogoWrapper = styled.div`
+  margin-bottom: 26px;
+`;
+const DoneBadge = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: ${REDESIGN_COLORS.successLight};
+  color: ${REDESIGN_COLORS.success};
+  padding: 6px 14px;
+  border-radius: 100px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12.5px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  margin-bottom: 14px;
+`;
+const DoneTitle = styled.h1`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 32px;
+  font-weight: ${REDESIGN_FONTS.weight.medium};
+  letter-spacing: -0.32px;
+  color: ${REDESIGN_COLORS.mainText};
+  margin: 0 0 8px;
+`;
+const DoneSubtitle = styled.p`
+  font-family: ${REDESIGN_FONTS.family};
+  color: ${REDESIGN_COLORS.secondaryText};
+  font-size: 15px;
+  margin: 0 0 30px;
+  max-width: 500px;
+`;
+const DoneCard = styled.div`
+  width: 100%;
+  max-width: 560px;
+  background: ${REDESIGN_COLORS.beige};
+  border-radius: 32px;
+  padding: 24px 28px;
+  margin-bottom: 28px;
+  text-align: left;
+`;
+const DoneStepsTitle = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 11px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${REDESIGN_COLORS.orange};
+  margin-bottom: 16px;
+`;
+const DoneStepsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+const DoneStepItem = styled.div`
+  display: flex;
+  gap: 13px;
+  align-items: flex-start;
+`;
+const DoneStepNumber = styled.div`
+  flex: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: ${REDESIGN_COLORS.white};
+  color: ${REDESIGN_COLORS.orange};
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const DoneStepContent = styled.div``;
+const DoneStepItemTitle = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 14px;
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  color: ${REDESIGN_COLORS.mainText};
+  line-height: 1.35;
+`;
+const DoneStepItemDesc = styled.div`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 12.5px;
+  color: #8a8580;
+  line-height: 1.45;
+  margin-top: 2px;
+`;
+const DoneEmailNote = styled.p`
+  font-family: ${REDESIGN_FONTS.family};
+  font-size: 13px;
+  color: ${REDESIGN_COLORS.muted};
+  margin: 0 0 22px;
+  max-width: 460px;
+
+  strong {
+    color: ${REDESIGN_COLORS.mainText};
+    font-weight: ${REDESIGN_FONTS.weight.semibold};
+  }
+`;
+const DoneCTA = styled.span`
+  background: ${REDESIGN_COLORS.orange};
+  color: ${REDESIGN_COLORS.white};
+  padding: 13px 30px;
+  border-radius: 100px;
+  font-family: ${REDESIGN_FONTS.family};
+  font-weight: ${REDESIGN_FONTS.weight.semibold};
+  font-size: 15px;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+function useAbandonmentTracking(funnelContextRef, state) {
+  const hasTrackedAbandonmentRef = useRef(false);
+  const hasCompletedRef = useRef(false);
+  useEffect(() => {
+    if (state.status === QUALIFICATION_STATUS.answered || state.status === QUALIFICATION_STATUS.qualifiedForRequest || state.status === QUALIFICATION_STATUS.qualifiedForMarketplace || state.status === QUALIFICATION_STATUS.qualifiedForCate) {
+      hasCompletedRef.current = true;
+      return;
+    }
+    if (state.status !== QUALIFICATION_STATUS.answering) {
+      hasTrackedAbandonmentRef.current = false;
+      return;
+    }
+    if (!("qualification" in state)) return;
+    const stateSnapshot = {
+      stepId: state.qualification.step.id,
+      stepIndex: state.qualification.stepIndex
+    };
+    const handleAbandonment = () => {
+      if (hasTrackedAbandonmentRef.current) return;
+      if (hasCompletedRef.current) return;
+      trackAbandoned(funnelContextRef.current, {
+        step_id: stateSnapshot.stepId,
+        step_index: stateSnapshot.stepIndex
+      });
+      hasTrackedAbandonmentRef.current = true;
+    };
+    let invisibilityTimeout;
+    const handleVisibilityChange2 = () => {
+      if (document.hidden) {
+        invisibilityTimeout = setTimeout(handleAbandonment, 3e3);
+      } else {
+        clearTimeout(invisibilityTimeout);
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange2);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange2);
+      clearTimeout(invisibilityTimeout);
+    };
+  }, [
+    state.status,
+    "qualification" in state && "step" in state.qualification ? state.qualification.step.id : null
+  ]);
+}
+const FEATURE_FLAG_NAME = "qf_redesign_v1";
+function useFunnelVariant() {
+  const forceRedesign = typeof window !== "undefined" && window.location.search.includes("variant=redesign");
+  const [variant, setVariant] = useState(forceRedesign ? "redesign" : "control");
+  useEffect(() => {
+    if (forceRedesign) {
+      setVariant("redesign");
+      return;
+    }
+    if (typeof window === "undefined" || !window.posthog) {
+      return;
+    }
+    const posthog = window.posthog;
+    const checkFlag = () => {
+      var _a2;
+      const flagValue = (_a2 = posthog.getFeatureFlag) == null ? void 0 : _a2.call(posthog, FEATURE_FLAG_NAME);
+      if (flagValue === "redesign") {
+        setVariant("redesign");
+      } else {
+        setVariant("control");
+      }
+    };
+    checkFlag();
+    if (posthog.onFeatureFlags) {
+      posthog.onFeatureFlags(checkFlag);
+    }
+  }, [forceRedesign]);
+  return variant;
+}
+const EmbeddedFunnel = React__default.forwardRef(
+  ({
+    onBackground,
+    highlightColor,
+    ratings,
+    slides,
+    renderTitle,
+    titleTranslationKeys,
+    LayoutComponent = EmbeddedQuestionLayout,
+    mode = "embedded",
+    onCancel
+  }, ref2) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const scrollHelperRef = useRef(null);
+    const funnelVariant = useFunnelVariant();
+    const { state, actions, canContinue } = useQualification({});
+    const funnelContext = useRef({
+      session_id: "",
+      funnel_mode: mode,
+      service_type: "",
+      total_steps: 0,
+      funnel_variant: funnelVariant
+    });
+    const updateContext = useCallback((patch) => {
+      funnelContext.current = { ...funnelContext.current, ...patch };
+      if (typeof sessionStorage !== "undefined" && funnelContext.current.session_id) {
+        try {
           sessionStorage.setItem(
             `funnel_context_${funnelContext.current.session_id}`,
             JSON.stringify(funnelContext.current)
@@ -30183,6 +33045,11 @@ const EmbeddedFunnel = React__default.forwardRef(
     useEffect(() => {
       cleanupOldTrackingSessions();
     }, []);
+    useEffect(() => {
+      if (funnelVariant) {
+        updateContext({ funnel_variant: funnelVariant });
+      }
+    }, [funnelVariant, updateContext]);
     useLayoutEffect(() => {
       var _a3, _b2, _c2;
       if (!("qualification" in state)) return;
@@ -30254,6 +33121,19 @@ const EmbeddedFunnel = React__default.forwardRef(
     if (state.status !== QUALIFICATION_STATUS.answered && state.status !== QUALIFICATION_STATUS.answering && state.status !== QUALIFICATION_STATUS.qualifiedForRequest) {
       return null;
     }
+    const isFullscreen = mode === "fullscreen";
+    const shouldUseRedesign = isFullscreen && funnelVariant === "redesign";
+    if (shouldUseRedesign) {
+      return /* @__PURE__ */ jsx(
+        RedesignedFunnel,
+        {
+          ratings,
+          onCancel,
+          funnelContextRef: funnelContext,
+          updateContext
+        }
+      );
+    }
     const stepId = state.status === "answering" && ((_d = state.qualification.step) == null ? void 0 : _d.id) || "";
     const onKeyPress = (event) => {
       if (event.key === "Enter" && canContinue) {
@@ -30291,7 +33171,6 @@ const EmbeddedFunnel = React__default.forwardRef(
     if (stepId === "event_date" && ((_j = slides == null ? void 0 : slides.dateAndLead) == null ? void 0 : _j.whiteWrapper)) {
       textColor = "dark";
     }
-    const isFullscreen = mode === "fullscreen";
     const enabledSteps = state.qualification.steps.filter((q2) => !q2.disabled);
     const handleCancel = onCancel || (() => window.history.back());
     return /* @__PURE__ */ jsxs(