@stenajs-webui/calendar 23.21.17 → 23.23.0

package/dist/components/calendar-types/travel-date-calendar/TravelDateCalendar.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { HeadingVariant } from "@stenajs-webui/core";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { TravelCalendarSizeVariant } from "../../../features/travel-calendar/components/TravelCalendar";
-import { DateTextInputVariant } from "../../../features/travel-calendar/types";
+import { DateTextInputVariant, RenderTravelDateContent } from "../../../features/travel-calendar/types";
 import { SupportedLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
 export interface TravelDateCalendarProps extends ValueAndOnValueChangeProps<string> {
     localeCode?: SupportedLocaleCode;
@@ -16,6 +16,19 @@ export interface TravelDateCalendarProps extends ValueAndOnValueChangeProps<stri
     firstMonthInMonthPicker?: Date;
     numMonthsInMonthPicker?: number;
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Renders the content of each date in the calendar, in place of the day
+     * number. The cell around it, with the selection, focus and keyboard
+     * navigation, stays the calendar's. See RenderTravelDateContent.
+     */
+    renderDateContent?: RenderTravelDateContent;
+    /**
+     * Called with the first day of the month the calendar shows: once when the
+     * component mounts, and again each time the user moves to another month.
+     * For loading data one month at a time, such as prices for
+     * renderDateContent.
+     */
+    onVisibleMonthChange?: (visibleMonth: Date) => void;
     prevMonthDisabled?: (visibleMonth: Date) => boolean;
     nextMonthDisabled?: (visibleMonth: Date) => boolean;
     size?: TravelCalendarSizeVariant;

package/dist/components/calendar-types/travel-date-calendar-panel/TravelDateCalendarPanel.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { TravelCalendarSizeVariant } from "../../../features/travel-calendar/components/TravelCalendar";
 import { SupportedLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
+import { RenderTravelDateContent } from "../../../features/travel-calendar/types";
 export interface TravelDateCalendarPanelProps extends ValueAndOnValueChangeProps<string> {
     localeCode?: SupportedLocaleCode;
     languageLocaleCode?: SupportedLocaleCode;
@@ -11,6 +12,19 @@ export interface TravelDateCalendarPanelProps extends ValueAndOnValueChangeProps
     firstMonthInMonthPicker?: Date;
     numMonthsInMonthPicker?: number;
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Renders the content of each date in the calendar, in place of the day
+     * number. The cell around it, with the selection, focus and keyboard
+     * navigation, stays the calendar's. See RenderTravelDateContent.
+     */
+    renderDateContent?: RenderTravelDateContent;
+    /**
+     * Called with the first day of the month the calendar shows: once when the
+     * component mounts, and again each time the user moves to another month.
+     * For loading data one month at a time, such as prices for
+     * renderDateContent.
+     */
+    onVisibleMonthChange?: (visibleMonth: Date) => void;
     prevMonthDisabled?: (visibleMonth: Date) => boolean;
     nextMonthDisabled?: (visibleMonth: Date) => boolean;
     size?: TravelCalendarSizeVariant;

package/dist/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { HeadingVariant } from "@stenajs-webui/core";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { TravelCalendarSizeVariant } from "../../../features/travel-calendar/components/TravelCalendar";
-import { DateTextInputVariant, TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
+import { DateTextInputVariant, TravelDateRangeInputValue, RenderTravelDateContent } from "../../../features/travel-calendar/types";
 import { SupportedLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
 export interface TravelDateRangeCalendarProps extends ValueAndOnValueChangeProps<TravelDateRangeInputValue> {
     localeCode?: SupportedLocaleCode;
@@ -17,6 +17,19 @@ export interface TravelDateRangeCalendarProps extends ValueAndOnValueChangeProps
     firstMonthInMonthPicker?: Date;
     numMonthsInMonthPicker?: number;
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Renders the content of each date in the calendar, in place of the day
+     * number. The cell around it, with the selection, focus and keyboard
+     * navigation, stays the calendar's. See RenderTravelDateContent.
+     */
+    renderDateContent?: RenderTravelDateContent;
+    /**
+     * Called with the first day of the month the calendar shows: once when the
+     * component mounts, and again each time the user moves to another month.
+     * For loading data one month at a time, such as prices for
+     * renderDateContent.
+     */
+    onVisibleMonthChange?: (visibleMonth: Date) => void;
     prevMonthDisabled?: (visibleMonth: Date) => boolean;
     nextMonthDisabled?: (visibleMonth: Date) => boolean;
     size?: TravelCalendarSizeVariant;

package/dist/components/input-types/travel-date-input/TravelDateInput.d.ts

@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 import { HeadingVariant } from "@stenajs-webui/core";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { TravelCalendarSizeVariant } from "../../../features/travel-calendar/components/TravelCalendar";
-import { DateTextInputVariant } from "../../../features/travel-calendar/types";
+import { DateTextInputVariant, RenderTravelDateContent } from "../../../features/travel-calendar/types";
 import { SupportedLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
 export interface RenderBelowSingleDateCalendarArgs {
     hideCalendar: () => void;
@@ -20,6 +20,19 @@ export interface TravelDateInputProps extends ValueAndOnValueChangeProps<string>
     firstMonthInMonthPicker?: Date;
     numMonthsInMonthPicker?: number;
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Renders the content of each date in the calendar, in place of the day
+     * number. The cell around it, with the selection, focus and keyboard
+     * navigation, stays the calendar's. See RenderTravelDateContent.
+     */
+    renderDateContent?: RenderTravelDateContent;
+    /**
+     * Called with the first day of the month the calendar shows: once when the
+     * component mounts, and again each time the user moves to another month.
+     * For loading data one month at a time, such as prices for
+     * renderDateContent.
+     */
+    onVisibleMonthChange?: (visibleMonth: Date) => void;
     prevMonthDisabled?: (visibleMonth: Date) => boolean;
     nextMonthDisabled?: (visibleMonth: Date) => boolean;
     zIndex?: number;

package/dist/components/input-types/travel-date-range-input/TravelDateRangeInput.d.ts

@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 import { HeadingVariant } from "@stenajs-webui/core";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { TravelCalendarSizeVariant } from "../../../features/travel-calendar/components/TravelCalendar";
-import { DateTextInputVariant, TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
+import { DateTextInputVariant, TravelDateRangeInputValue, RenderTravelDateContent } from "../../../features/travel-calendar/types";
 import { SupportedLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
 export interface RenderBelowCalendarArgs {
     hideCalendar: () => void;
@@ -21,6 +21,19 @@ export interface TravelDateRangeInputProps extends ValueAndOnValueChangeProps<Tr
     firstMonthInMonthPicker?: Date;
     numMonthsInMonthPicker?: number;
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Renders the content of each date in the calendar, in place of the day
+     * number. The cell around it, with the selection, focus and keyboard
+     * navigation, stays the calendar's. See RenderTravelDateContent.
+     */
+    renderDateContent?: RenderTravelDateContent;
+    /**
+     * Called with the first day of the month the calendar shows: once when the
+     * component mounts, and again each time the user moves to another month.
+     * For loading data one month at a time, such as prices for
+     * renderDateContent.
+     */
+    onVisibleMonthChange?: (visibleMonth: Date) => void;
     prevMonthDisabled?: (visibleMonth: Date) => boolean;
     nextMonthDisabled?: (visibleMonth: Date) => boolean;
     zIndex?: number;

package/dist/features/travel-calendar/components/TravelCalendar.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Dispatch, SetStateAction } from "react";
 import { MonthData } from "../../../util/calendar/CalendarDataFactory";
+import { RenderTravelDateContent } from "../types";
 export type TravelCalendarSizeVariant = "smaller" | "small" | "medium" | "large";
 export interface TravelCalendarProps {
     visibleMonthData: MonthData;
@@ -20,6 +21,12 @@ export interface TravelCalendarProps {
     hoverAnchor: Date | undefined;
     today: Date;
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Renders the content of each date in the calendar, in place of the day
+     * number. The cell around it, with the selection, focus and keyboard
+     * navigation, stays the calendar's. See RenderTravelDateContent.
+     */
+    renderDateContent?: RenderTravelDateContent;
     dateTestId?: (date: Date) => string | undefined;
     calendarId: string;
     size?: TravelCalendarSizeVariant;

package/dist/features/travel-calendar/components/TravelDateCalendarBody.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { SupportedLocaleCode } from "../../localize-date-format/LocaleMapper";
 import { useTravelDateInput } from "../hooks/UseTravelDateInput";
 import { TravelCalendarSizeVariant } from "./TravelCalendar";
+import { RenderTravelDateContent } from "../types";
 export interface TravelDateCalendarBodyProps {
     /** The calendar state, from useTravelDateInput. */
     inputProps: ReturnType<typeof useTravelDateInput>;
@@ -11,6 +12,12 @@ export interface TravelDateCalendarBodyProps {
     firstMonthInMonthPicker: Date;
     numMonthsInMonthPicker: number;
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Renders the content of each date in the calendar, in place of the day
+     * number. The cell around it, with the selection, focus and keyboard
+     * navigation, stays the calendar's. See RenderTravelDateContent.
+     */
+    renderDateContent?: RenderTravelDateContent;
     prevMonthDisabled?: (visibleMonth: Date) => boolean;
     nextMonthDisabled?: (visibleMonth: Date) => boolean;
     size: TravelCalendarSizeVariant;

package/dist/features/travel-calendar/components/TravelDateCell.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { DayData } from "../../../util/calendar/CalendarDataFactory";
 import { TravelCalendarSizeVariant } from "./TravelCalendar";
+import { RenderTravelDateContent } from "../types";
 export interface TravelDateCellProps {
     onClick: (date: Date) => void;
     day: DayData;
@@ -26,5 +27,6 @@ export interface TravelDateCellProps {
      * If "left", only hovering on earlier dates will create a highlight. If undefined, no range will be highlighted.
      */
     hoverHighlightDirection: "left" | "right" | undefined;
+    renderDateContent?: RenderTravelDateContent;
 }
 export declare const TravelDateCell: React.FC<TravelDateCellProps>;

package/dist/features/travel-calendar/components/__tests__/TravelDateContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/features/travel-calendar/components/__tests__/VisibleMonthChange.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/features/travel-calendar/hooks/UseOnVisibleMonthChange.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Reports the month a travel calendar shows, once when it mounts and then
+ * each time it moves to another month.
+ *
+ * The calendar keeps its visible month as a date, and not always the first of
+ * the month: moving across a month edge with the arrow keys sets it to the
+ * date the focus moved to. So the month is compared by year and month, not by
+ * date, and reported as its first day, so that each month is reported once
+ * and always in the same form.
+ *
+ * The month already reported is remembered in a ref, which survives the
+ * remount StrictMode does in development, so that does not report twice.
+ */
+export declare const useOnVisibleMonthChange: (visibleMonth: Date, onVisibleMonthChange: ((visibleMonth: Date) => void) | undefined) => void;

package/dist/features/travel-calendar/types.d.ts

@@ -1,6 +1,68 @@
+import type { ReactNode } from "react";
+import type { TravelCalendarSizeVariant } from "./components/TravelCalendar";
 export interface TravelDateRangeInputValue {
     startDate?: string;
     endDate?: string;
 }
 export type VisiblePanel = "calendar" | "month-picker";
 export type DateTextInputVariant = "standard" | "labelled";
+/**
+ * What a date cell knows about itself, for rendering custom content in it.
+ *
+ * The flags describe the cell as it is drawn, which is not always the same as
+ * the value. While the user hovers out a new range, the hovered range is what
+ * the calendar shows, so that is what the flags follow too.
+ */
+export interface TravelDateContentContext {
+    date: Date;
+    dayOfMonth: number;
+    size: TravelCalendarSizeVariant;
+    isToday: boolean;
+    isDisabled: boolean;
+    /**
+     * Drawn as the start of the selection, with the filled background. In a
+     * calendar for a single date, this is the selected date.
+     */
+    isSelectionStart: boolean;
+    /**
+     * Drawn as the end of the selection. In a calendar for a single date, this
+     * is also the selected date.
+     */
+    isSelectionEnd: boolean;
+    /** Drawn inside the range band, between the start and the end. */
+    isInRange: boolean;
+    /** Under the mouse, or reached with the arrow keys. */
+    isHovered: boolean;
+    /**
+     * The day number the calendar would have rendered. Render it to extend the
+     * default content, or leave it out to replace it.
+     */
+    defaultContent: ReactNode;
+    /**
+     * The mark the calendar puts on today's date, or null on any other date, so
+     * it can be rendered unconditionally. It has no position of its own, so it
+     * goes wherever it is placed. Use isToday instead to draw a marker of your
+     * own.
+     */
+    defaultTodayMarker: ReactNode;
+}
+/**
+ * Renders the content of one date cell, in place of the day number.
+ *
+ * Only the content is replaced. The cell itself, with the selection, the hover
+ * ring, the range band, focus and keyboard navigation, stays the calendar's.
+ *
+ * The content cannot be clicked or hovered: pointer events go to the cell, so
+ * that the whole cell stays one hit area. Do not render interactive elements.
+ *
+ * The cell has no label of its own, so screen readers announce this content
+ * as the date. Write it to be heard, and use ScreenReaderOnlyText where the
+ * visible text is abbreviated or is an icon.
+ *
+ * It is called for every date in the visible month each time the calendar
+ * renders, which includes every move of the mouse. Keep it to a lookup.
+ *
+ * Text in it can follow the colour of the day number, such as white on the
+ * filled selection, with color: var(--travel-calendar-date-content-color).
+ */
+export type RenderTravelDateContent = (context: TravelDateContentContext) => ReactNode;

package/dist/index.css

@@ -1 +1 @@
-._calendar_5yxz4_1{--swui-calendar-day-width: 48px;--swui-calendar-day-height: 48px;--swui-calendar-day-border-radius: var(--swui-max-border-radius);--swui-calendar-week-number-bg-color: transparent;--swui-calendar-week-number-text-color: var(--lhds-color-ui-500);--swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-wrapper-selected-border: var(--core-blue);--swui-calendar-wrapper-selected-background: var(--core-blue);--swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);--swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);--swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);--swui-calendar-wrapper-today-background: var(--lhds-color-ui-50);--swui-calendar-text-selected-color: #fff;--swui-calendar-text-disabled-color: var(--swui-text-disabled-color);--swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color)}._calendar_5yxz4_1 table{border-spacing:0 4px}._calendar_5yxz4_1 tr td:last-child{border-top-right-radius:var(--swui-calendar-day-border-radius);border-bottom-right-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1._weekNumberVisible_5yxz4_41 tr td:nth-child(2),._calendar_5yxz4_1:not(._weekNumberVisible_5yxz4_41) tr td:first-child{border-top-left-radius:var(--swui-calendar-day-border-radius);border-bottom-left-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1 td{padding:0;width:var(--swui-calendar-day-width);height:var(--swui-calendar-day-height)}._timePicker_1w05d_1{overflow:hidden;width:180px}._timePickerColumn_1w05d_6{overflow-y:hidden;flex:1}._timePickerColumn_1w05d_6:hover{overflow-y:scroll}._navBar_kzibd_1{--swui-navbar-background-color: var(--lhds-color-ui-50);--swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);--swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);--swui-navbar-item-background-color-selected-hover: var( --lhds-color-blue-700 );--swui-nav-bar-height: 48px;background-color:var(--swui-navbar-background-color);height:var(--swui-nav-bar-height);min-height:var(--swui-nav-bar-height)}._navBarButton_b3x3w_1:hover{background:var(--lhds-color-ui-100)}._navBarButton_b3x3w_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarButton_b3x3w_1:active{background:var(--lhds-color-ui-200)}._navBarButton_b3x3w_1._selected_b3x3w_14{background:var(--lhds-color-blue-200)}._navBarButton_b3x3w_1._selected_b3x3w_14:hover{background:var(--lhds-color-blue-100)}._navBarButton_b3x3w_1._selected_b3x3w_14:focus-visible{background:var(--lhds-color-blue-300)}._navBarButton_b3x3w_1._selected_b3x3w_14:active{background:var(--lhds-color-blue-200)}._navBarLink_1u1b2_1:hover{background:var(--lhds-color-ui-100)}._navBarLink_1u1b2_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarLink_1u1b2_1:active{background:var(--lhds-color-ui-200)}._navBarLink_1u1b2_1._selected_1u1b2_14{background:var(--lhds-color-blue-200)}._navBarLink_1u1b2_1._selected_1u1b2_14:hover{background:var(--lhds-color-blue-100)}._navBarLink_1u1b2_1._selected_1u1b2_14:focus-visible{background:var(--lhds-color-blue-300)}._navBarLink_1u1b2_1._selected_1u1b2_14:active{background:var(--lhds-color-blue-200)}._navBarNotificationButton_1nfdy_1{--current-background-color: var(--lhds-color-ui-400);--current-outline-color: var(--core-blue);background-color:var(--current-background-color);border-color:transparent;color:var(--lhds-color-ui-50);--swui-nav-bar-notification-shake-count: 3;transition:.5s width}._navBarNotificationButton_1nfdy_1:hover{--current-background-color: var(--lhds-color-red-500);--current-outline-color: var(--lhds-color-red-500)}._navBarNotificationButton_1nfdy_1:active{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23 ._icon_1nfdy_23{transform-origin:top center;animation:_shake_1nfdy_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23{--current-background-color: var(--lhds-color-red-500);--current-outline-color: var(--lhds-color-red-500)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23:hover{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23:active{--current-background-color: var(--lhds-color-red-700);--current-outline-color: var(--lhds-color-red-700)}._navBarNotificationButton_1nfdy_1:focus-visible{outline:var(--swui-focus-outline);outline-color:var(--current-outline-color);outline-offset:var(--swui-focus-outline-width)}@keyframes _shake_1nfdy_1{0%{transform:rotate(0)}7%{transform:rotate(20deg)}15%{transform:rotate(-20deg)}22%{transform:rotate(16deg)}30%{transform:rotate(-16deg)}38%{transform:rotate(6deg)}42%{transform:rotate(-6deg)}46%{transform:rotate(2deg)}to{transform:rotate(0)}}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1{line-height:2.7rem;color:var(--lhds-color-ui-800)}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1::placeholder{color:var(--lhds-color-blue-600)}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1{padding:0 var(--swui-metrics-indent)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12{background:var(--lhds-color-ui-200);border-color:transparent}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12:hover{border-color:transparent}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12{padding:0 var(--swui-metrics-indent);border-radius:var(--swui-max-border-radius)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12._withButton_1rp8g_24{padding-right:1px}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12:focus-within{color:var(--lhds-color-ui-800);background:var(--lhds-color-ui-50)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12 ._clearButton_1rp8g_33{border-radius:var(--swui-max-border-radius)}._navBarUserButton_10f9z_1:hover{background:var(--lhds-color-ui-100)}._navBarUserButton_10f9z_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarUserButton_10f9z_1:active{background:var(--lhds-color-ui-200)}._sidebarMenuCollapsibleGroupBox_ikek9_1{background:var(--lhds-color-ui-200);border-radius:var(--swui-border-radius);gap:var(--swui-metrics-space);display:flex;flex-direction:column;padding:var(--swui-metrics-space);--current-text-size: var(--swui-font-size-small)}._selectionRow_eqiow_1{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;align-items:center;gap:calc(var(--swui-metrics-space) * 2)}@media (max-width: 370px){._iconColumn_eqiow_10{display:none}}._sidebarMenu_1bx5w_1{--swui-sidebar-menu-separator-color: var(--swui-white);--swui-sidebar-menu-text-color: var(--lhds-color-ui-900);--swui-sidebar-menu-icon-color: var(--lhds-color-ui-900);--swui-sidebar-menu-background-color: transparent;--swui-sidebar-menu-background-color-hover: var(--lhds-color-ui-400);--swui-sidebar-menu-background-color-focus: var(--lhds-color-ui-400);--swui-sidebar-menu-background-color-active: var(--lhds-color-ui-300);--swui-sidebar-menu-background-selected: var(--lhds-color-blue-100);--swui-sidebar-menu-background-selected-hover: var(--lhds-color-blue-200);--swui-sidebar-menu-background-selected-focus: var(--lhds-color-blue-200);--swui-sidebar-menu-background-selected-active: var(--lhds-color-blue-100);--current-background-color: var(--swui-sidebar-menu-background-color);--current-background-color-hover: var( --swui-sidebar-menu-background-color-hover );--current-background-color-focus: var( --swui-sidebar-menu-background-color-focus );--current-background-color-active: var( --swui-sidebar-menu-background-color-active );--current-background-selected: var(--swui-sidebar-menu-background-selected);--current-background-selected-hover: var( --swui-sidebar-menu-background-selected-hover );--current-background-selected-focus: var( --swui-sidebar-menu-background-selected-focus );--current-background-selected-active: var( --swui-sidebar-menu-background-selected-active )}._sidebarMenu_1bx5w_1 ._sidebarItems_1bx5w_38{--current-separator-color: var(--swui-sidebar-menu-separator-color);--current-text-color: var(--swui-sidebar-menu-text-color);--current-icon-color: var(--swui-sidebar-menu-icon-color)}._sidebarMenu_1bx5w_1{background-color:var(--current-background-color);height:100dvh}._sidebarMenu_1bx5w_1 ._scrollContainer_1bx5w_48{background:var(--current-background-color);height:100%;overflow:auto}._stenaFlag_108h7_1{height:32px}._productCard_19x6b_1{max-width:560px}@media (max-width: 768px){._productCard_19x6b_1{max-width:unset}}._productSummaryCardImage_1knc7_1{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{inset:0;opacity:0;overflow:hidden;position:fixed;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));inset:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{display:flex;justify-content:flex-end;inset:0 0 auto auto;padding:var(--yarl__toolbar_padding,8px);position:absolute}[dir=rtl] .yarl__toolbar{inset:0 auto auto 0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));left:var(--yarl__counter_left,0);line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));position:var(--yarl__counter_position,absolute);right:var(--yarl__counter_right,unset);top:var(--yarl__counter_top,0);-webkit-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);color:var(--yarl__slide_description_color,#fff);text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}.yarl__slide_title.yarl__slide_title.yarl__slide_title{font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}.yarl__slide_title_container.yarl__slide_title_container.yarl__slide_title_container{height:48px;margin:calc(var(--swui-metrics-space) * 1);padding:0;display:flex;align-items:center;padding-left:calc(var(--swui-metrics-space) * 10)}.yarl__slide_description.yarl__slide_description.yarl__slide_description{font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}.yarl__slide_description_container.yarl__slide_description_container.yarl__slide_description_container{display:flex;align-items:center;padding-left:calc(var(--swui-metrics-space) * 3);padding-bottom:calc(var(--swui-metrics-space) * 4)}.yarl__counter.yarl__counter{height:48px;margin:calc(var(--swui-metrics-space) * 1);display:flex;align-items:center;padding:0;padding-left:calc(var(--swui-metrics-space) * 1);font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}._travelDateCell_uaroa_1{position:relative}._travelDateCell_uaroa_1._smaller_uaroa_4{width:40px;height:calc(40px + var(--cell-row-gap, 4px))}._travelDateCell_uaroa_1._small_uaroa_4{width:44px;height:calc(44px + var(--cell-row-gap, 4px))}._travelDateCell_uaroa_1._medium_uaroa_14{width:48px;height:calc(48px + var(--cell-row-gap, 4px))}._travelDateCell_uaroa_1._large_uaroa_19{width:56px;height:calc(56px + var(--cell-row-gap, 4px))}._travelDateCell_uaroa_1{border-radius:var(--swui-max-border-radius)}._travelDateCell_uaroa_1._clickable_uaroa_27{cursor:pointer}._travelDateCell_uaroa_1._disabled_uaroa_31{cursor:not-allowed}._travelDateCell_uaroa_1:focus{outline:none}._travelDateCell_uaroa_1:focus-visible ._outline_uaroa_40{outline:var(--swui-focus-outline);outline-width:var(--swui-focus-outline-width);background:transparent;position:absolute;border-radius:var(--swui-max-border-radius);top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2);left:0;right:0;z-index:10}._travelDateCell_uaroa_1:focus-visible ._contentWrapper_uaroa_53._contentWrapper_uaroa_53._contentWrapper_uaroa_53{border-color:transparent}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53{border-radius:var(--swui-max-border-radius);border-width:2px;border-style:solid;border-color:transparent;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;left:0;right:0;top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53 ._todayDot_uaroa_78{position:absolute;bottom:6px;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background:var(--lhds-color-red-500)}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._isSelectionStart_uaroa_90 ._todayDot_uaroa_78{background:#fff}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._isSelectionStart_uaroa_90,._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._isSelectionEnd_uaroa_95{border-color:var(--selection-background-color)}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._isSelectionStart_uaroa_90{background:var(--selection-background-color)}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._isSelectionStart_uaroa_90 span{color:#fff}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._isSelectionEnd_uaroa_95:not(._isSelectionStart_uaroa_90){background:#fff}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._hover_uaroa_110{border-color:var(--selection-background-color)}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._hover_uaroa_110._startSelected_uaroa_113:not(._endSelected_uaroa_113):not(._isSelectionStart_uaroa_90){background:#fff}._travelDateCell_uaroa_1 ._contentWrapper_uaroa_53._hover_uaroa_110._startSelected_uaroa_113:not(._endSelected_uaroa_113):not(._isSelectionStart_uaroa_90) span{color:var(--swui-text-primary-color)}._travelDateCellBackground_1xk35_1{margin-top:calc(var(--cell-row-gap, 4px) / 2);margin-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCellBackground_1xk35_1._smaller_1xk35_9{width:20px;height:40px}._travelDateCellBackground_1xk35_1._small_1xk35_9{width:22px;height:44px}._travelDateCellBackground_1xk35_1._medium_1xk35_19{width:24px;height:48px}._travelDateCellBackground_1xk35_1._large_1xk35_24{width:28px;height:56px}._travelCalendar_3zr00_1{--cell-row-gap: 4px;border-spacing:0;padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2);width:-webkit-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;--selection-background-color: var( --travel-calendar-selection-background-color, var(--core-blue) );--selection-range-background-color: var( --travel-calendar-selection-range-background-color, var(--himmel) )}._travelCalendar_3zr00_1 th{padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelCalendar_3zr00_1 td{padding:0}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2:not(._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2._calendarVisible_1j7rp_6){opacity:0}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2:not(._travelDateInput_hmfbf_1 ._overlay_hmfbf_2._calendarVisible_hmfbf_6){opacity:0}
+._calendar_5yxz4_1{--swui-calendar-day-width: 48px;--swui-calendar-day-height: 48px;--swui-calendar-day-border-radius: var(--swui-max-border-radius);--swui-calendar-week-number-bg-color: transparent;--swui-calendar-week-number-text-color: var(--lhds-color-ui-500);--swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-wrapper-selected-border: var(--core-blue);--swui-calendar-wrapper-selected-background: var(--core-blue);--swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);--swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);--swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);--swui-calendar-wrapper-today-background: var(--lhds-color-ui-50);--swui-calendar-text-selected-color: #fff;--swui-calendar-text-disabled-color: var(--swui-text-disabled-color);--swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color)}._calendar_5yxz4_1 table{border-spacing:0 4px}._calendar_5yxz4_1 tr td:last-child{border-top-right-radius:var(--swui-calendar-day-border-radius);border-bottom-right-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1._weekNumberVisible_5yxz4_41 tr td:nth-child(2),._calendar_5yxz4_1:not(._weekNumberVisible_5yxz4_41) tr td:first-child{border-top-left-radius:var(--swui-calendar-day-border-radius);border-bottom-left-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1 td{padding:0;width:var(--swui-calendar-day-width);height:var(--swui-calendar-day-height)}._timePicker_1w05d_1{overflow:hidden;width:180px}._timePickerColumn_1w05d_6{overflow-y:hidden;flex:1}._timePickerColumn_1w05d_6:hover{overflow-y:scroll}._navBar_kzibd_1{--swui-navbar-background-color: var(--lhds-color-ui-50);--swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);--swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);--swui-navbar-item-background-color-selected-hover: var( --lhds-color-blue-700 );--swui-nav-bar-height: 48px;background-color:var(--swui-navbar-background-color);height:var(--swui-nav-bar-height);min-height:var(--swui-nav-bar-height)}._navBarButton_b3x3w_1:hover{background:var(--lhds-color-ui-100)}._navBarButton_b3x3w_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarButton_b3x3w_1:active{background:var(--lhds-color-ui-200)}._navBarButton_b3x3w_1._selected_b3x3w_14{background:var(--lhds-color-blue-200)}._navBarButton_b3x3w_1._selected_b3x3w_14:hover{background:var(--lhds-color-blue-100)}._navBarButton_b3x3w_1._selected_b3x3w_14:focus-visible{background:var(--lhds-color-blue-300)}._navBarButton_b3x3w_1._selected_b3x3w_14:active{background:var(--lhds-color-blue-200)}._navBarLink_1u1b2_1:hover{background:var(--lhds-color-ui-100)}._navBarLink_1u1b2_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarLink_1u1b2_1:active{background:var(--lhds-color-ui-200)}._navBarLink_1u1b2_1._selected_1u1b2_14{background:var(--lhds-color-blue-200)}._navBarLink_1u1b2_1._selected_1u1b2_14:hover{background:var(--lhds-color-blue-100)}._navBarLink_1u1b2_1._selected_1u1b2_14:focus-visible{background:var(--lhds-color-blue-300)}._navBarLink_1u1b2_1._selected_1u1b2_14:active{background:var(--lhds-color-blue-200)}._navBarNotificationButton_1nfdy_1{--current-background-color: var(--lhds-color-ui-400);--current-outline-color: var(--core-blue);background-color:var(--current-background-color);border-color:transparent;color:var(--lhds-color-ui-50);--swui-nav-bar-notification-shake-count: 3;transition:.5s width}._navBarNotificationButton_1nfdy_1:hover{--current-background-color: var(--lhds-color-red-500);--current-outline-color: var(--lhds-color-red-500)}._navBarNotificationButton_1nfdy_1:active{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23 ._icon_1nfdy_23{transform-origin:top center;animation:_shake_1nfdy_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23{--current-background-color: var(--lhds-color-red-500);--current-outline-color: var(--lhds-color-red-500)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23:hover{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_1nfdy_1._unread_1nfdy_23:active{--current-background-color: var(--lhds-color-red-700);--current-outline-color: var(--lhds-color-red-700)}._navBarNotificationButton_1nfdy_1:focus-visible{outline:var(--swui-focus-outline);outline-color:var(--current-outline-color);outline-offset:var(--swui-focus-outline-width)}@keyframes _shake_1nfdy_1{0%{transform:rotate(0)}7%{transform:rotate(20deg)}15%{transform:rotate(-20deg)}22%{transform:rotate(16deg)}30%{transform:rotate(-16deg)}38%{transform:rotate(6deg)}42%{transform:rotate(-6deg)}46%{transform:rotate(2deg)}to{transform:rotate(0)}}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1{line-height:2.7rem;color:var(--lhds-color-ui-800)}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1::placeholder{color:var(--lhds-color-blue-600)}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1{padding:0 var(--swui-metrics-indent)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12{background:var(--lhds-color-ui-200);border-color:transparent}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12:hover{border-color:transparent}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12{padding:0 var(--swui-metrics-indent);border-radius:var(--swui-max-border-radius)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12._withButton_1rp8g_24{padding-right:1px}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12:focus-within{color:var(--lhds-color-ui-800);background:var(--lhds-color-ui-50)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12 ._clearButton_1rp8g_33{border-radius:var(--swui-max-border-radius)}._navBarUserButton_10f9z_1:hover{background:var(--lhds-color-ui-100)}._navBarUserButton_10f9z_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarUserButton_10f9z_1:active{background:var(--lhds-color-ui-200)}._sidebarMenuCollapsibleGroupBox_ikek9_1{background:var(--lhds-color-ui-200);border-radius:var(--swui-border-radius);gap:var(--swui-metrics-space);display:flex;flex-direction:column;padding:var(--swui-metrics-space);--current-text-size: var(--swui-font-size-small)}._selectionRow_eqiow_1{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;align-items:center;gap:calc(var(--swui-metrics-space) * 2)}@media (max-width: 370px){._iconColumn_eqiow_10{display:none}}._sidebarMenu_1bx5w_1{--swui-sidebar-menu-separator-color: var(--swui-white);--swui-sidebar-menu-text-color: var(--lhds-color-ui-900);--swui-sidebar-menu-icon-color: var(--lhds-color-ui-900);--swui-sidebar-menu-background-color: transparent;--swui-sidebar-menu-background-color-hover: var(--lhds-color-ui-400);--swui-sidebar-menu-background-color-focus: var(--lhds-color-ui-400);--swui-sidebar-menu-background-color-active: var(--lhds-color-ui-300);--swui-sidebar-menu-background-selected: var(--lhds-color-blue-100);--swui-sidebar-menu-background-selected-hover: var(--lhds-color-blue-200);--swui-sidebar-menu-background-selected-focus: var(--lhds-color-blue-200);--swui-sidebar-menu-background-selected-active: var(--lhds-color-blue-100);--current-background-color: var(--swui-sidebar-menu-background-color);--current-background-color-hover: var( --swui-sidebar-menu-background-color-hover );--current-background-color-focus: var( --swui-sidebar-menu-background-color-focus );--current-background-color-active: var( --swui-sidebar-menu-background-color-active );--current-background-selected: var(--swui-sidebar-menu-background-selected);--current-background-selected-hover: var( --swui-sidebar-menu-background-selected-hover );--current-background-selected-focus: var( --swui-sidebar-menu-background-selected-focus );--current-background-selected-active: var( --swui-sidebar-menu-background-selected-active )}._sidebarMenu_1bx5w_1 ._sidebarItems_1bx5w_38{--current-separator-color: var(--swui-sidebar-menu-separator-color);--current-text-color: var(--swui-sidebar-menu-text-color);--current-icon-color: var(--swui-sidebar-menu-icon-color)}._sidebarMenu_1bx5w_1{background-color:var(--current-background-color);height:100dvh}._sidebarMenu_1bx5w_1 ._scrollContainer_1bx5w_48{background:var(--current-background-color);height:100%;overflow:auto}._stenaFlag_108h7_1{height:32px}._productCard_19x6b_1{max-width:560px}@media (max-width: 768px){._productCard_19x6b_1{max-width:unset}}._productSummaryCardImage_1knc7_1{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{inset:0;opacity:0;overflow:hidden;position:fixed;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));inset:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{display:flex;justify-content:flex-end;inset:0 0 auto auto;padding:var(--yarl__toolbar_padding,8px);position:absolute}[dir=rtl] .yarl__toolbar{inset:0 auto auto 0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));left:var(--yarl__counter_left,0);line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));position:var(--yarl__counter_position,absolute);right:var(--yarl__counter_right,unset);top:var(--yarl__counter_top,0);-webkit-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);color:var(--yarl__slide_description_color,#fff);text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}.yarl__slide_title.yarl__slide_title.yarl__slide_title{font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}.yarl__slide_title_container.yarl__slide_title_container.yarl__slide_title_container{height:48px;margin:calc(var(--swui-metrics-space) * 1);padding:0;display:flex;align-items:center;padding-left:calc(var(--swui-metrics-space) * 10)}.yarl__slide_description.yarl__slide_description.yarl__slide_description{font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}.yarl__slide_description_container.yarl__slide_description_container.yarl__slide_description_container{display:flex;align-items:center;padding-left:calc(var(--swui-metrics-space) * 3);padding-bottom:calc(var(--swui-metrics-space) * 4)}.yarl__counter.yarl__counter{height:48px;margin:calc(var(--swui-metrics-space) * 1);display:flex;align-items:center;padding:0;padding-left:calc(var(--swui-metrics-space) * 1);font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}._travelDateCell_1dwjr_1{position:relative;--cell-height: var(--travel-calendar-cell-height, var(--cell-default-height));--cell-border-radius: var( --travel-calendar-cell-border-radius, var(--swui-max-border-radius) )}._travelDateCell_1dwjr_1._smaller_1dwjr_21{width:40px;--cell-default-height: 40px}._travelDateCell_1dwjr_1._small_1dwjr_21{width:44px;--cell-default-height: 44px}._travelDateCell_1dwjr_1._medium_1dwjr_31{width:48px;--cell-default-height: 48px}._travelDateCell_1dwjr_1._large_1dwjr_36{width:56px;--cell-default-height: 56px}._travelDateCell_1dwjr_1{height:calc(var(--cell-height) + var(--cell-row-gap, 4px));border-radius:var(--cell-border-radius)}._travelDateCell_1dwjr_1._clickable_1dwjr_45{cursor:pointer}._travelDateCell_1dwjr_1._disabled_1dwjr_49{cursor:not-allowed}._travelDateCell_1dwjr_1:focus{outline:none}._travelDateCell_1dwjr_1:focus-visible ._outline_1dwjr_58{outline:var(--swui-focus-outline);outline-width:var(--swui-focus-outline-width);background:transparent;position:absolute;border-radius:var(--cell-border-radius);top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2);left:0;right:0;z-index:10}._travelDateCell_1dwjr_1:focus-visible ._contentWrapper_1dwjr_71._contentWrapper_1dwjr_71._contentWrapper_1dwjr_71{border-color:transparent}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71{--travel-calendar-date-content-color: var(--swui-text-primary-color);pointer-events:none;border-radius:var(--cell-border-radius);border-width:2px;border-style:solid;border-color:transparent;background:transparent;position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;left:0;right:0;top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71 ._todayDot_1dwjr_115{width:4px;height:4px;border-radius:50%;background:var(--lhds-color-red-500)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71 ._defaultTodayMarkerPosition_1dwjr_122{position:absolute;bottom:6px;left:50%;margin-left:-2px;display:flex}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionStart_1dwjr_131 ._todayDot_1dwjr_115{background:#fff}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionStart_1dwjr_131,._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionEnd_1dwjr_136{border-color:var(--selection-background-color)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionStart_1dwjr_131{background:var(--selection-background-color);--travel-calendar-date-content-color: white}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionEnd_1dwjr_136:not(._isSelectionStart_1dwjr_131){background:#fff}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._hover_1dwjr_149{border-color:var(--selection-background-color)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._hover_1dwjr_149._startSelected_1dwjr_152:not(._endSelected_1dwjr_152):not(._isSelectionStart_1dwjr_131){background:#fff;--travel-calendar-date-content-color: var(--swui-text-primary-color)}._travelDateCellBackground_ualq9_1{margin-top:calc(var(--cell-row-gap, 4px) / 2);margin-bottom:calc(var(--cell-row-gap, 4px) / 2);height:var(--cell-height)}._travelDateCellBackground_ualq9_1._smaller_ualq9_12{width:20px}._travelDateCellBackground_ualq9_1._small_ualq9_12{width:22px}._travelDateCellBackground_ualq9_1._medium_ualq9_20{width:24px}._travelDateCellBackground_ualq9_1._large_ualq9_24{width:28px}._travelCalendar_3zr00_1{--cell-row-gap: 4px;border-spacing:0;padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2);width:-webkit-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;--selection-background-color: var( --travel-calendar-selection-background-color, var(--core-blue) );--selection-range-background-color: var( --travel-calendar-selection-range-background-color, var(--himmel) )}._travelCalendar_3zr00_1 th{padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelCalendar_3zr00_1 td{padding:0}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2:not(._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2._calendarVisible_1j7rp_6){opacity:0}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2:not(._travelDateInput_hmfbf_1 ._overlay_hmfbf_2._calendarVisible_hmfbf_6){opacity:0}