@charset "UTF-8";
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */
q {
  quotes: "“" "”" "‘" "’";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "icons";
  font-display: swap;
  src: url("../fonts/icons.woff2") format("woff2"), url("../fonts/icons.woff") format("woff");
}
.icon {
  font-family: "icons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

:root {
  --base-icon-360: "";
  --base-icon-academy: "";
  --base-icon-address: "";
  --base-icon-addressbook: "";
  --base-icon-adress: "";
  --base-icon-adressbook: "";
  --base-icon-angle-down-regular: "";
  --base-icon-angle-down: "";
  --base-icon-angle-left-regular: "";
  --base-icon-angle-left: "";
  --base-icon-angle-right-regular: "";
  --base-icon-angle-right: "";
  --base-icon-angle-up-regular: "";
  --base-icon-angle-up: "";
  --base-icon-angles-down-regular: "";
  --base-icon-angles-down: "";
  --base-icon-angles-left-regular: "";
  --base-icon-angles-left: "";
  --base-icon-angles-right-regular: "";
  --base-icon-angles-right: "";
  --base-icon-angles-up-regular: "";
  --base-icon-angles-up: "";
  --base-icon-arrow-down-long: "";
  --base-icon-arrow-down: "";
  --base-icon-arrow-left-long: "";
  --base-icon-arrow-left: "";
  --base-icon-arrow-pointer: "";
  --base-icon-arrow-right-long: "";
  --base-icon-arrow-right: "";
  --base-icon-arrow-up-long: "";
  --base-icon-arrow-up: "";
  --base-icon-bars-sort: "";
  --base-icon-basket: "";
  --base-icon-berries: "";
  --base-icon-bike: "";
  --base-icon-box-check: "";
  --base-icon-business-time: "";
  --base-icon-calendar-star: "";
  --base-icon-car-building: "";
  --base-icon-champagne-glasses: "";
  --base-icon-chart: "";
  --base-icon-chat: "";
  --base-icon-check-circle: "";
  --base-icon-check-regular: "";
  --base-icon-check: "";
  --base-icon-clock: "";
  --base-icon-close-regular: "";
  --base-icon-close: "";
  --base-icon-coffee: "";
  --base-icon-columns: "";
  --base-icon-copy: "";
  --base-icon-date: "";
  --base-icon-document-archive: "";
  --base-icon-download: "";
  --base-icon-drag-drop: "";
  --base-icon-edit: "";
  --base-icon-exclamation-circle: "";
  --base-icon-exclamation: "";
  --base-icon-facebook: "";
  --base-icon-file-doc: "";
  --base-icon-file-document: "";
  --base-icon-file-image: "";
  --base-icon-file-pdf: "";
  --base-icon-file-powerpoint: "";
  --base-icon-file-video: "";
  --base-icon-file-xls: "";
  --base-icon-filter: "";
  --base-icon-flower: "";
  --base-icon-gift: "";
  --base-icon-graduation-cap: "";
  --base-icon-heart-filled: "";
  --base-icon-heart: "";
  --base-icon-home: "";
  --base-icon-info: "";
  --base-icon-instagram: "";
  --base-icon-invoice: "";
  --base-icon-language: "";
  --base-icon-linkedin: "";
  --base-icon-list: "";
  --base-icon-loading: "";
  --base-icon-lock: "";
  --base-icon-logged: "";
  --base-icon-login: "";
  --base-icon-logout: "";
  --base-icon-mail: "";
  --base-icon-map-pin: "";
  --base-icon-marketing: "";
  --base-icon-minus: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment: "";
  --base-icon-pen-to-square: "";
  --base-icon-people-group: "";
  --base-icon-phone: "";
  --base-icon-pinterest: "";
  --base-icon-play: "";
  --base-icon-plus: "";
  --base-icon-print: "";
  --base-icon-question: "";
  --base-icon-quickorder: "";
  --base-icon-register: "";
  --base-icon-reload: "";
  --base-icon-retoure: "";
  --base-icon-rma: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-settings: "";
  --base-icon-share: "";
  --base-icon-shipping: "";
  --base-icon-sliders-simple: "";
  --base-icon-sorting: "";
  --base-icon-spice: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star: "";
  --base-icon-strawberry: "";
  --base-icon-subscriptions: "";
  --base-icon-tiktok: "";
  --base-icon-trash: "";
  --base-icon-twitter: "";
  --base-icon-upload: "";
  --base-icon-user: "";
  --base-icon-users: "";
  --base-icon-watermelon: "";
  --base-icon-whatsapp: "";
  --base-icon-xing: "";
  --base-icon-youtube: "";
  --base-icon-zoom: "";
}

.icon-360:before {
  content: var(--base-icon-360);
}

.icon-academy:before {
  content: var(--base-icon-academy);
}

.icon-address:before {
  content: var(--base-icon-address);
}

.icon-addressbook:before {
  content: var(--base-icon-addressbook);
}

.icon-adress:before {
  content: var(--base-icon-adress);
}

.icon-adressbook:before {
  content: var(--base-icon-adressbook);
}

.icon-angle-down-regular:before {
  content: var(--base-icon-angle-down-regular);
}

.icon-angle-down:before {
  content: var(--base-icon-angle-down);
}

.icon-angle-left-regular:before {
  content: var(--base-icon-angle-left-regular);
}

.icon-angle-left:before {
  content: var(--base-icon-angle-left);
}

.icon-angle-right-regular:before {
  content: var(--base-icon-angle-right-regular);
}

.icon-angle-right:before {
  content: var(--base-icon-angle-right);
}

.icon-angle-up-regular:before {
  content: var(--base-icon-angle-up-regular);
}

.icon-angle-up:before {
  content: var(--base-icon-angle-up);
}

.icon-angles-down-regular:before {
  content: var(--base-icon-angles-down-regular);
}

.icon-angles-down:before {
  content: var(--base-icon-angles-down);
}

.icon-angles-left-regular:before {
  content: var(--base-icon-angles-left-regular);
}

.icon-angles-left:before {
  content: var(--base-icon-angles-left);
}

.icon-angles-right-regular:before {
  content: var(--base-icon-angles-right-regular);
}

.icon-angles-right:before {
  content: var(--base-icon-angles-right);
}

.icon-angles-up-regular:before {
  content: var(--base-icon-angles-up-regular);
}

.icon-angles-up:before {
  content: var(--base-icon-angles-up);
}

.icon-arrow-down-long:before {
  content: var(--base-icon-arrow-down-long);
}

.icon-arrow-down:before {
  content: var(--base-icon-arrow-down);
}

.icon-arrow-left-long:before {
  content: var(--base-icon-arrow-left-long);
}

.icon-arrow-left:before {
  content: var(--base-icon-arrow-left);
}

.icon-arrow-pointer:before {
  content: var(--base-icon-arrow-pointer);
}

.icon-arrow-right-long:before {
  content: var(--base-icon-arrow-right-long);
}

.icon-arrow-right:before {
  content: var(--base-icon-arrow-right);
}

.icon-arrow-up-long:before {
  content: var(--base-icon-arrow-up-long);
}

.icon-arrow-up:before {
  content: var(--base-icon-arrow-up);
}

.icon-bars-sort:before {
  content: var(--base-icon-bars-sort);
}

.icon-basket:before {
  content: var(--base-icon-basket);
}

.icon-berries:before {
  content: var(--base-icon-berries);
}

.icon-bike:before {
  content: var(--base-icon-bike);
}

.icon-box-check:before {
  content: var(--base-icon-box-check);
}

.icon-business-time:before {
  content: var(--base-icon-business-time);
}

.icon-calendar-star:before {
  content: var(--base-icon-calendar-star);
}

.icon-car-building:before {
  content: var(--base-icon-car-building);
}

.icon-champagne-glasses:before {
  content: var(--base-icon-champagne-glasses);
}

.icon-chart:before {
  content: var(--base-icon-chart);
}

.icon-chat:before {
  content: var(--base-icon-chat);
}

.icon-check-circle:before {
  content: var(--base-icon-check-circle);
}

.icon-check-regular:before {
  content: var(--base-icon-check-regular);
}

.icon-check:before {
  content: var(--base-icon-check);
}

.icon-clock:before {
  content: var(--base-icon-clock);
}

.icon-close-regular:before {
  content: var(--base-icon-close-regular);
}

.icon-close:before {
  content: var(--base-icon-close);
}

.icon-coffee:before {
  content: var(--base-icon-coffee);
}

.icon-columns:before {
  content: var(--base-icon-columns);
}

.icon-copy:before {
  content: var(--base-icon-copy);
}

.icon-date:before {
  content: var(--base-icon-date);
}

.icon-document-archive:before {
  content: var(--base-icon-document-archive);
}

.icon-download:before {
  content: var(--base-icon-download);
}

.icon-drag-drop:before {
  content: var(--base-icon-drag-drop);
}

.icon-edit:before {
  content: var(--base-icon-edit);
}

.icon-exclamation-circle:before {
  content: var(--base-icon-exclamation-circle);
}

.icon-exclamation:before {
  content: var(--base-icon-exclamation);
}

.icon-facebook:before {
  content: var(--base-icon-facebook);
}

.icon-file-doc:before {
  content: var(--base-icon-file-doc);
}

.icon-file-document:before {
  content: var(--base-icon-file-document);
}

.icon-file-image:before {
  content: var(--base-icon-file-image);
}

.icon-file-pdf:before {
  content: var(--base-icon-file-pdf);
}

.icon-file-powerpoint:before {
  content: var(--base-icon-file-powerpoint);
}

.icon-file-video:before {
  content: var(--base-icon-file-video);
}

.icon-file-xls:before {
  content: var(--base-icon-file-xls);
}

.icon-filter:before {
  content: var(--base-icon-filter);
}

.icon-flower:before {
  content: var(--base-icon-flower);
}

.icon-gift:before {
  content: var(--base-icon-gift);
}

.icon-graduation-cap:before {
  content: var(--base-icon-graduation-cap);
}

.icon-heart-filled:before {
  content: var(--base-icon-heart-filled);
}

.icon-heart:before {
  content: var(--base-icon-heart);
}

.icon-home:before {
  content: var(--base-icon-home);
}

.icon-info:before {
  content: var(--base-icon-info);
}

.icon-instagram:before {
  content: var(--base-icon-instagram);
}

.icon-invoice:before {
  content: var(--base-icon-invoice);
}

.icon-language:before {
  content: var(--base-icon-language);
}

.icon-linkedin:before {
  content: var(--base-icon-linkedin);
}

.icon-list:before {
  content: var(--base-icon-list);
}

.icon-loading:before {
  content: var(--base-icon-loading);
}

.icon-lock:before {
  content: var(--base-icon-lock);
}

.icon-logged:before {
  content: var(--base-icon-logged);
}

.icon-login:before {
  content: var(--base-icon-login);
}

.icon-logout:before {
  content: var(--base-icon-logout);
}

.icon-mail:before {
  content: var(--base-icon-mail);
}

.icon-map-pin:before {
  content: var(--base-icon-map-pin);
}

.icon-marketing:before {
  content: var(--base-icon-marketing);
}

.icon-minus:before {
  content: var(--base-icon-minus);
}

.icon-password-hide:before {
  content: var(--base-icon-password-hide);
}

.icon-password-show:before {
  content: var(--base-icon-password-show);
}

.icon-pause:before {
  content: var(--base-icon-pause);
}

.icon-payment:before {
  content: var(--base-icon-payment);
}

.icon-pen-to-square:before {
  content: var(--base-icon-pen-to-square);
}

.icon-people-group:before {
  content: var(--base-icon-people-group);
}

.icon-phone:before {
  content: var(--base-icon-phone);
}

.icon-pinterest:before {
  content: var(--base-icon-pinterest);
}

.icon-play:before {
  content: var(--base-icon-play);
}

.icon-plus:before {
  content: var(--base-icon-plus);
}

.icon-print:before {
  content: var(--base-icon-print);
}

.icon-question:before {
  content: var(--base-icon-question);
}

.icon-quickorder:before {
  content: var(--base-icon-quickorder);
}

.icon-register:before {
  content: var(--base-icon-register);
}

.icon-reload:before {
  content: var(--base-icon-reload);
}

.icon-retoure:before {
  content: var(--base-icon-retoure);
}

.icon-rma:before {
  content: var(--base-icon-rma);
}

.icon-search:before {
  content: var(--base-icon-search);
}

.icon-send:before {
  content: var(--base-icon-send);
}

.icon-service:before {
  content: var(--base-icon-service);
}

.icon-settings:before {
  content: var(--base-icon-settings);
}

.icon-share:before {
  content: var(--base-icon-share);
}

.icon-shipping:before {
  content: var(--base-icon-shipping);
}

.icon-sliders-simple:before {
  content: var(--base-icon-sliders-simple);
}

.icon-sorting:before {
  content: var(--base-icon-sorting);
}

.icon-spice:before {
  content: var(--base-icon-spice);
}

.icon-star-filled:before {
  content: var(--base-icon-star-filled);
}

.icon-star-half:before {
  content: var(--base-icon-star-half);
}

.icon-star:before {
  content: var(--base-icon-star);
}

.icon-strawberry:before {
  content: var(--base-icon-strawberry);
}

.icon-subscriptions:before {
  content: var(--base-icon-subscriptions);
}

.icon-tiktok:before {
  content: var(--base-icon-tiktok);
}

.icon-trash:before {
  content: var(--base-icon-trash);
}

.icon-twitter:before {
  content: var(--base-icon-twitter);
}

.icon-upload:before {
  content: var(--base-icon-upload);
}

.icon-user:before {
  content: var(--base-icon-user);
}

.icon-users:before {
  content: var(--base-icon-users);
}

.icon-watermelon:before {
  content: var(--base-icon-watermelon);
}

.icon-whatsapp:before {
  content: var(--base-icon-whatsapp);
}

.icon-xing:before {
  content: var(--base-icon-xing);
}

.icon-youtube:before {
  content: var(--base-icon-youtube);
}

.icon-zoom:before {
  content: var(--base-icon-zoom);
}

/*

<i class='icon icon-360'></i>

<i class='icon icon-academy'></i>

<i class='icon icon-address'></i>

<i class='icon icon-addressbook'></i>

<i class='icon icon-adress'></i>

<i class='icon icon-adressbook'></i>

<i class='icon icon-angle-down-regular'></i>

<i class='icon icon-angle-down'></i>

<i class='icon icon-angle-left-regular'></i>

<i class='icon icon-angle-left'></i>

<i class='icon icon-angle-right-regular'></i>

<i class='icon icon-angle-right'></i>

<i class='icon icon-angle-up-regular'></i>

<i class='icon icon-angle-up'></i>

<i class='icon icon-angles-down-regular'></i>

<i class='icon icon-angles-down'></i>

<i class='icon icon-angles-left-regular'></i>

<i class='icon icon-angles-left'></i>

<i class='icon icon-angles-right-regular'></i>

<i class='icon icon-angles-right'></i>

<i class='icon icon-angles-up-regular'></i>

<i class='icon icon-angles-up'></i>

<i class='icon icon-arrow-down-long'></i>

<i class='icon icon-arrow-down'></i>

<i class='icon icon-arrow-left-long'></i>

<i class='icon icon-arrow-left'></i>

<i class='icon icon-arrow-pointer'></i>

<i class='icon icon-arrow-right-long'></i>

<i class='icon icon-arrow-right'></i>

<i class='icon icon-arrow-up-long'></i>

<i class='icon icon-arrow-up'></i>

<i class='icon icon-bars-sort'></i>

<i class='icon icon-basket'></i>

<i class='icon icon-berries'></i>

<i class='icon icon-bike'></i>

<i class='icon icon-box-check'></i>

<i class='icon icon-business-time'></i>

<i class='icon icon-calendar-star'></i>

<i class='icon icon-car-building'></i>

<i class='icon icon-champagne-glasses'></i>

<i class='icon icon-chart'></i>

<i class='icon icon-chat'></i>

<i class='icon icon-check-circle'></i>

<i class='icon icon-check-regular'></i>

<i class='icon icon-check'></i>

<i class='icon icon-clock'></i>

<i class='icon icon-close-regular'></i>

<i class='icon icon-close'></i>

<i class='icon icon-coffee'></i>

<i class='icon icon-columns'></i>

<i class='icon icon-copy'></i>

<i class='icon icon-date'></i>

<i class='icon icon-document-archive'></i>

<i class='icon icon-download'></i>

<i class='icon icon-drag-drop'></i>

<i class='icon icon-edit'></i>

<i class='icon icon-exclamation-circle'></i>

<i class='icon icon-exclamation'></i>

<i class='icon icon-facebook'></i>

<i class='icon icon-file-doc'></i>

<i class='icon icon-file-document'></i>

<i class='icon icon-file-image'></i>

<i class='icon icon-file-pdf'></i>

<i class='icon icon-file-powerpoint'></i>

<i class='icon icon-file-video'></i>

<i class='icon icon-file-xls'></i>

<i class='icon icon-filter'></i>

<i class='icon icon-flower'></i>

<i class='icon icon-gift'></i>

<i class='icon icon-graduation-cap'></i>

<i class='icon icon-heart-filled'></i>

<i class='icon icon-heart'></i>

<i class='icon icon-home'></i>

<i class='icon icon-info'></i>

<i class='icon icon-instagram'></i>

<i class='icon icon-invoice'></i>

<i class='icon icon-language'></i>

<i class='icon icon-linkedin'></i>

<i class='icon icon-list'></i>

<i class='icon icon-loading'></i>

<i class='icon icon-lock'></i>

<i class='icon icon-logged'></i>

<i class='icon icon-login'></i>

<i class='icon icon-logout'></i>

<i class='icon icon-mail'></i>

<i class='icon icon-map-pin'></i>

<i class='icon icon-marketing'></i>

<i class='icon icon-minus'></i>

<i class='icon icon-password-hide'></i>

<i class='icon icon-password-show'></i>

<i class='icon icon-pause'></i>

<i class='icon icon-payment'></i>

<i class='icon icon-pen-to-square'></i>

<i class='icon icon-people-group'></i>

<i class='icon icon-phone'></i>

<i class='icon icon-pinterest'></i>

<i class='icon icon-play'></i>

<i class='icon icon-plus'></i>

<i class='icon icon-print'></i>

<i class='icon icon-question'></i>

<i class='icon icon-quickorder'></i>

<i class='icon icon-register'></i>

<i class='icon icon-reload'></i>

<i class='icon icon-retoure'></i>

<i class='icon icon-rma'></i>

<i class='icon icon-search'></i>

<i class='icon icon-send'></i>

<i class='icon icon-service'></i>

<i class='icon icon-settings'></i>

<i class='icon icon-share'></i>

<i class='icon icon-shipping'></i>

<i class='icon icon-sliders-simple'></i>

<i class='icon icon-sorting'></i>

<i class='icon icon-spice'></i>

<i class='icon icon-star-filled'></i>

<i class='icon icon-star-half'></i>

<i class='icon icon-star'></i>

<i class='icon icon-strawberry'></i>

<i class='icon icon-subscriptions'></i>

<i class='icon icon-tiktok'></i>

<i class='icon icon-trash'></i>

<i class='icon icon-twitter'></i>

<i class='icon icon-upload'></i>

<i class='icon icon-user'></i>

<i class='icon icon-users'></i>

<i class='icon icon-watermelon'></i>

<i class='icon icon-whatsapp'></i>

<i class='icon icon-xing'></i>

<i class='icon icon-youtube'></i>

<i class='icon icon-zoom'></i>

*/
:root {
  --main-color-white: #FFFFFF;
  --main-color-light-gray: #F2F2F2;
  --main-color-gray-base: #E6E6E6;
  --main-color-middle-gray: #ADADAD;
  --main-color-dark-gray: #787878;
  --main-color-black: #111111;
  --main-color-primary: #B4DDDE;
  --main-color-primary-dark: #6FC3BA;
  --main-color-primary-darken: rgb(144.5833333333, 204.9444444444, 206.4166666667);
  --main-color-secondary: #FCD6BB;
  --main-color-secondary-dark: #F8B68B;
  --main-color-action: #2760AB;
  --main-color-sale: #2FA17E;
  --main-color-success: #7BBB31;
  --main-color-success-dark: rgb(162.2916666667, 212.9722222222, 214.2083333333);
  --main-color-success-darken: rgb(144.5833333333, 204.9444444444, 206.4166666667);
  --main-color-warning: #EF7410;
  --main-color-warning-dark: rgb(215.1, 104.4, 14.4);
  --main-color-warning-darken: rgb(191.2, 92.8, 12.8);
  --main-color-danger: #D50000;
  --main-color-danger-dark: rgb(187.5, 0, 0);
  --main-color-danger-darken: #a20000;
  --main-color-blue: #2760AB;
  --main-color-blue-dark: #293E80;
  --main-color-blue-smoke: #6F88A8;
  --main-color-turquoise: #7AC9D4;
  --main-color-turquoise-dark: #6FC3BA;
  --main-color-turquoise-light: #B4DDDE;
  --main-color-lilac: #C9CFDE;
  --main-color-lilac-middle: #C0D5E5;
  --main-color-lilac-dark: #A7AECA;
  --main-color-green-moss: #536554;
  --main-color-green-grass: #6FAC92;
  --main-color-green-jade: #8EB6B5;
  --main-color-green-light: #ABCAD0;
  --main-color-brown: #92867D;
  --main-color-brown-middle: #CEBFB7;
  --main-color-brown-light: #E4E3DE;
  --main-color-greige: #EAE8E8;
  --main-color-coral-dark: #DAA892;
  --main-color-coral: #FBD0BA;
  --main-color-yellow-dark: #E5DBB6;
  --main-color-yellow: #FFEDBA;
  --main-color-yellow-light: #FFF6E0;
  --main-color-rose: #EAD7D0;
  --main-color-rose-light: #FDECE3;
  --main-color-info: #F2F2F2;
  --main-color-white-contrast: #111111;
  --main-color-light-gray-contrast: #111111;
  --main-color-gray-base-contrast: #111111;
  --main-color-middle-gray-contrast: #111111;
  --main-color-dark-gray-contrast: #ffffff;
  --main-color-black-contrast: #ffffff;
  --main-color-primary-contrast: #111111;
  --main-color-primary-dark-contrast: #111111;
  --main-color-primary-darken-contrast: #111111;
  --main-color-secondary-contrast: #111111;
  --main-color-secondary-dark-contrast: #111111;
  --main-color-action-contrast: #ffffff;
  --main-color-sale-contrast: #ffffff;
  --main-color-success-contrast: #111111;
  --main-color-success-dark-contrast: #111111;
  --main-color-success-darken-contrast: #111111;
  --main-color-warning-contrast: #111111;
  --main-color-warning-dark-contrast: #111111;
  --main-color-warning-darken-contrast: #ffffff;
  --main-color-danger-contrast: #ffffff;
  --main-color-danger-dark-contrast: #ffffff;
  --main-color-danger-darken-contrast: #ffffff;
  --main-color-blue-contrast: #ffffff;
  --main-color-blue-dark-contrast: #ffffff;
  --main-color-blue-smoke-contrast: #111111;
  --main-color-turquoise-contrast: #111111;
  --main-color-turquoise-dark-contrast: #111111;
  --main-color-turquoise-light-contrast: #111111;
  --main-color-lilac-contrast: #111111;
  --main-color-lilac-middle-contrast: #111111;
  --main-color-lilac-dark-contrast: #111111;
  --main-color-green-moss-contrast: #ffffff;
  --main-color-green-grass-contrast: #111111;
  --main-color-green-jade-contrast: #111111;
  --main-color-green-light-contrast: #111111;
  --main-color-brown-contrast: #111111;
  --main-color-brown-middle-contrast: #111111;
  --main-color-brown-light-contrast: #111111;
  --main-color-greige-contrast: #111111;
  --main-color-coral-dark-contrast: #111111;
  --main-color-coral-contrast: #111111;
  --main-color-yellow-dark-contrast: #111111;
  --main-color-yellow-contrast: #111111;
  --main-color-yellow-light-contrast: #111111;
  --main-color-rose-contrast: #111111;
  --main-color-rose-light-contrast: #111111;
  --main-color-info-contrast: #111111;
  --main-font-family: Inter, Helvetica, Arial, sans-serif;
  --main-font-family-display: Bayshore, serif;
  --main-font-weight: 400;
  --main-font-weight-medium: 500;
  --main-font-weight-bold: 600;
  --main-font-weight-black: 700;
  --main-font-size-base: 1.8rem;
  --main-font-size-medium: 1.6rem;
  --main-font-size-small: 1.3rem;
  --main-font-size-big: 2.4rem;
  --main-line-height: 1.4444444;
  --main-link-color: var(--main-color-black);
  --main-link-color-hover: var(--main-color-dark-gray);
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.shadow {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

.shadow-sm {
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
}

.shadow-lg {
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.08);
}

.shadow-none {
  box-shadow: none;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.translate-middle {
  transform: translate(-50%, -50%);
}

.translate-middle-x {
  transform: translateX(-50%);
}

.translate-middle-y {
  transform: translateY(-50%);
}

.flex-fill {
  flex: 1 1 auto;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.order-first {
  order: -1;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-last {
  order: 6;
}

.text-start {
  text-align: left;
}

.text-end {
  text-align: right;
}

.text-center {
  text-align: center;
}

.rounded {
  border-radius: var(--dc-border-radius);
}

.rounded-0 {
  border-radius: 0;
}

.rounded-1 {
  border-radius: var(--dc-border-radius-sm);
}

.rounded-2 {
  border-radius: var(--dc-border-radius);
}

.rounded-3 {
  border-radius: var(--dc-border-radius-lg);
}

.rounded-4 {
  border-radius: var(--dc-border-radius-xl);
}

.rounded-5 {
  border-radius: var(--dc-border-radius-xxl);
}

.rounded-circle {
  border-radius: 50%;
}

.rounded-pill {
  border-radius: var(--dc-border-radius-pill);
}

.rounded-top {
  border-top-left-radius: var(--dc-border-radius);
  border-top-right-radius: var(--dc-border-radius);
}

.rounded-top-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-top-1 {
  border-top-left-radius: var(--dc-border-radius-sm);
  border-top-right-radius: var(--dc-border-radius-sm);
}

.rounded-top-2 {
  border-top-left-radius: var(--dc-border-radius);
  border-top-right-radius: var(--dc-border-radius);
}

.rounded-top-3 {
  border-top-left-radius: var(--dc-border-radius-lg);
  border-top-right-radius: var(--dc-border-radius-lg);
}

.rounded-top-4 {
  border-top-left-radius: var(--dc-border-radius-xl);
  border-top-right-radius: var(--dc-border-radius-xl);
}

.rounded-top-5 {
  border-top-left-radius: var(--dc-border-radius-xxl);
  border-top-right-radius: var(--dc-border-radius-xxl);
}

.rounded-top-circle {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.rounded-top-pill {
  border-top-left-radius: var(--dc-border-radius-pill);
  border-top-right-radius: var(--dc-border-radius-pill);
}

.rounded-end {
  border-top-right-radius: var(--dc-border-radius);
  border-bottom-right-radius: var(--dc-border-radius);
}

.rounded-end-0 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-end-1 {
  border-top-right-radius: var(--dc-border-radius-sm);
  border-bottom-right-radius: var(--dc-border-radius-sm);
}

.rounded-end-2 {
  border-top-right-radius: var(--dc-border-radius);
  border-bottom-right-radius: var(--dc-border-radius);
}

.rounded-end-3 {
  border-top-right-radius: var(--dc-border-radius-lg);
  border-bottom-right-radius: var(--dc-border-radius-lg);
}

.rounded-end-4 {
  border-top-right-radius: var(--dc-border-radius-xl);
  border-bottom-right-radius: var(--dc-border-radius-xl);
}

.rounded-end-5 {
  border-top-right-radius: var(--dc-border-radius-xxl);
  border-bottom-right-radius: var(--dc-border-radius-xxl);
}

.rounded-end-circle {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.rounded-end-pill {
  border-top-right-radius: var(--dc-border-radius-pill);
  border-bottom-right-radius: var(--dc-border-radius-pill);
}

.rounded-bottom {
  border-bottom-right-radius: var(--dc-border-radius);
  border-bottom-left-radius: var(--dc-border-radius);
}

.rounded-bottom-0 {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rounded-bottom-1 {
  border-bottom-right-radius: var(--dc-border-radius-sm);
  border-bottom-left-radius: var(--dc-border-radius-sm);
}

.rounded-bottom-2 {
  border-bottom-right-radius: var(--dc-border-radius);
  border-bottom-left-radius: var(--dc-border-radius);
}

.rounded-bottom-3 {
  border-bottom-right-radius: var(--dc-border-radius-lg);
  border-bottom-left-radius: var(--dc-border-radius-lg);
}

.rounded-bottom-4 {
  border-bottom-right-radius: var(--dc-border-radius-xl);
  border-bottom-left-radius: var(--dc-border-radius-xl);
}

.rounded-bottom-5 {
  border-bottom-right-radius: var(--dc-border-radius-xxl);
  border-bottom-left-radius: var(--dc-border-radius-xxl);
}

.rounded-bottom-circle {
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.rounded-bottom-pill {
  border-bottom-right-radius: var(--dc-border-radius-pill);
  border-bottom-left-radius: var(--dc-border-radius-pill);
}

.rounded-start {
  border-bottom-left-radius: var(--dc-border-radius);
  border-top-left-radius: var(--dc-border-radius);
}

.rounded-start-0 {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.rounded-start-1 {
  border-bottom-left-radius: var(--dc-border-radius-sm);
  border-top-left-radius: var(--dc-border-radius-sm);
}

.rounded-start-2 {
  border-bottom-left-radius: var(--dc-border-radius);
  border-top-left-radius: var(--dc-border-radius);
}

.rounded-start-3 {
  border-bottom-left-radius: var(--dc-border-radius-lg);
  border-top-left-radius: var(--dc-border-radius-lg);
}

.rounded-start-4 {
  border-bottom-left-radius: var(--dc-border-radius-xl);
  border-top-left-radius: var(--dc-border-radius-xl);
}

.rounded-start-5 {
  border-bottom-left-radius: var(--dc-border-radius-xxl);
  border-top-left-radius: var(--dc-border-radius-xxl);
}

.rounded-start-circle {
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}

.rounded-start-pill {
  border-bottom-left-radius: var(--dc-border-radius-pill);
  border-top-left-radius: var(--dc-border-radius-pill);
}

@media (min-width: 768px) {
  .flex-sm-fill {
    flex: 1 1 auto;
  }
  .flex-sm-row {
    flex-direction: row;
  }
  .flex-sm-column {
    flex-direction: column;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-sm-grow-0 {
    flex-grow: 0;
  }
  .flex-sm-grow-1 {
    flex-grow: 1;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1;
  }
  .flex-sm-wrap {
    flex-wrap: wrap;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-sm-start {
    justify-content: flex-start;
  }
  .justify-content-sm-end {
    justify-content: flex-end;
  }
  .justify-content-sm-center {
    justify-content: center;
  }
  .justify-content-sm-between {
    justify-content: space-between;
  }
  .justify-content-sm-around {
    justify-content: space-around;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly;
  }
  .align-items-sm-start {
    align-items: flex-start;
  }
  .align-items-sm-end {
    align-items: flex-end;
  }
  .align-items-sm-center {
    align-items: center;
  }
  .align-items-sm-baseline {
    align-items: baseline;
  }
  .align-items-sm-stretch {
    align-items: stretch;
  }
  .align-content-sm-start {
    align-content: flex-start;
  }
  .align-content-sm-end {
    align-content: flex-end;
  }
  .align-content-sm-center {
    align-content: center;
  }
  .align-content-sm-between {
    align-content: space-between;
  }
  .align-content-sm-around {
    align-content: space-around;
  }
  .align-content-sm-stretch {
    align-content: stretch;
  }
  .align-self-sm-auto {
    align-self: auto;
  }
  .align-self-sm-start {
    align-self: flex-start;
  }
  .align-self-sm-end {
    align-self: flex-end;
  }
  .align-self-sm-center {
    align-self: center;
  }
  .align-self-sm-baseline {
    align-self: baseline;
  }
  .align-self-sm-stretch {
    align-self: stretch;
  }
  .order-sm-first {
    order: -1;
  }
  .order-sm-0 {
    order: 0;
  }
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-last {
    order: 6;
  }
  .text-sm-start {
    text-align: left;
  }
  .text-sm-end {
    text-align: right;
  }
  .text-sm-center {
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .flex-md-fill {
    flex: 1 1 auto;
  }
  .flex-md-row {
    flex-direction: row;
  }
  .flex-md-column {
    flex-direction: column;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-md-grow-0 {
    flex-grow: 0;
  }
  .flex-md-grow-1 {
    flex-grow: 1;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1;
  }
  .flex-md-wrap {
    flex-wrap: wrap;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-md-start {
    justify-content: flex-start;
  }
  .justify-content-md-end {
    justify-content: flex-end;
  }
  .justify-content-md-center {
    justify-content: center;
  }
  .justify-content-md-between {
    justify-content: space-between;
  }
  .justify-content-md-around {
    justify-content: space-around;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly;
  }
  .align-items-md-start {
    align-items: flex-start;
  }
  .align-items-md-end {
    align-items: flex-end;
  }
  .align-items-md-center {
    align-items: center;
  }
  .align-items-md-baseline {
    align-items: baseline;
  }
  .align-items-md-stretch {
    align-items: stretch;
  }
  .align-content-md-start {
    align-content: flex-start;
  }
  .align-content-md-end {
    align-content: flex-end;
  }
  .align-content-md-center {
    align-content: center;
  }
  .align-content-md-between {
    align-content: space-between;
  }
  .align-content-md-around {
    align-content: space-around;
  }
  .align-content-md-stretch {
    align-content: stretch;
  }
  .align-self-md-auto {
    align-self: auto;
  }
  .align-self-md-start {
    align-self: flex-start;
  }
  .align-self-md-end {
    align-self: flex-end;
  }
  .align-self-md-center {
    align-self: center;
  }
  .align-self-md-baseline {
    align-self: baseline;
  }
  .align-self-md-stretch {
    align-self: stretch;
  }
  .order-md-first {
    order: -1;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-last {
    order: 6;
  }
  .text-md-start {
    text-align: left;
  }
  .text-md-end {
    text-align: right;
  }
  .text-md-center {
    text-align: center;
  }
}
@media (min-width: 1250px) {
  .flex-lg-fill {
    flex: 1 1 auto;
  }
  .flex-lg-row {
    flex-direction: row;
  }
  .flex-lg-column {
    flex-direction: column;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-lg-grow-0 {
    flex-grow: 0;
  }
  .flex-lg-grow-1 {
    flex-grow: 1;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1;
  }
  .flex-lg-wrap {
    flex-wrap: wrap;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-lg-start {
    justify-content: flex-start;
  }
  .justify-content-lg-end {
    justify-content: flex-end;
  }
  .justify-content-lg-center {
    justify-content: center;
  }
  .justify-content-lg-between {
    justify-content: space-between;
  }
  .justify-content-lg-around {
    justify-content: space-around;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly;
  }
  .align-items-lg-start {
    align-items: flex-start;
  }
  .align-items-lg-end {
    align-items: flex-end;
  }
  .align-items-lg-center {
    align-items: center;
  }
  .align-items-lg-baseline {
    align-items: baseline;
  }
  .align-items-lg-stretch {
    align-items: stretch;
  }
  .align-content-lg-start {
    align-content: flex-start;
  }
  .align-content-lg-end {
    align-content: flex-end;
  }
  .align-content-lg-center {
    align-content: center;
  }
  .align-content-lg-between {
    align-content: space-between;
  }
  .align-content-lg-around {
    align-content: space-around;
  }
  .align-content-lg-stretch {
    align-content: stretch;
  }
  .align-self-lg-auto {
    align-self: auto;
  }
  .align-self-lg-start {
    align-self: flex-start;
  }
  .align-self-lg-end {
    align-self: flex-end;
  }
  .align-self-lg-center {
    align-self: center;
  }
  .align-self-lg-baseline {
    align-self: baseline;
  }
  .align-self-lg-stretch {
    align-self: stretch;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
  .order-lg-last {
    order: 6;
  }
  .text-lg-start {
    text-align: left;
  }
  .text-lg-end {
    text-align: right;
  }
  .text-lg-center {
    text-align: center;
  }
}
@media (min-width: 1540px) {
  .flex-xlg-fill {
    flex: 1 1 auto;
  }
  .flex-xlg-row {
    flex-direction: row;
  }
  .flex-xlg-column {
    flex-direction: column;
  }
  .flex-xlg-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-xlg-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-xlg-grow-0 {
    flex-grow: 0;
  }
  .flex-xlg-grow-1 {
    flex-grow: 1;
  }
  .flex-xlg-shrink-0 {
    flex-shrink: 0;
  }
  .flex-xlg-shrink-1 {
    flex-shrink: 1;
  }
  .flex-xlg-wrap {
    flex-wrap: wrap;
  }
  .flex-xlg-nowrap {
    flex-wrap: nowrap;
  }
  .flex-xlg-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-xlg-start {
    justify-content: flex-start;
  }
  .justify-content-xlg-end {
    justify-content: flex-end;
  }
  .justify-content-xlg-center {
    justify-content: center;
  }
  .justify-content-xlg-between {
    justify-content: space-between;
  }
  .justify-content-xlg-around {
    justify-content: space-around;
  }
  .justify-content-xlg-evenly {
    justify-content: space-evenly;
  }
  .align-items-xlg-start {
    align-items: flex-start;
  }
  .align-items-xlg-end {
    align-items: flex-end;
  }
  .align-items-xlg-center {
    align-items: center;
  }
  .align-items-xlg-baseline {
    align-items: baseline;
  }
  .align-items-xlg-stretch {
    align-items: stretch;
  }
  .align-content-xlg-start {
    align-content: flex-start;
  }
  .align-content-xlg-end {
    align-content: flex-end;
  }
  .align-content-xlg-center {
    align-content: center;
  }
  .align-content-xlg-between {
    align-content: space-between;
  }
  .align-content-xlg-around {
    align-content: space-around;
  }
  .align-content-xlg-stretch {
    align-content: stretch;
  }
  .align-self-xlg-auto {
    align-self: auto;
  }
  .align-self-xlg-start {
    align-self: flex-start;
  }
  .align-self-xlg-end {
    align-self: flex-end;
  }
  .align-self-xlg-center {
    align-self: center;
  }
  .align-self-xlg-baseline {
    align-self: baseline;
  }
  .align-self-xlg-stretch {
    align-self: stretch;
  }
  .order-xlg-first {
    order: -1;
  }
  .order-xlg-0 {
    order: 0;
  }
  .order-xlg-1 {
    order: 1;
  }
  .order-xlg-2 {
    order: 2;
  }
  .order-xlg-3 {
    order: 3;
  }
  .order-xlg-4 {
    order: 4;
  }
  .order-xlg-5 {
    order: 5;
  }
  .order-xlg-last {
    order: 6;
  }
  .text-xlg-start {
    text-align: left;
  }
  .text-xlg-end {
    text-align: right;
  }
  .text-xlg-center {
    text-align: center;
  }
}
.icon-favorites:before {
  content: var(--base-icon-heart);
}

.icon-favorites-filled:before {
  content: var(--base-icon-heart-filled);
}

.icon-spinner-up:before {
  content: var(--base-icon-plus);
}

.icon-spinner-down:before {
  content: var(--base-icon-minus);
}

.icon-account:before {
  content: var(--base-icon-user);
}

.icon-customer:before {
  content: var(--base-icon-user);
}

.icon-addresses:before {
  content: var(--base-icon-addressbook);
}

.icon-history:before {
  content: var(--base-icon-invoice);
}

.icon-digital-products:before {
  content: var(--base-icon-download);
}

.icon-digital-tickets:before {
  content: var(--base-icon-file-document);
}

.icon-newsletter:before {
  content: var(--base-icon-mail);
}

.icon-order-address:before {
  content: var(--base-icon-address);
}

.icon-order-payment:before {
  content: var(--base-icon-payment);
}

.icon-order-check:before {
  content: var(--base-icon-addressbook);
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v18-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v18-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/inter-v18-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/inter-v18-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/inter-v18-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/inter-v18-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v18-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/inter-v18-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-family: "Bayshore";
  src: url("../fonts/Bayshore.woff2") format("woff2"), url("../fonts/Bayshore.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes scaleRequestIcon {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes scaleRequestIconBigger {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.6;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/*
Text

Markup:
<span class="{{modifier_class}}"><strong>Lorem ipsum dolor sit amet</strong>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>

.leadtext - Bigger Text
.smalltext - Smaller Text

Styleguide Typo.Text
*/
/*
Links

Markup:
<a href="#" class="{{modifier_class}}">Link</a>

:hover - Hover
:focus - Focus
:active - Active

Styleguide Typo.Links
*/
html {
  font-size: 9px;
}
html:has(.algoliaAutocompleteModal.is-active) {
  scrollbar-gutter: stable;
}
@media (min-width: 1024px) {
  html {
    font-size: 10px;
  }
}

body {
  background-color: var(--main-color-white);
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
  line-height: var(--main-line-height);
  font-family: var(--main-font-family);
  color: var(--main-color-black);
  min-width: 320px;
}
body.pg_passwort-zuruecksetzen:has(.mainContent .emptybox) .mainContent .col-12 p {
  display: none;
}

*:focus-visible {
  outline-color: var(--main-color-primary);
}

.leadtext {
  font-size: calc(var(--main-font-size-base) + 0.2rem);
}

.smalltext {
  font-size: calc(var(--main-font-size-base) - 0.2rem);
}

a:hover, a:focus, a:active, .link:hover, .link:focus, .link:active {
  color: var(--main-link-color-hover);
  text-decoration: none;
}

a, .link {
  color: var(--main-link-color);
  text-decoration: none;
  cursor: pointer;
}
.textcontent a:not(.tag):not(.button):not(.linkWithIcon) {
  text-decoration: underline;
  word-break: break-word;
}

b, strong {
  font-weight: var(--main-font-weight-bold);
}

a:focus {
  outline: none;
}

label {
  font-size: 1.7rem;
  display: inline-block;
  font-weight: var(--main-font-weight-medium);
}
label:has(+ .inputGroup) {
  margin-bottom: 8px;
}

hr {
  border: 0;
  border-top: 1px solid var(--main-color-light-gray);
  margin-top: 30px;
  margin-bottom: 30px;
}

.text-decoration-underline {
  text-decoration: underline;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

small {
  font-size: var(--main-font-size-small);
}

.font--display {
  font-family: var(--main-font-family-display);
  font-size: 6rem;
  line-height: 0.9;
}
@media (min-width: 768px) {
  .font--display {
    font-size: 9rem;
  }
}
@media (min-width: 1024px) {
  .font--display {
    font-size: 12rem;
  }
}
@media (min-width: 1250px) {
  .font--display {
    font-size: 15rem;
  }
}

.text-uppercase {
  text-transform: uppercase;
}

.mobileMenu__navigation li.is-active > a span, .mobileMenu__navigation li.is-active_tree > a span, .headerMain .headerContentNavigation li.level_2 a.is-active, .megaMenu .link--underlined {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/*
Headlines

Markup:
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<div class="h1">.h1</div>
<div class="h2">.h2</div>
<div class="h3">.h3</div>
<div class="h4">.h4</div>
<div class="h5">.h5</div>
<div class="h6">.h6</div>
<h1 class="highlighted">h1.highlighted</h1>
<h2 class="highlighted">h2.highlighted</h2>
<h3 class="highlighted">h3.highlighted</h3>
<h4 class="highlighted">h4.highlighted</h4>
<h5 class="highlighted">h5.highlighted</h5>
<h6 class="highlighted">h6.highlighted</h6>

Styleguide Typo.Headlines
*/
h1, .h1,
h2, .h2, .itemcardHeadline, .orderboxSummary__headline,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  hyphens: auto;
  font-weight: var(--main-font-weight);
  line-height: 1.3333333;
  color: #111111;
  margin: 0;
  margin-bottom: clamp(10px, 1em, 20px);
}
h1.highlighted, .h1.highlighted,
h2.highlighted, .h2.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline,
h3.highlighted, .h3.highlighted,
h4.highlighted, .h4.highlighted,
h5.highlighted, .h5.highlighted,
h6.highlighted, .h6.highlighted {
  font-weight: var(--main-font-weight-black);
  line-height: 1;
}

h1, .h1 {
  margin-bottom: clamp(10px, 1em, 30px);
  text-transform: uppercase;
  font-weight: var(--main-font-weight-black);
  font-size: 2.8rem;
}
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3.4rem;
  }
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 3.52rem;
  }
}
@media (min-width: 1250px) {
  h1, .h1 {
    font-size: 3.64rem;
  }
}
@media (min-width: 1540px) {
  h1, .h1 {
    font-size: 4rem;
  }
}
h1.highlighted, .h1.highlighted {
  font-size: 3.6rem;
}
@media (min-width: 768px) {
  h1.highlighted, .h1.highlighted {
    font-size: 4.8rem;
  }
}
@media (min-width: 1024px) {
  h1.highlighted, .h1.highlighted {
    font-size: 5.04rem;
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .h1.highlighted {
    font-size: 5.28rem;
  }
}
@media (min-width: 1540px) {
  h1.highlighted, .h1.highlighted {
    font-size: 6rem;
  }
}

h2, .h2, .itemcardHeadline, .orderboxSummary__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: 2.4rem;
}
@media (min-width: 768px) {
  h2, .h2, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 2.8rem;
  }
}
@media (min-width: 1024px) {
  h2, .h2, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 2.88rem;
  }
}
@media (min-width: 1250px) {
  h2, .h2, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 2.96rem;
  }
}
@media (min-width: 1540px) {
  h2, .h2, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 3.2rem;
  }
}
h2.highlighted, .h2.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline {
  font-size: 2.6rem;
}
@media (min-width: 768px) {
  h2.highlighted, .h2.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline {
    font-size: 3.6rem;
  }
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline {
    font-size: 3.8rem;
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline {
    font-size: 4rem;
  }
}
@media (min-width: 1540px) {
  h2.highlighted, .h2.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline {
    font-size: 4.6rem;
  }
}

h3, .h3 {
  font-weight: var(--main-font-weight-bold);
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  h3, .h3 {
    font-size: 2.1rem;
  }
}
@media (min-width: 1024px) {
  h3, .h3 {
    font-size: 2.16rem;
  }
}
@media (min-width: 1250px) {
  h3, .h3 {
    font-size: 2.22rem;
  }
}
@media (min-width: 1540px) {
  h3, .h3 {
    font-size: 2.4rem;
  }
}

h4, .h4 {
  font-weight: var(--main-font-weight-medium);
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  h4, .h4 {
    font-size: 2.1rem;
  }
}
@media (min-width: 1024px) {
  h4, .h4 {
    font-size: 2.16rem;
  }
}
@media (min-width: 1250px) {
  h4, .h4 {
    font-size: 2.22rem;
  }
}
@media (min-width: 1540px) {
  h4, .h4 {
    font-size: 2.4rem;
  }
}

h5, .h5 {
  font-weight: var(--main-font-weight-bold);
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h5, .h5 {
    font-size: 1.55rem;
  }
}
@media (min-width: 1024px) {
  h5, .h5 {
    font-size: 1.56rem;
  }
}
@media (min-width: 1250px) {
  h5, .h5 {
    font-size: 1.57rem;
  }
}
@media (min-width: 1540px) {
  h5, .h5 {
    font-size: 1.6rem;
  }
}

h6, .h6 {
  text-transform: uppercase;
  font-weight: var(--main-font-weight-bold);
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h6, .h6 {
    font-size: 1.55rem;
  }
}
@media (min-width: 1024px) {
  h6, .h6 {
    font-size: 1.56rem;
  }
}
@media (min-width: 1250px) {
  h6, .h6 {
    font-size: 1.57rem;
  }
}
@media (min-width: 1540px) {
  h6, .h6 {
    font-size: 1.6rem;
  }
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-xs-none {
  display: none !important;
}

.d-xs-block {
  display: block !important;
}

.d-xs-inline {
  display: inline !important;
}

.d-xs-inline-block {
  display: inline-block !important;
}

.d-xs-flex {
  display: flex !important;
}

.d-xs-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 768px) {
  .d-sm-none {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .d-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .d-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) {
  .d-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) {
  .d-sm-flex {
    display: flex !important;
  }
}
@media (min-width: 768px) {
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 1024px) {
  .d-md-none {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .d-md-block {
    display: block !important;
  }
}
@media (min-width: 1024px) {
  .d-md-inline {
    display: inline !important;
  }
}
@media (min-width: 1024px) {
  .d-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1024px) {
  .d-md-flex {
    display: flex !important;
  }
}
@media (min-width: 1024px) {
  .d-md-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 1250px) {
  .d-lg-none {
    display: none !important;
  }
}
@media (min-width: 1250px) {
  .d-lg-block {
    display: block !important;
  }
}
@media (min-width: 1250px) {
  .d-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1250px) {
  .d-lg-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1250px) {
  .d-lg-flex {
    display: flex !important;
  }
}
@media (min-width: 1250px) {
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 1540px) {
  .d-xlg-none {
    display: none !important;
  }
}
@media (min-width: 1540px) {
  .d-xlg-block {
    display: block !important;
  }
}
@media (min-width: 1540px) {
  .d-xlg-inline {
    display: inline !important;
  }
}
@media (min-width: 1540px) {
  .d-xlg-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1540px) {
  .d-xlg-flex {
    display: flex !important;
  }
}
@media (min-width: 1540px) {
  .d-xlg-inline-flex {
    display: inline-flex !important;
  }
}
/*
Background

Markup:
<div class="kssColorBoxes">
  <div class="kssColorBox bg--white">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--light-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--gray-base">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--middle-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--dark-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--black">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--primary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--primary-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--primary-darken">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--secondary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--secondary-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--action">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--sale">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--success">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--success-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--success-darken">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--warning">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--warning-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--warning-darken">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--danger">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--danger-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--danger-darken">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--blue">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--blue-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--blue-smoke">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--turquoise">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--turquoise-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--turquoise-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--lilac">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--lilac-middle">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--lilac-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--green-moss">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--green-grass">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--green-jade">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--green-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--brown">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--brown-middle">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--brown-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--greige">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--coral-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--coral">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--yellow-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--yellow">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--yellow-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--rose">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--rose-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
  <div class="kssColorBox bg--info">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button--primary</a><br/><br/>
    <a class="button button--secondary" href="#">Button--secondary</a><br/><br/>
    <a class="button button--action" href="#">Button--action</a>
  </div>
</div>

Styleguide Colors.Background
*/
/*
Border

Markup:
<div class="kssColorBoxes">
  <div class="kssColorBox border--white">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--black">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--gray-base">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--light-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--primary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--secondary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--action">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
</div>

Styleguide Colors.Border
*/
/*
Font

Markup:
<span class="{{modifier_class}}">Text</span>

.color--white - White
.color--gray-base - Gray Base
.color--middle-gray - Middle Gray
.color--dark-gray - Dark Gray
.color--light-gray - Light Gray
.color--primary - Primary
.color--secondary - Secondary
.color--action - Action
.color--danger - Danger
.color--warning - Warning
.color--success - Success

Styleguide Colors.Font
*/
.bg--white {
  background-color: #FFFFFF;
  color: #111111;
}
.bg--white h1, .bg--white .h1, .bg--white h2, .bg--white .h2, .bg--white .itemcardHeadline, .bg--white .orderboxSummary__headline, .bg--white h3, .bg--white .h3, .bg--white h4, .bg--white .h4, .bg--white h5, .bg--white .h5, .bg--white h6, .bg--white .h6, .bg--white p, .bg--white .teaserBox__link {
  color: #111111;
}
.bg--white a:not(.button):not(.tag):not(.nav--shop__link), .bg--white .link {
  color: #111111;
}
.bg--white a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--white a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--white a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--white .link:hover, .bg--white .link:focus, .bg--white .link:active {
  color: var(--main-link-color-hover);
}
.bg--white a.tag:hover, .bg--white a.tag:active, .bg--white a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--white {
  border-color: #FFFFFF;
}

.color--white {
  color: #FFFFFF;
}
.color--white a:not(:hover):not(:focus):not(:active), .color--white .link:not(:hover):not(:focus):not(:active) {
  color: #FFFFFF;
}

.bg--light-gray {
  background-color: #F2F2F2;
  color: #111111;
}
.bg--light-gray h1, .bg--light-gray .h1, .bg--light-gray h2, .bg--light-gray .h2, .bg--light-gray .itemcardHeadline, .bg--light-gray .orderboxSummary__headline, .bg--light-gray h3, .bg--light-gray .h3, .bg--light-gray h4, .bg--light-gray .h4, .bg--light-gray h5, .bg--light-gray .h5, .bg--light-gray h6, .bg--light-gray .h6, .bg--light-gray p, .bg--light-gray .teaserBox__link {
  color: #111111;
}
.bg--light-gray a:not(.button):not(.tag):not(.nav--shop__link), .bg--light-gray .link {
  color: #111111;
}
.bg--light-gray a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--light-gray a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--light-gray a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--light-gray .link:hover, .bg--light-gray .link:focus, .bg--light-gray .link:active {
  color: var(--main-link-color-hover);
}
.bg--light-gray a.tag:hover, .bg--light-gray a.tag:active, .bg--light-gray a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--light-gray {
  border-color: #F2F2F2;
}

.color--light-gray {
  color: #F2F2F2;
}
.color--light-gray a:not(:hover):not(:focus):not(:active), .color--light-gray .link:not(:hover):not(:focus):not(:active) {
  color: #F2F2F2;
}

.bg--gray-base {
  background-color: #E6E6E6;
  color: #111111;
}
.bg--gray-base h1, .bg--gray-base .h1, .bg--gray-base h2, .bg--gray-base .h2, .bg--gray-base .itemcardHeadline, .bg--gray-base .orderboxSummary__headline, .bg--gray-base h3, .bg--gray-base .h3, .bg--gray-base h4, .bg--gray-base .h4, .bg--gray-base h5, .bg--gray-base .h5, .bg--gray-base h6, .bg--gray-base .h6, .bg--gray-base p, .bg--gray-base .teaserBox__link {
  color: #111111;
}
.bg--gray-base a:not(.button):not(.tag):not(.nav--shop__link), .bg--gray-base .link {
  color: #111111;
}
.bg--gray-base a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--gray-base a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--gray-base a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--gray-base .link:hover, .bg--gray-base .link:focus, .bg--gray-base .link:active {
  color: var(--main-link-color-hover);
}
.bg--gray-base a.tag:hover, .bg--gray-base a.tag:active, .bg--gray-base a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--gray-base {
  border-color: #E6E6E6;
}

.color--gray-base {
  color: #E6E6E6;
}
.color--gray-base a:not(:hover):not(:focus):not(:active), .color--gray-base .link:not(:hover):not(:focus):not(:active) {
  color: #E6E6E6;
}

.bg--middle-gray {
  background-color: #ADADAD;
  color: #111111;
}
.bg--middle-gray h1, .bg--middle-gray .h1, .bg--middle-gray h2, .bg--middle-gray .h2, .bg--middle-gray .itemcardHeadline, .bg--middle-gray .orderboxSummary__headline, .bg--middle-gray h3, .bg--middle-gray .h3, .bg--middle-gray h4, .bg--middle-gray .h4, .bg--middle-gray h5, .bg--middle-gray .h5, .bg--middle-gray h6, .bg--middle-gray .h6, .bg--middle-gray p, .bg--middle-gray .teaserBox__link {
  color: #111111;
}
.bg--middle-gray a:not(.button):not(.tag):not(.nav--shop__link), .bg--middle-gray .link {
  color: #111111;
}
.bg--middle-gray a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--middle-gray a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--middle-gray a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--middle-gray .link:hover, .bg--middle-gray .link:focus, .bg--middle-gray .link:active {
  color: var(--main-link-color-hover);
}
.bg--middle-gray a.tag:hover, .bg--middle-gray a.tag:active, .bg--middle-gray a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--middle-gray {
  border-color: #ADADAD;
}

.color--middle-gray {
  color: #ADADAD;
}
.color--middle-gray a:not(:hover):not(:focus):not(:active), .color--middle-gray .link:not(:hover):not(:focus):not(:active) {
  color: #ADADAD;
}

.bg--dark-gray {
  background-color: #787878;
  color: #ffffff;
}
.bg--dark-gray h1, .bg--dark-gray .h1, .bg--dark-gray h2, .bg--dark-gray .h2, .bg--dark-gray .itemcardHeadline, .bg--dark-gray .orderboxSummary__headline, .bg--dark-gray h3, .bg--dark-gray .h3, .bg--dark-gray h4, .bg--dark-gray .h4, .bg--dark-gray h5, .bg--dark-gray .h5, .bg--dark-gray h6, .bg--dark-gray .h6, .bg--dark-gray p, .bg--dark-gray .teaserBox__link {
  color: #ffffff;
}
.bg--dark-gray a:not(.button):not(.tag):not(.nav--shop__link), .bg--dark-gray .link {
  color: #ffffff;
}
.bg--dark-gray a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--dark-gray a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--dark-gray a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--dark-gray .link:hover, .bg--dark-gray .link:focus, .bg--dark-gray .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--dark-gray a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--dark-gray a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--dark-gray a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--dark-gray .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--dark-gray .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--dark-gray .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--dark-gray a.tag:hover, .bg--dark-gray a.tag:active, .bg--dark-gray a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--dark-gray {
  border-color: #787878;
}

.color--dark-gray {
  color: #787878;
}
.color--dark-gray a:not(:hover):not(:focus):not(:active), .color--dark-gray .link:not(:hover):not(:focus):not(:active) {
  color: #787878;
}

.bg--black {
  background-color: #111111;
  color: #ffffff;
}
.bg--black h1, .bg--black .h1, .bg--black h2, .bg--black .h2, .bg--black .itemcardHeadline, .bg--black .orderboxSummary__headline, .bg--black h3, .bg--black .h3, .bg--black h4, .bg--black .h4, .bg--black h5, .bg--black .h5, .bg--black h6, .bg--black .h6, .bg--black p, .bg--black .teaserBox__link {
  color: #ffffff;
}
.bg--black a:not(.button):not(.tag):not(.nav--shop__link), .bg--black .link {
  color: #ffffff;
}
.bg--black a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--black a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--black a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--black .link:hover, .bg--black .link:focus, .bg--black .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--black a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--black a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--black a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--black .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--black .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--black .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--black a.tag:hover, .bg--black a.tag:active, .bg--black a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--black {
  border-color: #111111;
}

.color--black {
  color: #111111;
}
.color--black a:not(:hover):not(:focus):not(:active), .color--black .link:not(:hover):not(:focus):not(:active) {
  color: #111111;
}

.bg--primary {
  background-color: #B4DDDE;
  color: #111111;
}
.bg--primary h1, .bg--primary .h1, .bg--primary h2, .bg--primary .h2, .bg--primary .itemcardHeadline, .bg--primary .orderboxSummary__headline, .bg--primary h3, .bg--primary .h3, .bg--primary h4, .bg--primary .h4, .bg--primary h5, .bg--primary .h5, .bg--primary h6, .bg--primary .h6, .bg--primary p, .bg--primary .teaserBox__link {
  color: #111111;
}
.bg--primary a:not(.button):not(.tag):not(.nav--shop__link), .bg--primary .link {
  color: #111111;
}
.bg--primary a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--primary a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--primary a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--primary .link:hover, .bg--primary .link:focus, .bg--primary .link:active {
  color: var(--main-link-color-hover);
}
.bg--primary a.tag:hover, .bg--primary a.tag:active, .bg--primary a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--primary {
  border-color: #B4DDDE;
}

.color--primary {
  color: #B4DDDE;
}
.color--primary a:not(:hover):not(:focus):not(:active), .color--primary .link:not(:hover):not(:focus):not(:active) {
  color: #B4DDDE;
}

.bg--primary-dark {
  background-color: #6FC3BA;
  color: #111111;
}
.bg--primary-dark h1, .bg--primary-dark .h1, .bg--primary-dark h2, .bg--primary-dark .h2, .bg--primary-dark .itemcardHeadline, .bg--primary-dark .orderboxSummary__headline, .bg--primary-dark h3, .bg--primary-dark .h3, .bg--primary-dark h4, .bg--primary-dark .h4, .bg--primary-dark h5, .bg--primary-dark .h5, .bg--primary-dark h6, .bg--primary-dark .h6, .bg--primary-dark p, .bg--primary-dark .teaserBox__link {
  color: #111111;
}
.bg--primary-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--primary-dark .link {
  color: #111111;
}
.bg--primary-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--primary-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--primary-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--primary-dark .link:hover, .bg--primary-dark .link:focus, .bg--primary-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--primary-dark a.tag:hover, .bg--primary-dark a.tag:active, .bg--primary-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--primary-dark {
  border-color: #6FC3BA;
}

.color--primary-dark {
  color: #6FC3BA;
}
.color--primary-dark a:not(:hover):not(:focus):not(:active), .color--primary-dark .link:not(:hover):not(:focus):not(:active) {
  color: #6FC3BA;
}

.bg--primary-darken {
  background-color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
  color: #111111;
}
.bg--primary-darken h1, .bg--primary-darken .h1, .bg--primary-darken h2, .bg--primary-darken .h2, .bg--primary-darken .itemcardHeadline, .bg--primary-darken .orderboxSummary__headline, .bg--primary-darken h3, .bg--primary-darken .h3, .bg--primary-darken h4, .bg--primary-darken .h4, .bg--primary-darken h5, .bg--primary-darken .h5, .bg--primary-darken h6, .bg--primary-darken .h6, .bg--primary-darken p, .bg--primary-darken .teaserBox__link {
  color: #111111;
}
.bg--primary-darken a:not(.button):not(.tag):not(.nav--shop__link), .bg--primary-darken .link {
  color: #111111;
}
.bg--primary-darken a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--primary-darken a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--primary-darken a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--primary-darken .link:hover, .bg--primary-darken .link:focus, .bg--primary-darken .link:active {
  color: var(--main-link-color-hover);
}
.bg--primary-darken a.tag:hover, .bg--primary-darken a.tag:active, .bg--primary-darken a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--primary-darken {
  border-color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
}

.color--primary-darken {
  color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
}
.color--primary-darken a:not(:hover):not(:focus):not(:active), .color--primary-darken .link:not(:hover):not(:focus):not(:active) {
  color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
}

.bg--secondary {
  background-color: #FCD6BB;
  color: #111111;
}
.bg--secondary h1, .bg--secondary .h1, .bg--secondary h2, .bg--secondary .h2, .bg--secondary .itemcardHeadline, .bg--secondary .orderboxSummary__headline, .bg--secondary h3, .bg--secondary .h3, .bg--secondary h4, .bg--secondary .h4, .bg--secondary h5, .bg--secondary .h5, .bg--secondary h6, .bg--secondary .h6, .bg--secondary p, .bg--secondary .teaserBox__link {
  color: #111111;
}
.bg--secondary a:not(.button):not(.tag):not(.nav--shop__link), .bg--secondary .link {
  color: #111111;
}
.bg--secondary a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--secondary a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--secondary a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--secondary .link:hover, .bg--secondary .link:focus, .bg--secondary .link:active {
  color: var(--main-link-color-hover);
}
.bg--secondary a.tag:hover, .bg--secondary a.tag:active, .bg--secondary a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--secondary {
  border-color: #FCD6BB;
}

.color--secondary {
  color: #FCD6BB;
}
.color--secondary a:not(:hover):not(:focus):not(:active), .color--secondary .link:not(:hover):not(:focus):not(:active) {
  color: #FCD6BB;
}

.bg--secondary-dark {
  background-color: #F8B68B;
  color: #111111;
}
.bg--secondary-dark h1, .bg--secondary-dark .h1, .bg--secondary-dark h2, .bg--secondary-dark .h2, .bg--secondary-dark .itemcardHeadline, .bg--secondary-dark .orderboxSummary__headline, .bg--secondary-dark h3, .bg--secondary-dark .h3, .bg--secondary-dark h4, .bg--secondary-dark .h4, .bg--secondary-dark h5, .bg--secondary-dark .h5, .bg--secondary-dark h6, .bg--secondary-dark .h6, .bg--secondary-dark p, .bg--secondary-dark .teaserBox__link {
  color: #111111;
}
.bg--secondary-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--secondary-dark .link {
  color: #111111;
}
.bg--secondary-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--secondary-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--secondary-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--secondary-dark .link:hover, .bg--secondary-dark .link:focus, .bg--secondary-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--secondary-dark a.tag:hover, .bg--secondary-dark a.tag:active, .bg--secondary-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--secondary-dark {
  border-color: #F8B68B;
}

.color--secondary-dark {
  color: #F8B68B;
}
.color--secondary-dark a:not(:hover):not(:focus):not(:active), .color--secondary-dark .link:not(:hover):not(:focus):not(:active) {
  color: #F8B68B;
}

.bg--action {
  background-color: #2760AB;
  color: #ffffff;
}
.bg--action h1, .bg--action .h1, .bg--action h2, .bg--action .h2, .bg--action .itemcardHeadline, .bg--action .orderboxSummary__headline, .bg--action h3, .bg--action .h3, .bg--action h4, .bg--action .h4, .bg--action h5, .bg--action .h5, .bg--action h6, .bg--action .h6, .bg--action p, .bg--action .teaserBox__link {
  color: #ffffff;
}
.bg--action a:not(.button):not(.tag):not(.nav--shop__link), .bg--action .link {
  color: #ffffff;
}
.bg--action a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--action a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--action a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--action .link:hover, .bg--action .link:focus, .bg--action .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--action a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--action a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--action a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--action .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--action .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--action .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--action a.tag:hover, .bg--action a.tag:active, .bg--action a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--action {
  border-color: #2760AB;
}

.color--action {
  color: #2760AB;
}
.color--action a:not(:hover):not(:focus):not(:active), .color--action .link:not(:hover):not(:focus):not(:active) {
  color: #2760AB;
}

.bg--sale {
  background-color: #2FA17E;
  color: #ffffff;
}
.bg--sale h1, .bg--sale .h1, .bg--sale h2, .bg--sale .h2, .bg--sale .itemcardHeadline, .bg--sale .orderboxSummary__headline, .bg--sale h3, .bg--sale .h3, .bg--sale h4, .bg--sale .h4, .bg--sale h5, .bg--sale .h5, .bg--sale h6, .bg--sale .h6, .bg--sale p, .bg--sale .teaserBox__link {
  color: #ffffff;
}
.bg--sale a:not(.button):not(.tag):not(.nav--shop__link), .bg--sale .link {
  color: #ffffff;
}
.bg--sale a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--sale a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--sale a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--sale .link:hover, .bg--sale .link:focus, .bg--sale .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--sale a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--sale a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--sale a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--sale .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--sale .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--sale .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--sale a.tag:hover, .bg--sale a.tag:active, .bg--sale a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--sale {
  border-color: #2FA17E;
}

.color--sale {
  color: #2FA17E;
}
.color--sale a:not(:hover):not(:focus):not(:active), .color--sale .link:not(:hover):not(:focus):not(:active) {
  color: #2FA17E;
}

.bg--success {
  background-color: #7BBB31;
  color: #111111;
}
.bg--success h1, .bg--success .h1, .bg--success h2, .bg--success .h2, .bg--success .itemcardHeadline, .bg--success .orderboxSummary__headline, .bg--success h3, .bg--success .h3, .bg--success h4, .bg--success .h4, .bg--success h5, .bg--success .h5, .bg--success h6, .bg--success .h6, .bg--success p, .bg--success .teaserBox__link {
  color: #111111;
}
.bg--success a:not(.button):not(.tag):not(.nav--shop__link), .bg--success .link {
  color: #111111;
}
.bg--success a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--success a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--success a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--success .link:hover, .bg--success .link:focus, .bg--success .link:active {
  color: var(--main-link-color-hover);
}
.bg--success a.tag:hover, .bg--success a.tag:active, .bg--success a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--success {
  border-color: #7BBB31;
}

.color--success {
  color: #7BBB31;
}
.color--success a:not(:hover):not(:focus):not(:active), .color--success .link:not(:hover):not(:focus):not(:active) {
  color: #7BBB31;
}

.bg--success-dark {
  background-color: rgb(162.2916666667, 212.9722222222, 214.2083333333);
  color: #111111;
}
.bg--success-dark h1, .bg--success-dark .h1, .bg--success-dark h2, .bg--success-dark .h2, .bg--success-dark .itemcardHeadline, .bg--success-dark .orderboxSummary__headline, .bg--success-dark h3, .bg--success-dark .h3, .bg--success-dark h4, .bg--success-dark .h4, .bg--success-dark h5, .bg--success-dark .h5, .bg--success-dark h6, .bg--success-dark .h6, .bg--success-dark p, .bg--success-dark .teaserBox__link {
  color: #111111;
}
.bg--success-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--success-dark .link {
  color: #111111;
}
.bg--success-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--success-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--success-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--success-dark .link:hover, .bg--success-dark .link:focus, .bg--success-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--success-dark a.tag:hover, .bg--success-dark a.tag:active, .bg--success-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--success-dark {
  border-color: rgb(162.2916666667, 212.9722222222, 214.2083333333);
}

.color--success-dark {
  color: rgb(162.2916666667, 212.9722222222, 214.2083333333);
}
.color--success-dark a:not(:hover):not(:focus):not(:active), .color--success-dark .link:not(:hover):not(:focus):not(:active) {
  color: rgb(162.2916666667, 212.9722222222, 214.2083333333);
}

.bg--success-darken {
  background-color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
  color: #111111;
}
.bg--success-darken h1, .bg--success-darken .h1, .bg--success-darken h2, .bg--success-darken .h2, .bg--success-darken .itemcardHeadline, .bg--success-darken .orderboxSummary__headline, .bg--success-darken h3, .bg--success-darken .h3, .bg--success-darken h4, .bg--success-darken .h4, .bg--success-darken h5, .bg--success-darken .h5, .bg--success-darken h6, .bg--success-darken .h6, .bg--success-darken p, .bg--success-darken .teaserBox__link {
  color: #111111;
}
.bg--success-darken a:not(.button):not(.tag):not(.nav--shop__link), .bg--success-darken .link {
  color: #111111;
}
.bg--success-darken a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--success-darken a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--success-darken a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--success-darken .link:hover, .bg--success-darken .link:focus, .bg--success-darken .link:active {
  color: var(--main-link-color-hover);
}
.bg--success-darken a.tag:hover, .bg--success-darken a.tag:active, .bg--success-darken a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--success-darken {
  border-color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
}

.color--success-darken {
  color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
}
.color--success-darken a:not(:hover):not(:focus):not(:active), .color--success-darken .link:not(:hover):not(:focus):not(:active) {
  color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
}

.bg--warning {
  background-color: #EF7410;
  color: #111111;
}
.bg--warning h1, .bg--warning .h1, .bg--warning h2, .bg--warning .h2, .bg--warning .itemcardHeadline, .bg--warning .orderboxSummary__headline, .bg--warning h3, .bg--warning .h3, .bg--warning h4, .bg--warning .h4, .bg--warning h5, .bg--warning .h5, .bg--warning h6, .bg--warning .h6, .bg--warning p, .bg--warning .teaserBox__link {
  color: #111111;
}
.bg--warning a:not(.button):not(.tag):not(.nav--shop__link), .bg--warning .link {
  color: #111111;
}
.bg--warning a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--warning a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--warning a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--warning .link:hover, .bg--warning .link:focus, .bg--warning .link:active {
  color: var(--main-link-color-hover);
}
.bg--warning a.tag:hover, .bg--warning a.tag:active, .bg--warning a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--warning {
  border-color: #EF7410;
}

.color--warning {
  color: #EF7410;
}
.color--warning a:not(:hover):not(:focus):not(:active), .color--warning .link:not(:hover):not(:focus):not(:active) {
  color: #EF7410;
}

.bg--warning-dark {
  background-color: rgb(215.1, 104.4, 14.4);
  color: #111111;
}
.bg--warning-dark h1, .bg--warning-dark .h1, .bg--warning-dark h2, .bg--warning-dark .h2, .bg--warning-dark .itemcardHeadline, .bg--warning-dark .orderboxSummary__headline, .bg--warning-dark h3, .bg--warning-dark .h3, .bg--warning-dark h4, .bg--warning-dark .h4, .bg--warning-dark h5, .bg--warning-dark .h5, .bg--warning-dark h6, .bg--warning-dark .h6, .bg--warning-dark p, .bg--warning-dark .teaserBox__link {
  color: #111111;
}
.bg--warning-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--warning-dark .link {
  color: #111111;
}
.bg--warning-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--warning-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--warning-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--warning-dark .link:hover, .bg--warning-dark .link:focus, .bg--warning-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--warning-dark a.tag:hover, .bg--warning-dark a.tag:active, .bg--warning-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--warning-dark {
  border-color: rgb(215.1, 104.4, 14.4);
}

.color--warning-dark {
  color: rgb(215.1, 104.4, 14.4);
}
.color--warning-dark a:not(:hover):not(:focus):not(:active), .color--warning-dark .link:not(:hover):not(:focus):not(:active) {
  color: rgb(215.1, 104.4, 14.4);
}

.bg--warning-darken {
  background-color: rgb(191.2, 92.8, 12.8);
  color: #ffffff;
}
.bg--warning-darken h1, .bg--warning-darken .h1, .bg--warning-darken h2, .bg--warning-darken .h2, .bg--warning-darken .itemcardHeadline, .bg--warning-darken .orderboxSummary__headline, .bg--warning-darken h3, .bg--warning-darken .h3, .bg--warning-darken h4, .bg--warning-darken .h4, .bg--warning-darken h5, .bg--warning-darken .h5, .bg--warning-darken h6, .bg--warning-darken .h6, .bg--warning-darken p, .bg--warning-darken .teaserBox__link {
  color: #ffffff;
}
.bg--warning-darken a:not(.button):not(.tag):not(.nav--shop__link), .bg--warning-darken .link {
  color: #ffffff;
}
.bg--warning-darken a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--warning-darken a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--warning-darken a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--warning-darken .link:hover, .bg--warning-darken .link:focus, .bg--warning-darken .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--warning-darken a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--warning-darken a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--warning-darken a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--warning-darken .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--warning-darken .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--warning-darken .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--warning-darken a.tag:hover, .bg--warning-darken a.tag:active, .bg--warning-darken a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--warning-darken {
  border-color: rgb(191.2, 92.8, 12.8);
}

.color--warning-darken {
  color: rgb(191.2, 92.8, 12.8);
}
.color--warning-darken a:not(:hover):not(:focus):not(:active), .color--warning-darken .link:not(:hover):not(:focus):not(:active) {
  color: rgb(191.2, 92.8, 12.8);
}

.bg--danger {
  background-color: #D50000;
  color: #ffffff;
}
.bg--danger h1, .bg--danger .h1, .bg--danger h2, .bg--danger .h2, .bg--danger .itemcardHeadline, .bg--danger .orderboxSummary__headline, .bg--danger h3, .bg--danger .h3, .bg--danger h4, .bg--danger .h4, .bg--danger h5, .bg--danger .h5, .bg--danger h6, .bg--danger .h6, .bg--danger p, .bg--danger .teaserBox__link {
  color: #ffffff;
}
.bg--danger a:not(.button):not(.tag):not(.nav--shop__link), .bg--danger .link {
  color: #ffffff;
}
.bg--danger a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--danger a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--danger a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--danger .link:hover, .bg--danger .link:focus, .bg--danger .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--danger a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--danger a.tag:hover, .bg--danger a.tag:active, .bg--danger a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--danger {
  border-color: #D50000;
}

.color--danger {
  color: #D50000;
}
.color--danger a:not(:hover):not(:focus):not(:active), .color--danger .link:not(:hover):not(:focus):not(:active) {
  color: #D50000;
}

.bg--danger-dark {
  background-color: rgb(187.5, 0, 0);
  color: #ffffff;
}
.bg--danger-dark h1, .bg--danger-dark .h1, .bg--danger-dark h2, .bg--danger-dark .h2, .bg--danger-dark .itemcardHeadline, .bg--danger-dark .orderboxSummary__headline, .bg--danger-dark h3, .bg--danger-dark .h3, .bg--danger-dark h4, .bg--danger-dark .h4, .bg--danger-dark h5, .bg--danger-dark .h5, .bg--danger-dark h6, .bg--danger-dark .h6, .bg--danger-dark p, .bg--danger-dark .teaserBox__link {
  color: #ffffff;
}
.bg--danger-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--danger-dark .link {
  color: #ffffff;
}
.bg--danger-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--danger-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--danger-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--danger-dark .link:hover, .bg--danger-dark .link:focus, .bg--danger-dark .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--danger-dark a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-dark a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-dark a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-dark .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-dark .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-dark .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--danger-dark a.tag:hover, .bg--danger-dark a.tag:active, .bg--danger-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--danger-dark {
  border-color: rgb(187.5, 0, 0);
}

.color--danger-dark {
  color: rgb(187.5, 0, 0);
}
.color--danger-dark a:not(:hover):not(:focus):not(:active), .color--danger-dark .link:not(:hover):not(:focus):not(:active) {
  color: rgb(187.5, 0, 0);
}

.bg--danger-darken {
  background-color: #a20000;
  color: #ffffff;
}
.bg--danger-darken h1, .bg--danger-darken .h1, .bg--danger-darken h2, .bg--danger-darken .h2, .bg--danger-darken .itemcardHeadline, .bg--danger-darken .orderboxSummary__headline, .bg--danger-darken h3, .bg--danger-darken .h3, .bg--danger-darken h4, .bg--danger-darken .h4, .bg--danger-darken h5, .bg--danger-darken .h5, .bg--danger-darken h6, .bg--danger-darken .h6, .bg--danger-darken p, .bg--danger-darken .teaserBox__link {
  color: #ffffff;
}
.bg--danger-darken a:not(.button):not(.tag):not(.nav--shop__link), .bg--danger-darken .link {
  color: #ffffff;
}
.bg--danger-darken a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--danger-darken a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--danger-darken a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--danger-darken .link:hover, .bg--danger-darken .link:focus, .bg--danger-darken .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--danger-darken a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-darken a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-darken a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-darken .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-darken .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--danger-darken .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--danger-darken a.tag:hover, .bg--danger-darken a.tag:active, .bg--danger-darken a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--danger-darken {
  border-color: #a20000;
}

.color--danger-darken {
  color: #a20000;
}
.color--danger-darken a:not(:hover):not(:focus):not(:active), .color--danger-darken .link:not(:hover):not(:focus):not(:active) {
  color: #a20000;
}

.bg--blue {
  background-color: #2760AB;
  color: #ffffff;
}
.bg--blue h1, .bg--blue .h1, .bg--blue h2, .bg--blue .h2, .bg--blue .itemcardHeadline, .bg--blue .orderboxSummary__headline, .bg--blue h3, .bg--blue .h3, .bg--blue h4, .bg--blue .h4, .bg--blue h5, .bg--blue .h5, .bg--blue h6, .bg--blue .h6, .bg--blue p, .bg--blue .teaserBox__link {
  color: #ffffff;
}
.bg--blue a:not(.button):not(.tag):not(.nav--shop__link), .bg--blue .link {
  color: #ffffff;
}
.bg--blue a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--blue a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--blue a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--blue .link:hover, .bg--blue .link:focus, .bg--blue .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--blue a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--blue a.tag:hover, .bg--blue a.tag:active, .bg--blue a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--blue {
  border-color: #2760AB;
}

.color--blue {
  color: #2760AB;
}
.color--blue a:not(:hover):not(:focus):not(:active), .color--blue .link:not(:hover):not(:focus):not(:active) {
  color: #2760AB;
}

.bg--blue-dark {
  background-color: #293E80;
  color: #ffffff;
}
.bg--blue-dark h1, .bg--blue-dark .h1, .bg--blue-dark h2, .bg--blue-dark .h2, .bg--blue-dark .itemcardHeadline, .bg--blue-dark .orderboxSummary__headline, .bg--blue-dark h3, .bg--blue-dark .h3, .bg--blue-dark h4, .bg--blue-dark .h4, .bg--blue-dark h5, .bg--blue-dark .h5, .bg--blue-dark h6, .bg--blue-dark .h6, .bg--blue-dark p, .bg--blue-dark .teaserBox__link {
  color: #ffffff;
}
.bg--blue-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--blue-dark .link {
  color: #ffffff;
}
.bg--blue-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--blue-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--blue-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--blue-dark .link:hover, .bg--blue-dark .link:focus, .bg--blue-dark .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--blue-dark a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue-dark a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue-dark a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue-dark .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue-dark .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--blue-dark .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--blue-dark a.tag:hover, .bg--blue-dark a.tag:active, .bg--blue-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--blue-dark {
  border-color: #293E80;
}

.color--blue-dark {
  color: #293E80;
}
.color--blue-dark a:not(:hover):not(:focus):not(:active), .color--blue-dark .link:not(:hover):not(:focus):not(:active) {
  color: #293E80;
}

.bg--blue-smoke {
  background-color: #6F88A8;
  color: #111111;
}
.bg--blue-smoke h1, .bg--blue-smoke .h1, .bg--blue-smoke h2, .bg--blue-smoke .h2, .bg--blue-smoke .itemcardHeadline, .bg--blue-smoke .orderboxSummary__headline, .bg--blue-smoke h3, .bg--blue-smoke .h3, .bg--blue-smoke h4, .bg--blue-smoke .h4, .bg--blue-smoke h5, .bg--blue-smoke .h5, .bg--blue-smoke h6, .bg--blue-smoke .h6, .bg--blue-smoke p, .bg--blue-smoke .teaserBox__link {
  color: #111111;
}
.bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link), .bg--blue-smoke .link {
  color: #111111;
}
.bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--blue-smoke .link:hover, .bg--blue-smoke .link:focus, .bg--blue-smoke .link:active {
  color: var(--main-link-color-hover);
}
.bg--blue-smoke a.tag:hover, .bg--blue-smoke a.tag:active, .bg--blue-smoke a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--blue-smoke {
  border-color: #6F88A8;
}

.color--blue-smoke {
  color: #6F88A8;
}
.color--blue-smoke a:not(:hover):not(:focus):not(:active), .color--blue-smoke .link:not(:hover):not(:focus):not(:active) {
  color: #6F88A8;
}

.bg--turquoise {
  background-color: #7AC9D4;
  color: #111111;
}
.bg--turquoise h1, .bg--turquoise .h1, .bg--turquoise h2, .bg--turquoise .h2, .bg--turquoise .itemcardHeadline, .bg--turquoise .orderboxSummary__headline, .bg--turquoise h3, .bg--turquoise .h3, .bg--turquoise h4, .bg--turquoise .h4, .bg--turquoise h5, .bg--turquoise .h5, .bg--turquoise h6, .bg--turquoise .h6, .bg--turquoise p, .bg--turquoise .teaserBox__link {
  color: #111111;
}
.bg--turquoise a:not(.button):not(.tag):not(.nav--shop__link), .bg--turquoise .link {
  color: #111111;
}
.bg--turquoise a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--turquoise a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--turquoise a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--turquoise .link:hover, .bg--turquoise .link:focus, .bg--turquoise .link:active {
  color: var(--main-link-color-hover);
}
.bg--turquoise a.tag:hover, .bg--turquoise a.tag:active, .bg--turquoise a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--turquoise {
  border-color: #7AC9D4;
}

.color--turquoise {
  color: #7AC9D4;
}
.color--turquoise a:not(:hover):not(:focus):not(:active), .color--turquoise .link:not(:hover):not(:focus):not(:active) {
  color: #7AC9D4;
}

.bg--turquoise-dark {
  background-color: #6FC3BA;
  color: #111111;
}
.bg--turquoise-dark h1, .bg--turquoise-dark .h1, .bg--turquoise-dark h2, .bg--turquoise-dark .h2, .bg--turquoise-dark .itemcardHeadline, .bg--turquoise-dark .orderboxSummary__headline, .bg--turquoise-dark h3, .bg--turquoise-dark .h3, .bg--turquoise-dark h4, .bg--turquoise-dark .h4, .bg--turquoise-dark h5, .bg--turquoise-dark .h5, .bg--turquoise-dark h6, .bg--turquoise-dark .h6, .bg--turquoise-dark p, .bg--turquoise-dark .teaserBox__link {
  color: #111111;
}
.bg--turquoise-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--turquoise-dark .link {
  color: #111111;
}
.bg--turquoise-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--turquoise-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--turquoise-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--turquoise-dark .link:hover, .bg--turquoise-dark .link:focus, .bg--turquoise-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--turquoise-dark a.tag:hover, .bg--turquoise-dark a.tag:active, .bg--turquoise-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--turquoise-dark {
  border-color: #6FC3BA;
}

.color--turquoise-dark {
  color: #6FC3BA;
}
.color--turquoise-dark a:not(:hover):not(:focus):not(:active), .color--turquoise-dark .link:not(:hover):not(:focus):not(:active) {
  color: #6FC3BA;
}

.bg--turquoise-light {
  background-color: #B4DDDE;
  color: #111111;
}
.bg--turquoise-light h1, .bg--turquoise-light .h1, .bg--turquoise-light h2, .bg--turquoise-light .h2, .bg--turquoise-light .itemcardHeadline, .bg--turquoise-light .orderboxSummary__headline, .bg--turquoise-light h3, .bg--turquoise-light .h3, .bg--turquoise-light h4, .bg--turquoise-light .h4, .bg--turquoise-light h5, .bg--turquoise-light .h5, .bg--turquoise-light h6, .bg--turquoise-light .h6, .bg--turquoise-light p, .bg--turquoise-light .teaserBox__link {
  color: #111111;
}
.bg--turquoise-light a:not(.button):not(.tag):not(.nav--shop__link), .bg--turquoise-light .link {
  color: #111111;
}
.bg--turquoise-light a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--turquoise-light a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--turquoise-light a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--turquoise-light .link:hover, .bg--turquoise-light .link:focus, .bg--turquoise-light .link:active {
  color: var(--main-link-color-hover);
}
.bg--turquoise-light a.tag:hover, .bg--turquoise-light a.tag:active, .bg--turquoise-light a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--turquoise-light {
  border-color: #B4DDDE;
}

.color--turquoise-light {
  color: #B4DDDE;
}
.color--turquoise-light a:not(:hover):not(:focus):not(:active), .color--turquoise-light .link:not(:hover):not(:focus):not(:active) {
  color: #B4DDDE;
}

.bg--lilac {
  background-color: #C9CFDE;
  color: #111111;
}
.bg--lilac h1, .bg--lilac .h1, .bg--lilac h2, .bg--lilac .h2, .bg--lilac .itemcardHeadline, .bg--lilac .orderboxSummary__headline, .bg--lilac h3, .bg--lilac .h3, .bg--lilac h4, .bg--lilac .h4, .bg--lilac h5, .bg--lilac .h5, .bg--lilac h6, .bg--lilac .h6, .bg--lilac p, .bg--lilac .teaserBox__link {
  color: #111111;
}
.bg--lilac a:not(.button):not(.tag):not(.nav--shop__link), .bg--lilac .link {
  color: #111111;
}
.bg--lilac a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--lilac a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--lilac a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--lilac .link:hover, .bg--lilac .link:focus, .bg--lilac .link:active {
  color: var(--main-link-color-hover);
}
.bg--lilac a.tag:hover, .bg--lilac a.tag:active, .bg--lilac a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--lilac {
  border-color: #C9CFDE;
}

.color--lilac {
  color: #C9CFDE;
}
.color--lilac a:not(:hover):not(:focus):not(:active), .color--lilac .link:not(:hover):not(:focus):not(:active) {
  color: #C9CFDE;
}

.bg--lilac-middle {
  background-color: #C0D5E5;
  color: #111111;
}
.bg--lilac-middle h1, .bg--lilac-middle .h1, .bg--lilac-middle h2, .bg--lilac-middle .h2, .bg--lilac-middle .itemcardHeadline, .bg--lilac-middle .orderboxSummary__headline, .bg--lilac-middle h3, .bg--lilac-middle .h3, .bg--lilac-middle h4, .bg--lilac-middle .h4, .bg--lilac-middle h5, .bg--lilac-middle .h5, .bg--lilac-middle h6, .bg--lilac-middle .h6, .bg--lilac-middle p, .bg--lilac-middle .teaserBox__link {
  color: #111111;
}
.bg--lilac-middle a:not(.button):not(.tag):not(.nav--shop__link), .bg--lilac-middle .link {
  color: #111111;
}
.bg--lilac-middle a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--lilac-middle a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--lilac-middle a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--lilac-middle .link:hover, .bg--lilac-middle .link:focus, .bg--lilac-middle .link:active {
  color: var(--main-link-color-hover);
}
.bg--lilac-middle a.tag:hover, .bg--lilac-middle a.tag:active, .bg--lilac-middle a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--lilac-middle {
  border-color: #C0D5E5;
}

.color--lilac-middle {
  color: #C0D5E5;
}
.color--lilac-middle a:not(:hover):not(:focus):not(:active), .color--lilac-middle .link:not(:hover):not(:focus):not(:active) {
  color: #C0D5E5;
}

.bg--lilac-dark {
  background-color: #A7AECA;
  color: #111111;
}
.bg--lilac-dark h1, .bg--lilac-dark .h1, .bg--lilac-dark h2, .bg--lilac-dark .h2, .bg--lilac-dark .itemcardHeadline, .bg--lilac-dark .orderboxSummary__headline, .bg--lilac-dark h3, .bg--lilac-dark .h3, .bg--lilac-dark h4, .bg--lilac-dark .h4, .bg--lilac-dark h5, .bg--lilac-dark .h5, .bg--lilac-dark h6, .bg--lilac-dark .h6, .bg--lilac-dark p, .bg--lilac-dark .teaserBox__link {
  color: #111111;
}
.bg--lilac-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--lilac-dark .link {
  color: #111111;
}
.bg--lilac-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--lilac-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--lilac-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--lilac-dark .link:hover, .bg--lilac-dark .link:focus, .bg--lilac-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--lilac-dark a.tag:hover, .bg--lilac-dark a.tag:active, .bg--lilac-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--lilac-dark {
  border-color: #A7AECA;
}

.color--lilac-dark {
  color: #A7AECA;
}
.color--lilac-dark a:not(:hover):not(:focus):not(:active), .color--lilac-dark .link:not(:hover):not(:focus):not(:active) {
  color: #A7AECA;
}

.bg--green-moss {
  background-color: #536554;
  color: #ffffff;
}
.bg--green-moss h1, .bg--green-moss .h1, .bg--green-moss h2, .bg--green-moss .h2, .bg--green-moss .itemcardHeadline, .bg--green-moss .orderboxSummary__headline, .bg--green-moss h3, .bg--green-moss .h3, .bg--green-moss h4, .bg--green-moss .h4, .bg--green-moss h5, .bg--green-moss .h5, .bg--green-moss h6, .bg--green-moss .h6, .bg--green-moss p, .bg--green-moss .teaserBox__link {
  color: #ffffff;
}
.bg--green-moss a:not(.button):not(.tag):not(.nav--shop__link), .bg--green-moss .link {
  color: #ffffff;
}
.bg--green-moss a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--green-moss a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--green-moss a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--green-moss .link:hover, .bg--green-moss .link:focus, .bg--green-moss .link:active {
  color: var(--main-link-color-hover);
  color: #ffffff;
}
.bg--green-moss a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--green-moss a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--green-moss a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--green-moss .link:hover:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--green-moss .link:focus:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined), .bg--green-moss .link:active:not(.tag):not(.nav--shop__link):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}
.bg--green-moss a.tag:hover, .bg--green-moss a.tag:active, .bg--green-moss a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--green-moss {
  border-color: #536554;
}

.color--green-moss {
  color: #536554;
}
.color--green-moss a:not(:hover):not(:focus):not(:active), .color--green-moss .link:not(:hover):not(:focus):not(:active) {
  color: #536554;
}

.bg--green-grass {
  background-color: #6FAC92;
  color: #111111;
}
.bg--green-grass h1, .bg--green-grass .h1, .bg--green-grass h2, .bg--green-grass .h2, .bg--green-grass .itemcardHeadline, .bg--green-grass .orderboxSummary__headline, .bg--green-grass h3, .bg--green-grass .h3, .bg--green-grass h4, .bg--green-grass .h4, .bg--green-grass h5, .bg--green-grass .h5, .bg--green-grass h6, .bg--green-grass .h6, .bg--green-grass p, .bg--green-grass .teaserBox__link {
  color: #111111;
}
.bg--green-grass a:not(.button):not(.tag):not(.nav--shop__link), .bg--green-grass .link {
  color: #111111;
}
.bg--green-grass a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--green-grass a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--green-grass a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--green-grass .link:hover, .bg--green-grass .link:focus, .bg--green-grass .link:active {
  color: var(--main-link-color-hover);
}
.bg--green-grass a.tag:hover, .bg--green-grass a.tag:active, .bg--green-grass a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--green-grass {
  border-color: #6FAC92;
}

.color--green-grass {
  color: #6FAC92;
}
.color--green-grass a:not(:hover):not(:focus):not(:active), .color--green-grass .link:not(:hover):not(:focus):not(:active) {
  color: #6FAC92;
}

.bg--green-jade {
  background-color: #8EB6B5;
  color: #111111;
}
.bg--green-jade h1, .bg--green-jade .h1, .bg--green-jade h2, .bg--green-jade .h2, .bg--green-jade .itemcardHeadline, .bg--green-jade .orderboxSummary__headline, .bg--green-jade h3, .bg--green-jade .h3, .bg--green-jade h4, .bg--green-jade .h4, .bg--green-jade h5, .bg--green-jade .h5, .bg--green-jade h6, .bg--green-jade .h6, .bg--green-jade p, .bg--green-jade .teaserBox__link {
  color: #111111;
}
.bg--green-jade a:not(.button):not(.tag):not(.nav--shop__link), .bg--green-jade .link {
  color: #111111;
}
.bg--green-jade a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--green-jade a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--green-jade a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--green-jade .link:hover, .bg--green-jade .link:focus, .bg--green-jade .link:active {
  color: var(--main-link-color-hover);
}
.bg--green-jade a.tag:hover, .bg--green-jade a.tag:active, .bg--green-jade a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--green-jade {
  border-color: #8EB6B5;
}

.color--green-jade {
  color: #8EB6B5;
}
.color--green-jade a:not(:hover):not(:focus):not(:active), .color--green-jade .link:not(:hover):not(:focus):not(:active) {
  color: #8EB6B5;
}

.bg--green-light {
  background-color: #ABCAD0;
  color: #111111;
}
.bg--green-light h1, .bg--green-light .h1, .bg--green-light h2, .bg--green-light .h2, .bg--green-light .itemcardHeadline, .bg--green-light .orderboxSummary__headline, .bg--green-light h3, .bg--green-light .h3, .bg--green-light h4, .bg--green-light .h4, .bg--green-light h5, .bg--green-light .h5, .bg--green-light h6, .bg--green-light .h6, .bg--green-light p, .bg--green-light .teaserBox__link {
  color: #111111;
}
.bg--green-light a:not(.button):not(.tag):not(.nav--shop__link), .bg--green-light .link {
  color: #111111;
}
.bg--green-light a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--green-light a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--green-light a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--green-light .link:hover, .bg--green-light .link:focus, .bg--green-light .link:active {
  color: var(--main-link-color-hover);
}
.bg--green-light a.tag:hover, .bg--green-light a.tag:active, .bg--green-light a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--green-light {
  border-color: #ABCAD0;
}

.color--green-light {
  color: #ABCAD0;
}
.color--green-light a:not(:hover):not(:focus):not(:active), .color--green-light .link:not(:hover):not(:focus):not(:active) {
  color: #ABCAD0;
}

.bg--brown {
  background-color: #92867D;
  color: #111111;
}
.bg--brown h1, .bg--brown .h1, .bg--brown h2, .bg--brown .h2, .bg--brown .itemcardHeadline, .bg--brown .orderboxSummary__headline, .bg--brown h3, .bg--brown .h3, .bg--brown h4, .bg--brown .h4, .bg--brown h5, .bg--brown .h5, .bg--brown h6, .bg--brown .h6, .bg--brown p, .bg--brown .teaserBox__link {
  color: #111111;
}
.bg--brown a:not(.button):not(.tag):not(.nav--shop__link), .bg--brown .link {
  color: #111111;
}
.bg--brown a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--brown a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--brown a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--brown .link:hover, .bg--brown .link:focus, .bg--brown .link:active {
  color: var(--main-link-color-hover);
}
.bg--brown a.tag:hover, .bg--brown a.tag:active, .bg--brown a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--brown {
  border-color: #92867D;
}

.color--brown {
  color: #92867D;
}
.color--brown a:not(:hover):not(:focus):not(:active), .color--brown .link:not(:hover):not(:focus):not(:active) {
  color: #92867D;
}

.bg--brown-middle {
  background-color: #CEBFB7;
  color: #111111;
}
.bg--brown-middle h1, .bg--brown-middle .h1, .bg--brown-middle h2, .bg--brown-middle .h2, .bg--brown-middle .itemcardHeadline, .bg--brown-middle .orderboxSummary__headline, .bg--brown-middle h3, .bg--brown-middle .h3, .bg--brown-middle h4, .bg--brown-middle .h4, .bg--brown-middle h5, .bg--brown-middle .h5, .bg--brown-middle h6, .bg--brown-middle .h6, .bg--brown-middle p, .bg--brown-middle .teaserBox__link {
  color: #111111;
}
.bg--brown-middle a:not(.button):not(.tag):not(.nav--shop__link), .bg--brown-middle .link {
  color: #111111;
}
.bg--brown-middle a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--brown-middle a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--brown-middle a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--brown-middle .link:hover, .bg--brown-middle .link:focus, .bg--brown-middle .link:active {
  color: var(--main-link-color-hover);
}
.bg--brown-middle a.tag:hover, .bg--brown-middle a.tag:active, .bg--brown-middle a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--brown-middle {
  border-color: #CEBFB7;
}

.color--brown-middle {
  color: #CEBFB7;
}
.color--brown-middle a:not(:hover):not(:focus):not(:active), .color--brown-middle .link:not(:hover):not(:focus):not(:active) {
  color: #CEBFB7;
}

.bg--brown-light {
  background-color: #E4E3DE;
  color: #111111;
}
.bg--brown-light h1, .bg--brown-light .h1, .bg--brown-light h2, .bg--brown-light .h2, .bg--brown-light .itemcardHeadline, .bg--brown-light .orderboxSummary__headline, .bg--brown-light h3, .bg--brown-light .h3, .bg--brown-light h4, .bg--brown-light .h4, .bg--brown-light h5, .bg--brown-light .h5, .bg--brown-light h6, .bg--brown-light .h6, .bg--brown-light p, .bg--brown-light .teaserBox__link {
  color: #111111;
}
.bg--brown-light a:not(.button):not(.tag):not(.nav--shop__link), .bg--brown-light .link {
  color: #111111;
}
.bg--brown-light a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--brown-light a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--brown-light a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--brown-light .link:hover, .bg--brown-light .link:focus, .bg--brown-light .link:active {
  color: var(--main-link-color-hover);
}
.bg--brown-light a.tag:hover, .bg--brown-light a.tag:active, .bg--brown-light a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--brown-light {
  border-color: #E4E3DE;
}

.color--brown-light {
  color: #E4E3DE;
}
.color--brown-light a:not(:hover):not(:focus):not(:active), .color--brown-light .link:not(:hover):not(:focus):not(:active) {
  color: #E4E3DE;
}

.bg--greige {
  background-color: #EAE8E8;
  color: #111111;
}
.bg--greige h1, .bg--greige .h1, .bg--greige h2, .bg--greige .h2, .bg--greige .itemcardHeadline, .bg--greige .orderboxSummary__headline, .bg--greige h3, .bg--greige .h3, .bg--greige h4, .bg--greige .h4, .bg--greige h5, .bg--greige .h5, .bg--greige h6, .bg--greige .h6, .bg--greige p, .bg--greige .teaserBox__link {
  color: #111111;
}
.bg--greige a:not(.button):not(.tag):not(.nav--shop__link), .bg--greige .link {
  color: #111111;
}
.bg--greige a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--greige a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--greige a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--greige .link:hover, .bg--greige .link:focus, .bg--greige .link:active {
  color: var(--main-link-color-hover);
}
.bg--greige a.tag:hover, .bg--greige a.tag:active, .bg--greige a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--greige {
  border-color: #EAE8E8;
}

.color--greige {
  color: #EAE8E8;
}
.color--greige a:not(:hover):not(:focus):not(:active), .color--greige .link:not(:hover):not(:focus):not(:active) {
  color: #EAE8E8;
}

.bg--coral-dark {
  background-color: #DAA892;
  color: #111111;
}
.bg--coral-dark h1, .bg--coral-dark .h1, .bg--coral-dark h2, .bg--coral-dark .h2, .bg--coral-dark .itemcardHeadline, .bg--coral-dark .orderboxSummary__headline, .bg--coral-dark h3, .bg--coral-dark .h3, .bg--coral-dark h4, .bg--coral-dark .h4, .bg--coral-dark h5, .bg--coral-dark .h5, .bg--coral-dark h6, .bg--coral-dark .h6, .bg--coral-dark p, .bg--coral-dark .teaserBox__link {
  color: #111111;
}
.bg--coral-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--coral-dark .link {
  color: #111111;
}
.bg--coral-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--coral-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--coral-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--coral-dark .link:hover, .bg--coral-dark .link:focus, .bg--coral-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--coral-dark a.tag:hover, .bg--coral-dark a.tag:active, .bg--coral-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--coral-dark {
  border-color: #DAA892;
}

.color--coral-dark {
  color: #DAA892;
}
.color--coral-dark a:not(:hover):not(:focus):not(:active), .color--coral-dark .link:not(:hover):not(:focus):not(:active) {
  color: #DAA892;
}

.bg--coral {
  background-color: #FBD0BA;
  color: #111111;
}
.bg--coral h1, .bg--coral .h1, .bg--coral h2, .bg--coral .h2, .bg--coral .itemcardHeadline, .bg--coral .orderboxSummary__headline, .bg--coral h3, .bg--coral .h3, .bg--coral h4, .bg--coral .h4, .bg--coral h5, .bg--coral .h5, .bg--coral h6, .bg--coral .h6, .bg--coral p, .bg--coral .teaserBox__link {
  color: #111111;
}
.bg--coral a:not(.button):not(.tag):not(.nav--shop__link), .bg--coral .link {
  color: #111111;
}
.bg--coral a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--coral a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--coral a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--coral .link:hover, .bg--coral .link:focus, .bg--coral .link:active {
  color: var(--main-link-color-hover);
}
.bg--coral a.tag:hover, .bg--coral a.tag:active, .bg--coral a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--coral {
  border-color: #FBD0BA;
}

.color--coral {
  color: #FBD0BA;
}
.color--coral a:not(:hover):not(:focus):not(:active), .color--coral .link:not(:hover):not(:focus):not(:active) {
  color: #FBD0BA;
}

.bg--yellow-dark {
  background-color: #E5DBB6;
  color: #111111;
}
.bg--yellow-dark h1, .bg--yellow-dark .h1, .bg--yellow-dark h2, .bg--yellow-dark .h2, .bg--yellow-dark .itemcardHeadline, .bg--yellow-dark .orderboxSummary__headline, .bg--yellow-dark h3, .bg--yellow-dark .h3, .bg--yellow-dark h4, .bg--yellow-dark .h4, .bg--yellow-dark h5, .bg--yellow-dark .h5, .bg--yellow-dark h6, .bg--yellow-dark .h6, .bg--yellow-dark p, .bg--yellow-dark .teaserBox__link {
  color: #111111;
}
.bg--yellow-dark a:not(.button):not(.tag):not(.nav--shop__link), .bg--yellow-dark .link {
  color: #111111;
}
.bg--yellow-dark a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--yellow-dark a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--yellow-dark a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--yellow-dark .link:hover, .bg--yellow-dark .link:focus, .bg--yellow-dark .link:active {
  color: var(--main-link-color-hover);
}
.bg--yellow-dark a.tag:hover, .bg--yellow-dark a.tag:active, .bg--yellow-dark a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--yellow-dark {
  border-color: #E5DBB6;
}

.color--yellow-dark {
  color: #E5DBB6;
}
.color--yellow-dark a:not(:hover):not(:focus):not(:active), .color--yellow-dark .link:not(:hover):not(:focus):not(:active) {
  color: #E5DBB6;
}

.bg--yellow {
  background-color: #FFEDBA;
  color: #111111;
}
.bg--yellow h1, .bg--yellow .h1, .bg--yellow h2, .bg--yellow .h2, .bg--yellow .itemcardHeadline, .bg--yellow .orderboxSummary__headline, .bg--yellow h3, .bg--yellow .h3, .bg--yellow h4, .bg--yellow .h4, .bg--yellow h5, .bg--yellow .h5, .bg--yellow h6, .bg--yellow .h6, .bg--yellow p, .bg--yellow .teaserBox__link {
  color: #111111;
}
.bg--yellow a:not(.button):not(.tag):not(.nav--shop__link), .bg--yellow .link {
  color: #111111;
}
.bg--yellow a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--yellow a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--yellow a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--yellow .link:hover, .bg--yellow .link:focus, .bg--yellow .link:active {
  color: var(--main-link-color-hover);
}
.bg--yellow a.tag:hover, .bg--yellow a.tag:active, .bg--yellow a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--yellow {
  border-color: #FFEDBA;
}

.color--yellow {
  color: #FFEDBA;
}
.color--yellow a:not(:hover):not(:focus):not(:active), .color--yellow .link:not(:hover):not(:focus):not(:active) {
  color: #FFEDBA;
}

.bg--yellow-light {
  background-color: #FFF6E0;
  color: #111111;
}
.bg--yellow-light h1, .bg--yellow-light .h1, .bg--yellow-light h2, .bg--yellow-light .h2, .bg--yellow-light .itemcardHeadline, .bg--yellow-light .orderboxSummary__headline, .bg--yellow-light h3, .bg--yellow-light .h3, .bg--yellow-light h4, .bg--yellow-light .h4, .bg--yellow-light h5, .bg--yellow-light .h5, .bg--yellow-light h6, .bg--yellow-light .h6, .bg--yellow-light p, .bg--yellow-light .teaserBox__link {
  color: #111111;
}
.bg--yellow-light a:not(.button):not(.tag):not(.nav--shop__link), .bg--yellow-light .link {
  color: #111111;
}
.bg--yellow-light a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--yellow-light a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--yellow-light a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--yellow-light .link:hover, .bg--yellow-light .link:focus, .bg--yellow-light .link:active {
  color: var(--main-link-color-hover);
}
.bg--yellow-light a.tag:hover, .bg--yellow-light a.tag:active, .bg--yellow-light a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--yellow-light {
  border-color: #FFF6E0;
}

.color--yellow-light {
  color: #FFF6E0;
}
.color--yellow-light a:not(:hover):not(:focus):not(:active), .color--yellow-light .link:not(:hover):not(:focus):not(:active) {
  color: #FFF6E0;
}

.bg--rose {
  background-color: #EAD7D0;
  color: #111111;
}
.bg--rose h1, .bg--rose .h1, .bg--rose h2, .bg--rose .h2, .bg--rose .itemcardHeadline, .bg--rose .orderboxSummary__headline, .bg--rose h3, .bg--rose .h3, .bg--rose h4, .bg--rose .h4, .bg--rose h5, .bg--rose .h5, .bg--rose h6, .bg--rose .h6, .bg--rose p, .bg--rose .teaserBox__link {
  color: #111111;
}
.bg--rose a:not(.button):not(.tag):not(.nav--shop__link), .bg--rose .link {
  color: #111111;
}
.bg--rose a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--rose a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--rose a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--rose .link:hover, .bg--rose .link:focus, .bg--rose .link:active {
  color: var(--main-link-color-hover);
}
.bg--rose a.tag:hover, .bg--rose a.tag:active, .bg--rose a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--rose {
  border-color: #EAD7D0;
}

.color--rose {
  color: #EAD7D0;
}
.color--rose a:not(:hover):not(:focus):not(:active), .color--rose .link:not(:hover):not(:focus):not(:active) {
  color: #EAD7D0;
}

.bg--rose-light {
  background-color: #FDECE3;
  color: #111111;
}
.bg--rose-light h1, .bg--rose-light .h1, .bg--rose-light h2, .bg--rose-light .h2, .bg--rose-light .itemcardHeadline, .bg--rose-light .orderboxSummary__headline, .bg--rose-light h3, .bg--rose-light .h3, .bg--rose-light h4, .bg--rose-light .h4, .bg--rose-light h5, .bg--rose-light .h5, .bg--rose-light h6, .bg--rose-light .h6, .bg--rose-light p, .bg--rose-light .teaserBox__link {
  color: #111111;
}
.bg--rose-light a:not(.button):not(.tag):not(.nav--shop__link), .bg--rose-light .link {
  color: #111111;
}
.bg--rose-light a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--rose-light a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--rose-light a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--rose-light .link:hover, .bg--rose-light .link:focus, .bg--rose-light .link:active {
  color: var(--main-link-color-hover);
}
.bg--rose-light a.tag:hover, .bg--rose-light a.tag:active, .bg--rose-light a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--rose-light {
  border-color: #FDECE3;
}

.color--rose-light {
  color: #FDECE3;
}
.color--rose-light a:not(:hover):not(:focus):not(:active), .color--rose-light .link:not(:hover):not(:focus):not(:active) {
  color: #FDECE3;
}

.bg--info {
  background-color: #F2F2F2;
  color: #111111;
}
.bg--info h1, .bg--info .h1, .bg--info h2, .bg--info .h2, .bg--info .itemcardHeadline, .bg--info .orderboxSummary__headline, .bg--info h3, .bg--info .h3, .bg--info h4, .bg--info .h4, .bg--info h5, .bg--info .h5, .bg--info h6, .bg--info .h6, .bg--info p, .bg--info .teaserBox__link {
  color: #111111;
}
.bg--info a:not(.button):not(.tag):not(.nav--shop__link), .bg--info .link {
  color: #111111;
}
.bg--info a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--info a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--info a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--info .link:hover, .bg--info .link:focus, .bg--info .link:active {
  color: var(--main-link-color-hover);
}
.bg--info a.tag:hover, .bg--info a.tag:active, .bg--info a.tag:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.border--info {
  border-color: #F2F2F2;
}

.color--info {
  color: #F2F2F2;
}
.color--info a:not(:hover):not(:focus):not(:active), .color--info .link:not(:hover):not(:focus):not(:active) {
  color: #F2F2F2;
}

.bg--brown, .bg--blue-smoke {
  color: var(--main-color-white);
}
.bg--brown h1, .bg--brown .h1, .bg--brown h2, .bg--brown .h2, .bg--brown .itemcardHeadline, .bg--brown .orderboxSummary__headline, .bg--brown h3, .bg--brown .h3, .bg--brown h4, .bg--brown .h4, .bg--brown h5, .bg--brown .h5, .bg--brown h6, .bg--brown .h6, .bg--brown p, .bg--brown .teaserBox__link, .bg--blue-smoke h1, .bg--blue-smoke .h1, .bg--blue-smoke h2, .bg--blue-smoke .h2, .bg--blue-smoke .itemcardHeadline, .bg--blue-smoke .orderboxSummary__headline, .bg--blue-smoke h3, .bg--blue-smoke .h3, .bg--blue-smoke h4, .bg--blue-smoke .h4, .bg--blue-smoke h5, .bg--blue-smoke .h5, .bg--blue-smoke h6, .bg--blue-smoke .h6, .bg--blue-smoke p, .bg--blue-smoke .teaserBox__link {
  color: var(--main-color-white);
}
.bg--brown .button--secondary, .bg--blue-smoke .button--secondary {
  color: var(--main-color-white);
}
.bg--brown .button--secondary:hover, .bg--brown .button--secondary:focus, .bg--brown .button--secondary:active, .bg--blue-smoke .button--secondary:hover, .bg--blue-smoke .button--secondary:focus, .bg--blue-smoke .button--secondary:active {
  color: var(--main-color-white);
}
.bg--brown .button--secondary:hover:before, .bg--brown .button--secondary:focus:before, .bg--brown .button--secondary:active:before, .bg--blue-smoke .button--secondary:hover:before, .bg--blue-smoke .button--secondary:focus:before, .bg--blue-smoke .button--secondary:active:before {
  color: var(--main-color-white);
}
.bg--brown a:not(.button):not(.tag):not(.nav--shop__link), .bg--brown .link, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link), .bg--blue-smoke .link {
  color: var(--main-color-white);
}
.bg--brown a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--brown a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--brown a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--brown .link:hover, .bg--brown .link:focus, .bg--brown .link:active, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--blue-smoke .link:hover, .bg--blue-smoke .link:focus, .bg--blue-smoke .link:active {
  color: var(--main-link-color-hover);
}
.bg--brown a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.linkWithIcon--underlined), .bg--brown a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.linkWithIcon--underlined), .bg--brown a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.linkWithIcon--underlined), .bg--brown .link:hover:not(.tag):not(.linkWithIcon--underlined), .bg--brown .link:focus:not(.tag):not(.linkWithIcon--underlined), .bg--brown .link:active:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke .link:hover:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke .link:focus:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke .link:active:not(.tag):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}

.bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link), .bg--blue-smoke .link {
  color: var(--main-color-white);
}
.bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):hover, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):focus, .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):active, .bg--blue-smoke .link:hover, .bg--blue-smoke .link:focus, .bg--blue-smoke .link:active {
  color: var(--main-color-black);
}
.bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):hover:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):focus:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke a:not(.button):not(.tag):not(.nav--shop__link):active:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke .link:hover:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke .link:focus:not(.tag):not(.linkWithIcon--underlined), .bg--blue-smoke .link:active:not(.tag):not(.linkWithIcon--underlined) {
  text-decoration: underline;
}

/*
Button

Markup:
<a href="#" class="button {{modifier_class}}">Button</a>
<button class="button {{modifier_class}}"><span>{{modifier_class}}</span><i class="icon icon-angle-right"></i></button>
<button disabled class="button {{modifier_class}}"><span>{{modifier_class}}:disabled</span><i class="icon icon-angle-right"></i></button>

.button--primary - Primary
.button--secondary - Secondary
.button--action - Action
.button--danger - Danger
:disabled - Disabled
.is-loading - Is loading
.is-success - Is success
.is-error - Is error

Styleguide Base.Buttons
*/
.giftPackageElement:hover .button, .giftPackageElement:hover .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .giftPackageElement:hover .orderButton, .giftPackageElement:focus .button, .giftPackageElement:focus .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .giftPackageElement:focus .orderButton, .giftPackageElement:active .button, .giftPackageElement:active .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .giftPackageElement:active .orderButton, a.banner3:hover .contentText__button, a.banner3:focus .contentText__button, .banner3 > .link:hover .button, .banner3 > .link:hover .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .banner3 > .link:hover .orderButton, .banner3 > .link:focus .button, .banner3 > .link:focus .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .banner3 > .link:focus .orderButton, a.banner2:hover .contentText__button, a.banner2:focus .contentText__button, .banner2 > .link:hover .button, .banner2 > .link:hover .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .banner2 > .link:hover .orderButton, .banner2 > .link:focus .button, .banner2 > .link:focus .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .banner2 > .link:focus .orderButton, a.banner:hover .contentText__button, a.banner:focus .contentText__button, .banner > .link:hover .button, .banner > .link:hover .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .banner > .link:hover .orderButton, .banner > .link:focus .button, .banner > .link:focus .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .banner > .link:focus .orderButton, button.disabled:hover,
.button_disabled:hover,
.btn-disabled:hover, button.disabled:focus,
.button_disabled:focus,
.btn-disabled:focus,
button:hover,
button:focus,
.button:hover,
.itemcardBuybox .orderButtonWrapper .orderButton:hover,
.button:focus,
.itemcardBuybox .orderButtonWrapper .orderButton:focus {
  background: transparent;
  border-color: var(--main-link-color-hover);
  color: var(--main-link-color);
  text-decoration: none;
}

button.disabled,
.button_disabled,
.btn-disabled,
.button.pseudo-class-disabled,
.button[disabled],
button,
.button,
.itemcardBuybox .orderButtonWrapper .orderButton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
  color: var(--main-color-black);
  cursor: pointer;
  background: transparent;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  font-weight: var(--main-font-weight-medium);
  letter-spacing: 0.32px;
  line-height: 18px;
  font-size: var(--main-font-size-medium);
  padding: 10px 15px 10px 15px;
  transition: ease-in-out 0.2s;
  position: relative;
}
@media (min-width: 768px) {
  button.disabled,
  .button_disabled,
  .btn-disabled,
  .button.pseudo-class-disabled,
  .button[disabled],
  button,
  .button,
  .itemcardBuybox .orderButtonWrapper .orderButton {
    line-height: 22px;
    font-size: 1.6rem;
    padding: 13px 22px 13px 22px;
  }
}
button.disabled i,
.button_disabled i,
.btn-disabled i,
.button.pseudo-class-disabled i,
.button[disabled] i,
button i,
.button i,
.itemcardBuybox .orderButtonWrapper .orderButton i {
  font-size: 2.8rem;
}
button.disabled:has(span + i) i,
.button_disabled:has(span + i) i,
.btn-disabled:has(span + i) i,
.button.pseudo-class-disabled:has(span + i) i,
.button[disabled]:has(span + i) i,
button:has(span + i) i,
.button:has(span + i) i,
.itemcardBuybox .orderButtonWrapper .orderButton:has(span + i) i {
  margin-right: -10px;
}
.button_disabled:has(i + span):not(.linkWithIcon):not(.ais-filterBoxToggle):not(.ais-dropdownMenu__trigger) i,
.btn-disabled:has(i + span):not(.linkWithIcon):not(.ais-filterBoxToggle):not(.ais-dropdownMenu__trigger) i,
button:has(i + span):not(.linkWithIcon):not(.ais-filterBoxToggle):not(.ais-dropdownMenu__trigger) i,
.button:has(i + span):not(.linkWithIcon):not(.ais-filterBoxToggle):not(.ais-dropdownMenu__trigger) i,
.itemcardBuybox .orderButtonWrapper .orderButton:has(i + span):not(.linkWithIcon):not(.ais-filterBoxToggle):not(.ais-dropdownMenu__trigger) i {
  margin-left: -10px;
}
.button_disabled:active,
.btn-disabled:active,
button:active,
.button:active,
.itemcardBuybox .orderButtonWrapper .orderButton:active {
  background: var(--main-color-white);
  border-color: var(--main-color-black);
  color: var(--main-color-black);
  text-decoration: none;
}
button--primary,
.button--primary,
.itemcardBuybox .orderButtonWrapper .orderButton {
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.itemcardBuybox .orderButtonWrapper .orderButton:hover,
.button--primary:focus,
.itemcardBuybox .orderButtonWrapper .orderButton:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-black);
}
button--primary:active,
.button--primary:active,
.itemcardBuybox .orderButtonWrapper .orderButton:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
button--secondary,
.button--secondary {
  background: transparent;
  color: var(--main-color-black);
  border-color: transparent;
  font-style: italic;
  padding-left: 40px;
  letter-spacing: 1.2px;
  text-align: left;
}
@media (min-width: 768px) {
  button--secondary,
  .button--secondary {
    padding-left: 50px;
    font-size: 2rem;
  }
}
button--secondary span,
.button--secondary span {
  transition: all 0.2s ease-in-out;
  transform: translateX(0);
}
button--secondary:before,
.button--secondary:before {
  content: var(--base-icon-arrow-right-long);
  position: absolute;
  font-style: normal;
  left: 0;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: 0 -50%;
  font-size: 3rem;
  transfom: scale(1);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 768px) {
  button--secondary:before,
  .button--secondary:before {
    font-size: 4rem;
  }
}
button--secondary:hover,
button--secondary:focus,
.button--secondary:hover,
.button--secondary:focus {
  background: transparent;
  border-color: transparent;
  color: var(--main-link-color-hover);
}
button--secondary:hover span,
button--secondary:focus span,
.button--secondary:hover span,
.button--secondary:focus span {
  transform: translateX(6px);
}
button--secondary:hover:before,
button--secondary:focus:before,
.button--secondary:hover:before,
.button--secondary:focus:before {
  color: var(--main-link-color-hover);
  left: 3px;
  transform: scale(1.15, 1);
}
button--secondary:active,
.button--secondary:active {
  background: transparent;
  border-color: transparent;
  color: var(--main-color-black);
}
button--secondary[disabled],
button--secondary.disabled,
button--secondary.is-disabled,
.button--secondary[disabled],
.button--secondary.disabled,
.button--secondary.is-disabled {
  background: var(--main-color-white) !important;
  padding-left: 50px !important;
  border-color: var(--main-color-white) !important;
  color: var(--main-color-middle-gray) !important;
}
button--xl,
.button--xl {
  border-radius: 30px;
}
button--action,
.button--action {
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
button--action:active,
.button--action:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-contrast);
}
button--danger,
.button--danger {
  background: var(--main-color-danger);
  color: var(--main-color-white);
  border-color: var(--main-color-danger);
}
button--danger:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
  background: var(--main-color-danger-dark);
  border-color: var(--main-color-danger-dark);
  color: var(--main-color-white);
}
button--danger:active,
.button--danger:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-contrast);
}
button--sm,
.button--sm {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  line-height: 18px;
  font-size: var(--main-font-size-medium);
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 18px;
    padding-right: 30px;
    padding-bottom: 18px;
    padding-left: 30px;
    font-size: var(--main-font-size-big);
  }
}
.is-loading.button_disabled,
.is-loading.btn-disabled,
.is-success.button_disabled,
.is-success.btn-disabled,
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-loading,
button.is-success,
button.is-error,
.button.is-loading,
.itemcardBuybox .orderButtonWrapper .is-loading.orderButton,
.button.is-success,
.itemcardBuybox .orderButtonWrapper .is-success.orderButton,
.button.is-error,
.itemcardBuybox .orderButtonWrapper .is-error.orderButton {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
  padding-left: 15px;
  transition: ease-in-out 0.2s;
  position: relative;
}
.is-loading.button_disabled:not(:has(.icon)),
.is-loading.btn-disabled:not(:has(.icon)),
.is-success.button_disabled:not(:has(.icon)),
.is-success.btn-disabled:not(:has(.icon)),
.is-error.button_disabled:not(:has(.icon)),
.is-error.btn-disabled:not(:has(.icon)),
button.is-loading:not(:has(.icon)),
button.is-success:not(:has(.icon)),
button.is-error:not(:has(.icon)),
.button.is-loading:not(:has(.icon)),
.itemcardBuybox .orderButtonWrapper .is-loading.orderButton:not(:has(.icon)),
.button.is-success:not(:has(.icon)),
.itemcardBuybox .orderButtonWrapper .is-success.orderButton:not(:has(.icon)),
.button.is-error:not(:has(.icon)),
.itemcardBuybox .orderButtonWrapper .is-error.orderButton:not(:has(.icon)) {
  padding-right: 44px;
}
@media (min-width: 768px) {
  .is-loading.button_disabled,
  .is-loading.btn-disabled,
  .is-success.button_disabled,
  .is-success.btn-disabled,
  .is-error.button_disabled,
  .is-error.btn-disabled,
  button.is-loading,
  button.is-success,
  button.is-error,
  .button.is-loading,
  .itemcardBuybox .orderButtonWrapper .is-loading.orderButton,
  .button.is-success,
  .itemcardBuybox .orderButtonWrapper .is-success.orderButton,
  .button.is-error,
  .itemcardBuybox .orderButtonWrapper .is-error.orderButton {
    padding-left: 22px;
  }
}
.is-loading.button_disabled .icon,
.is-loading.btn-disabled .icon,
.is-success.button_disabled .icon,
.is-success.btn-disabled .icon,
.is-error.button_disabled .icon,
.is-error.btn-disabled .icon,
button.is-loading .icon,
button.is-success .icon,
button.is-error .icon,
.button.is-loading .icon,
.itemcardBuybox .orderButtonWrapper .is-loading.orderButton .icon,
.button.is-success .icon,
.itemcardBuybox .orderButtonWrapper .is-success.orderButton .icon,
.button.is-error .icon,
.itemcardBuybox .orderButtonWrapper .is-error.orderButton .icon {
  opacity: 0;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-loading:after,
button.is-success:after,
button.is-error:after,
.button.is-loading:after,
.itemcardBuybox .orderButtonWrapper .is-loading.orderButton:after,
.button.is-success:after,
.itemcardBuybox .orderButtonWrapper .is-success.orderButton:after,
.button.is-error:after,
.itemcardBuybox .orderButtonWrapper .is-error.orderButton:after {
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: 0 -50%;
  font-size: 24px;
}
@media (max-width: 767.98px) {
  .is-loading.button_disabled:after,
  .is-loading.btn-disabled:after,
  .is-success.button_disabled:after,
  .is-success.btn-disabled:after,
  .is-error.button_disabled:after,
  .is-error.btn-disabled:after,
  button.is-loading:after,
  button.is-success:after,
  button.is-error:after,
  .button.is-loading:after,
  .itemcardBuybox .orderButtonWrapper .is-loading.orderButton:after,
  .button.is-success:after,
  .itemcardBuybox .orderButtonWrapper .is-success.orderButton:after,
  .button.is-error:after,
  .itemcardBuybox .orderButtonWrapper .is-error.orderButton:after {
    right: 7px;
  }
}
.is-loading.button_disabled,
.is-loading.btn-disabled,
button.is-loading,
.button.is-loading,
.itemcardBuybox .orderButtonWrapper .is-loading.orderButton {
  cursor: wait;
  color: var(--main-color-black) !important;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
button.is-loading:after,
.button.is-loading:after,
.itemcardBuybox .orderButtonWrapper .is-loading.orderButton:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.is-success.button_disabled,
.is-success.btn-disabled,
button.is-success,
.button.is-success,
.itemcardBuybox .orderButtonWrapper .is-success.orderButton {
  background: var(--main-color-primary) !important;
  border-color: var(--main-color-primary) !important;
  color: var(--main-color-black) !important;
}
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
button.is-success:after,
.button.is-success:after,
.itemcardBuybox .orderButtonWrapper .is-success.orderButton:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-error,
.button.is-error,
.itemcardBuybox .orderButtonWrapper .is-error.orderButton {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-error:after,
.button.is-error:after,
.itemcardBuybox .orderButtonWrapper .is-error.orderButton:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

button.disabled,
.button_disabled,
.btn-disabled,
.button.pseudo-class-disabled,
.itemcardBuybox .orderButtonWrapper .pseudo-class-disabled.orderButton,
.button[disabled],
.itemcardBuybox .orderButtonWrapper [disabled].orderButton {
  background: var(--main-color-light-gray);
  color: var(--main-color-dark-gray);
  border-color: var(--main-color-light-gray);
  cursor: not-allowed;
}
button.disabled:hover, button.disabled:focus, button.disabled:active,
.button_disabled:hover,
.button_disabled:focus,
.button_disabled:active,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active,
.button.pseudo-class-disabled:hover,
.itemcardBuybox .orderButtonWrapper .pseudo-class-disabled.orderButton:hover,
.button.pseudo-class-disabled:focus,
.itemcardBuybox .orderButtonWrapper .pseudo-class-disabled.orderButton:focus,
.button.pseudo-class-disabled:active,
.itemcardBuybox .orderButtonWrapper .pseudo-class-disabled.orderButton:active,
.button[disabled]:hover,
.itemcardBuybox .orderButtonWrapper [disabled].orderButton:hover,
.button[disabled]:focus,
.itemcardBuybox .orderButtonWrapper [disabled].orderButton:focus,
.button[disabled]:active,
.itemcardBuybox .orderButtonWrapper [disabled].orderButton:active {
  background: var(--main-color-light-gray);
  color: var(--main-color-dark-gray);
  border-color: var(--main-color-light-gray);
}

button.button--default {
  border: none;
  padding: 0;
  line-height: inherit;
}

@keyframes scaleRequestIconBtn {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.bg--dark-gray .button, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton, .bg--black .button, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton, .bg--action .button, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton, .bg--sale .button, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton, .bg--warning-darken .button, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton, .bg--danger .button, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton, .bg--danger-dark .button, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton, .bg--danger-darken .button, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton, .bg--blue .button, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton, .bg--blue-dark .button, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton, .bg--green-moss .button, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton {
  color: var(--main-color-white);
  border-color: var(--main-color-white);
}
.bg--dark-gray .button:hover, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton:hover, .bg--black .button:hover, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton:hover, .bg--action .button:hover, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton:hover, .bg--sale .button:hover, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton:hover, .bg--warning-darken .button:hover, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton:hover, .bg--danger .button:hover, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton:hover, .bg--danger-dark .button:hover, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton:hover, .bg--danger-darken .button:hover, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton:hover, .bg--blue .button:hover, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton:hover, .bg--blue-dark .button:hover, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton:hover, .bg--green-moss .button:hover, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton:hover, .bg--dark-gray .button:focus, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton:focus, .bg--black .button:focus, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton:focus, .bg--action .button:focus, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton:focus, .bg--sale .button:focus, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton:focus, .bg--warning-darken .button:focus, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton:focus, .bg--danger .button:focus, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton:focus, .bg--danger-dark .button:focus, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton:focus, .bg--danger-darken .button:focus, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton:focus, .bg--blue .button:focus, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton:focus, .bg--blue-dark .button:focus, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton:focus, .bg--green-moss .button:focus, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton:focus, .bg--dark-gray .button:active, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton:active, .bg--black .button:active, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton:active, .bg--action .button:active, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton:active, .bg--sale .button:active, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton:active, .bg--warning-darken .button:active, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton:active, .bg--danger .button:active, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton:active, .bg--danger-dark .button:active, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton:active, .bg--danger-darken .button:active, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton:active, .bg--blue .button:active, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton:active, .bg--blue-dark .button:active, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton:active, .bg--green-moss .button:active, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton:active {
  background: var(--main-color-primary);
}

.bg--dark-gray .button--primary, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton,
.bg--dark-gray .button--action, .bg--black .button--primary, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton,
.bg--black .button--action, .bg--action .button--primary, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton,
.bg--action .button--action, .bg--sale .button--primary, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton,
.bg--sale .button--action, .bg--warning-darken .button--primary, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton,
.bg--warning-darken .button--action, .bg--danger .button--primary, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton,
.bg--danger .button--action, .bg--danger-dark .button--primary, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton,
.bg--danger-dark .button--action, .bg--danger-darken .button--primary, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton,
.bg--danger-darken .button--action, .bg--blue .button--primary, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton,
.bg--blue .button--action, .bg--blue-dark .button--primary, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton,
.bg--blue-dark .button--action, .bg--green-moss .button--primary, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton,
.bg--green-moss .button--action {
  color: var(--main-color-black);
  border-color: var(--main-color-white);
  background: var(--main-color-white);
}
.bg--dark-gray .button--primary:hover, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton:hover,
.bg--dark-gray .button--action:hover, .bg--black .button--primary:hover, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton:hover,
.bg--black .button--action:hover, .bg--action .button--primary:hover, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton:hover,
.bg--action .button--action:hover, .bg--sale .button--primary:hover, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton:hover,
.bg--sale .button--action:hover, .bg--warning-darken .button--primary:hover, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton:hover,
.bg--warning-darken .button--action:hover, .bg--danger .button--primary:hover, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton:hover,
.bg--danger .button--action:hover, .bg--danger-dark .button--primary:hover, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton:hover,
.bg--danger-dark .button--action:hover, .bg--danger-darken .button--primary:hover, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton:hover,
.bg--danger-darken .button--action:hover, .bg--blue .button--primary:hover, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton:hover,
.bg--blue .button--action:hover, .bg--blue-dark .button--primary:hover, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton:hover,
.bg--blue-dark .button--action:hover, .bg--green-moss .button--primary:hover, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton:hover,
.bg--green-moss .button--action:hover, .bg--dark-gray .button--primary:focus, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton:focus,
.bg--dark-gray .button--action:focus, .bg--black .button--primary:focus, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton:focus,
.bg--black .button--action:focus, .bg--action .button--primary:focus, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton:focus,
.bg--action .button--action:focus, .bg--sale .button--primary:focus, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton:focus,
.bg--sale .button--action:focus, .bg--warning-darken .button--primary:focus, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton:focus,
.bg--warning-darken .button--action:focus, .bg--danger .button--primary:focus, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton:focus,
.bg--danger .button--action:focus, .bg--danger-dark .button--primary:focus, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton:focus,
.bg--danger-dark .button--action:focus, .bg--danger-darken .button--primary:focus, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton:focus,
.bg--danger-darken .button--action:focus, .bg--blue .button--primary:focus, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton:focus,
.bg--blue .button--action:focus, .bg--blue-dark .button--primary:focus, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton:focus,
.bg--blue-dark .button--action:focus, .bg--green-moss .button--primary:focus, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton:focus,
.bg--green-moss .button--action:focus, .bg--dark-gray .button--primary:active, .bg--dark-gray .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--dark-gray .orderButton:active,
.bg--dark-gray .button--action:active, .bg--black .button--primary:active, .bg--black .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--black .orderButton:active,
.bg--black .button--action:active, .bg--action .button--primary:active, .bg--action .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--action .orderButton:active,
.bg--action .button--action:active, .bg--sale .button--primary:active, .bg--sale .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--sale .orderButton:active,
.bg--sale .button--action:active, .bg--warning-darken .button--primary:active, .bg--warning-darken .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--warning-darken .orderButton:active,
.bg--warning-darken .button--action:active, .bg--danger .button--primary:active, .bg--danger .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--danger .orderButton:active,
.bg--danger .button--action:active, .bg--danger-dark .button--primary:active, .bg--danger-dark .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--danger-dark .orderButton:active,
.bg--danger-dark .button--action:active, .bg--danger-darken .button--primary:active, .bg--danger-darken .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--danger-darken .orderButton:active,
.bg--danger-darken .button--action:active, .bg--blue .button--primary:active, .bg--blue .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--blue .orderButton:active,
.bg--blue .button--action:active, .bg--blue-dark .button--primary:active, .bg--blue-dark .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--blue-dark .orderButton:active,
.bg--blue-dark .button--action:active, .bg--green-moss .button--primary:active, .bg--green-moss .itemcardBuybox .orderButtonWrapper .orderButton:active, .itemcardBuybox .orderButtonWrapper .bg--green-moss .orderButton:active,
.bg--green-moss .button--action:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}

.teaserSlider__link, .bg--dark-gray .button--secondary, .bg--black .button--secondary, .bg--action .button--secondary, .bg--sale .button--secondary, .bg--warning-darken .button--secondary, .bg--danger .button--secondary, .bg--danger-dark .button--secondary, .bg--danger-darken .button--secondary, .bg--blue .button--secondary, .bg--blue-dark .button--secondary, .bg--green-moss .button--secondary {
  color: var(--main-color-white);
  border-color: transparent;
  background: transparent;
}
.teaserSlider__link:hover, .bg--dark-gray .button--secondary:hover, .bg--black .button--secondary:hover, .bg--action .button--secondary:hover, .bg--sale .button--secondary:hover, .bg--warning-darken .button--secondary:hover, .bg--danger .button--secondary:hover, .bg--danger-dark .button--secondary:hover, .bg--danger-darken .button--secondary:hover, .bg--blue .button--secondary:hover, .bg--blue-dark .button--secondary:hover, .bg--green-moss .button--secondary:hover, .teaserSlider__link:focus, .bg--dark-gray .button--secondary:focus, .bg--black .button--secondary:focus, .bg--action .button--secondary:focus, .bg--sale .button--secondary:focus, .bg--warning-darken .button--secondary:focus, .bg--danger .button--secondary:focus, .bg--danger-dark .button--secondary:focus, .bg--danger-darken .button--secondary:focus, .bg--blue .button--secondary:focus, .bg--blue-dark .button--secondary:focus, .bg--green-moss .button--secondary:focus, .teaserSlider__link:active, .bg--dark-gray .button--secondary:active, .bg--black .button--secondary:active, .bg--action .button--secondary:active, .bg--sale .button--secondary:active, .bg--warning-darken .button--secondary:active, .bg--danger .button--secondary:active, .bg--danger-dark .button--secondary:active, .bg--danger-darken .button--secondary:active, .bg--blue .button--secondary:active, .bg--blue-dark .button--secondary:active, .bg--green-moss .button--secondary:active {
  background: transparent;
  border-color: transparent;
  color: var(--main-color-white);
}
.teaserSlider__link:hover:before, .bg--dark-gray .button--secondary:hover:before, .bg--black .button--secondary:hover:before, .bg--action .button--secondary:hover:before, .bg--sale .button--secondary:hover:before, .bg--warning-darken .button--secondary:hover:before, .bg--danger .button--secondary:hover:before, .bg--danger-dark .button--secondary:hover:before, .bg--danger-darken .button--secondary:hover:before, .bg--blue .button--secondary:hover:before, .bg--blue-dark .button--secondary:hover:before, .bg--green-moss .button--secondary:hover:before, .teaserSlider__link:focus:before, .bg--dark-gray .button--secondary:focus:before, .bg--black .button--secondary:focus:before, .bg--action .button--secondary:focus:before, .bg--sale .button--secondary:focus:before, .bg--warning-darken .button--secondary:focus:before, .bg--danger .button--secondary:focus:before, .bg--danger-dark .button--secondary:focus:before, .bg--danger-darken .button--secondary:focus:before, .bg--blue .button--secondary:focus:before, .bg--blue-dark .button--secondary:focus:before, .bg--green-moss .button--secondary:focus:before, .teaserSlider__link:active:before, .bg--dark-gray .button--secondary:active:before, .bg--black .button--secondary:active:before, .bg--action .button--secondary:active:before, .bg--sale .button--secondary:active:before, .bg--warning-darken .button--secondary:active:before, .bg--danger .button--secondary:active:before, .bg--danger-dark .button--secondary:active:before, .bg--danger-darken .button--secondary:active:before, .bg--blue .button--secondary:active:before, .bg--blue-dark .button--secondary:active:before, .bg--green-moss .button--secondary:active:before {
  color: var(--main-color-white);
}

/*
Button Link

Markup:
<a href="#" class="buttonLink">Button Link</a> <button class="buttonLink">Button Link</button>

Styleguide Base.Button Link
*/
a.banner3:hover .buttonLink, a.banner3:focus .buttonLink, .banner3 > .link:hover .buttonLink, .banner3 > .link:focus .buttonLink, a.banner2:hover .buttonLink, a.banner2:focus .buttonLink, .banner2 > .link:hover .buttonLink, .banner2 > .link:focus .buttonLink, a.banner:hover .buttonLink, a.banner:focus .buttonLink, .banner > .link:hover .buttonLink, .banner > .link:focus .buttonLink, .contentBox > .link:hover .buttonLink, .contentBox > .link:focus .buttonLink, .contentBox > .link:active .buttonLink, .buttonLink:hover, .buttonLink:focus, .buttonLink:active {
  text-decoration-color: var(--main-color-primary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
  border-color: transparent;
  color: var(--main-color-black);
  background: transparent;
}

.buttonLink {
  border-color: transparent;
  background: transparent;
  color: var(--main-color-black);
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-medium);
  line-height: normal;
  letter-spacing: 1.08px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-underline-position: from-font;
}
/*
Inputs

Markup:
<strong>Text</strong><br/>
<input type="text" class='{{modifier_class}}' value="Text" /><br/>
<strong>E-Mail</strong><br/>
<input type="email" class='{{modifier_class}}' value="info@dc.ag" /><br/>
<strong>Number</strong><br/>
<input type="number" class='{{modifier_class}}' value="123" /><br/>
<strong>Date</strong><br/>
<input type="date" class='{{modifier_class}}' value="2025-01-01" /><br/>
<strong>Textarea</strong><br/>
<textarea class='{{modifier_class}}'>Text</textarea><br/>
<strong>Select</strong><br/>
<div class="selectBody">
<select class='{{modifier_class}}'>
  <option disabled selected>Choose</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
</div>
<strong>Select mit FakeOption</strong><br/>
<div class="selectBody">
  <div class="selectBody__fakeOption"">Option</div>
</div>

:focus    - Focus
:active   - Active
:disabled - Disabled
:valid - Valid
.error - Error

Styleguide Form.Inputs
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--main-color-white) inset !important;
}

input,
select,
textarea,
.filterReset,
.customSelect__selected,
.selectBody__fakeOption {
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
  box-shadow: none;
  display: block;
  width: 100%;
  line-height: 18px;
  font-size: clamp(16px, var(--main-font-size-medium), 20px);
  padding: 10px 15px 10px 15px;
}
@media (min-width: 768px) {
  input,
  select,
  textarea,
  .filterReset,
  .customSelect__selected,
  .selectBody__fakeOption {
    line-height: 22px;
    font-size: 1.6rem;
    padding: 13px 22px 13px 22px;
  }
}
input:not(:disabled):active, input:not(:disabled):focus,
select:not(:disabled):active,
select:not(:disabled):focus,
textarea:not(:disabled):active,
textarea:not(:disabled):focus,
.filterReset:not(:disabled):active,
.customSelect__selected:not(:disabled):active,
.selectBody__fakeOption:not(:disabled):active,
.filterReset:not(:disabled):focus,
.customSelect__selected:not(:disabled):focus,
.selectBody__fakeOption:not(:disabled):focus {
  border-color: var(--main-color-black);
}
input.error,
select.error,
textarea.error,
.error.filterReset,
.error.customSelect__selected,
.error.selectBody__fakeOption {
  border-color: var(--main-color-danger);
}
input:disabled,
select:disabled,
textarea:disabled,
.filterReset:disabled,
.customSelect__selected:disabled,
.selectBody__fakeOption:disabled {
  background-color: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=submit] {
  width: auto;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=file] + .full {
  flex-grow: 1;
  padding-left: 15px;
  padding-right: 15px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
input[type=file] + .full i {
  font-size: 18px;
}
input[type=file]:hover + .full i {
  color: var(--main-color-primary);
}

textarea {
  resize: vertical;
  field-sizing: content;
  min-height: 120px;
  border-radius: 10px;
}

.selectBody:after, .customSelect__selected:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 18px;
  top: 50%;
  font-size: 2.6rem;
  pointer-events: none;
  transform: translateY(-50%);
  margin-top: 1px;
}

.selectBody, .customSelect__selected {
  background-color: var(--main-color-white);
  cursor: pointer;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.selectBody__fakeOption {
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selectBody select, .customSelect__selected select {
  color: var(--main-color-black);
  border-color: var(--main-color-black);
  cursor: pointer;
  padding-right: 40px;
  appearance: none;
  display: block;
  width: 100%;
}
.selectBody select::-ms-expand, .customSelect__selected select::-ms-expand {
  display: none;
}
.selectBody.focus select, .focus.customSelect__selected select {
  border-color: var(--main-color-black);
}
.selectBody.disabled select, .disabled.customSelect__selected select {
  cursor: default;
}

form {
  margin: 0;
}

/*
File Input

Markup:
<div class="fileBody ">
    <input class="{{modifier_class}}" name="input_file" id="input_file" type="file" value="" multiple>
    <span>Dateien auswählen</span>
</div>

:focus    - Focus
:active   - Active
:disabled - Disabled
.error - Error

Styleguide Form.File Input
*/
.fileBody {
  display: block;
  position: relative;
  width: 100%;
}
.fileBody input {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.fileBody input + span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
  box-shadow: none;
  width: 100%;
  line-height: 18px;
  font-size: clamp(16px, var(--main-font-size-medium), 20px);
  padding: 10px 15px 10px 15px;
  min-height: 40px;
  cursor: pointer;
  display: block;
  padding-right: 50px;
}
@media (min-width: 768px) {
  .fileBody input + span {
    line-height: 22px;
    font-size: 1.6rem;
    padding: 13px 22px 13px 22px;
    min-height: 50px;
  }
}
.fileBody input:not(:disabled):active + span, .fileBody input:not(:disabled):focus + span {
  border-color: var(--main-color-black);
}
.fileBody input.error + span {
  border-color: var(--main-color-danger);
}
.fileBody input:disabled + span {
  background-color: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.fileBody .icon {
  font-size: 2rem;
  width: 40px;
  min-height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}
@media (min-width: 768px) {
  .fileBody .icon {
    min-height: 50px;
    width: 50px;
  }
}

/*
Radioboxes

Markup:
<label class="specialradiobox" for="specialradioboxradio1">
    <input type='radio' name='specialradiobox' id='specialradioboxradio1' value='' aria-label="Radio 1">
    <i></i>
    <span aria-hidden="true">Radio 1</span>
</label>
<label class="specialradiobox" for="specialradioboxradio2">
    <input type='radio' name='specialradiobox' id='specialradioboxradio2' value='' aria-label="Radio 2">
    <i></i>
    <span aria-hidden="true">Radio 2</span>
</label>

Styleguide Form.Radioboxes
*/
/*
Radioboxes Switch

Markup:
<label class="specialcheckboxSwitch" for="specialcheckboxSwitchradio1">
    <input type='radio' name='specialcheckboxSwitch' id='specialcheckboxSwitchradio1' value='' checked='checked' aria-label="Radio 1">
    <i></i>
    <span aria-hidden="true">Radio 1</span>
</label>
<label class="specialcheckboxSwitch" for="specialcheckboxSwitchradio2">
    <input type='radio' name='specialcheckboxSwitch' id='specialcheckboxSwitchradio2' value='' aria-label="Radio 2">
    <i></i>
    <span aria-hidden="true">Radio 2</span>
</label>

Styleguide Form.Radioboxes Switch
*/
/*
Checkboxes

Markup:
<label class="specialcheckbox" for="checkbox1">
    <input type='checkbox' name='checkbox' id='checkbox1' value='' aria-label="Text">
    <i></i>
    <span aria-hidden="true">Text</span>
</label>

Styleguide Form.Checkboxes
*/
/*
Checkboxes Switch

Markup:
<label class="specialcheckboxSwitch" for="specialcheckboxSwitch1">
    <input type='checkbox' name='checkbox' id='specialcheckboxSwitch1' value='' aria-label="Text">
    <i></i>
    <span aria-hidden="true">Text</span>
</label>

Styleguide Form.Checkboxes Switch
*/
.specialradiobox,
.specialcheckbox,
.specialcheckboxSwitch {
  position: relative;
  line-height: 22px;
  display: inline-flex;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  padding-left: 0;
  font-size: 1.7rem;
  color: var(--main-color-black);
}
.specialradiobox i,
.specialcheckbox i,
.specialcheckboxSwitch i {
  font-style: normal;
  position: relative;
  top: 2px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  background-color: var(--main-color-white);
  border: 1px solid var(--main-color-black);
  border-radius: 50%;
  display: block;
  pointer-events: none;
  margin-bottom: 0;
  font-family: var(--main-font-family);
}
.specialradiobox i:after,
.specialcheckbox i:after,
.specialcheckboxSwitch i:after {
  content: " ";
  pointer-events: none;
  position: absolute;
  width: 12px;
  height: 12px;
  left: 1px;
  top: 1px;
  opacity: 0;
  transition: opacity 0.1s ease-in;
  background-color: var(--main-color-black);
  border-radius: 50%;
  display: block;
}
.specialradiobox:has(input:checked) i:after,
.specialcheckbox:has(input:checked) i:after,
.specialcheckboxSwitch:has(input:checked) i:after {
  opacity: 1;
}
.specialradiobox:has(input:disabled) i,
.specialcheckbox:has(input:disabled) i,
.specialcheckboxSwitch:has(input:disabled) i {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.specialradiobox:has(input:disabled) i:after,
.specialcheckbox:has(input:disabled) i:after,
.specialcheckboxSwitch:has(input:disabled) i:after {
  color: var(--main-color-gray-base);
}
.specialradiobox:has(input:focus) input + i,
.specialcheckbox:has(input:focus) input + i,
.specialcheckboxSwitch:has(input:focus) input + i {
  border-color: var(--main-color-black);
}
.specialradiobox input,
.specialcheckbox input,
.specialcheckboxSwitch input {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.specialradiobox input:disabled,
.specialcheckbox input:disabled,
.specialcheckboxSwitch input:disabled {
  cursor: not-allowed;
}
.specialradiobox:has(input:active):not(.disabled) i:after,
.specialcheckbox:has(input:active):not(.disabled) i:after,
.specialcheckboxSwitch:has(input:active):not(.disabled) i:after {
  opacity: 1;
}
.specialradiobox:has(input:active):disabled,
.specialcheckbox:has(input:active):disabled,
.specialcheckboxSwitch:has(input:active):disabled {
  cursor: not-allowed;
}
.specialradiobox:has(input:active):disabled + i,
.specialcheckbox:has(input:active):disabled + i,
.specialcheckboxSwitch:has(input:active):disabled + i {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.specialradiobox:has(input:active):disabled + i:after,
.specialcheckbox:has(input:active):disabled + i:after,
.specialcheckboxSwitch:has(input:active):disabled + i:after {
  color: var(--main-color-gray-base);
}
.specialradiobox:has(input:active):focus + i,
.specialcheckbox:has(input:active):focus + i,
.specialcheckboxSwitch:has(input:active):focus + i {
  border-color: var(--main-color-black);
}
.specialradiobox:active:not(.disabled) i:after,
.specialcheckbox:active:not(.disabled) i:after,
.specialcheckboxSwitch:active:not(.disabled) i:after {
  opacity: 0.7;
}
.specialradiobox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckbox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckboxSwitch:active:not(.disabled) input:disabled:not(:checked) + i:after {
  opacity: 0;
}
.specialradiobox.disabled,
.specialcheckbox.disabled,
.specialcheckboxSwitch.disabled {
  cursor: default;
  color: var(--main-color-black);
}

.specialcheckbox i {
  border-radius: 0;
}
.specialcheckbox i:after {
  content: " ";
  pointer-events: none;
  position: absolute;
  width: 12px;
  height: 12px;
  left: 1px;
  top: 1px;
  opacity: 0;
  border-radius: 0;
  transition: opacity 0.1s ease-in;
  background-color: var(--main-color-black);
  display: block;
}
.specialcheckbox input {
  width: 24px;
  height: 24px;
  left: 0;
  top: 0;
}

.specialcheckboxSwitch {
  margin-bottom: 0;
}
.specialcheckboxSwitch span {
  line-height: 22px;
}
.specialcheckboxSwitch i {
  background: var(--main-color-white);
  border-radius: 16px;
  width: 50px;
  height: 22px;
  margin-top: 0;
  top: 0;
  border: 1px solid var(--main-color-black);
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch i:after {
  content: "";
  display: block;
  background: var(--main-color-black);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 1;
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch:has(input:checked) i {
  background: var(--main-color-white);
}
.specialcheckboxSwitch:has(input:checked) i:after {
  left: 30px;
  background: var(--main-color-primary);
}

img,
svg {
  height: auto !important;
  max-width: 100%;
  object-fit: contain;
}

.image, .itemcardImagesThumbs .itemcardImages__img, .itemcardImagesMain .itemcardImages__img, .imageCover {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image > video, .itemcardImagesThumbs .itemcardImages__img > video, .itemcardImagesMain .itemcardImages__img > video, .imageCover > video,
.image > img,
.itemcardImagesThumbs .itemcardImages__img > img,
.itemcardImagesMain .itemcardImages__img > img,
.imageCover > img,
.image > svg,
.itemcardImagesThumbs .itemcardImages__img > svg,
.itemcardImagesMain .itemcardImages__img > svg,
.imageCover > svg {
  object-fit: contain;
  object-position: center center;
  max-height: 100% !important;
  aspect-ratio: 1;
  width: 100%;
}

.imageCover > video,
.imageCover > img,
.imageCover > svg {
  object-fit: cover;
  min-width: 100%;
}

.imageRound {
  border-radius: 50%;
  overflow: hidden;
}
.imageRound > img {
  min-width: 100%;
  object-fit: cover;
}

.categoryItem, .banner3 .contentImage, .banner2 .contentImage, .banner .contentImage, .contentBox.contentBox--textinbox {
  position: relative;
  overflow: hidden;
}
.categoryItem:after, .banner3 .contentImage:after, .banner2 .contentImage:after, .banner .contentImage:after, .contentBox.contentBox--textinbox:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(0, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

video {
  height: auto !important;
  max-width: 100% !important;
}

/*
Tables

Markup:
<table>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>


Styleguide Base.Tables
*/
table {
  font-size: var(--main-font-size-base);
}

td,
th {
  padding: 10px 5px;
  border-bottom: 0;
  border-bottom: 1px solid var(--main-color-black);
  text-align: left;
}
@media (min-width: 1250px) {
  td,
  th {
    padding-left: 10px;
    padding-right: 10px;
  }
}

tr:first-child td, tr:first-child th {
  border-top: none;
  border-bottom: none;
  background: var(--main-color-light-gray);
  font-weight: var(--main-font-weight-medium);
}

.table_wrapper {
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
}
@media (max-width: 767px) {
  .table_wrapper table {
    font-size: var(--main-font-size-small);
  }
}

/*
Fake Tables

Markup:
<div class="table">
<div class="table__row table__row--header">
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
</div>
<div class="table__row">
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
</div>
</div>


Styleguide Base.Fake Tables
*/
.table {
  width: 100%;
}
@media (min-width: 1024px) {
  .table {
    display: table;
  }
}
.table__row {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--main-color-light-gray);
}
@media (min-width: 1024px) {
  .table__row {
    display: table-row;
  }
}
@media (min-width: 1024px) {
  .table__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 5px;
    border-bottom: 0;
    border-bottom: 1px solid var(--main-color-black);
  }
}
@media (min-width: 1250px) {
  .table__cell {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 1023px) {
  .table__cell {
    text-align: left !important;
  }
  .table__cell .button, .table__cell .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .table__cell .orderButton {
    margin-top: 10px;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--main-color-gray-base);
  border: 0 none transparent;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: var(--main-color-black);
}

::-webkit-scrollbar-track {
  background: transparent;
  border: 0 none transparent;
  border-radius: 0;
}

::-webkit-scrollbar-track:hover {
  background: transparent;
}

::-webkit-scrollbar-track:active {
  background: transparent;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/*
Embeds

Markup:
<div class="embedResponsive embedResponsive--1by1"><iframe src="https://youtu.be/llky_ddeL0I"></iframe></div><br/>
<div class="embedResponsive embedResponsive--4by3"><iframe src="https://youtu.be/llky_ddeL0I"></iframe></div><br/>
<div class="embedResponsive embedResponsive--16by9"><iframe src="https://youtu.be/llky_ddeL0I"></iframe></div><br/>
<div class="embedResponsive embedResponsive--21by9"><iframe src="https://youtu.be/llky_ddeL0I"></iframe></div>

//Styleguide Base.Embeds
*/
iframe,
embed,
object {
  max-width: 100%;
  border: 0;
}

.embedResponsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
.embedResponsive > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100% !important;
  width: 100% !important;
  border: 0;
}

.embedResponsive--1by1 {
  padding-bottom: 100%;
}

.embedResponsive--4by3 {
  padding-bottom: 75%;
}

.embedResponsive--16by9 {
  padding-bottom: 56.25%;
}

.embedResponsive--21by9 {
  padding-bottom: 42.85%;
}

/*
Paddings

Markup:
<strong>Padding</strong></br>
<div class="m{{modifier_class}} padding{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Padding Top</strong></br>
<div class="mt{{modifier_class}} paddingTop{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Padding Right</strong></br>
<div class="mr{{modifier_class}} paddingRight{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Padding Bottom</strong></br>
<div class="mb{{modifier_class}} paddingBottom{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Padding Left</strong></br>
<div class="ml{{modifier_class}} paddingLeft{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>

--base - Padding
--xsmall - xSmall Padding
--small - Small Padding
--large - Large Padding
--xlarge - xLarge Padding


Styleguide Structure.Paddings
*/
.padding {
  padding: 12px;
}
.paddingTop {
  padding-top: 12px;
}
.paddingRight {
  padding-right: 12px;
}
.paddingBottom {
  padding-bottom: 12px;
}
.paddingLeft {
  padding-left: 12px;
}

.p--base {
  padding: 12px;
}

.pt--base {
  padding-top: 12px;
}

.pr--base {
  padding-right: 12px;
}

.pb--base {
  padding-bottom: 12px;
}

.pl--base {
  padding-left: 12px;
}

.padding--base {
  padding: 12px;
}

.paddingTop--base {
  padding-top: 12px;
}

.paddingRight--base {
  padding-right: 12px;
}

.paddingBottom--base {
  padding-bottom: 12px;
}

.paddingLeft--base {
  padding-left: 12px;
}

.p--small {
  padding: 32px;
}

.pt--small {
  padding-top: 32px;
}

.pr--small {
  padding-right: 32px;
}

.pb--small {
  padding-bottom: 32px;
}

.pl--small {
  padding-left: 32px;
}

.padding--small {
  padding: 32px;
}

.paddingTop--small {
  padding-top: 32px;
}

.paddingRight--small {
  padding-right: 32px;
}

.paddingBottom--small {
  padding-bottom: 32px;
}

.paddingLeft--small {
  padding-left: 32px;
}

.p--middle {
  padding: 64px;
}

.pt--middle {
  padding-top: 64px;
}

.pr--middle {
  padding-right: 64px;
}

.pb--middle {
  padding-bottom: 64px;
}

.pl--middle {
  padding-left: 64px;
}

.padding--middle {
  padding: 64px;
}

.paddingTop--middle {
  padding-top: 64px;
}

.paddingRight--middle {
  padding-right: 64px;
}

.paddingBottom--middle {
  padding-bottom: 64px;
}

.paddingLeft--middle {
  padding-left: 64px;
}

.p--large {
  padding: 120px;
}

.pt--large {
  padding-top: 120px;
}

.pr--large {
  padding-right: 120px;
}

.pb--large {
  padding-bottom: 120px;
}

.pl--large {
  padding-left: 120px;
}

.padding--large {
  padding: 120px;
}

.paddingTop--large {
  padding-top: 120px;
}

.paddingRight--large {
  padding-right: 120px;
}

.paddingBottom--large {
  padding-bottom: 120px;
}

.paddingLeft--large {
  padding-left: 120px;
}

.p--xlarge {
  padding: 180px;
}

.pt--xlarge {
  padding-top: 180px;
}

.pr--xlarge {
  padding-right: 180px;
}

.pb--xlarge {
  padding-bottom: 180px;
}

.pl--xlarge {
  padding-left: 180px;
}

.padding--xlarge {
  padding: 180px;
}

.paddingTop--xlarge {
  padding-top: 180px;
}

.paddingRight--xlarge {
  padding-right: 180px;
}

.paddingBottom--xlarge {
  padding-bottom: 180px;
}

.paddingLeft--xlarge {
  padding-left: 180px;
}

.p--xsmall {
  padding: 5px;
}

.pt--xsmall {
  padding-top: 5px;
}

.pr--xsmall {
  padding-right: 5px;
}

.pb--xsmall {
  padding-bottom: 5px;
}

.pl--xsmall {
  padding-left: 5px;
}

.padding--xsmall {
  padding: 5px;
}

.paddingTop--xsmall {
  padding-top: 5px;
}

.paddingRight--xsmall {
  padding-right: 5px;
}

.paddingBottom--xsmall {
  padding-bottom: 5px;
}

.paddingLeft--xsmall {
  padding-left: 5px;
}

@media (max-width: 767.98px) {
  .p--large {
    padding: 48px;
  }
  .pt--large {
    padding-top: 48px;
  }
  .pr--large {
    padding-right: 48px;
  }
  .pb--large {
    padding-bottom: 48px;
  }
  .pl--large {
    padding-left: 48px;
  }
  .padding--large {
    padding: 48px;
  }
  .paddingTop--large {
    padding-top: 48px;
  }
  .paddingRight--large {
    padding-right: 48px;
  }
  .paddingBottom--large {
    padding-bottom: 48px;
  }
  .paddingLeft--large {
    padding-left: 48px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .p--large {
    padding: 90px;
  }
  .pt--large {
    padding-top: 90px;
  }
  .pr--large {
    padding-right: 90px;
  }
  .pb--large {
    padding-bottom: 90px;
  }
  .pl--large {
    padding-left: 90px;
  }
  .padding--large {
    padding: 90px;
  }
  .paddingTop--large {
    padding-top: 90px;
  }
  .paddingRight--large {
    padding-right: 90px;
  }
  .paddingBottom--large {
    padding-bottom: 90px;
  }
  .paddingLeft--large {
    padding-left: 90px;
  }
}
@media (max-width: 767.98px) {
  .p--xlarge {
    padding: 80px;
  }
  .pt--xlarge {
    padding-top: 80px;
  }
  .pr--xlarge {
    padding-right: 80px;
  }
  .pb--xlarge {
    padding-bottom: 80px;
  }
  .pl--xlarge {
    padding-left: 80px;
  }
  .padding--xlarge {
    padding: 80px;
  }
  .paddingTop--xlarge {
    padding-top: 80px;
  }
  .paddingRight--xlarge {
    padding-right: 80px;
  }
  .paddingBottom--xlarge {
    padding-bottom: 80px;
  }
  .paddingLeft--xlarge {
    padding-left: 80px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .p--xlarge {
    padding: 140px;
  }
  .pt--xlarge {
    padding-top: 140px;
  }
  .pr--xlarge {
    padding-right: 140px;
  }
  .pb--xlarge {
    padding-bottom: 140px;
  }
  .pl--xlarge {
    padding-left: 140px;
  }
  .padding--xlarge {
    padding: 140px;
  }
  .paddingTop--xlarge {
    padding-top: 140px;
  }
  .paddingRight--xlarge {
    padding-right: 140px;
  }
  .paddingBottom--xlarge {
    padding-bottom: 140px;
  }
  .paddingLeft--xlarge {
    padding-left: 140px;
  }
}
@media (max-width: 767.98px) {
  .xs-padding {
    padding-bottom: 14px;
  }
  .xs-padding-base {
    padding-bottom: 12px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sm-padding {
    padding-bottom: 14px;
  }
  .sm-padding-base {
    padding-bottom: 12px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .md-padding {
    padding-bottom: 14px;
  }
  .md-padding-base {
    padding-bottom: 12px;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .lg-padding {
    padding-bottom: 14px;
  }
  .lg-padding-base {
    padding-bottom: 12px;
  }
}
@media (min-width: 1540px) {
  .xlg-padding {
    padding-bottom: 14px;
  }
  .xlg-padding-base {
    padding-bottom: 12px;
  }
}
/*
Margins

Markup:
<strong>Margin</strong></br>
<div class="m{{modifier_class}} margin{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Margin Top</strong></br>
<div class="mt{{modifier_class}} marginTop{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Margin Right</strong></br>
<div class="mr{{modifier_class}} marginRight{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Margin Bottom</strong></br>
<div class="mb{{modifier_class}} marginBottom{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
<strong>Margin Left</strong></br>
<div class="ml{{modifier_class}} marginLeft{{modifier_class}}"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>

--base - Margin
--xsmall - xSmall Margin
--small - Small Margin
--large - Large Margin
--xlarge - xLarge Margin


Styleguide Structure.Margins
*/
.margin {
  margin: 12px;
}
.marginTop, .algoliaSearchLayout__pagination {
  margin-top: 12px;
}
.marginRight {
  margin-right: 12px;
}
.marginBottom, .algoliaSearchLayout {
  margin-bottom: 12px;
}
.marginLeft {
  margin-left: 12px;
}

.m--base {
  margin: 12px;
}

.mt--base {
  margin-top: 12px;
}

.mr--base {
  margin-right: 12px;
}

.mb--base {
  margin-bottom: 12px;
}

.ml--base {
  margin-left: 12px;
}

.margin--base {
  margin: 12px;
}

.marginTop--base {
  margin-top: 12px;
}

.marginRight--base {
  margin-right: 12px;
}

.marginBottom--base {
  margin-bottom: 12px;
}

.marginLeft--base {
  margin-left: 12px;
}

.m--small {
  margin: 32px;
}

.mt--small {
  margin-top: 32px;
}

.mr--small {
  margin-right: 32px;
}

.mb--small {
  margin-bottom: 32px;
}

.ml--small {
  margin-left: 32px;
}

.margin--small {
  margin: 32px;
}

.marginTop--small {
  margin-top: 32px;
}

.marginRight--small {
  margin-right: 32px;
}

.marginBottom--small {
  margin-bottom: 32px;
}

.marginLeft--small {
  margin-left: 32px;
}

.m--middle {
  margin: 64px;
}

.mt--middle {
  margin-top: 64px;
}

.mr--middle {
  margin-right: 64px;
}

.mb--middle {
  margin-bottom: 64px;
}

.ml--middle {
  margin-left: 64px;
}

.margin--middle {
  margin: 64px;
}

.marginTop--middle {
  margin-top: 64px;
}

.marginRight--middle {
  margin-right: 64px;
}

.marginBottom--middle {
  margin-bottom: 64px;
}

.marginLeft--middle {
  margin-left: 64px;
}

.m--large {
  margin: 120px;
}

.mt--large {
  margin-top: 120px;
}

.mr--large {
  margin-right: 120px;
}

.mb--large {
  margin-bottom: 120px;
}

.ml--large {
  margin-left: 120px;
}

.margin--large {
  margin: 120px;
}

.marginTop--large {
  margin-top: 120px;
}

.marginRight--large {
  margin-right: 120px;
}

.marginBottom--large {
  margin-bottom: 120px;
}

.marginLeft--large {
  margin-left: 120px;
}

.m--xlarge {
  margin: 180px;
}

.mt--xlarge {
  margin-top: 180px;
}

.mr--xlarge {
  margin-right: 180px;
}

.mb--xlarge {
  margin-bottom: 180px;
}

.ml--xlarge {
  margin-left: 180px;
}

.margin--xlarge {
  margin: 180px;
}

.marginTop--xlarge {
  margin-top: 180px;
}

.marginRight--xlarge {
  margin-right: 180px;
}

.marginBottom--xlarge {
  margin-bottom: 180px;
}

.marginLeft--xlarge {
  margin-left: 180px;
}

.m--xsmall {
  margin: 5px;
}

.mt--xsmall {
  margin-top: 5px;
}

.mr--xsmall {
  margin-right: 5px;
}

.mb--xsmall {
  margin-bottom: 5px;
}

.ml--xsmall {
  margin-left: 5px;
}

.margin--xsmall {
  margin: 5px;
}

.marginTop--xsmall {
  margin-top: 5px;
}

.marginRight--xsmall {
  margin-right: 5px;
}

.marginBottom--xsmall {
  margin-bottom: 5px;
}

.marginLeft--xsmall {
  margin-left: 5px;
}

@media (max-width: 767.98px) {
  .m--large {
    margin: 48px;
  }
  .mt--large {
    margin-top: 48px;
  }
  .mr--large {
    margin-right: 48px;
  }
  .mb--large {
    margin-bottom: 48px;
  }
  .ml--large {
    margin-left: 48px;
  }
  .margin--large {
    margin: 48px;
  }
  .marginTop--large {
    margin-top: 48px;
  }
  .marginRight--large {
    margin-right: 48px;
  }
  .marginBottom--large {
    margin-bottom: 48px;
  }
  .marginLeft--large {
    margin-left: 48px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .m--large {
    margin: 90px;
  }
  .mt--large {
    margin-top: 90px;
  }
  .mr--large {
    margin-right: 90px;
  }
  .mb--large {
    margin-bottom: 90px;
  }
  .ml--large {
    margin-left: 90px;
  }
  .margin--large {
    margin: 90px;
  }
  .marginTop--large {
    margin-top: 90px;
  }
  .marginRight--large {
    margin-right: 90px;
  }
  .marginBottom--large {
    margin-bottom: 90px;
  }
  .marginLeft--large {
    margin-left: 90px;
  }
}
@media (max-width: 767.98px) {
  .m--xlarge {
    margin: 80px;
  }
  .mt--xlarge {
    margin-top: 80px;
  }
  .mr--xlarge {
    margin-right: 80px;
  }
  .mb--xlarge {
    margin-bottom: 80px;
  }
  .ml--xlarge {
    margin-left: 80px;
  }
  .margin--xlarge {
    margin: 80px;
  }
  .marginTop--xlarge {
    margin-top: 80px;
  }
  .marginRight--xlarge {
    margin-right: 80px;
  }
  .marginBottom--xlarge {
    margin-bottom: 80px;
  }
  .marginLeft--xlarge {
    margin-left: 80px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .m--xlarge {
    margin: 140px;
  }
  .mt--xlarge {
    margin-top: 140px;
  }
  .mr--xlarge {
    margin-right: 140px;
  }
  .mb--xlarge {
    margin-bottom: 140px;
  }
  .ml--xlarge {
    margin-left: 140px;
  }
  .margin--xlarge {
    margin: 140px;
  }
  .marginTop--xlarge {
    margin-top: 140px;
  }
  .marginRight--xlarge {
    margin-right: 140px;
  }
  .marginBottom--xlarge {
    margin-bottom: 140px;
  }
  .marginLeft--xlarge {
    margin-left: 140px;
  }
}
@media (max-width: 767.98px) {
  .xs-margin {
    margin-bottom: 14px;
  }
  .xs-margin-base {
    margin-bottom: 12px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sm-margin {
    margin-bottom: 14px;
  }
  .sm-margin-base {
    margin-bottom: 12px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .md-margin {
    margin-bottom: 14px;
  }
  .md-margin-base {
    margin-bottom: 12px;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .lg-margin {
    margin-bottom: 14px;
  }
  .lg-margin-base {
    margin-bottom: 12px;
  }
}
@media (min-width: 1540px) {
  .xlg-margin {
    margin-bottom: 14px;
  }
  .xlg-margin-base {
    margin-bottom: 12px;
  }
}
/*
Containers

Markup:
<div class="container {{modifier_class}}"><div class="box">Lorem ipsum</div></div>

.container - Base Container
.container--small - Small Container
.container--large - Large Container
.container--full - Container Maxwidth Full-HD


Styleguide Structure.Containers
*/
.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.container {
  max-width: 1440px;
}

.container--xsmall {
  max-width: 850px;
}

.container--small {
  max-width: 1156px;
}

.container--large {
  max-width: 1720px;
}

.container--full {
  width: 100%;
  max-width: 1920px;
  padding-left: 0;
  padding-right: 0;
  margin-right: auto;
  margin-left: auto;
}

/*
Grid

Extra Small (xs), Small (sm), Medium (md), Large (lg), xLarge (xlg)

Markup:
<div class="row {{modifier_class}}">
  <div class="col marginBottom"><div class="kssPaddingBox">col</div></div>
</div>
<div class="row {{modifier_class}}">
  <div class="col-12 marginBottom"><div class="kssPaddingBox">col-12</div></div>
</div>
<div class="row {{modifier_class}}">
  <div class="col-1 marginBottom"><div class="kssPaddingBox">col-1</div></div>
  <div class="col-11 marginBottom"><div class="kssPaddingBox">col-11</div></div>
</div>
<div class="row {{modifier_class}}">
  <div class="col-2 marginBottom"><div class="kssPaddingBox">col-2</div></div>
  <div class="col-10 marginBottom"><div class="kssPaddingBox">col-10</div></div>
</div>
<div class="row {{modifier_class}}">
  <div class="col-3 marginBottom"><div class="kssPaddingBox">col-3</div></div>
  <div class="col-9 marginBottom"><div class="kssPaddingBox">col-9</div></div>
</div>
<div class="row {{modifier_class}}">
  <div class="col-4 marginBottom"><div class="kssPaddingBox">col-4</div></div>
  <div class="col-8 marginBottom"><div class="kssPaddingBox">col-8</div></div>
</div>
<div class="row {{modifier_class}}">
  <div class="col-5 marginBottom"><div class="kssPaddingBox">col-5</div></div>
  <div class="col-7 marginBottom"><div class="kssPaddingBox">col-7</div></div>
</div>
<div class="row {{modifier_class}}">
  <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
  <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
</div>

.gridGap--noGap - No Gap
.gridGap--small - Small Gap
.gridGap--large - Large Gap


Styleguide Structure.Grid
*/
*, ::after, ::before {
  box-sizing: border-box;
}

.row {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-right: -7px;
  margin-left: -7px;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 7px;
  padding-left: 7px;
}
.row > *.marginBottom, .row > .algoliaSearchLayout {
  margin-bottom: 14px;
}

.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 768px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1024px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1250px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1540px) {
  .col-xlg {
    flex: 1 0 0%;
  }
  .col-xlg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xlg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xlg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xlg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xlg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xlg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xlg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xlg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xlg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xlg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xlg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xlg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xlg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xlg-0 {
    margin-left: 0;
  }
  .offset-xlg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xlg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xlg-3 {
    margin-left: 25%;
  }
  .offset-xlg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xlg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xlg-6 {
    margin-left: 50%;
  }
  .offset-xlg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xlg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xlg-9 {
    margin-left: 75%;
  }
  .offset-xlg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xlg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1250px) {
  .col-lg-1-5 {
    width: 20%;
  }
  .col-lg-2-5 {
    width: 40%;
  }
  .col-lg-3-5 {
    width: 60%;
  }
  .col-lg-4-5 {
    width: 80%;
  }
  .col-lg-5-5 {
    width: 100%;
  }
}
@media (min-width: 1540px) {
  .col-xlg-1-5 {
    width: 20%;
  }
  .col-xlg-2-5 {
    width: 40%;
  }
  .col-xlg-3-5 {
    width: 60%;
  }
  .col-xlg-4-5 {
    width: 80%;
  }
  .col-xlg-5-5 {
    width: 100%;
  }
}
.row.gridGap--noGap {
  margin-left: 0;
  margin-right: 0;
}
.row.gridGap--noGap > * {
  padding-left: 0;
  padding-right: 0;
}
.row.gridGap--noGap > *.marginBottom, .row.gridGap--noGap > .algoliaSearchLayout {
  margin-bottom: 0;
}

.row.gridGap--small {
  margin-left: -5px;
  margin-right: -5px;
}
.row.gridGap--small > * {
  padding-left: 5px;
  padding-right: 5px;
}
.row.gridGap--small > *.marginBottom, .row.gridGap--small > .algoliaSearchLayout {
  margin-bottom: 10px;
}

@media (min-width: 1780px) {
  .row.gridGap--large {
    margin-left: -30px;
    margin-right: -30px;
  }
  .row.gridGap--large > * {
    padding-left: 30px;
    padding-right: 30px;
  }
  .row.gridGap--large > *.marginBottom, .row.gridGap--large > .algoliaSearchLayout {
    margin-bottom: 60px;
  }
}

.row.gridGap--xlarge {
  margin-left: -30px;
  margin-right: -30px;
}
.row.gridGap--xlarge > * {
  padding-left: 30px;
  padding-right: 30px;
}
@media (min-width: 1920px) {
  .row.gridGap--xlarge {
    margin-left: -100px;
    margin-right: -100px;
  }
  .row.gridGap--xlarge > * {
    padding-left: 100px;
    padding-right: 100px;
  }
  .row.gridGap--xlarge > *.marginBottom, .row.gridGap--xlarge > .algoliaSearchLayout {
    margin-bottom: 60px;
  }
}

@media (min-width: 1216px) {
  .container--small > .row.gridGap--large {
    margin-left: -30px;
    margin-right: -30px;
  }
  .container--small > .row.gridGap--large > * {
    padding-left: 30px;
    padding-right: 30px;
  }
  .container--small > .row.gridGap--large > *.marginBottom, .container--small > .row.gridGap--large > .algoliaSearchLayout {
    margin-bottom: 60px;
  }
}

@media (min-width: 910px) {
  .container--xsmall > .row.gridGap--large {
    margin-left: -30px;
    margin-right: -30px;
  }
  .container--xsmall > .row.gridGap--large > * {
    padding-left: 30px;
    padding-right: 30px;
  }
  .container--xsmall > .row.gridGap--large > *.marginBottom, .container--xsmall > .row.gridGap--large > .algoliaSearchLayout {
    margin-bottom: 60px;
  }
}

.container:has(.scrollSnapMobile),
.container:has(.scrollSnapTablet) {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .row.scrollSnapTablet {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: nowrap;
    padding-left: 0;
    padding-right: 40px;
  }
  .row.scrollSnapTablet > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(calc(100% - 60px - 14px / 2));
    width: -moz-calc(calc(100% - 60px - 14px / 2));
    width: -webkit-calc(calc(100% - 60px - 14px / 2));
    width: -o-calc(calc(100% - 60px - 14px / 2));
  }
  .row.scrollSnapTablet > *:last-child {
    margin-right: 60px;
  }
  .row.scrollSnapTablet > *.col-sm-6 {
    width: calc(calc(50% - 30px - 14px / 2));
    width: -moz-calc(calc(50% - 30px - 14px / 2));
    width: -webkit-calc(calc(50% - 30px - 14px / 2));
    width: -o-calc(calc(50% - 30px - 14px / 2));
  }
  .row.scrollSnapTablet > *.col-sm-4 {
    width: calc(calc(33% - 20px - 14px / 2));
    width: -moz-calc(calc(33% - 20px - 14px / 2));
    width: -webkit-calc(calc(33% - 20px - 14px / 2));
    width: -o-calc(calc(33% - 20px - 14px / 2));
  }
  .row.scrollSnapTablet > *.col-sm-8 {
    width: calc(calc(67% - 40px - 14px / 2));
    width: -moz-calc(calc(67% - 40px - 14px / 2));
    width: -webkit-calc(calc(67% - 40px - 14px / 2));
    width: -o-calc(calc(67% - 40px - 14px / 2));
  }
}

@media (max-width: 767px) {
  .row.scrollSnapMobile {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 40px;
  }
  .row.scrollSnapMobile > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(calc(100% - 40px - 14px / 2));
    width: -moz-calc(calc(100% - 40px - 14px / 2));
    width: -webkit-calc(calc(100% - 40px - 14px / 2));
    width: -o-calc(calc(100% - 40px - 14px / 2));
  }
  .row.scrollSnapMobile > *:last-child {
    margin-right: 40px;
  }
  .row.scrollSnapMobile > *.col-6 {
    width: calc(calc(50% - 20px - 14px / 2));
    width: -moz-calc(calc(50% - 20px - 14px / 2));
    width: -webkit-calc(calc(50% - 20px - 14px / 2));
    width: -o-calc(calc(50% - 20px - 14px / 2));
  }
  .row.scrollSnapMobile > *.col-4 {
    width: calc(calc(33% - 15px - 14px / 2));
    width: -moz-calc(calc(33% - 15px - 14px / 2));
    width: -webkit-calc(calc(33% - 15px - 14px / 2));
    width: -o-calc(calc(33% - 15px - 14px / 2));
  }
  .row.scrollSnapMobile > *.col-8 {
    width: calc(calc(67% - 25px - 14px / 2));
    width: -moz-calc(calc(67% - 25px - 14px / 2));
    width: -webkit-calc(calc(67% - 25px - 14px / 2));
    width: -o-calc(calc(67% - 25px - 14px / 2));
  }
}

@media (min-width: 768px) {
  .order-sm-1 {
    order: 1;
  }
}

@media (min-width: 1024px) {
  .order-md-1 {
    order: 1;
  }
}

@media (min-width: 1250px) {
  .order-lg-1 {
    order: 1;
  }
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: around;
}

@media (max-width: 767.98px) {
  .align-items-xs-start {
    align-items: flex-start;
  }
  .align-items-xs-end {
    align-items: flex-end;
  }
  .align-items-xs-center {
    align-items: center;
  }
  .align-items-xs-baseline {
    align-items: baseline;
  }
  .align-items-xs-stretch {
    align-items: stretch;
  }
  .align-self-xs-start {
    align-self: flex-start;
  }
  .align-self-xs-end {
    align-self: flex-end;
  }
  .align-self-xs-center {
    align-self: center;
  }
  .align-self-xs-baseline {
    align-self: baseline;
  }
  .align-self-xs-stretch {
    align-self: stretch;
  }
  .justify-content-xs-start {
    justify-content: flex-start;
  }
  .justify-content-xs-end {
    justify-content: flex-end;
  }
  .justify-content-xs-center {
    justify-content: center;
  }
  .justify-content-xs-between {
    justify-content: space-between;
  }
  .justify-content-xs-around {
    justify-content: around;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .align-items-sm-start {
    align-items: flex-start;
  }
  .align-items-sm-end {
    align-items: flex-end;
  }
  .align-items-sm-center {
    align-items: center;
  }
  .align-items-sm-baseline {
    align-items: baseline;
  }
  .align-items-sm-stretch {
    align-items: stretch;
  }
  .align-self-sm-start {
    align-self: flex-start;
  }
  .align-self-sm-end {
    align-self: flex-end;
  }
  .align-self-sm-center {
    align-self: center;
  }
  .align-self-sm-baseline {
    align-self: baseline;
  }
  .align-self-sm-stretch {
    align-self: stretch;
  }
  .justify-content-sm-start {
    justify-content: flex-start;
  }
  .justify-content-sm-end {
    justify-content: flex-end;
  }
  .justify-content-sm-center {
    justify-content: center;
  }
  .justify-content-sm-between {
    justify-content: space-between;
  }
  .justify-content-sm-around {
    justify-content: around;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .align-items-md-start {
    align-items: flex-start;
  }
  .align-items-md-end {
    align-items: flex-end;
  }
  .align-items-md-center {
    align-items: center;
  }
  .align-items-md-baseline {
    align-items: baseline;
  }
  .align-items-md-stretch {
    align-items: stretch;
  }
  .align-self-md-start {
    align-self: flex-start;
  }
  .align-self-md-end {
    align-self: flex-end;
  }
  .align-self-md-center {
    align-self: center;
  }
  .align-self-md-baseline {
    align-self: baseline;
  }
  .align-self-md-stretch {
    align-self: stretch;
  }
  .justify-content-md-start {
    justify-content: flex-start;
  }
  .justify-content-md-end {
    justify-content: flex-end;
  }
  .justify-content-md-center {
    justify-content: center;
  }
  .justify-content-md-between {
    justify-content: space-between;
  }
  .justify-content-md-around {
    justify-content: around;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .align-items-lg-start {
    align-items: flex-start;
  }
  .align-items-lg-end {
    align-items: flex-end;
  }
  .align-items-lg-center {
    align-items: center;
  }
  .align-items-lg-baseline {
    align-items: baseline;
  }
  .align-items-lg-stretch {
    align-items: stretch;
  }
  .align-self-lg-start {
    align-self: flex-start;
  }
  .align-self-lg-end {
    align-self: flex-end;
  }
  .align-self-lg-center {
    align-self: center;
  }
  .align-self-lg-baseline {
    align-self: baseline;
  }
  .align-self-lg-stretch {
    align-self: stretch;
  }
  .justify-content-lg-start {
    justify-content: flex-start;
  }
  .justify-content-lg-end {
    justify-content: flex-end;
  }
  .justify-content-lg-center {
    justify-content: center;
  }
  .justify-content-lg-between {
    justify-content: space-between;
  }
  .justify-content-lg-around {
    justify-content: around;
  }
}
@media (min-width: 1540px) {
  .align-items-xlg-start {
    align-items: flex-start;
  }
  .align-items-xlg-end {
    align-items: flex-end;
  }
  .align-items-xlg-center {
    align-items: center;
  }
  .align-items-xlg-baseline {
    align-items: baseline;
  }
  .align-items-xlg-stretch {
    align-items: stretch;
  }
  .align-self-xlg-start {
    align-self: flex-start;
  }
  .align-self-xlg-end {
    align-self: flex-end;
  }
  .align-self-xlg-center {
    align-self: center;
  }
  .align-self-xlg-baseline {
    align-self: baseline;
  }
  .align-self-xlg-stretch {
    align-self: stretch;
  }
  .justify-content-xlg-start {
    justify-content: flex-start;
  }
  .justify-content-xlg-end {
    justify-content: flex-end;
  }
  .justify-content-xlg-center {
    justify-content: center;
  }
  .justify-content-xlg-between {
    justify-content: space-between;
  }
  .justify-content-xlg-around {
    justify-content: around;
  }
}
.row--flexsub > *:not(script):not(style) {
  display: flex;
}

.fullwidth {
  width: 100%;
}

#container {
  background-color: var(--main-color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#container .header,
#container .footer {
  flex-shrink: 0;
}
#container .mainContent {
  flex-grow: 1;
}

.bg-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/*
Hardcoded Hint

Markup:
<span class="hardcodedHint" title="Title">Text</span>

Styleguide Base.Helper
*/
.hardcodedHint {
  outline: 2px dotted red;
  position: relative;
}
.hardcodedHint:before {
  content: "! Hardcoded !";
  position: absolute;
  left: -2px;
  bottom: 100%;
  background: red;
  color: white;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1;
  display: none;
}
.hardcodedHint:hover:before {
  display: block;
}

body.is-blurred:after {
  content: "";
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

[role=tooltip] {
  display: none;
}

.sr-only, .ais-filterCheckboxList__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.open, .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}

.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}

.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}

.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}

.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}

.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}

.flatpickr-calendar:focus {
  outline: 0;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}

.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /*
/*rtl:begin:ignore*/
  left: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /*
/*rtl:begin:ignore*/
  right: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}

.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input, .numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}

.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}

.numInputWrapper span.arrowDown {
  top: 50%;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}

.numInputWrapper span svg {
  width: inherit;
  height: auto;
}

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0 ;
  display: inline-block;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}

.dayContainer, .flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}

.flatpickr-day.today {
  border-color: #959ea9;
}

.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7;
}

.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}

.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.flatpickr-calendar {
  border-radius: 0;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--main-color-primary);
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: normal;
}
.flatpickr-current-month .numInputWrapper input {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
  display: none;
}

.flatpickr-day {
  line-height: 37px;
  color: var(--main-color-black);
  font-weight: normal;
  border-radius: 0 !important;
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background-color: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.flatpickr-day.today {
  border-color: var(--main-color-dark-gray);
}
.flatpickr-day.today.hover, .flatpickr-day.today:focus {
  border-color: var(--main-color-primary);
  background-color: var(--main-color-primary);
}
.flatpickr-day.flatpickr-disabled {
  color: var(--main-color-light-gray);
}
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--main-color-light-gray);
}
.flatpickr-day.inRange {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  box-shadow: -5px 0 0 var(--main-color-light-gray), 5px 0 0 var(--main-color-light-gray);
}
.flatpickr-day.endRange, .flatpickr-day.selected, .flatpickr-day.startRange {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
.flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
.flatpickr-day.endRange:hover, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover {
  background-color: var(--main-color-gray-base);
  color: var(--main-color-white);
  border-color: var(--main-color-gray-base);
}
.flatpickr-day.endRange:focus, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}

.flatpickr-time .flatpickr-am-pm:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time input:hover {
  background-color: var(--main-color-light-gray);
}

.js-dateRangeInline {
  display: none !important;
}

.filterDropdown .flatpickr-calendar {
  width: 100%;
  border: 0;
  box-shadow: none;
}

.googlemaps_content {
  max-width: 100%;
}
.googlemaps_content img {
  max-width: none !important;
}

.custom-clustericon {
  border-radius: 50%;
  background: var(--main-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color-white);
}
.custom-clustericon:before {
  content: "";
  display: block;
  width: 80%;
  height: 80%;
  background: var(--main-color-primary-dark);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.grecaptcha-badge {
  visibility: hidden !important;
}

/**
 * Swiper 11.2.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 19, 2025
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color:#fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color:#000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size:44px;
}

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}

.swiper-button-next svg, .swiper-button-prev svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
  transform: rotate(180deg);
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-lock {
  display: none;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  display: none;
}

.swiper-slide {
  height: auto;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--main-color-black);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  bottom: 0;
  right: auto;
  font-size: 4.2rem;
  display: none;
}
@media (min-width: 768px) {
  .swiper-button-next, .swiper-button-prev {
    display: block;
  }
}
.swiper-button-next .icon, .swiper-button-prev .icon {
  display: block;
  line-height: 1;
}
.swiper-button-next:hover, .swiper-button-next:focus, .swiper-button-next:active, .swiper-button-prev:hover, .swiper-button-prev:focus, .swiper-button-prev:active {
  color: var(--main-link-color-hover);
}

.swiper-button-prev {
  left: 17px;
}

.swiper-button-next {
  left: 84px;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--main-color-black);
}
@media (min-width: 768px) {
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
  }
}
.swiper-pagination-bullet-active {
  background: var(--main-color-black);
}

.swiper-button-lock {
  color: var(--main-color-middle-gray);
  cursor: not-allowed;
}
.swiper-button-lock:hover {
  color: var(--main-color-middle-gray);
}

.swiper-pagination {
  position: static;
  transform: none;
}
.swiper-pagination.swiper-pagination-horizontal {
  margin-top: 20px;
  top: auto;
  bottom: 0;
}
.swiper-pagination.swiper-pagination-vertical {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.swiper-pagination.swiper-pagination-vertical .swiper-pagination-bullet {
  margin: 0;
}

.swiper-wrapper {
  height: auto;
}

.swiper-scrollbar {
  display: none;
}

.lottieContainer {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.iti {
  position: relative;
  display: inline-block;
}

.iti * {
  box-sizing: border-box;
}

.iti__hide {
  display: none;
}

.iti__v-hide {
  visibility: hidden;
}

.iti input.iti__tel-input, .iti input.iti__tel-input[type=tel], .iti input.iti__tel-input[type=text] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: 36px;
  margin-right: 0;
}

.iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}

.iti__selected-flag {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px 0 8px;
}

.iti__arrow {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
}

[dir=rtl] .iti__arrow {
  margin-right: 6px;
  margin-left: 0;
}

.iti__arrow--up {
  border-top: none;
  border-bottom: 4px solid #555;
}

.iti__dropdown-content {
  position: absolute;
  z-index: 2;
  margin-left: -1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.iti__dropdown-content--dropup {
  bottom: 100%;
  margin-bottom: -1px;
}

.iti__search-input {
  width: 100%;
  border-width: 0;
}

.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
}

@media (max-width: 500px) {
  .iti--flexible-dropdown-width .iti__country-list {
    white-space: normal;
  }
}
.iti__flag-box {
  display: inline-block;
  width: 20px;
}

.iti__divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.iti__country {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  outline: 0;
}

.iti__dial-code {
  color: #999;
}

.iti__country.iti__highlight {
  background-color: rgba(0, 0, 0, 0.05);
}

.iti__country-name, .iti__flag-box {
  margin-right: 6px;
}

[dir=rtl] .iti__country-name, [dir=rtl] .iti__flag-box {
  margin-right: 0;
  margin-left: 6px;
}

.iti--allow-dropdown input.iti__tel-input, .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--allow-dropdown input.iti__tel-input[type=text], .iti--separate-dial-code input.iti__tel-input, .iti--separate-dial-code input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input[type=text] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}

[dir=rtl] .iti--allow-dropdown input.iti__tel-input, [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text], [dir=rtl] .iti--separate-dial-code input.iti__tel-input, [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text] {
  padding-right: 52px;
  padding-left: 6px;
  margin-right: 0;
}

.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
  right: auto;
  left: 0;
}

[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
  right: 0;
  left: auto;
}

.iti--allow-dropdown .iti__flag-container:hover {
  cursor: pointer;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}

.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover, .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
  cursor: default;
}

.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag, .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
  background-color: transparent;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}

.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 6px;
}

[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 0;
  margin-right: 6px;
}

.iti--container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}

.iti--container:hover {
  cursor: pointer;
}

.iti--fullscreen-popup.iti--container {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.iti--fullscreen-popup .iti__dropdown-content {
  max-height: 100%;
  position: relative;
}

.iti--fullscreen-popup .iti__country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti__flag {
  width: 20px;
}

.iti__flag.iti__be {
  width: 18px;
}

.iti__flag.iti__ch {
  width: 15px;
}

.iti__flag.iti__mc {
  width: 19px;
}

.iti__flag.iti__ne {
  width: 18px;
}

.iti__flag.iti__np {
  width: 13px;
}

.iti__flag.iti__va {
  width: 15px;
}

@media (min-resolution: 2x) {
  .iti__flag {
    background-size: 5762px 15px;
  }
}
.iti__flag.iti__ac {
  height: 10px;
  background-position: 0 0;
}

.iti__flag.iti__ad {
  height: 14px;
  background-position: -22px 0;
}

.iti__flag.iti__ae {
  height: 10px;
  background-position: -44px 0;
}

.iti__flag.iti__af {
  height: 14px;
  background-position: -66px 0;
}

.iti__flag.iti__ag {
  height: 14px;
  background-position: -88px 0;
}

.iti__flag.iti__ai {
  height: 10px;
  background-position: -110px 0;
}

.iti__flag.iti__al {
  height: 15px;
  background-position: -132px 0;
}

.iti__flag.iti__am {
  height: 10px;
  background-position: -154px 0;
}

.iti__flag.iti__ao {
  height: 14px;
  background-position: -176px 0;
}

.iti__flag.iti__aq {
  height: 14px;
  background-position: -198px 0;
}

.iti__flag.iti__ar {
  height: 13px;
  background-position: -220px 0;
}

.iti__flag.iti__as {
  height: 10px;
  background-position: -242px 0;
}

.iti__flag.iti__at {
  height: 14px;
  background-position: -264px 0;
}

.iti__flag.iti__au {
  height: 10px;
  background-position: -286px 0;
}

.iti__flag.iti__aw {
  height: 14px;
  background-position: -308px 0;
}

.iti__flag.iti__ax {
  height: 13px;
  background-position: -330px 0;
}

.iti__flag.iti__az {
  height: 10px;
  background-position: -352px 0;
}

.iti__flag.iti__ba {
  height: 10px;
  background-position: -374px 0;
}

.iti__flag.iti__bb {
  height: 14px;
  background-position: -396px 0;
}

.iti__flag.iti__bd {
  height: 12px;
  background-position: -418px 0;
}

.iti__flag.iti__be {
  height: 15px;
  background-position: -440px 0;
}

.iti__flag.iti__bf {
  height: 14px;
  background-position: -460px 0;
}

.iti__flag.iti__bg {
  height: 12px;
  background-position: -482px 0;
}

.iti__flag.iti__bh {
  height: 12px;
  background-position: -504px 0;
}

.iti__flag.iti__bi {
  height: 12px;
  background-position: -526px 0;
}

.iti__flag.iti__bj {
  height: 14px;
  background-position: -548px 0;
}

.iti__flag.iti__bl {
  height: 14px;
  background-position: -570px 0;
}

.iti__flag.iti__bm {
  height: 10px;
  background-position: -592px 0;
}

.iti__flag.iti__bn {
  height: 10px;
  background-position: -614px 0;
}

.iti__flag.iti__bo {
  height: 14px;
  background-position: -636px 0;
}

.iti__flag.iti__bq {
  height: 14px;
  background-position: -658px 0;
}

.iti__flag.iti__br {
  height: 14px;
  background-position: -680px 0;
}

.iti__flag.iti__bs {
  height: 10px;
  background-position: -702px 0;
}

.iti__flag.iti__bt {
  height: 14px;
  background-position: -724px 0;
}

.iti__flag.iti__bv {
  height: 15px;
  background-position: -746px 0;
}

.iti__flag.iti__bw {
  height: 14px;
  background-position: -768px 0;
}

.iti__flag.iti__by {
  height: 10px;
  background-position: -790px 0;
}

.iti__flag.iti__bz {
  height: 12px;
  background-position: -812px 0;
}

.iti__flag.iti__ca {
  height: 10px;
  background-position: -834px 0;
}

.iti__flag.iti__cc {
  height: 10px;
  background-position: -856px 0;
}

.iti__flag.iti__cd {
  height: 15px;
  background-position: -878px 0;
}

.iti__flag.iti__cf {
  height: 14px;
  background-position: -900px 0;
}

.iti__flag.iti__cg {
  height: 14px;
  background-position: -922px 0;
}

.iti__flag.iti__ch {
  height: 15px;
  background-position: -944px 0;
}

.iti__flag.iti__ci {
  height: 14px;
  background-position: -961px 0;
}

.iti__flag.iti__ck {
  height: 10px;
  background-position: -983px 0;
}

.iti__flag.iti__cl {
  height: 14px;
  background-position: -1005px 0;
}

.iti__flag.iti__cm {
  height: 14px;
  background-position: -1027px 0;
}

.iti__flag.iti__cn {
  height: 14px;
  background-position: -1049px 0;
}

.iti__flag.iti__co {
  height: 14px;
  background-position: -1071px 0;
}

.iti__flag.iti__cp {
  height: 14px;
  background-position: -1093px 0;
}

.iti__flag.iti__cq {
  height: 12px;
  background-position: -1115px 0;
}

.iti__flag.iti__cr {
  height: 12px;
  background-position: -1137px 0;
}

.iti__flag.iti__cu {
  height: 10px;
  background-position: -1159px 0;
}

.iti__flag.iti__cv {
  height: 12px;
  background-position: -1181px 0;
}

.iti__flag.iti__cw {
  height: 14px;
  background-position: -1203px 0;
}

.iti__flag.iti__cx {
  height: 10px;
  background-position: -1225px 0;
}

.iti__flag.iti__cy {
  height: 14px;
  background-position: -1247px 0;
}

.iti__flag.iti__cz {
  height: 14px;
  background-position: -1269px 0;
}

.iti__flag.iti__de {
  height: 12px;
  background-position: -1291px 0;
}

.iti__flag.iti__dg {
  height: 10px;
  background-position: -1313px 0;
}

.iti__flag.iti__dj {
  height: 14px;
  background-position: -1335px 0;
}

.iti__flag.iti__dk {
  height: 15px;
  background-position: -1357px 0;
}

.iti__flag.iti__dm {
  height: 10px;
  background-position: -1379px 0;
}

.iti__flag.iti__do {
  height: 14px;
  background-position: -1401px 0;
}

.iti__flag.iti__dz {
  height: 14px;
  background-position: -1423px 0;
}

.iti__flag.iti__ea {
  height: 14px;
  background-position: -1445px 0;
}

.iti__flag.iti__ec {
  height: 14px;
  background-position: -1467px 0;
}

.iti__flag.iti__ee {
  height: 13px;
  background-position: -1489px 0;
}

.iti__flag.iti__eg {
  height: 14px;
  background-position: -1511px 0;
}

.iti__flag.iti__eh {
  height: 10px;
  background-position: -1533px 0;
}

.iti__flag.iti__er {
  height: 10px;
  background-position: -1555px 0;
}

.iti__flag.iti__es {
  height: 14px;
  background-position: -1577px 0;
}

.iti__flag.iti__et {
  height: 10px;
  background-position: -1599px 0;
}

.iti__flag.iti__eu {
  height: 14px;
  background-position: -1621px 0;
}

.iti__flag.iti__ez {
  height: 14px;
  background-position: -1643px 0;
}

.iti__flag.iti__fi {
  height: 12px;
  background-position: -1665px 0;
}

.iti__flag.iti__fj {
  height: 10px;
  background-position: -1687px 0;
}

.iti__flag.iti__fk {
  height: 10px;
  background-position: -1709px 0;
}

.iti__flag.iti__fm {
  height: 11px;
  background-position: -1731px 0;
}

.iti__flag.iti__fo {
  height: 15px;
  background-position: -1753px 0;
}

.iti__flag.iti__fr {
  height: 14px;
  background-position: -1775px 0;
}

.iti__flag.iti__fx {
  height: 14px;
  background-position: -1797px 0;
}

.iti__flag.iti__ga {
  height: 15px;
  background-position: -1819px 0;
}

.iti__flag.iti__gb {
  height: 10px;
  background-position: -1841px 0;
}

.iti__flag.iti__gd {
  height: 12px;
  background-position: -1863px 0;
}

.iti__flag.iti__ge {
  height: 14px;
  background-position: -1885px 0;
}

.iti__flag.iti__gf {
  height: 14px;
  background-position: -1907px 0;
}

.iti__flag.iti__gg {
  height: 14px;
  background-position: -1929px 0;
}

.iti__flag.iti__gh {
  height: 14px;
  background-position: -1951px 0;
}

.iti__flag.iti__gi {
  height: 10px;
  background-position: -1973px 0;
}

.iti__flag.iti__gl {
  height: 14px;
  background-position: -1995px 0;
}

.iti__flag.iti__gm {
  height: 14px;
  background-position: -2017px 0;
}

.iti__flag.iti__gn {
  height: 14px;
  background-position: -2039px 0;
}

.iti__flag.iti__gp {
  height: 14px;
  background-position: -2061px 0;
}

.iti__flag.iti__gq {
  height: 14px;
  background-position: -2083px 0;
}

.iti__flag.iti__gr {
  height: 14px;
  background-position: -2105px 0;
}

.iti__flag.iti__gs {
  height: 10px;
  background-position: -2127px 0;
}

.iti__flag.iti__gt {
  height: 13px;
  background-position: -2149px 0;
}

.iti__flag.iti__gu {
  height: 11px;
  background-position: -2171px 0;
}

.iti__flag.iti__gw {
  height: 10px;
  background-position: -2193px 0;
}

.iti__flag.iti__gy {
  height: 12px;
  background-position: -2215px 0;
}

.iti__flag.iti__hk {
  height: 14px;
  background-position: -2237px 0;
}

.iti__flag.iti__hm {
  height: 10px;
  background-position: -2259px 0;
}

.iti__flag.iti__hn {
  height: 10px;
  background-position: -2281px 0;
}

.iti__flag.iti__hr {
  height: 10px;
  background-position: -2303px 0;
}

.iti__flag.iti__ht {
  height: 12px;
  background-position: -2325px 0;
}

.iti__flag.iti__hu {
  height: 10px;
  background-position: -2347px 0;
}

.iti__flag.iti__ic {
  height: 14px;
  background-position: -2369px 0;
}

.iti__flag.iti__id {
  height: 14px;
  background-position: -2391px 0;
}

.iti__flag.iti__ie {
  height: 10px;
  background-position: -2413px 0;
}

.iti__flag.iti__il {
  height: 15px;
  background-position: -2435px 0;
}

.iti__flag.iti__im {
  height: 10px;
  background-position: -2457px 0;
}

.iti__flag.iti__in {
  height: 14px;
  background-position: -2479px 0;
}

.iti__flag.iti__io {
  height: 10px;
  background-position: -2501px 0;
}

.iti__flag.iti__iq {
  height: 14px;
  background-position: -2523px 0;
}

.iti__flag.iti__ir {
  height: 12px;
  background-position: -2545px 0;
}

.iti__flag.iti__is {
  height: 15px;
  background-position: -2567px 0;
}

.iti__flag.iti__it {
  height: 14px;
  background-position: -2589px 0;
}

.iti__flag.iti__je {
  height: 12px;
  background-position: -2611px 0;
}

.iti__flag.iti__jm {
  height: 10px;
  background-position: -2633px 0;
}

.iti__flag.iti__jo {
  height: 10px;
  background-position: -2655px 0;
}

.iti__flag.iti__jp {
  height: 14px;
  background-position: -2677px 0;
}

.iti__flag.iti__ke {
  height: 14px;
  background-position: -2699px 0;
}

.iti__flag.iti__kg {
  height: 12px;
  background-position: -2721px 0;
}

.iti__flag.iti__kh {
  height: 13px;
  background-position: -2743px 0;
}

.iti__flag.iti__ki {
  height: 10px;
  background-position: -2765px 0;
}

.iti__flag.iti__km {
  height: 12px;
  background-position: -2787px 0;
}

.iti__flag.iti__kn {
  height: 14px;
  background-position: -2809px 0;
}

.iti__flag.iti__kp {
  height: 10px;
  background-position: -2831px 0;
}

.iti__flag.iti__kr {
  height: 14px;
  background-position: -2853px 0;
}

.iti__flag.iti__kw {
  height: 10px;
  background-position: -2875px 0;
}

.iti__flag.iti__ky {
  height: 10px;
  background-position: -2897px 0;
}

.iti__flag.iti__kz {
  height: 10px;
  background-position: -2919px 0;
}

.iti__flag.iti__la {
  height: 14px;
  background-position: -2941px 0;
}

.iti__flag.iti__lb {
  height: 14px;
  background-position: -2963px 0;
}

.iti__flag.iti__lc {
  height: 10px;
  background-position: -2985px 0;
}

.iti__flag.iti__li {
  height: 12px;
  background-position: -3007px 0;
}

.iti__flag.iti__lk {
  height: 10px;
  background-position: -3029px 0;
}

.iti__flag.iti__lr {
  height: 11px;
  background-position: -3051px 0;
}

.iti__flag.iti__ls {
  height: 14px;
  background-position: -3073px 0;
}

.iti__flag.iti__lt {
  height: 12px;
  background-position: -3095px 0;
}

.iti__flag.iti__lu {
  height: 12px;
  background-position: -3117px 0;
}

.iti__flag.iti__lv {
  height: 10px;
  background-position: -3139px 0;
}

.iti__flag.iti__ly {
  height: 10px;
  background-position: -3161px 0;
}

.iti__flag.iti__ma {
  height: 14px;
  background-position: -3183px 0;
}

.iti__flag.iti__mc {
  height: 15px;
  background-position: -3205px 0;
}

.iti__flag.iti__md {
  height: 10px;
  background-position: -3226px 0;
}

.iti__flag.iti__me {
  height: 10px;
  background-position: -3248px 0;
}

.iti__flag.iti__mf {
  height: 14px;
  background-position: -3270px 0;
}

.iti__flag.iti__mg {
  height: 14px;
  background-position: -3292px 0;
}

.iti__flag.iti__mh {
  height: 11px;
  background-position: -3314px 0;
}

.iti__flag.iti__mk {
  height: 10px;
  background-position: -3336px 0;
}

.iti__flag.iti__ml {
  height: 14px;
  background-position: -3358px 0;
}

.iti__flag.iti__mm {
  height: 14px;
  background-position: -3380px 0;
}

.iti__flag.iti__mn {
  height: 10px;
  background-position: -3402px 0;
}

.iti__flag.iti__mo {
  height: 14px;
  background-position: -3424px 0;
}

.iti__flag.iti__mp {
  height: 10px;
  background-position: -3446px 0;
}

.iti__flag.iti__mq {
  height: 14px;
  background-position: -3468px 0;
}

.iti__flag.iti__mr {
  height: 14px;
  background-position: -3490px 0;
}

.iti__flag.iti__ms {
  height: 10px;
  background-position: -3512px 0;
}

.iti__flag.iti__mt {
  height: 14px;
  background-position: -3534px 0;
}

.iti__flag.iti__mu {
  height: 14px;
  background-position: -3556px 0;
}

.iti__flag.iti__mv {
  height: 14px;
  background-position: -3578px 0;
}

.iti__flag.iti__mw {
  height: 14px;
  background-position: -3600px 0;
}

.iti__flag.iti__mx {
  height: 12px;
  background-position: -3622px 0;
}

.iti__flag.iti__my {
  height: 10px;
  background-position: -3644px 0;
}

.iti__flag.iti__mz {
  height: 14px;
  background-position: -3666px 0;
}

.iti__flag.iti__na {
  height: 14px;
  background-position: -3688px 0;
}

.iti__flag.iti__nc {
  height: 10px;
  background-position: -3710px 0;
}

.iti__flag.iti__ne {
  height: 15px;
  background-position: -3732px 0;
}

.iti__flag.iti__nf {
  height: 10px;
  background-position: -3752px 0;
}

.iti__flag.iti__ng {
  height: 10px;
  background-position: -3774px 0;
}

.iti__flag.iti__ni {
  height: 12px;
  background-position: -3796px 0;
}

.iti__flag.iti__nl {
  height: 14px;
  background-position: -3818px 0;
}

.iti__flag.iti__no {
  height: 15px;
  background-position: -3840px 0;
}

.iti__flag.iti__np {
  height: 15px;
  background-position: -3862px 0;
}

.iti__flag.iti__nr {
  height: 10px;
  background-position: -3877px 0;
}

.iti__flag.iti__nu {
  height: 10px;
  background-position: -3899px 0;
}

.iti__flag.iti__nz {
  height: 10px;
  background-position: -3921px 0;
}

.iti__flag.iti__om {
  height: 10px;
  background-position: -3943px 0;
}

.iti__flag.iti__pa {
  height: 14px;
  background-position: -3965px 0;
}

.iti__flag.iti__pe {
  height: 14px;
  background-position: -3987px 0;
}

.iti__flag.iti__pf {
  height: 14px;
  background-position: -4009px 0;
}

.iti__flag.iti__pg {
  height: 15px;
  background-position: -4031px 0;
}

.iti__flag.iti__ph {
  height: 10px;
  background-position: -4053px 0;
}

.iti__flag.iti__pk {
  height: 14px;
  background-position: -4075px 0;
}

.iti__flag.iti__pl {
  height: 13px;
  background-position: -4097px 0;
}

.iti__flag.iti__pm {
  height: 14px;
  background-position: -4119px 0;
}

.iti__flag.iti__pn {
  height: 10px;
  background-position: -4141px 0;
}

.iti__flag.iti__pr {
  height: 14px;
  background-position: -4163px 0;
}

.iti__flag.iti__ps {
  height: 10px;
  background-position: -4185px 0;
}

.iti__flag.iti__pt {
  height: 14px;
  background-position: -4207px 0;
}

.iti__flag.iti__pw {
  height: 13px;
  background-position: -4229px 0;
}

.iti__flag.iti__py {
  height: 11px;
  background-position: -4251px 0;
}

.iti__flag.iti__qa {
  height: 8px;
  background-position: -4273px 0;
}

.iti__flag.iti__re {
  height: 14px;
  background-position: -4295px 0;
}

.iti__flag.iti__ro {
  height: 14px;
  background-position: -4317px 0;
}

.iti__flag.iti__rs {
  height: 14px;
  background-position: -4339px 0;
}

.iti__flag.iti__ru {
  height: 14px;
  background-position: -4361px 0;
}

.iti__flag.iti__rw {
  height: 14px;
  background-position: -4383px 0;
}

.iti__flag.iti__sa {
  height: 14px;
  background-position: -4405px 0;
}

.iti__flag.iti__sb {
  height: 10px;
  background-position: -4427px 0;
}

.iti__flag.iti__sc {
  height: 10px;
  background-position: -4449px 0;
}

.iti__flag.iti__sd {
  height: 10px;
  background-position: -4471px 0;
}

.iti__flag.iti__se {
  height: 13px;
  background-position: -4493px 0;
}

.iti__flag.iti__sg {
  height: 14px;
  background-position: -4515px 0;
}

.iti__flag.iti__sh {
  height: 10px;
  background-position: -4537px 0;
}

.iti__flag.iti__si {
  height: 10px;
  background-position: -4559px 0;
}

.iti__flag.iti__sj {
  height: 15px;
  background-position: -4581px 0;
}

.iti__flag.iti__sk {
  height: 14px;
  background-position: -4603px 0;
}

.iti__flag.iti__sl {
  height: 14px;
  background-position: -4625px 0;
}

.iti__flag.iti__sm {
  height: 15px;
  background-position: -4647px 0;
}

.iti__flag.iti__sn {
  height: 14px;
  background-position: -4669px 0;
}

.iti__flag.iti__so {
  height: 14px;
  background-position: -4691px 0;
}

.iti__flag.iti__sr {
  height: 14px;
  background-position: -4713px 0;
}

.iti__flag.iti__ss {
  height: 10px;
  background-position: -4735px 0;
}

.iti__flag.iti__st {
  height: 10px;
  background-position: -4757px 0;
}

.iti__flag.iti__su {
  height: 10px;
  background-position: -4779px 0;
}

.iti__flag.iti__sv {
  height: 12px;
  background-position: -4801px 0;
}

.iti__flag.iti__sx {
  height: 14px;
  background-position: -4823px 0;
}

.iti__flag.iti__sy {
  height: 14px;
  background-position: -4845px 0;
}

.iti__flag.iti__sz {
  height: 14px;
  background-position: -4867px 0;
}

.iti__flag.iti__ta {
  height: 10px;
  background-position: -4889px 0;
}

.iti__flag.iti__tc {
  height: 10px;
  background-position: -4911px 0;
}

.iti__flag.iti__td {
  height: 14px;
  background-position: -4933px 0;
}

.iti__flag.iti__tf {
  height: 14px;
  background-position: -4955px 0;
}

.iti__flag.iti__tg {
  height: 13px;
  background-position: -4977px 0;
}

.iti__flag.iti__th {
  height: 14px;
  background-position: -4999px 0;
}

.iti__flag.iti__tj {
  height: 10px;
  background-position: -5021px 0;
}

.iti__flag.iti__tk {
  height: 10px;
  background-position: -5043px 0;
}

.iti__flag.iti__tl {
  height: 10px;
  background-position: -5065px 0;
}

.iti__flag.iti__tm {
  height: 14px;
  background-position: -5087px 0;
}

.iti__flag.iti__tn {
  height: 14px;
  background-position: -5109px 0;
}

.iti__flag.iti__to {
  height: 10px;
  background-position: -5131px 0;
}

.iti__flag.iti__tr {
  height: 14px;
  background-position: -5153px 0;
}

.iti__flag.iti__tt {
  height: 12px;
  background-position: -5175px 0;
}

.iti__flag.iti__tv {
  height: 10px;
  background-position: -5197px 0;
}

.iti__flag.iti__tw {
  height: 14px;
  background-position: -5219px 0;
}

.iti__flag.iti__tz {
  height: 14px;
  background-position: -5241px 0;
}

.iti__flag.iti__ua {
  height: 14px;
  background-position: -5263px 0;
}

.iti__flag.iti__ug {
  height: 14px;
  background-position: -5285px 0;
}

.iti__flag.iti__uk {
  height: 10px;
  background-position: -5307px 0;
}

.iti__flag.iti__um {
  height: 11px;
  background-position: -5329px 0;
}

.iti__flag.iti__un {
  height: 14px;
  background-position: -5351px 0;
}

.iti__flag.iti__us {
  height: 11px;
  background-position: -5373px 0;
}

.iti__flag.iti__uy {
  height: 14px;
  background-position: -5395px 0;
}

.iti__flag.iti__uz {
  height: 10px;
  background-position: -5417px 0;
}

.iti__flag.iti__va {
  height: 15px;
  background-position: -5439px 0;
}

.iti__flag.iti__vc {
  height: 14px;
  background-position: -5456px 0;
}

.iti__flag.iti__ve {
  height: 14px;
  background-position: -5478px 0;
}

.iti__flag.iti__vg {
  height: 10px;
  background-position: -5500px 0;
}

.iti__flag.iti__vi {
  height: 14px;
  background-position: -5522px 0;
}

.iti__flag.iti__vn {
  height: 14px;
  background-position: -5544px 0;
}

.iti__flag.iti__vu {
  height: 12px;
  background-position: -5566px 0;
}

.iti__flag.iti__wf {
  height: 14px;
  background-position: -5588px 0;
}

.iti__flag.iti__ws {
  height: 10px;
  background-position: -5610px 0;
}

.iti__flag.iti__xk {
  height: 15px;
  background-position: -5632px 0;
}

.iti__flag.iti__ye {
  height: 14px;
  background-position: -5654px 0;
}

.iti__flag.iti__yt {
  height: 14px;
  background-position: -5676px 0;
}

.iti__flag.iti__za {
  height: 14px;
  background-position: -5698px 0;
}

.iti__flag.iti__zm {
  height: 14px;
  background-position: -5720px 0;
}

.iti__flag.iti__zw {
  height: 10px;
  background-position: -5742px 0;
}

.iti__flag {
  height: 15px;
  box-shadow: 0 0 1px 0 #888;
  background-image: url(../img/flags.png?1);
  background-repeat: no-repeat;
  background-color: #dbdbdb;
  background-position: 20px 0;
}

@media (min-resolution: 2x) {
  .iti__flag {
    background-image: url(../img/flags@2x.png?1);
  }
}
.iti__flag.iti__np {
  background-color: transparent;
}

.iti {
  display: flex;
  width: 100%;
}
.iti__flag {
  background-image: url("/plugins/intTelInput/img/flags.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("/plugins/intTelInput/img/flags@2x.png");
  }
}
.iti--separate-dial-code .iti__selected-flag {
  background: transparent;
}

.inputGroup .iti__flag-container + input {
  border-top-left-radius: 25px !important;
  border-bottom-left-radius: 25px !important;
}
.inputGroup .iti__country-list {
  margin-top: 10px;
  padding-top: 10px;
  border-radius: 25px;
  border-color: var(--main-color-black);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

.dealerSearchItems {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.dealerSearchItems::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.dealerSearchItems::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.dealerSearchItems::-webkit-scrollbar-thumb {
  background: var(--main-color-gray-base);
  border: 0 none transparent;
  border-radius: 3px;
}
.dealerSearchItems::-webkit-scrollbar-thumb:hover {
  background: var(--main-color-black);
}
.dealerSearchItems::-webkit-scrollbar-thumb:active {
  background: var(--main-color-black);
}
.dealerSearchItems::-webkit-scrollbar-track {
  background: var(--main-color-light-gray);
  border: 0 none transparent;
  border-radius: 0;
}
.dealerSearchItems::-webkit-scrollbar-track:hover {
  background: var(--main-color-light-gray);
}
.dealerSearchItems::-webkit-scrollbar-track:active {
  background: var(--main-color-light-gray);
}
.dealerSearchItems::-webkit-scrollbar-corner {
  background: transparent;
}

.dealerSearchItem {
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px;
}
@media (min-height: 1050px) {
  .dealerSearchItem {
    padding-bottom: 30px;
    padding-top: 30px;
    padding-right: 20px;
  }
}
@media (min-width: 1024px) {
  .dealerSearchItem {
    padding-bottom: 20px;
    padding-top: 20px;
  }
}
.dealerSearchItem__headline {
  font-weight: var(--main-font-weight-bold);
  margin-top: 5px;
  margin-bottom: 5px;
}
@media (min-width: 1024px) {
  .dealerSearchItem__headline {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.dealerSearchItem:first-child {
  padding-top: 10px;
}

.dealerSearchMap {
  aspect-ratio: 1;
}
@media (min-width: 1250px) {
  .dealerSearchMap {
    aspect-ratio: 4/3;
  }
}

.dealerSearchResults {
  display: flex;
  flex-wrap: nowrap;
  grid-gap: 14px;
  flex-direction: column;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .dealerSearchResults {
    flex-direction: row;
  }
}
.dealerSearchResults .dealerSearchItemsWrapper {
  width: 100%;
  flex-shrink: 0;
}
.dealerSearchResults .dealerSearchItemsWrapper .dealerSearchItems {
  overflow: hidden;
  overflow-y: auto;
  max-height: 30vh;
}
@media (min-width: 768px) {
  .dealerSearchResults .dealerSearchItemsWrapper {
    width: 30%;
    position: relative;
  }
  .dealerSearchResults .dealerSearchItemsWrapper .dealerSearchItems {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 100%;
  }
}
.dealerSearchResults .dealerSearchMapWrapper {
  flex-grow: 1;
}

/*
Alerts

Markup:
<div class="alert {{modifier_class}}">Text</div>

.alert--danger - Danger
.alert--success - Success
.alert--warning - Warning
.alert--primary - Primary
.alert--secondary - Secondary

Styleguide Components.Alerts
*/
.alert {
  border-radius: 25px;
  position: relative;
  color: var(--main-color-black);
  background: var(--main-color-white);
  padding: 10px;
  padding-left: 30px;
  min-height: 50px;
  display: flex;
  align-items: center;
}
.alert:before {
  content: var(--base-icon-info);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: -10px;
  top: 50%;
  font-size: 24px;
  width: 40px;
  translate: 0 -50%;
  text-align: center;
  line-height: 1;
  display: block;
}
.alert--danger:before {
  content: var(--base-icon-exclamation-circle);
}
.alert--success:before {
  content: var(--base-icon-check-circle);
}
.alert--primary {
  background: var(--main-color-white);
  color: #B4DDDE;
}
.alert--secondary {
  background: var(--main-color-white);
  color: #FCD6BB;
}
.alert--action {
  background: var(--main-color-white);
  color: #2760AB;
}
.alert--danger {
  background: var(--main-color-white);
  color: #D50000;
}
.alert--warning {
  background: var(--main-color-white);
  color: #EF7410;
}
.alert--success {
  background: var(--main-color-white);
  color: #7BBB31;
}

.buttonRow, .buttonRowTop, .buttonRowBottom {
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: -5px;
  margin-right: -5px;
}
.buttonRow .button, .buttonRow .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .buttonRow .orderButton, .buttonRowTop .button, .buttonRowTop .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .buttonRowTop .orderButton, .buttonRowBottom .button, .buttonRowBottom .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .buttonRowBottom .orderButton,
.buttonRow .buttonLink,
.buttonRowTop .buttonLink,
.buttonRowBottom .buttonLink {
  margin: 12px 5px;
}
@media (max-width: 481px) {
  .buttonRow, .buttonRowTop, .buttonRowBottom {
    text-align: center;
  }
  .buttonRow .pull-left, .buttonRowTop .pull-left, .buttonRowBottom .pull-left,
  .buttonRow .pull-right,
  .buttonRowTop .pull-right,
  .buttonRowBottom .pull-right {
    float: none !important;
  }
  .buttonRow .buttonLink, .buttonRowTop .buttonLink, .buttonRowBottom .buttonLink,
  .buttonRow .button,
  .buttonRow .itemcardBuybox .orderButtonWrapper .orderButton,
  .itemcardBuybox .orderButtonWrapper .buttonRow .orderButton,
  .buttonRowTop .button,
  .buttonRowTop .itemcardBuybox .orderButtonWrapper .orderButton,
  .itemcardBuybox .orderButtonWrapper .buttonRowTop .orderButton,
  .buttonRowBottom .button,
  .buttonRowBottom .itemcardBuybox .orderButtonWrapper .orderButton,
  .itemcardBuybox .orderButtonWrapper .buttonRowBottom .orderButton {
    min-width: 220px;
  }
}

.buttonRowBottom {
  margin-bottom: 0;
}
.buttonRowBottom .buttonLink,
.buttonRowBottom .button,
.buttonRowBottom .itemcardBuybox .orderButtonWrapper .orderButton,
.itemcardBuybox .orderButtonWrapper .buttonRowBottom .orderButton {
  margin-bottom: 0;
}

.buttonRowTop {
  margin-top: 0;
}
.buttonRowTop .buttonLink,
.buttonRowTop .button,
.buttonRowTop .itemcardBuybox .orderButtonWrapper .orderButton,
.itemcardBuybox .orderButtonWrapper .buttonRowTop .orderButton {
  margin-top: 0;
}

.linklist .button, .linklist .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .linklist .orderButton {
  min-width: 0;
}
.linklist.table_area .table_row .table_cell {
  padding-top: 12px;
  padding-bottom: 12px;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover {
  cursor: pointer;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover .table_cell {
  background-color: var(--main-color-light-gray);
}

@media (max-width: 767px) {
  .linklist .read_more {
    margin-top: 8px;
  }
  .linklist.table_area .table_row {
    padding-bottom: 12px;
    padding-top: 12px;
  }
  .linklist.table_area .table_row:first-child {
    padding-top: 0;
  }
  .linklist.table_area .table_row .table_cell {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/*
Lists

Markup:
<ul class="{{modifier_class}}">
<li>List</li>
<li>List</li>
<li>List</li>
</ul>

.checkList - Checklist

Styleguide Base.Lists
*/
ul,
ol {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}
ul li,
ol li {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}

ul.checkList {
  list-style: none;
  padding-left: 25px;
}
ul.checkList li {
  position: relative;
}
ul.checkList li:before {
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  font-weight: bold;
  left: -25px;
  font-size: 20px;
  margin-top: -5px;
}
@media (min-width: 768px) {
  ul.checkList li:before {
    margin-top: -1px;
  }
}

ul.list--icons {
  list-style: none;
  padding-left: 0;
}
ul.list--icons i {
  font-size: 2.4rem;
}
ul.list--icons img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}
ul.list--icons li {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
}
ul.list--icons li:last-child {
  margin-bottom: 0;
}
ul.list--icons li span {
  align-self: center;
}

ol li {
  margin-bottom: 12px;
}

#overlay {
  display: none;
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 103;
}

/*
Pagination

Markup:
<nav role="navigation" aria-label="Pagination">
  <ul class="pagination">
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking" aria-label="Previous Page">
            <i class="icon icon-angle-left" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="pagination__item " href="?page=1&amp;sort_by=ranking" aria-label="Goto Page 1">1</a>
      </li>
      <li>
        <a class="pagination__item " href="?page=2&amp;sort_by=ranking" aria-label="Goto Page 2">2</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking" aria-current="true" aria-label="Goto Page 3">3</a>
      </li>
      <span class="pagination__item pagination__item--seperator">...</span>
      <li>
        <a class="pagination__item " href="?page=5&amp;sort_by=ranking" aria-label="Goto Page 5">5</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking" aria-label="Next Page">
            <i class="icon icon-angle-right" aria-hidden="true"></i>
        </a>
      </li>
  </ul>
</nav>

Styleguide Components.Pagination
*/
.pagination {
  padding: 0;
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 1px solid var(--main-color-middle-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-width: 1720px;
  margin-inline: auto;
}
.pagination li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  margin-left: 4px;
  margin-right: 4px;
  color: var(--main-color-middle-gray);
  cursor: not-allowed;
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
}
@media (min-width: 768px) {
  .pagination__item {
    height: 40px;
    width: 40px;
    margin-left: 5px;
    margin-right: 5px;
  }
}
.pagination__item--active {
  background: transparent;
  color: var(--main-link-color-hover) !important;
}
.pagination .icon {
  font-size: 24px;
}

button.pagination__item,
a.pagination__item {
  color: var(--main-color-black);
  cursor: pointer;
}
button.pagination__item:hover, button.pagination__item:focus, button.pagination__item:active,
a.pagination__item:hover,
a.pagination__item:focus,
a.pagination__item:active {
  background: transparent;
  color: var(--main-link-color-hover);
  text-decoration: none;
}

/*
Processbar

Markup:
<nav class="processbar" role="navigation>
    <ul class="processbar__items">
      <li class="processbar__item is-done">
          <i class="processbar__icon icon icon-order-address"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item is-active" aria-current="step">
          <i class="processbar__icon icon icon-order-payment"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item">
          <i class="processbar__icon icon icon-order-check"></i>
          <span class="processbar__label">Label</span>
      </li>
    </ul>
    <div class="processbar__inactive"></div>
    <div class="processbar__active"></div>
</nav>

Styleguide Components.Processbar
*/
.processbar {
  margin: 20px -10px 20px -10px;
  z-index: 1;
  position: relative;
}
@media (min-width: 768px) {
  .processbar {
    margin-bottom: 60px;
  }
}
.processbar__icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 5px;
}
.processbar__icon .icon {
  display: block;
}
.processbar__item {
  margin: 0;
  list-style-type: none;
  padding: 0 10px 30px 10px;
  width: 33%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 1rem;
  color: var(--main-color-middle-gray);
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .processbar__item {
    font-size: var(--main-font-size-small);
  }
}
@media (min-width: 1024px) {
  .processbar__item {
    width: 200px;
  }
}
.processbar__item:after {
  content: "";
  width: 23px;
  height: 23px;
  border: 4px solid var(--main-color-white);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  background: var(--main-color-middle-gray);
  transform: translateX(-50%);
}
.processbar__item.is-done, .processbar__item.is-active {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
}
.processbar__item.is-done:after, .processbar__item.is-active:after {
  background: var(--main-color-primary);
}
.processbar__item:first-child:before, .processbar__item:last-child:before {
  content: "";
  height: 5px;
  width: 50%;
  background: var(--main-color-white);
  display: block;
  position: absolute;
  bottom: 9px;
}
.processbar__item:first-child:before {
  right: 50%;
}
.processbar__item:last-child:before {
  left: 50%;
}
.processbar__items {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.processbar__inactive, .processbar__active {
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--main-color-middle-gray);
  bottom: 11px;
  left: 0;
  z-index: -1;
}
.processbar__active {
  background: var(--main-color-primary);
  height: 3px;
  bottom: 10px;
  width: 0;
  transition: width 0.6s ease-in-out;
}

.scrollTopButton {
  position: fixed;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 101;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-align: center;
  cursor: pointer;
  right: -45px;
  bottom: 0;
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -ms-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
}
.scrollTopButton:hover {
  background-color: var(--main-color-primary-darken);
}
.scrollTopButton.sticky {
  right: 0;
}

.tabs {
  margin-bottom: 24px;
}
.tabs .tabs_item {
  float: left;
  padding: 6px 24px;
  border: 1px solid var(--main-color-black);
}
.tabs .tabs_item:hover {
  background-color: var(--main-color-black);
}
.tabs .tabs_item:hover input {
  color: var(--main-color-black);
}
.tabs .tabs_item .form-group {
  margin-bottom: 0;
}
.tabs .tabs_item:last-child {
  border-left: 0;
}
.tabs:after {
  clear: both;
  display: block;
  content: " ";
}

/*
Iconbar

Markup:
<div class="iconbar {{modifier_class}}">
    <div class="iconbarItem">
      <a class="iconbarIcon" href="#" title="Account">
          <span class="iconbarIcon__icon">
              <i class="icon icon-user" aria-hidden="true"></i>
          </span>
          <span class="iconbarIcon__label">Account</span>
      </a>
      <div class="iconbarHover iconbarHover--basket">
          <div class="iconbarHover__close">
              <i class="icon icon-close"></i>
          </div>
          <div class="iconbarHover__headline">
              Headline
          </div>
          <div class="iconbarHover__body">
            <ul class="iconbarNavigation">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <div class="iconbarHover__footer">
              <div class="amountLines">
                  <div class="amountLine amountLine--big">
                      <div class="amountLine__label">Sum</div>
                      <div class="amountLine__value">999,99&nbsp;€</div>
                  </div>
              </div>
              <a href="#" class="button button--action button--xl" style="width: 100%">
                  To Basket
              </a>
          </div>
      </div>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon" href="#" title="Favorites">
          <span class="iconbarIcon__icon">
              <i class="icon icon-favorites" aria-hidden="true"></i>
              <span class="iconbarIcon__count">+99</span>
          </span>
          <span class="iconbarIcon__label">Favorites</span>
      </a>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon active" href="#" title="Basket">
          <span class="iconbarIcon__icon">
              <i class="icon icon-basket" aria-hidden="true"></i>
              <span class="iconbarIcon__count">+99</span>
          </span>
          <span class="iconbarIcon__label">Basket</span>
      </a>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon active" href="#" title="Name">
          <span class="iconbarIcon__label">Max Mustermann</span>
          <span class="iconbarIcon__badge">MM</span>
      </a>
    </div>
</div>

.iconbar--landscape - Orientation landscape

Styleguide Components.Iconbar
*/
.iconbarIcon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--main-color-text-base);
  text-decoration: none;
  position: relative;
}
.iconbarIcon:hover, .iconbarIcon:focus, .iconbarIcon:active, .iconbarIcon.is-active {
  text-decoration: none;
  color: var(--main-color-text-base);
}
.iconbarIcon:hover .iconbarIcon__icon, .iconbarIcon:focus .iconbarIcon__icon, .iconbarIcon:active .iconbarIcon__icon, .iconbarIcon.is-active .iconbarIcon__icon {
  color: var(--main-link-color-hover);
}
.iconbarIcon:hover .iconbarIcon__count, .iconbarIcon:focus .iconbarIcon__count, .iconbarIcon:active .iconbarIcon__count, .iconbarIcon.is-active .iconbarIcon__count {
  color: var(--main-color-primary-contrast);
}
.iconbarIcon__icon {
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.iconbarIcon__badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  margin-left: 10px;
  background: #ADADAD;
  color: #111111;
  font-size: 1.2rem;
}
.iconbarIcon__label {
  font-size: 1.3rem;
  line-height: 1;
  display: none;
}
@media (min-width: 1250px) {
  .iconbarIcon__label {
    display: block;
  }
}
.iconbarIcon__count {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
@media (min-width: 1250px) {
  .iconbarIcon__count {
    right: 2.5px;
  }
}
.iconbarIcon__count.is-action {
  display: flex !important;
  animation: scaleRequestIconBigger 0.5s forwards ease-in-out;
}

.iconbar {
  display: flex;
  align-items: flex-end;
}
@media (min-width: 1250px) {
  .iconbar {
    margin-left: -2.5px;
    margin-right: -2.5px;
  }
  .iconbar .iconbarIcon {
    padding-left: 2.5px;
    padding-right: 2.5px;
  }
}
.iconbar--landscape .iconbarIcon {
  flex-direction: row;
}
@media (min-width: 1250px) {
  .iconbar--landscape .iconbarIcon__count {
    right: auto;
    left: 46px;
    margin-left: -10px;
  }
}
.iconbar:not(.iconbar--landscape) .iconbarIcon__badge {
  order: -1;
  margin: 0;
  margin-bottom: 5px;
}

.iconbarHover {
  z-index: 104;
  background: var(--main-color-white);
  padding: 20px 30px;
  display: none;
  flex-direction: column;
  width: 250px;
  max-width: 100vw;
  position: absolute;
  top: 100%;
  bottom: auto;
  right: 50%;
  max-height: 70vh;
  border-radius: 25px;
  transform: translateX(5%);
  margin-top: 20px;
  filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.1));
}
.iconbarHover:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent var(--main-color-white) transparent;
  border-style: solid;
  position: absolute;
  right: 30px;
  bottom: 100%;
}
@media (max-width: 767px) {
  .iconbarHover {
    display: none;
  }
}
.iconbarHover--bigger {
  width: 320px;
  transform: translateX(10%);
}
.iconbarHover__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
@media (min-width: 768px) {
  .iconbarHover__close {
    display: none;
  }
}
.iconbarHover__navigation {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}
.iconbarHover__navigation li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-bottom: 1px solid var(--main-color-black);
}
.iconbarHover__navigation li:last-child {
  border-bottom: 0;
}
.iconbarHover__navigation li > span,
.iconbarHover__navigation li > a {
  display: flex;
  align-items: center;
  color: var(--main-color-black);
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}
.iconbarHover__navigation li > span:hover, .iconbarHover__navigation li > span:focus, .iconbarHover__navigation li > span:active, .iconbarHover__navigation li > span.is-active,
.iconbarHover__navigation li > a:hover,
.iconbarHover__navigation li > a:focus,
.iconbarHover__navigation li > a:active,
.iconbarHover__navigation li > a.is-active {
  color: var(--main-link-color-hover);
  text-decoration: none;
}
.iconbarHover__navigation li > span .icon,
.iconbarHover__navigation li > a .icon {
  font-size: 1.4em;
  margin-right: 10px;
}
.iconbarHover__headline {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.iconbarHover__body {
  overflow: hidden;
  overflow-y: auto;
  padding-right: 10px;
  margin-right: -10px;
}
.iconbarHover__footer {
  padding-top: 20px;
}

.iconbarItem {
  position: relative;
}
@media (min-width: 768px) {
  .iconbarItem.hoverintent .iconbarHover, .iconbarItem.showIconbarHover .iconbarHover {
    display: flex;
  }
}

/*
Iconlist

Markup:
<div class="iconList">
  <a href="#"><i class="icon icon-facebook"></i></a>
  <a href="#"><i class="icon icon-twitter"></i></a>
  <a href="#"><i class="icon icon-youtube"></i></a>
  <a href="#"><i class="icon icon-tiktok"></i></a>
  <a href="#"><i class="icon icon-instagram"></i></a>
  <a href="#"><i class="icon icon-pinterest"></i></a>
</div>

Styleguide Components.Iconlist
*/
.iconList {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-bottom: -5px;
}
.iconList a {
  color: var(--main-color-black);
  text-decoration: none;
  margin-right: 5px;
  margin-bottom: 5px;
}
.iconList a:hover, .iconList a:focus, .iconList a:active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.iconList .icon {
  font-size: 32px;
  line-height: 1;
  display: block;
}

/*
Iconbox

Markup:
<div class="iconbox">
    <i class="icon icon-shipping"></i>Kostenloser Versand ab 50 €
    <small>Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €</small>
</div>

Styleguide Components.Iconbox
*/
.iconbox {
  position: relative;
  padding-top: 40px;
}
@media (min-width: 768px) {
  .iconbox {
    padding-left: 50px;
    padding-top: 0;
  }
}
.iconbox .icon {
  font-size: 28px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 768px) {
  .iconbox .icon {
    font-size: 38px;
    width: 40px;
    height: 40px;
  }
}
.iconbox small {
  display: block;
  color: var(--main-color-dark-gray);
}

/*
Trustbar

JS-Source: ../global/js/trustbar.js

Markup:
<div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;}'>
  <div class="textcontent">Trust 1</div>
  <div class="textcontent">Trust 2</div>
  <div class="textcontent">Trust 3</div>
</div>
<div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;"items":3}'>
  <div class="textcontent">Trust 1</div>
  <div class="textcontent">Trust 2</div>
  <div class="textcontent">Trust 3</div>
</div>

Styleguide Components.Trustbar
*/
.trustBar {
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .trustBar {
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  .trustBar {
    font-size: 1.3rem;
  }
}
.trustBar__close {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 1;
}
.trustBar__close .icon {
  display: block;
  margin: 0;
}
.trustBar__close:hover {
  color: var(--main-color-white);
}
.trustBar a {
  color: var(--main-color-black);
  text-decoration: underline;
}
.trustBar a:hover, .trustBar a:focus, .trustBar a:active {
  color: var(--main-color-black);
  text-decoration: underline;
}
.trustBar .textcontent {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  padding-left: 37px;
  padding-right: 37px;
  text-align: center;
}
.trustBar .textcontent .icon {
  font-size: 1.2em;
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
}
.trustBar .textcontent .icon:first-child {
  margin-right: 7px;
}
.trustBar .textcontent .icon:last-child {
  margin-left: 7px;
}
.trustBar .swiper-wrapper {
  display: flex;
  align-items: center;
}

/*
Trust Infobar

Markup:
<div class="trustInfobar">
<span class="trustInfobar__label">Text</span>
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
</div>

Styleguide Components.Trust Infobar
*/
.trustInfobar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  text-decoration: none;
  color: var(--main-color-black);
  padding-top: 12px;
}
@media (min-width: 768px) {
  .trustInfobar {
    padding-top: 0;
  }
}
.trustInfobar:hover, .trustInfobar:focus, .trustInfobar:active {
  text-decoration: none;
  color: var(--main-color-black);
}
.trustInfobar img {
  object-fit: contain;
  max-height: 40px;
  width: 100% !important;
  max-width: 66px;
}

/*
Trustlist

Markup:
<ul class="trustList">
    <li>
        <i class="icon icon-payment"></i> Kauf auf Rechnung
    </li>
    <li>
        <i class="icon icon-shipping"></i> Kostenloser Versand &amp; Rückversand
    </li>
    <li>
        <i class="icon icon-reload"></i> 100 Tage Rückgaberecht
    </li>
</ul>

Styleguide Components.Trustlist
*/
.trustList {
  margin: 0 -5px -10px -5px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  font-size: 1.2rem;
}
.trustList li {
  list-style-type: none;
  margin: 0;
  padding: 0 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trustList .icon {
  font-size: 20px;
  margin-right: 5px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trustList .icon.icon-info {
  display: inline-flex;
  width: 14px;
  height: 14px;
  line-height: 0.8;
  font-size: 14px;
}

/*
Input Groups

Markup:
<div class="inputGroup {{modifier_class}}">
  <input type="text" />
</div>

.is-focus - Focus

Styleguide Form.Input Groups
*/
/*
Input Groups Addons

Markup:
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
  <input type="text" />
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <button type="submit" class="inputGroup__addon"><i class="icon icon-search"></i></button>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <span class="inputGroup__addon inputGroup__addon--clickable"><i class="icon icon-search"></i></span>
</div>

.is-focus - Focus
.is-inactive - Inactive

Styleguide Form.Input Groups Addons
*/
.inputGroup {
  display: flex;
  width: 100%;
  transition: 0.2s ease-in-out;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  position: relative;
}
.inputGroup input,
.inputGroup .input {
  flex-grow: 1;
  transition: 0.2s ease-in-out;
}
.inputGroup input:not(:last-child),
.inputGroup .input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputGroup__addon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--main-color-black);
  overflow: hidden;
  text-decoration: none;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 25px;
}
@media (min-width: 768px) {
  .inputGroup__addon {
    height: 50px;
    padding-left: 22px;
    padding-right: 22px;
  }
}
.inputGroup__addon:first-child {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputGroup__addon:last-child {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon .button, .inputGroup__addon .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .inputGroup__addon .orderButton {
  min-width: 0;
  border-radius: 0;
  margin: -1px;
}
.inputGroup__addon .icon {
  line-height: 1;
  display: block;
  font-size: 20px;
}
@media (min-width: 768px) {
  .inputGroup__addon .icon {
    font-size: 24px;
  }
}
.inputGroup__addon + input,
.inputGroup__addon + select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon--clickable {
  cursor: pointer;
}
.inputGroup__addon--clickable:hover {
  color: var(--main-color-primary);
}
.inputGroup button.inputGroup__addon {
  min-width: 40px;
  background: transparent;
}
@media (min-width: 768px) {
  .inputGroup button.inputGroup__addon {
    min-width: 50px;
  }
}
.inputGroup button.inputGroup__addon:hover, .inputGroup button.inputGroup__addon:focus, .inputGroup button.inputGroup__addon:active {
  background: var(--main-color-primary);
  color: var(--main-color-primary-darken);
}
.inputGroup--infieldAddon .inputGroup__addon {
  position: absolute;
  height: 100%;
  border: 0;
  background: transparent !important;
}
.inputGroup--infieldAddon .inputGroup__addon:first-child {
  left: 0;
}
.inputGroup--infieldAddon .inputGroup__addon:last-child {
  right: 0;
}
.inputGroup--infieldAddon > input:first-child {
  padding-right: 40px;
  border-radius: 25px !important;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:first-child {
    padding-right: 50px;
  }
}
.inputGroup--infieldAddon > input:last-child {
  padding-left: 40px;
  border-radius: 25px !important;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:last-child {
    padding-left: 50px;
  }
}
.inputGroup.is-focus {
  border-color: var(--main-color-black);
}
.inputGroup.is-focus > input,
.inputGroup.is-focus > .input,
.inputGroup.is-focus select {
  background: var(--main-color-white);
  border-color: var(--main-color-black);
}
.inputGroup.is-focus .inputGroup__addon {
  background: var(--main-color-white);
  border-color: var(--main-color-black);
}
.inputGroup.is-inactive .inputGroup__addon {
  display: none;
}

/*
Infield Input Groups

Markup:
<div class="infieldInputGroup">
  <label for="id">Label</label>
  <div class="inputGroup {{modifier_class}}">
    <input type="text" id="id" />
  </div>
</div><br/>
<strong>Filled</strong><br/><br/>
<div class="infieldInputGroup is-filled">
  <label for="id">Label</label>
  <div class="inputGroup {{modifier_class}}">
    <input type="text" id="id" value="Text" />
  </div>
</div>

Styleguide Form.Infield Input Groups
*/
.infieldInputGroup {
  position: relative;
}
.infieldInputGroup > label {
  position: absolute;
  top: 50%;
  transform: translate(0, calc(-50% - 1px));
  left: 15px;
  margin-top: 1px;
  line-height: 18px;
  transition: 0.2s ease-in-out;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
}
@media (min-width: 768px) {
  .infieldInputGroup > label {
    left: 22px;
    line-height: 22px;
    max-width: calc(100% - 44px);
  }
}
.infieldInputGroup:has(textarea) > label {
  top: 28px;
}
.infieldInputGroup.marginBottom--small {
  margin-bottom: 24px;
}
.infieldInputGroup:has(.inputGroup--infieldAddon) > label {
  left: 70px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon) > label {
    left: 76.5px;
  }
}
.infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
  left: 15px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
    left: 22px;
  }
}
.infieldInputGroup input,
.infieldInputGroup select,
.infieldInputGroup textarea {
  transition: padding 0.2s ease-in-out;
}
.infieldInputGroup--select > label, .infieldInputGroup.is-focus > label, .infieldInputGroup.is-filled > label {
  top: 0;
  transform: translate(-5px, -50%);
  color: var(--main-color-dark-gray);
  font-size: 0.7em;
  background: var(--main-color-white);
  line-height: 1;
  padding-left: 5px;
  padding-right: 5px;
  max-width: 100%;
}

.dynamicPlaceholders {
  min-height: 100%;
  flex-grow: 1;
  contain: paint;
}
.dynamicPlaceholders__container {
  container-type: inline-size;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
  padding-left: 50px;
  opacity: 1;
}
.dynamicPlaceholders__container.is-hidden {
  z-index: -1;
  opacity: 0;
}
.dynamicPlaceholders__container > .inner {
  display: flex;
  position: relative;
  align-items: center;
  gap: 7px;
  height: 100%;
}
.dynamicPlaceholders__container > .inner > div:first-child {
  height: 100%;
  align-content: center;
}
@container (inline-size < 360px) {
  .dynamicPlaceholders__container > .inner .searchPlaceholder {
    display: none !important;
  }
}
.dynamicPlaceholders__element {
  position: absolute;
  transform: translateY(50%);
  bottom: -25%;
  height: 100%;
  align-content: center;
  transition: bottom 0.4s ease-in-out;
  z-index: -1;
  opacity: 0;
}
.dynamicPlaceholders__element.is-active {
  bottom: 50%;
  z-index: inherit;
  opacity: 1;
}
.dynamicPlaceholders__element.is-fadingOut {
  bottom: 125%;
  z-index: inherit;
  opacity: 1;
}

/*
Searchbar

You can add minified Classes for each Viewport Size (--minified-xs,--minified-sm,--minified-md,--minified-lg,--minified-xlg)

Markup:
<div class="inputGroup searchBar {{modifier_class}}">
  <input type="text" placeholder="Search..." />
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
</div>

.searchBar--minified
.searchBar--small
.is-focus

Styleguide Components.Searchbar
*/
.searchBar {
  width: 100%;
  border-radius: 25px;
}
.searchBar:has(> input:focus-visible) > input:focus-visible {
  outline: none;
  border-color: var(--main-color-primary);
  border-left: none;
}
.searchBar:has(> input:focus-visible) > label button {
  border-color: var(--main-color-primary);
  border-right: none;
}
.searchBar input {
  background: var(--main-color-white);
  border-color: var(--main-color-black);
  border-left-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.searchBar input:not(:last-child) {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
.searchBar input:-webkit-autofill,
.searchBar input:-webkit-autofill:hover,
.searchBar input:-webkit-autofill:focus,
.searchBar input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--main-color-white) inset !important;
}
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
  background: var(--main-color-white);
  border-color: var(--main-color-black);
  border-right-color: transparent;
  transition: 0.2s ease-in-out;
  padding-right: 8px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
  background: var(--main-color-white);
  color: var(--main-color-primary);
}
.searchBar--minified {
  position: relative;
}
.searchBar--minified input {
  width: 0;
  right: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
.searchBar--minified .inputGroup__addon {
  z-index: 1;
}
.searchBar--minified.is-active input {
  width: 300px;
  padding-right: 50px;
  opacity: 1;
  pointer-events: auto;
}
.searchBar--small {
  width: 100%;
  max-width: 200px;
  position: relative;
  border-radius: 0;
}
.searchBar--small input {
  padding: 5px 30px 5px 5px;
  font-size: var(--main-font-size-small);
  border: 0;
  border-bottom: 1px solid var(--main-color-middle-gray);
  border-radius: 0;
  background: transparent !important;
}
.searchBar--small .inputGroup__addon,
.searchBar--small button.inputGroup__addon {
  padding: 0;
  min-width: 0;
  height: 30px;
  width: 30px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0;
  background: transparent !important;
  border-color: transparent !important;
}
.searchBar--small .inputGroup__addon .icon,
.searchBar--small button.inputGroup__addon .icon {
  font-size: 18px;
}
.searchBar.is-focus {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-color: var(--main-color-primary);
}
.searchBar.is-focus input, .searchBar.is-focus .inputGroup__addon, .searchBar.is-focus button.inputGroup__addon {
  border-color: var(--main-color-primary);
}
.searchBar.is-focus input:hover, .searchBar.is-focus input:focus, .searchBar.is-focus .inputGroup__addon:hover, .searchBar.is-focus .inputGroup__addon:focus, .searchBar.is-focus button.inputGroup__addon:hover, .searchBar.is-focus button.inputGroup__addon:focus {
  background: var(--main-color-white);
}
.searchBar.is-focus > label button {
  border-color: var(--main-color-primary);
  border-right: none;
}
@media (max-width: 767px) {
  .searchBar--minified-xs {
    position: relative;
  }
  .searchBar--minified-xs input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-xs .inputGroup__addon {
    z-index: 1;
    border-radius: 25px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-xs.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-xs.is-focus input {
    width: 300px;
    padding-right: 50px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-black);
    border-radius: 25px;
  }
  .searchBar--minified-xs.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-xs.is-focus .inputGroup__addon:hover, .searchBar--minified-xs.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .searchBar--minified-sm {
    position: relative;
  }
  .searchBar--minified-sm input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-sm .inputGroup__addon {
    z-index: 1;
    border-radius: 25px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-sm.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-sm.is-focus input {
    width: 300px;
    padding-right: 50px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-black);
    border-radius: 25px;
  }
  .searchBar--minified-sm.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-sm.is-focus .inputGroup__addon:hover, .searchBar--minified-sm.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 1024px) and (max-width: 1249px) {
  .searchBar--minified-md {
    position: relative;
  }
  .searchBar--minified-md input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-md .inputGroup__addon {
    z-index: 1;
    border-radius: 25px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-md.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-md.is-focus input {
    width: 300px;
    padding-right: 50px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-black);
    border-radius: 25px;
  }
  .searchBar--minified-md.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-md.is-focus .inputGroup__addon:hover, .searchBar--minified-md.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 1250px) and (max-width: 1539px) {
  .searchBar--minified-lg {
    position: relative;
  }
  .searchBar--minified-lg input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-lg .inputGroup__addon {
    z-index: 1;
    border-radius: 25px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-lg.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-lg.is-focus input {
    width: 300px;
    padding-right: 50px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-black);
    border-radius: 25px;
  }
  .searchBar--minified-lg.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-lg.is-focus .inputGroup__addon:hover, .searchBar--minified-lg.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 1540px) {
  .searchBar--minified-xlg {
    position: relative;
  }
  .searchBar--minified-xlg input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-xlg .inputGroup__addon {
    z-index: 1;
    border-radius: 25px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-xlg.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-xlg.is-focus input {
    width: 300px;
    padding-right: 50px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-black);
    border-radius: 25px;
  }
  .searchBar--minified-xlg.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-xlg.is-focus .inputGroup__addon:hover, .searchBar--minified-xlg.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
.searchBar:has(input + span) input {
  border-left-color: var(--main-color-black);
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}
.searchBar:has(input + span) .inputGroup__addon {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  border-right-color: var(--main-color-black);
  padding-right: 12px;
}

.searchSuggestionItem {
  border-bottom: 1px solid var(--main-color-black);
  text-decoration: none;
  padding: 10px;
  color: var(--main-color-black);
  display: grid;
  grid-gap: 10px;
  align-items: center;
  grid-template-columns: auto 1fr;
  grid-template-areas: "searchSuggestionImg searchSuggestionDescription";
  cursor: pointer;
}
.searchSuggestionItem__img {
  grid-area: searchSuggestionImg;
  width: 60px;
}
.searchSuggestionItem__description {
  grid-area: searchSuggestionDescription;
}
.searchSuggestionItem:hover, .searchSuggestionItem.is-active {
  color: var(--main-color-black);
  text-decoration: none;
  background: var(--main-color-light-gray);
}

.searchBarSuggestions {
  background: var(--main-color-white);
  border-radius: 25px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}

.searchBarWrapper {
  position: relative;
}
.searchBarWrapper .searchBarSuggestions {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1;
}
.searchBarWrapper.is-loading .searchBar {
  pointer-events: none;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon {
  animation: rotation 1s infinite ease-in-out;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon:before {
  content: var(--base-icon-loading);
}

/*
Rating

Markup:
<div class="rating">
    <div class="rating__stars">
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active-half"><i class="icon icon-star"></i></span>
    </div>
    <div class="rating__label">
        (4,5/5) Trusted Shops
    </div>
</div>

Styleguide Components.Rating
*/
.rating {
  display: flex;
  align-items: center;
}
.rating__star {
  display: block;
  line-height: 1;
}
.rating__star--active .icon:before {
  content: var(--base-icon-star-filled);
}
.rating__star--active-half .icon:before {
  content: var(--base-icon-star-half);
}
.rating__label {
  margin-left: 10px;
}
.rating__stars {
  display: flex;
  align-items: center;
}

.ratingSelection {
  font-size: 1.8em;
  margin-right: -5px;
}
.ratingSelection .rating__star {
  cursor: pointer;
  margin-right: 5px;
}
.ratingSelection .rating__star:hover {
  color: var(--main-color-primary);
}

.ratingListItem__stars {
  margin-right: 20px;
}
.ratingListItem__header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.ratingList .ratingListItem:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--main-color-middle-gray);
  margin-bottom: 20px;
}

.itemcardRatingLink {
  color: var(--main-color-black);
  text-decoration: none;
}
.itemcardRatingLink:hover, .itemcardRatingLink:focus, .itemcardRatingLink:active {
  color: var(--main-color-primary);
  text-decoration: none;
}

.itemcardRatingViewHeadline {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .itemcardRatingViewHeadline {
    justify-content: space-between;
  }
}
.itemcardRatingViewHeadline h2 {
  margin-bottom: 0;
}
.itemcardRatingViewHeadline .rating {
  margin-left: 20px;
}

/*
Action Icon

Markup:
<button class="actionIcon {{modifier_class}}"><i class="icon icon-favorites"></i></button>

:hover - Hover
:focus - Focus
.is-loading - Loading
.is-success - Success
.is-error - Error

Styleguide Components.Action Icon
*/
.actionIcon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  color: var(--main-color-black);
  text-decoration: none;
  position: relative;
  border: 0;
  background: var(--main-color-white);
  border-radius: 50%;
  padding: 0;
  margin: 0;
}
.actionIcon:hover {
  background: var(--main-color-white);
  text-decoration: none;
  color: var(--main-link-color-hover);
}
.actionIcon:hover .icon-favorites:before {
  content: var(--base-icon-heart);
}
.actionIcon:hover .icon-favorites-filled:before {
  content: var(--base-icon-heart-filled);
}
.actionIcon:focus, .actionIcon:active {
  background: var(--main-color-white);
  text-decoration: none;
  color: var(--main-link-color-hover);
}
.actionIcon:before {
  display: none;
}
.actionIcon:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: "";
  transition: 0.2s ease-in-out;
  opacity: 0;
  position: absolute;
}
.actionIcon .icon {
  opacity: 1;
  font-size: 1em;
}
.actionIcon.is-loading, .actionIcon.is-success, .actionIcon.is-error {
  color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  padding: 0;
  background: var(--main-color-white) !important;
}
.actionIcon.is-loading .icon, .actionIcon.is-success .icon, .actionIcon.is-error .icon {
  opacity: 0;
}
.actionIcon.is-loading {
  cursor: wait;
}
.actionIcon.is-loading:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.actionIcon.is-success {
  color: var(--main-color-success) !important;
}
.actionIcon.is-success:after {
  content: var(--base-icon-check);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}
.actionIcon.is-error {
  color: var(--main-color-danger) !important;
}
.actionIcon.is-error:after {
  content: var(--base-icon-close);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}

/*
Tags

Markup:
<span class="tag {{modifier_class}}">Tagname</span>

:hover - Hover
:focus - Focus
:active - Active
.is-loading - Is loading
.is-success - Is success
.is-error - Is error

Styleguide Components.Tags
*/
/*
Tags Group

Markup:
<div class="tags">
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
</div>

Styleguide Components.Tags Group
*/
.tag {
  background: var(--main-color-white);
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  font-size: var(--main-font-size-base);
  cursor: pointer;
  text-decoration: none;
  color: var(--main-color-black);
  border-radius: 4px;
  line-height: 1;
  text-align: center;
  border-radius: 50px;
  border: 1px solid var(--main-color-black);
}
.tag:hover, .tag.is-active {
  background: var(--main-color-black);
  color: var(--main-color-white);
  text-decoration: none;
}
.tag:focus, .tag:active {
  background: var(--main-color-black);
  color: var(--main-color-white);
  text-decoration: none;
}
.tag .icon {
  font-size: 1.4em;
  margin-left: 5px;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.tag.is-loading, .tag.is-success, .tag.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  color: var(--main-color-black) !important;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.tag.is-loading .icon, .tag.is-success .icon, .tag.is-error .icon {
  opacity: 0;
}
.tag.is-loading:after, .tag.is-success:after, .tag.is-error:after {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: -50% -50%;
  font-size: 20px;
}
.tag.is-loading {
  cursor: wait;
  color: var(--main-color-middle-gray) !important;
}
.tag.is-loading:after {
  content: var(--base-icon-loading);
  color: var(--main-color-black);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.tag.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-success) !important;
}
.tag.is-success:after {
  content: var(--base-icon-check);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.tag.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-danger) !important;
}
.tag.is-error:after {
  content: var(--base-icon-close);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 1023px) {
  .tags {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    max-width: 100vw;
    gap: 7px;
  }
  .tags > * {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

.tag--white {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #111111;
}
.tag--white:hover, .tag--white .is-active {
  border-color: var(--main-color-white);
}

.tag--light-gray {
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  color: #111111;
}
.tag--light-gray:hover, .tag--light-gray .is-active {
  border-color: var(--main-color-white);
}

.tag--gray-base {
  background-color: #E6E6E6;
  border: 1px solid #E6E6E6;
  color: #111111;
}
.tag--gray-base:hover, .tag--gray-base .is-active {
  border-color: var(--main-color-white);
}

.tag--middle-gray {
  background-color: #ADADAD;
  border: 1px solid #ADADAD;
  color: #111111;
}
.tag--middle-gray:hover, .tag--middle-gray .is-active {
  border-color: var(--main-color-white);
}

.tag--dark-gray {
  background-color: #787878;
  border: 1px solid #787878;
  color: #ffffff;
}
.tag--dark-gray:hover, .tag--dark-gray .is-active {
  border-color: var(--main-color-white);
}

.tag--black {
  background-color: #111111;
  border: 1px solid #111111;
  color: #ffffff;
}
.tag--black:hover, .tag--black .is-active {
  border-color: var(--main-color-white);
}

.tag--primary {
  background-color: #B4DDDE;
  border: 1px solid #B4DDDE;
  color: #111111;
}
.tag--primary:hover, .tag--primary .is-active {
  border-color: var(--main-color-white);
}

.tag--primary-dark {
  background-color: #6FC3BA;
  border: 1px solid #6FC3BA;
  color: #111111;
}
.tag--primary-dark:hover, .tag--primary-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--primary-darken {
  background-color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
  border: 1px solid rgb(144.5833333333, 204.9444444444, 206.4166666667);
  color: #111111;
}
.tag--primary-darken:hover, .tag--primary-darken .is-active {
  border-color: var(--main-color-white);
}

.tag--secondary {
  background-color: #FCD6BB;
  border: 1px solid #FCD6BB;
  color: #111111;
}
.tag--secondary:hover, .tag--secondary .is-active {
  border-color: var(--main-color-white);
}

.tag--secondary-dark {
  background-color: #F8B68B;
  border: 1px solid #F8B68B;
  color: #111111;
}
.tag--secondary-dark:hover, .tag--secondary-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--action {
  background-color: #2760AB;
  border: 1px solid #2760AB;
  color: #ffffff;
}
.tag--action:hover, .tag--action .is-active {
  border-color: var(--main-color-white);
}

.tag--sale {
  background-color: #2FA17E;
  border: 1px solid #2FA17E;
  color: #ffffff;
}
.tag--sale:hover, .tag--sale .is-active {
  border-color: var(--main-color-white);
}

.tag--success {
  background-color: #7BBB31;
  border: 1px solid #7BBB31;
  color: #111111;
}
.tag--success:hover, .tag--success .is-active {
  border-color: var(--main-color-white);
}

.tag--success-dark {
  background-color: rgb(162.2916666667, 212.9722222222, 214.2083333333);
  border: 1px solid rgb(162.2916666667, 212.9722222222, 214.2083333333);
  color: #111111;
}
.tag--success-dark:hover, .tag--success-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--success-darken {
  background-color: rgb(144.5833333333, 204.9444444444, 206.4166666667);
  border: 1px solid rgb(144.5833333333, 204.9444444444, 206.4166666667);
  color: #111111;
}
.tag--success-darken:hover, .tag--success-darken .is-active {
  border-color: var(--main-color-white);
}

.tag--warning {
  background-color: #EF7410;
  border: 1px solid #EF7410;
  color: #111111;
}
.tag--warning:hover, .tag--warning .is-active {
  border-color: var(--main-color-white);
}

.tag--warning-dark {
  background-color: rgb(215.1, 104.4, 14.4);
  border: 1px solid rgb(215.1, 104.4, 14.4);
  color: #111111;
}
.tag--warning-dark:hover, .tag--warning-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--warning-darken {
  background-color: rgb(191.2, 92.8, 12.8);
  border: 1px solid rgb(191.2, 92.8, 12.8);
  color: #ffffff;
}
.tag--warning-darken:hover, .tag--warning-darken .is-active {
  border-color: var(--main-color-white);
}

.tag--danger {
  background-color: #D50000;
  border: 1px solid #D50000;
  color: #ffffff;
}
.tag--danger:hover, .tag--danger .is-active {
  border-color: var(--main-color-white);
}

.tag--danger-dark {
  background-color: rgb(187.5, 0, 0);
  border: 1px solid rgb(187.5, 0, 0);
  color: #ffffff;
}
.tag--danger-dark:hover, .tag--danger-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--danger-darken {
  background-color: #a20000;
  border: 1px solid #a20000;
  color: #ffffff;
}
.tag--danger-darken:hover, .tag--danger-darken .is-active {
  border-color: var(--main-color-white);
}

.tag--blue {
  background-color: #2760AB;
  border: 1px solid #2760AB;
  color: #ffffff;
}
.tag--blue:hover, .tag--blue .is-active {
  border-color: var(--main-color-white);
}

.tag--blue-dark {
  background-color: #293E80;
  border: 1px solid #293E80;
  color: #ffffff;
}
.tag--blue-dark:hover, .tag--blue-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--blue-smoke {
  background-color: #6F88A8;
  border: 1px solid #6F88A8;
  color: #111111;
}
.tag--blue-smoke:hover, .tag--blue-smoke .is-active {
  border-color: var(--main-color-white);
}

.tag--turquoise {
  background-color: #7AC9D4;
  border: 1px solid #7AC9D4;
  color: #111111;
}
.tag--turquoise:hover, .tag--turquoise .is-active {
  border-color: var(--main-color-white);
}

.tag--turquoise-dark {
  background-color: #6FC3BA;
  border: 1px solid #6FC3BA;
  color: #111111;
}
.tag--turquoise-dark:hover, .tag--turquoise-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--turquoise-light {
  background-color: #B4DDDE;
  border: 1px solid #B4DDDE;
  color: #111111;
}
.tag--turquoise-light:hover, .tag--turquoise-light .is-active {
  border-color: var(--main-color-white);
}

.tag--lilac {
  background-color: #C9CFDE;
  border: 1px solid #C9CFDE;
  color: #111111;
}
.tag--lilac:hover, .tag--lilac .is-active {
  border-color: var(--main-color-white);
}

.tag--lilac-middle {
  background-color: #C0D5E5;
  border: 1px solid #C0D5E5;
  color: #111111;
}
.tag--lilac-middle:hover, .tag--lilac-middle .is-active {
  border-color: var(--main-color-white);
}

.tag--lilac-dark {
  background-color: #A7AECA;
  border: 1px solid #A7AECA;
  color: #111111;
}
.tag--lilac-dark:hover, .tag--lilac-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--green-moss {
  background-color: #536554;
  border: 1px solid #536554;
  color: #ffffff;
}
.tag--green-moss:hover, .tag--green-moss .is-active {
  border-color: var(--main-color-white);
}

.tag--green-grass {
  background-color: #6FAC92;
  border: 1px solid #6FAC92;
  color: #111111;
}
.tag--green-grass:hover, .tag--green-grass .is-active {
  border-color: var(--main-color-white);
}

.tag--green-jade {
  background-color: #8EB6B5;
  border: 1px solid #8EB6B5;
  color: #111111;
}
.tag--green-jade:hover, .tag--green-jade .is-active {
  border-color: var(--main-color-white);
}

.tag--green-light {
  background-color: #ABCAD0;
  border: 1px solid #ABCAD0;
  color: #111111;
}
.tag--green-light:hover, .tag--green-light .is-active {
  border-color: var(--main-color-white);
}

.tag--brown {
  background-color: #92867D;
  border: 1px solid #92867D;
  color: #111111;
}
.tag--brown:hover, .tag--brown .is-active {
  border-color: var(--main-color-white);
}

.tag--brown-middle {
  background-color: #CEBFB7;
  border: 1px solid #CEBFB7;
  color: #111111;
}
.tag--brown-middle:hover, .tag--brown-middle .is-active {
  border-color: var(--main-color-white);
}

.tag--brown-light {
  background-color: #E4E3DE;
  border: 1px solid #E4E3DE;
  color: #111111;
}
.tag--brown-light:hover, .tag--brown-light .is-active {
  border-color: var(--main-color-white);
}

.tag--greige {
  background-color: #EAE8E8;
  border: 1px solid #EAE8E8;
  color: #111111;
}
.tag--greige:hover, .tag--greige .is-active {
  border-color: var(--main-color-white);
}

.tag--coral-dark {
  background-color: #DAA892;
  border: 1px solid #DAA892;
  color: #111111;
}
.tag--coral-dark:hover, .tag--coral-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--coral {
  background-color: #FBD0BA;
  border: 1px solid #FBD0BA;
  color: #111111;
}
.tag--coral:hover, .tag--coral .is-active {
  border-color: var(--main-color-white);
}

.tag--yellow-dark {
  background-color: #E5DBB6;
  border: 1px solid #E5DBB6;
  color: #111111;
}
.tag--yellow-dark:hover, .tag--yellow-dark .is-active {
  border-color: var(--main-color-white);
}

.tag--yellow {
  background-color: #FFEDBA;
  border: 1px solid #FFEDBA;
  color: #111111;
}
.tag--yellow:hover, .tag--yellow .is-active {
  border-color: var(--main-color-white);
}

.tag--yellow-light {
  background-color: #FFF6E0;
  border: 1px solid #FFF6E0;
  color: #111111;
}
.tag--yellow-light:hover, .tag--yellow-light .is-active {
  border-color: var(--main-color-white);
}

.tag--rose {
  background-color: #EAD7D0;
  border: 1px solid #EAD7D0;
  color: #111111;
}
.tag--rose:hover, .tag--rose .is-active {
  border-color: var(--main-color-white);
}

.tag--rose-light {
  background-color: #FDECE3;
  border: 1px solid #FDECE3;
  color: #111111;
}
.tag--rose-light:hover, .tag--rose-light .is-active {
  border-color: var(--main-color-white);
}

.tag--info {
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  color: #111111;
}
.tag--info:hover, .tag--info .is-active {
  border-color: var(--main-color-white);
}

/*
Modals

Markup:
<a href="javascript:void(0)" class="button" data-modal='id-{{modifier_class}}'>Open Modal</a>
<div class="modal {{modifier_class}}" id="id-{{modifier_class}}">
    <div class="modal__dialog" role="document">
        <div class="modal__content">
            <div class="modal__header">
                <div class="modal__title">Title<br/><small>Subtitle</small></div>
                <a href="javascript:void(0)" class="modal__close" data-close="modal" aria-label="Close Modal">
                    <i class="icon icon-close"></i>
                </div>
            </div>
            <div class="modal__body">
              Lorem Ipsum
            </div>
            <div class="modal__footer">
                <button class="button button--action">Save</button>
                <a href="javascript:void(0) class="button" data-close="modal" aria-label="Close Modal">Abort</span>
            </div>
        </div>
    </div>
</div>

.modal--info - Info
.modal--error - Error
.modal--success - Success

Styleguide Components.Modals
*/
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 107;
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
  align-items: flex-end;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .modal {
    padding: 30px;
    align-items: flex-start;
  }
}
@media (min-width: 1250px) {
  .modal {
    padding: 60px;
  }
}
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  transition: 0.4s ease;
  background: var(--main-color-white);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(20%);
}
@media (max-width: 767px) {
  .modal__dialog {
    max-height: 100%;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
@media (min-width: 768px) {
  .modal__dialog {
    border-radius: 10px;
    overflow: hidden;
    transform: translateY(-20%);
  }
}
@media (min-width: 1250px) {
  .modal__dialog {
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.2);
  }
}
.modal__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease-in;
  opacity: 1;
}
.modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.6;
  text-decoration: none;
  color: var(--main-color-black);
  border-radius: 50%;
  text-align: center;
}
.modal__close:hover, .modal__close:focus {
  color: var(--main-color-black);
  text-decoration: none;
  background: var(--main-color-middle-gray);
}
.modal__close i {
  display: block;
}
.modal__close i:before {
  line-height: 1;
  display: block;
}
.modal__header {
  padding: 20px 40px 0 20px;
}
@media (min-width: 768px) {
  .modal__header {
    padding: 30px 50px 0 30px;
  }
}
.modal__body {
  padding: 20px;
}
@media (min-width: 768px) {
  .modal__body {
    padding: 30px;
    padding-top: 0;
  }
}
.modal__footer {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media (min-width: 768px) {
  .modal__footer {
    padding: 30px;
  }
}
.modal__footer:not(.modal__footer--bg) {
  padding-top: 0;
}
.modal__title {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  margin-bottom: 1em;
}
.modal__title small {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
}
.modal--info .modal__header, .modal--error .modal__header, .modal--success .modal__header {
  padding: 0;
}
.modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
  text-align: center;
  max-width: 420px;
  padding-top: 50px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
    padding-top: 130px;
  }
}
.modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
  content: var(--base-icon-exclamation);
  font-family: "icons", Helvetica, Arial, sans-serif;
  border: 2px solid var(--main-color-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  border-radius: 50%;
  color: var(--main-color-warning);
  transform: translateX(-50%);
  line-height: 1;
  top: 20px;
  font-size: 24px;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
    top: 40px;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
}
.modal--error .modal__dialog:before {
  content: var(--base-icon-exclamation);
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
.modal--success .modal__dialog:before {
  content: var(--base-icon-check);
  border-color: var(--main-color-success);
  color: var(--main-color-success);
}
.modal--flyout {
  padding: 0;
  width: 320px;
  transition: all 0.3s ease;
}
.modal--flyout .modal__dialog {
  height: 100%;
  height: 100svh;
  overflow: hidden;
  overflow-y: auto;
  transform: none;
}
.modal--flyoutRight {
  position: fixed;
  right: -320px;
  left: auto;
}
.modal--flyoutRight.open {
  right: 0;
}
.modal--flyoutRight .modal__dialog {
  margin-left: auto;
  margin-right: 0;
}
.modal--flyoutLeft {
  position: fixed;
  left: -320px;
  margin-right: auto;
  margin-left: 0;
  right: auto;
}
.modal--flyoutLeft.open {
  left: 0;
}
.modal--flyoutLeft .modal__dialog {
  margin-right: auto;
  margin-left: 0;
}
.modal--loading .modal__title {
  opacity: 0;
}
.modal--loading .modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.modal--loading .modal__body .icon {
  font-size: 60px;
  animation: rotation 1s infinite linear;
}
.modal--lg .modal__dialog {
  max-width: 1200px;
}
.modal--md .modal__dialog {
  max-width: 900px;
}
.modal--sm .modal__dialog {
  max-width: 600px;
}
.modal--xs .modal__dialog {
  max-width: 420px;
}
.modal--white .modal__dialog {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}
.modal.open .modal__dialog {
  transform: none;
}
.modal--disabled .modal__dialog {
  pointer-events: none;
  margin-top: -10px;
}
.modal--disabled .modal__content {
  opacity: 0.2;
}

.modalBg {
  background: rgba(204, 204, 204, 0.7);
  z-index: 106;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

body.modal-open,
html.modal-open {
  overflow: hidden;
}
@media (min-width: 1024px) {
  body.modal-open,
  html.modal-open {
    padding-right: 6px;
  }
}

/*
Radio List

Markup:
<div class="radioList {{modifier_class}}">
        <label for="radio1" class="radioListItem">
            <input type="radio" name="radio" id="radio1" value="1" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
        <label for="radio2" class="radioListItem">
            <input type="radio" name="radio" id="radio2" value="2" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
</div>

radioList--small - Small

Styleguide Components.Radio List
*/
.radioListItem {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 10px 10px 55px;
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
  cursor: pointer;
  min-height: 50px;
}
.radioListItem:hover, .radioListItem:focus, .radioListItem:active {
  border-color: var(--main-color-black);
  z-index: 1;
}
.radioListItem:has(input:focus) {
  border-color: var(--main-color-black);
}
.radioListItem__image {
  padding-left: 20px;
}
.radioListItem__image img {
  aspect-ratio: 4/3;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.radioListItem__headline {
  font-size: var(--main-font-size-base);
}
.radioListItem__summary {
  display: block;
  margin-top: 3px;
  font-size: var(--main-font-size-medium);
}
.radioListItem__text {
  flex-grow: 1;
}
.radioListItem input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.radioListItem input + i {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--main-color-white);
  border: 1px solid var(--main-color-black);
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.radioListItem input + i:after {
  content: "";
  background: var(--main-color-primary);
  pointer-events: none;
  position: absolute;
  width: 10px;
  height: 10px;
  left: 4px;
  top: 4px;
  opacity: 0;
  transition: opacity 0.1s ease-in;
  background-color: var(--main-color-black);
  border-radius: 50%;
  display: block;
}
.radioListItem input:focus + i {
  border-color: var(--main-color-black);
}
.radioListItem input:checked + i:after {
  opacity: 1;
}

.radioList {
  margin-bottom: -20px;
}
.radioList .radioListItem {
  margin-bottom: 20px;
}
.radioList--small {
  margin: 0;
}
.radioList--small .radioListItem {
  margin-bottom: 0;
  border-radius: 0;
  padding: 5px 10px 5px 40px;
  min-height: 53px;
  margin-top: -1px;
}
.radioList--small .radioListItem:first-child {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  margin-top: 0;
}
.radioList--small .radioListItem:last-child {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.radioList--small .radioListItem__summary {
  margin-top: 0;
}
.radioList--small .radioListItem input + i {
  left: 10px;
}

div:has(> .radioList) > label:first-child {
  margin-bottom: 8px;
}

/*
Link with Icon

Markup:
<a href="#" class="linkWithIcon {{modifier_class}}"><i class="icon icon-favorites"></i><span>Text</span></a>

:hover - Hover
:focus - Focus
:active - Active
.linkWithIcon--underlined - Underlined
.is-loading - Loading
.is-success - Success
.is-error - Error

Styleguide Typo.Link with Icon
*/
.linkWithIcon {
  display: flex;
  align-items: center;
  color: var(--main-color-black);
  line-height: 1;
  gap: 3px;
  font-weight: var(--main-font-weight-medium);
  text-overflow: ellipsis;
  overflow: hidden;
}
.linkWithIcon .icon {
  font-size: 1.5em;
  position: relative;
  text-decoration: none;
}
.linkWithIcon .icon-angle-left {
  display: flex;
  margin-left: -4px;
}
.linkWithIcon span {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-block: 1px;
}
.linkWithIcon--underlined span {
  letter-spacing: 1.08px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-underline-position: from-font;
  font-weight: var(--main-font-weight-bold);
}
.linkWithIcon--underlined span:hover, .linkWithIcon--underlined span:focus {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.linkWithIcon--back {
  font-size: 1.5rem;
  letter-spacing: 0.9px;
}
.linkWithIcon--back span {
  font-weight: var(--main-font-weight-medium);
  text-decoration-thickness: 1px;
}
.linkWithIcon:hover, .linkWithIcon:focus, .linkWithIcon:active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}
.linkWithIcon.is-loading, .linkWithIcon.is-success, .linkWithIcon.is-error {
  color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  position: relative;
  pointer-events: none;
  background: transparent !important;
}
.linkWithIcon.is-loading:after, .linkWithIcon.is-success:after, .linkWithIcon.is-error:after {
  display: none;
}
.linkWithIcon.is-loading:before, .linkWithIcon.is-success:before, .linkWithIcon.is-error:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 20px;
  margin-top: -10px;
}
.linkWithIcon.is-loading .icon, .linkWithIcon.is-success .icon, .linkWithIcon.is-error .icon {
  opacity: 0;
}
.linkWithIcon.is-loading {
  cursor: wait;
}
.linkWithIcon.is-loading:before {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.linkWithIcon.is-success {
  color: var(--main-color-success) !important;
}
.linkWithIcon.is-success:before {
  content: var(--base-icon-check);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}
.linkWithIcon.is-error {
  color: var(--main-color-danger) !important;
}
.linkWithIcon.is-error:before {
  content: var(--base-icon-close);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}

.link--underlined {
  text-decoration: underline;
  font-weight: var(--main-font-weight-medium);
  font-size: var(--main-font-size-base);
  letter-spacing: 1.44px;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.link--underlined:hover, .link--underlined:focus {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  text-decoration-color: var(--main-link-color-hover);
}

.textWithIcon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

button.linkWithIcon {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--main-color-black);
  text-decoration: none;
  cursor: pointer;
}
button.linkWithIcon:hover, button.linkWithIcon:focus, button.linkWithIcon:active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}

.tooltip {
  --tooltip-zindex: 104;
  --tooltip-max-width: 200px;
  --tooltip-padding-x: 6px;
  --tooltip-padding-y: 3px;
  --tooltip-margin: ;
  --tooltip-font-size: var(--main-font-size-small);
  --tooltip-color: var(--main-color-white);
  --tooltip-bg: var(--main-color-black);
  --tooltip-border-radius: 5px;
  --tooltip-opacity: 0.9;
  --tooltip-arrow-width: 0.8rem;
  --tooltip-arrow-height: 0.4rem;
  z-index: var(--tooltip-zindex);
  display: block;
  margin: var(--tooltip-margin);
  font-family: var(--main-font-family);
  font-style: normal;
  font-weight: var(--main-font-weight);
  line-height: var(--main-line-height);
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--tooltip-arrow-width);
  height: var(--tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.tooltip-top .tooltip-arrow, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-top .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--tooltip-bg);
}

/* rtl:begin:ignore */
.tooltip-end .tooltip-arrow, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * var(--tooltip-arrow-height));
  width: var(--tooltip-arrow-height);
  height: var(--tooltip-arrow-width);
}
.tooltip-end .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-bottom .tooltip-arrow, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-bottom .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
  border-bottom-color: var(--tooltip-bg);
}

/* rtl:begin:ignore */
.tooltip-start .tooltip-arrow, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * var(--tooltip-arrow-height));
  width: var(--tooltip-arrow-height);
  height: var(--tooltip-arrow-width);
}
.tooltip-start .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--tooltip-arrow-width) * 0.5) 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
  border-left-color: var(--tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  color: var(--tooltip-color);
  text-align: center;
  background-color: var(--tooltip-bg);
  border-radius: var(--tooltip-border-radius);
}

/*
Share Links

Markup:
<div class="shareLinks">
    <a class="shareLink" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Facebook teilen">
        <i class="icon icon-facebook"></i>
        <span>Share on Facebook</span>
    </a>
    <a class="shareLink" href="https://www.pinterest.com/pin/create/link/?url=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Pinterest pinnen">
        <i class="icon icon-pinterest"></i>
        <span>Share on Pinterest</span>
    </a>
</div>

Styleguide Components.Share Links
*/
.shareLink {
  color: var(--main-color-black);
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 20px 10px 10px;
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
  cursor: pointer;
}
.shareLink:hover {
  text-decoration: none;
  color: var(--main-color-white);
  background: var(--main-link-color);
  border-color: var(--main-link-color);
}
.shareLink:focus, .shareLink:active {
  text-decoration: none;
  color: var(--main-color-white);
  background: var(--main-link-color-hover);
  border-color: var(--main-link-color-hover);
}
.shareLink .icon {
  margin-right: 5px;
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shareLink.is-loading, .shareLink.is-success, .shareLink.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.shareLink.is-loading {
  cursor: wait;
  color: var(--main-color-white) !important;
}
.shareLink.is-loading .icon:before {
  content: var(--base-icon-loading);
  animation: rotation 1s infinite ease-in-out;
}
.shareLink.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-white) !important;
}
.shareLink.is-success .icon:before {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.shareLink.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.shareLink.is-error .icon:before {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

.shareLinks {
  display: flex;
  flex-direction: column;
  margin-bottom: -10px;
}
.shareLinks .shareLink {
  margin-bottom: 10px;
}

/*
Custom Select

Markup:
<div class="customSelect js-customSelect {{modifier_class}}">
  <select>
    <option disabled selected>{{tc.please_choose}}</option>
    <option value="s">S</option>
    <option value="m">M</option>
    <option value="l">L</option>
    <option value="xl" disabled>XL</option>
    <option value="xxl">XXL</option>
  </select>
  <div class="customSelect__selected">Choose</div>
  <div class="customSelect__dropdown">
    <div class="customSelect__dropdownClose">
        <i class="icon icon-close"></i>
    </div>
    <div class="customSelect__dropdownHeader d-block d-sm-none">
        <div class="customSelect__dropdownTitle">
            Title
        </div>
    </div>
    <div class="customSelect__dropdownItem" data-value="s">
      <div class="customSelect__dropdownItemHeadline">S</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="m">
      <div class="customSelect__dropdownItemHeadline">M</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="l">
      <div class="customSelect__dropdownItemHeadline">L</div>
    </div>
    <div class="customSelect__dropdownItem disabled" data-value="xl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
      <div class="customSelect__dropdownItemText">Not available</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="xxl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
    </div>
  </div>
</div>

.is-loading - is loading
.is-success - is success
.is-error - is error
.customSelect--small - Small Custom Select
.customSelect--small.is-loading - Small Custom Select is loading
.customSelect--small.is-success - Small Custom Select is success
.customSelect--small.is-error - Small Custom Select is error

Styleguide Components.Custom Select
*/
.customSelect {
  position: relative;
  width: 100%;
}
.customSelect > label {
  margin-bottom: 10px;
}
.customSelect__selectedLabel {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  overflow: hidden;
}
.customSelect__selectedCount {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  font-size: 1.4rem;
  vertical-align: middle;
  margin-top: -2px;
  display: none;
  flex-shrink: 0;
}
.customSelect__selectedCount.is-active {
  display: inline-flex;
}
.customSelect__selected {
  padding-right: 48px;
  display: flex;
  align-items: center;
}
.customSelect__hiddenFormField {
  display: none;
}
.customSelect__dropdown {
  z-index: 2;
  background: var(--main-color-white);
  font-size: var(--main-font-size-small);
  overflow: hidden;
  flex-direction: column;
}
@media (max-width: 767px) {
  .customSelect__dropdown {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    padding: 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    translate: 0 110%;
    transition: 0.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
    z-index: 104;
    max-height: 100vh;
    max-height: 100svh;
  }
}
@media (min-width: 768px) {
  .customSelect__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: 300px;
    max-width: 100vw;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--main-color-black);
    border-radius: 0;
    margin-top: 5px;
    display: none;
  }
}
.customSelect__dropdownClose {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
@media (min-width: 768px) {
  .customSelect__dropdownClose {
    display: none;
  }
}
.customSelect__dropdownTitle {
  font-weight: var(--main-font-weight-bold);
  padding-right: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.8rem;
}
.customSelect__dropdownTitle:not(:last-child) {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .customSelect__dropdownTitle {
    display: none;
  }
}
.customSelect__dropdownHeader {
  padding: 10px;
  margin-bottom: 10px;
}
.customSelect__dropdownBody {
  overflow: hidden;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .customSelect__dropdownBody {
    max-height: 260px;
  }
}
.customSelect__dropdownFooter {
  margin-top: 10px;
  padding: 10px;
  padding-bottom: 15px;
  border-top: 1px solid var(--main-color-light-gray);
  text-align: center;
}
@media (max-width: 767px) {
  .customSelect__dropdownFooter {
    padding-bottom: 0;
  }
}
.customSelect__dropdownFooter .button, .customSelect__dropdownFooter .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .customSelect__dropdownFooter .orderButton {
  width: 100%;
  margin-bottom: 10px;
}
.customSelect__dropdownFooter .linkWithIcon {
  font-size: var(--main-font-size-small);
}
.customSelect__dropdownFooter .linkWithIcon .icon {
  margin: 0;
}
.customSelect__dropdownItemHeadline {
  font-weight: var(--main-font-weight-bold);
}
.customSelect__dropdownItemText {
  font-size: 0.9em;
  color: var(--main-color-dark-gray);
  padding-left: 20px;
}
.customSelect__dropdownItem {
  padding: 10px 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--main-color-black);
  text-decoration: none;
}
.customSelect__dropdownItem:hover {
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
  text-decoration: none;
}
.customSelect__dropdownItem.is-active {
  background: var(--main-color-light-gray);
}
.customSelect__dropdownItem.disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--main-color-middle-gray);
}
.customSelect__dropdownItem.disabled .customSelect__dropdownItemText {
  color: var(--main-color-middle-gray);
}
.customSelect__dropdownItem--radio, .customSelect__dropdownItem--checkbox {
  padding-left: 40px;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--radio:after, .customSelect__dropdownItem--checkbox:before, .customSelect__dropdownItem--checkbox:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--checkbox:before {
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
  background: var(--main-color-white);
}
.customSelect__dropdownItem--radio:after, .customSelect__dropdownItem--checkbox:after {
  opacity: 0;
}
.customSelect__dropdownItem--radio.is-active:before, .customSelect__dropdownItem--checkbox.is-active:before {
  border-color: var(--main-color-black);
}
.customSelect__dropdownItem--radio.is-active:after, .customSelect__dropdownItem--checkbox.is-active:after {
  opacity: 1;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--radio:after {
  border-radius: 50%;
}
.customSelect__dropdownItem--radio:after {
  background: var(--main-color-primary);
  width: 12px;
  height: 12px;
  margin-left: 2px;
  opacity: 0;
}
.customSelect__dropdownItem--checkbox:before {
  border-radius: 0;
}
.customSelect__dropdownItem--checkbox:after {
  content: " ";
  pointer-events: none;
  position: absolute;
  width: 12px;
  height: 12px;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  opacity: 0;
  border-radius: 0;
  transition: opacity 0.1s ease-in;
  background-color: var(--main-color-black);
  display: block;
}
.customSelect__dropdownItem--checkbox.is-active {
  background: transparent;
}
.customSelect__dropdownItem--checkbox.is-active:before {
  border-color: var(--main-color-black);
}
.customSelect__dropdownItem--checkbox.is-active:after {
  opacity: 1;
}
.customSelect select {
  display: none;
}
.customSelect.is-active .customSelect__selected {
  border-color: var(--main-color-primary);
}
.customSelect.is-active .customSelect__selected:after {
  content: var(--base-icon-angle-up);
}
.customSelect.is-active .customSelect__dropdown {
  display: flex;
}
@media (max-width: 767px) {
  .customSelect.is-active .customSelect__dropdown {
    translate: 0 0;
    pointer-events: auto;
    opacity: 1;
  }
}
.customSelect.is-loading .customSelect__selected, .customSelect.is-success .customSelect__selected, .customSelect.is-error .customSelect__selected {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
  padding-right: 40px;
  padding-left: 10px;
  position: relative;
}
.customSelect.is-loading .customSelect__selected .icon, .customSelect.is-success .customSelect__selected .icon, .customSelect.is-error .customSelect__selected .icon {
  opacity: 0;
}
.customSelect.is-loading .customSelect__selected:after, .customSelect.is-success .customSelect__selected:after, .customSelect.is-error .customSelect__selected:after {
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  transform: translateY(0);
  translate: 0 -50%;
  font-size: 24px;
  margin-top: 0;
}
.customSelect.is-loading .customSelect__selected {
  cursor: wait;
  color: var(--main-color-black) !important;
}
.customSelect.is-loading .customSelect__selected:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.customSelect.is-success .customSelect__selected {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-black) !important;
}
.customSelect.is-success .customSelect__selected:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect.is-error .customSelect__selected {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.customSelect.is-error .customSelect__selected:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect--small {
  width: auto;
  display: inline-flex;
}
.customSelect--small .customSelect__selected {
  padding: 0;
  padding-right: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.customSelect--small .customSelect__selected:after {
  font-size: 1.2rem;
  right: 0;
}
.customSelect--small.is-loading .customSelect__selected, .customSelect--small.is-success .customSelect__selected, .customSelect--small.is-error .customSelect__selected {
  padding-right: 20px;
  padding-left: 0;
}
.customSelect--small.is-loading .customSelect__selected:after, .customSelect--small.is-success .customSelect__selected:after, .customSelect--small.is-error .customSelect__selected:after {
  right: 0;
  font-size: 16px;
}
.customSelect--small.is-loading .customSelect__selected {
  cursor: wait;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-black) !important;
}
.customSelect--small.is-success .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-success) !important;
}
.customSelect--small.is-error .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-danger) !important;
}
.customSelect--openRight .customSelect__dropdown {
  left: auto;
  right: 0;
}
.customSelect--openTop .customSelect__dropdown {
  top: auto;
  bottom: 35px;
}

.viewer360Images img {
  user-drag: none;
  -webkit-user-drag: none;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center center;
}
.viewer360Images img:not(.is-active) {
  display: none;
}

.viewer360 {
  position: relative;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.viewer360__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: 0.4s ease-in-out;
  color: var(--main-color-dark-gray);
  line-height: 1;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25px;
  border-radius: 50%;
  background: var(--main-color-white);
  z-index: 1;
}
.viewer360__loader:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
  position: absolute;
  left: 50%;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -15px;
}
.viewer360.is-loading {
  cursor: wait;
  pointer-events: none;
}
.viewer360.loaded .viewer360__loader {
  opacity: 0;
  pointer-events: none;
}

.viewer360Wrapper {
  position: relative;
  pointer-events: none;
}
.viewer360Wrapper__zoom {
  font-size: 24px;
  color: var(--main-color-dark-gray);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--main-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
.viewer360Wrapper__zoom:hover, .viewer360Wrapper__zoom:focus, .viewer360Wrapper__zoom:active {
  color: var(--main-color-primary);
}
.viewer360Wrapper:has(.viewer360.loaded) {
  pointer-events: auto;
}
.viewer360Wrapper:has(.viewer360.loaded) .viewer360Wrapper__zoom {
  opacity: 1;
  pointer-events: auto;
}

.fullscreenGallery .viewer360Images {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fullscreenGallery .viewer360Images img {
  position: absolute;
  width: 100%;
  height: 100% !important;
}

/*
Contentbox

Markup:
<div class="contentBox {{modifier_class}}">
  <div class="contentImage">
    <img alt="" src="/userdata/images/muster/400x300.png" style="width: 400px; height: 300px;">
  </div>
  <div class="contentText">
    <h3>Headline</h3>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  </div>
</div>

.reverse - Reverse
.contentBox--textinbox - Text in Box

//Styleguide Components.Contentbox
*/
.contentBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  color: var(--main-color-black);
  text-decoration: none;
}
@media (min-width: 768px) {
  .contentBox {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}
.contentBox .contentImage {
  max-width: 100%;
  width: 100%;
  background-color: var(--main-color-white);
  overflow: hidden;
}
.contentBox .contentImage img {
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: 0.2s ease-in-out;
  display: block;
  min-width: 100%;
}
.contentBox .contentText {
  padding: 30px;
  flex-grow: 1;
  display: flex;
}
.contentBox .contentText .textcontent {
  width: 100%;
}
@container containerRowColumn (min-inline-size: 600px) {
  .contentBox {
    flex-direction: row;
  }
  .contentBox .contentImage {
    width: 50%;
    flex-shrink: 0;
    display: flex;
  }
  .contentBox .contentImage > .textcontent {
    display: flex;
  }
  .contentBox .contentImage img {
    min-height: 100%;
  }
  .contentBox.reverse {
    flex-direction: row-reverse;
  }
}
.contentBox > .link {
  color: var(--main-color-black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
@container containerRowColumn (min-inline-size:600px) {
  .contentBox > .link {
    flex-direction: row;
  }
}
.contentBox > .link:hover, .contentBox > .link:focus, .contentBox > .link:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.contentBox > .link:hover .contentImage img, .contentBox > .link:focus .contentImage img, .contentBox > .link:active .contentImage img {
  scale: 1.05;
}
a.contentBox {
  color: var(--main-color-black);
  text-decoration: none;
}
a.contentBox:hover, a.contentBox:focus, a.contentBox:active {
  color: var(--main-color-black);
  text-decoration: none;
}
a.contentBox:hover .contentImage img, a.contentBox:focus .contentImage img, a.contentBox:active .contentImage img {
  scale: 1.05;
}

.contentBox.hasLink > .link {
  cursor: pointer;
  color: var(--main-color-black);
}
.contentBox.hasLink > .link:hover, .contentBox.hasLink > .link:focus, .contentBox.hasLink > .link:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.contentBox.hasLink > .link:hover .contentImage img, .contentBox.hasLink > .link:focus .contentImage img, .contentBox.hasLink > .link:active .contentImage img {
  scale: 1.05;
}

.contentBox.contentBox--textinbox {
  position: relative;
  color: var(--main-color-white);
  border-radius: 0;
}
.contentBox.contentBox--textinbox .contentText {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 15px;
  z-index: 1;
}
@media (min-width: 768px) {
  .contentBox.contentBox--textinbox .contentText {
    padding: 30px;
  }
}
.contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .itemcardHeadline, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
  line-height: 1.1;
  font-weight: normal;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .itemcardHeadline, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .itemcardHeadline, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .itemcardHeadline, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
    font-size: 3rem;
  }
}
.contentBox.contentBox--textinbox .contentText h2:last-child, .contentBox.contentBox--textinbox .contentText .h2:last-child, .contentBox.contentBox--textinbox .contentText .itemcardHeadline:last-child, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline:last-child {
  margin-bottom: 0;
}
.contentBox.contentBox--textinbox .contentText a {
  color: var(--main-color-white);
}
.contentBox.contentBox--textinbox .contentText .buttonLink:after {
  background: var(--main-color-white);
}
.contentBox.contentBox--textinbox .contentImage img {
  aspect-ratio: auto;
}
.contentBox.contentBox--textinbox.hasLink > .link {
  color: var(--main-color-white);
}
.contentBox.contentBox--textinbox.hasLink > .link:hover, .contentBox.contentBox--textinbox.hasLink > .link:focus, .contentBox.contentBox--textinbox.hasLink > .link:active {
  color: var(--main-color-white);
}

a.contentBox.contentBox--textinbox:hover, a.contentBox.contentBox--textinbox:focus, a.contentBox.contentBox--textinbox:active {
  color: var(--main-color-white);
}

.emptybox {
  padding: 20px;
  background-color: var(--main-color-light-gray);
}
@media (min-width: 1024px) {
  .emptybox {
    padding: 30px;
  }
}

.flashMessage {
  width: 400px;
  max-width: calc(100% - 40px);
  padding: 15px 20px 15px 55px;
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  align-items: center;
  display: flex;
  cursor: pointer;
  position: fixed;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  font-size: var(--main-font-size-small);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  left: 50%;
  bottom: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
  z-index: 109;
}
.flashMessage.is-active {
  pointer-events: auto;
}
.flashMessage__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--main-color-light-gray);
  text-align: center;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  translate: 0 -50%;
  color: var(--main-color-black);
}
.flashMessage__icon .icon {
  display: block;
  line-height: 1;
}
.flashMessage__close {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--main-font-size-base);
  width: 20px;
  height: 20px;
  transition: 0.2s ease-in;
  background: var(--main-color-white);
  border-radius: 50%;
  color: var(--main-color-black);
}
.flashMessage__close .icon {
  display: block;
  line-height: 1;
  transition: scale 0.2s ease-in;
}
.flashMessage__close:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.flashMessage__msg:not(:last-child) {
  padding-bottom: 2px;
  margin-bottom: 2px;
}
.flashMessage--warning .flashMessage__icon {
  background: var(--main-color-warning);
  background: var(--main-color-warning-contrast);
}
.flashMessage--error .flashMessage__icon {
  background: var(--main-color-danger);
  color: var(--main-color-danger-contrast);
}
.flashMessage--success .flashMessage__icon {
  background: var(--main-color-success);
  color: var(--main-color-success-contrast);
}

/*
Breadcrumb

Markup:
<nav aria-label="Breadcrumb" aria-hidden="true" class="breadcrumbWrapper">
  <ul class="breadcrumb">
    <li>
    <a href="#">Level 1</a>
    </li>
    <i class="icon icon-angle-right"></i>
    <li>
    <a href="#">Level 2</a>
    </li>
    <i class="icon icon-angle-right"></i>
    <li aria-current="page" class="current">
    <span>Current</span>
    </li>
  </div>
  <a class="breadcrumbBackbutton" href="#"><i class="icon icon-angle-left"></i>Back</a>
</div>

Styleguide Components.Breadcrumb
*/
.breadcrumb {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
  }
}
.breadcrumb li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.breadcrumb i {
  margin: 0 4px;
}
.breadcrumb a i {
  display: block;
  margin: 0;
  font-size: 1.2em;
}
.breadcrumbBackbutton {
  color: var(--main-color-black);
  display: inline-flex;
  align-items: center;
}
.breadcrumbBackbutton:hover {
  color: var(--main-link-color-hover);
  text-decoration: none;
}
.breadcrumbBackbutton i {
  margin-right: 4px;
}
@media (max-width: 1023px) {
  .breadcrumbBackbutton {
    margin-top: 10px;
  }
}

.breadcrumbWrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: var(--main-font-size-medium);
  line-height: 1;
}
@media (min-width: 1024px) {
  .breadcrumbWrapper {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.breadcrumbWrapper a {
  color: var(--main-color-black);
  text-decoration: none;
}
.breadcrumbWrapper a:hover {
  color: var(--main-link-color-hover);
  text-decoration: none;
}

.breadcrumbWrapper {
  margin-top: 20px;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .breadcrumbWrapper {
    margin-bottom: 20px;
  }
}

/*
Toggle Navigation

Markup:
<div class="navToggler {{modifier_class}}">
  <div class="navToggler__bar"></div>
  <div class="navToggler__bar"></div>
  <div class="navToggler__bar"></div>
</div>

.is-active - Active Class

Styleguide Navigations.Toggle Navigation
*/
.navToggler {
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
}
.navToggler__bar {
  width: 100%;
  height: 1px;
  background-color: var(--main-color-black);
  border-radius: 0;
  position: absolute;
  left: 7px;
  width: calc(100% - 14px);
  width: -moz-calc(100% - 14px);
  width: -webkit-calc(100% - 14px);
  width: -o-calc(100% - 14px);
  transition: 0.2s linear;
}
.navToggler__bar:first-child {
  top: 10px;
}
.navToggler__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.navToggler__bar:last-child {
  bottom: 10px;
}
.navToggler.is-active .navToggler__bar:first-child {
  rotate: 45deg;
  top: 19px;
}
.navToggler.is-active .navToggler__bar:nth-child(2) {
  height: 0;
  width: 0;
  left: 50%;
}
.navToggler.is-active .navToggler__bar:last-child {
  rotate: -45deg;
  bottom: 19px;
}

.headerNavToggler__container {
  cursor: pointer;
}
.headerNavToggler__container:hover {
  color: var(--main-link-color-hover);
}
.headerNavToggler__container:hover .navToggler .navToggler__bar {
  background-color: var(--main-link-color-hover);
}

.headerNavToggler__container.is-active .navToggler .navToggler__bar:first-child {
  rotate: 45deg;
  top: 19px;
}
.headerNavToggler__container.is-active .navToggler .navToggler__bar:nth-child(2) {
  height: 0;
  width: 0;
  left: 50%;
}
.headerNavToggler__container.is-active .navToggler .navToggler__bar:last-child {
  rotate: -45deg;
  bottom: 19px;
}

.scrollTopButton {
  position: fixed;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 101;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background-color: var(--main-color-white);
  opacity: 0.8;
  color: var(--main-color-primary-contrast);
  text-align: center;
  cursor: pointer;
  right: -50px;
  bottom: 120px;
  border-radius: 50%;
  padding: 4px;
  border: none;
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -ms-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
}
@media (min-width: 768px) {
  .scrollTopButton {
    bottom: 100px;
  }
}
.scrollTopButton:hover, .scrollTopButton:focus {
  background-color: var(--main-color-primary);
  border: none;
}
.scrollTopButton.sticky {
  right: 25px;
}

.navChildrenToggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navChildrenToggle:after {
  content: var(--base-icon-plus);
  font-family: "icons", Helvetica, Arial, sans-serif;
}
.navChildrenToggle.is-active:after {
  content: var(--base-icon-minus);
}

/*
Nav

Markup:
<nav class="nav">
  <ul>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>

Styleguide Navigations.Nav
*/
.nav {
  display: flex;
  flex-wrap: nowrap;
}
.nav ul {
  margin: 0;
  padding: 0;
}
.nav li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.nav a {
  color: var(--main-color-black);
  text-decoration: none;
}
.nav a:hover, .nav a:focus, .nav a:active, .nav a.active, .nav a.active_tree {
  color: var(--main-link-color-hover);
}
.nav li:hover > a, .nav li:focus > a, .nav li:active > a, .nav li.active > a, .nav li.active_tree > a {
  color: var(--main-link-color-hover);
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
@media (min-width: 768px) {
  .nav ul {
    margin-left: -15px;
    margin-right: -15px;
  }
}
.nav ul > li {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .nav ul > li {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.nav > a {
  margin-right: 20px;
}
@media (min-width: 768px) {
  .nav > a {
    margin-right: 30px;
  }
}

.megaMenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 101;
  background: var(--main-color-light-gray);
  width: 100%;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
  padding-top: 10px;
  padding-bottom: 30px;
}
.megaMenu a {
  font-weight: var(--main-font-weight-medium);
  display: block;
}
.megaMenu .link--underlined:hover {
  color: var(--main-link-color-hover);
  text-decoration-color: var(--main-link-color-hover);
}
.megaMenu__navigation > ul {
  width: 100%;
  column-count: 2;
  column-gap: 32px;
}
.megaMenu__navigation > ul:has(> li:nth-child(13)) {
  column-count: 3;
}
.megaMenu__navigation > ul > li {
  margin-bottom: 12px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.megaMenu__navigation > ul > li > a {
  font-weight: var(--main-font-weight-medium);
  font-size: var(--main-font-size-base);
}
@media (min-width: 1540px) {
  .megaMenu__navigation > ul > li > a {
    font-size: 2.4rem;
  }
}
.megaMenu .container {
  font-size: 2.4rem;
  display: flex;
  padding-top: 20px;
}
.megaMenu .container .megaMenu__navigation {
  flex-grow: 1;
}
.megaMenu .container .megaMenu__content {
  flex-shrink: 0;
  padding-left: 14px;
  width: 33.33%;
  display: none;
}
@media (min-width: 1024px) {
  .megaMenu .container .megaMenu__content {
    display: block;
  }
}

/*
Subnav

Markup:
<nav class="subnav">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="is-active">
      <a href="#">Level 1</a>
      <ul>
        <li class="is-active">
          <a class="is-active" href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
        <li class="active">
          <a href="#" class="is-active">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Styleguide Navigations.Subnav
*/
.subnav {
  font-size: var(--main-font-size-base);
}
.subnav ul {
  margin: 0;
  padding: 5px 0;
}
.subnav ul:last-child {
  padding-bottom: 0;
}
.subnav li {
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
}
.subnav li:last-child {
  padding-bottom: 0;
}
.subnav li:not(.is-active) > ul {
  display: none;
}
.subnav a {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-medium);
  text-decoration: none;
  position: relative;
}
.subnav a:hover {
  color: var(--main-link-color-hover);
  text-decoration: none;
}
.subnav > ul {
  padding: 0;
}
.subnav > ul > li {
  padding-bottom: 10px;
}
.subnav > ul ul {
  margin-left: 20px;
  padding-top: 10px;
}
.subnav > ul ul a:before {
  content: var(--base-icon-angle-right);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translate(-20px, -50%);
  width: 20px;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.subnav > ul ul a:hover:before, .subnav > ul ul a.is-active:before {
  opacity: 1;
  transform: translate(0, -50%);
}

/*
Navgroup

Markup:
<nav class="navgroup {{modifier_class}}">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li class="is-active-tree">
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li class="is-active">
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.navgroup--col-2 - 2 Columns
.navgroup--col-3 - 3 Columns
.navgroup--col-4 - 4 Columns
.navgroup--col-5 - 5 Columns
.navgroup--collapse-mobile - Collapse Mobile

Styleguide Navigations.Navgroup
*/
.navgroup {
  margin-bottom: -15px;
}
.navgroup li > span,
.navgroup a {
  color: var(--main-color-black);
  display: block;
  margin-bottom: 15px;
  text-decoration: none;
}
.navgroup a:hover, .navgroup a:focus, .navgroup a:active {
  color: var(--main-link-color-hover);
  text-decoration: none;
}
.navgroup li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.navgroup li:hover > a {
  color: var(--main-link-color-hover);
}
.navgroup ul {
  margin: 0;
  padding: 0;
}
.navgroup > ul > li > span,
.navgroup > ul > li > a {
  font-weight: var(--main-font-weight-bold);
}
.navgroup--col-2 > ul, .navgroup--col-3 > ul, .navgroup--col-4 > ul, .navgroup--col-5 > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -20px;
}
.navgroup--col-2 > ul > li, .navgroup--col-3 > ul > li, .navgroup--col-4 > ul > li, .navgroup--col-5 > ul > li {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .navgroup--col-2 > ul > li {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-3 > ul > li {
    width: 33.3333333333%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-4 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-4 > ul > li {
    width: 25%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-5 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-5 > ul > li {
    width: 25%;
  }
}
@media (min-width: 1250px) {
  .navgroup--col-5 > ul > li {
    width: 20%;
  }
}
@media (max-width: 767px) {
  .navgroup--collapse-mobile a {
    margin-bottom: 10px;
    line-height: 30px;
  }
  .navgroup--collapse-mobile li.hasChildren > a,
  .navgroup--collapse-mobile li.hasChildren > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navgroup--collapse-mobile > ul {
    margin-left: 0;
    margin-right: 0;
  }
  .navgroup--collapse-mobile > ul > li {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--main-color-middle-gray);
  }
  .navgroup--collapse-mobile > ul > li > ul {
    display: none;
  }
  .navgroup--collapse-mobile > ul > li.open > ul {
    display: block;
  }
}

/*
Mainnav

Markup:
<nav class="mainnav">
  <ul>
    <li class="is-active">
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
  <span class="mainnav__seperator"></span>
  <ul>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>

Styleguide Navigations.Mainnav
*/
.mainnav {
  display: flex;
  align-items: center;
}
.mainnav__seperator {
  width: 1px;
  height: 27px;
  background: var(--main-color-gray-base);
  display: block;
  margin-left: 18px;
  margin-right: 18px;
}
@media (min-width: 1250px) {
  .mainnav__seperator {
    margin-left: 24px;
    margin-right: 24px;
  }
}
.mainnav ul {
  margin: 0;
  padding: 0;
}
.mainnav li {
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
}
.mainnav a {
  color: var(--main-color-text-base);
  text-decoration: none;
}
.mainnav li:hover > a, .mainnav li:focus > a, .mainnav li:active > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.mainnav li.is-active > a, .mainnav li.is-active-tree > a, .mainnav li.active_tree > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.mainnav li.is-active:hover > a, .mainnav li.is-active:focus > a, .mainnav li.is-active:active > a, .mainnav li.is-active-tree:hover > a, .mainnav li.is-active-tree:focus > a, .mainnav li.is-active-tree:active > a, .mainnav li.active_tree:hover > a, .mainnav li.active_tree:focus > a, .mainnav li.active_tree:active > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.mainnav > ul {
  display: flex;
  gap: 2px;
  font-size: 1.5rem;
  width: 100%;
  justify-content: space-between;
}
@media (min-width: 1540px) {
  .mainnav > ul {
    font-size: var(--main-font-size-base);
    gap: 18px;
  }
}
@media (min-width: 1700px) {
  .mainnav > ul {
    gap: 24px;
    font-size: 2rem;
  }
}
.mainnav > ul > li > a {
  font-weight: var(--main-font-weight-bold);
  position: relative;
  display: block;
}
.mainnav > ul > li > a:after {
  content: "";
  width: 100%;
  height: 0;
  background: transparent;
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
}
.mainnav > ul.nav--content > li > a {
  font-weight: var(--main-font-weight);
}
.mainnav > ul.nav--showMore {
  margin-left: 18px;
}
@media (min-width: 1540px) {
  .mainnav > ul.nav--showMore {
    margin-left: 24px;
  }
}
.mainnav > ul > li.hoverintent .megaMenu,
.mainnav > ul > li.hoverintent > ul {
  display: block;
}

.loadingScreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 108;
  padding: 30px;
  font-size: 20px;
  font-weight: var(--main-font-weight-bold);
  background-color: var(--main-color-white);
  transition: 0.2s ease-in-out;
  background: linear-gradient(253deg, var(--main-color-white), var(--main-color-gray-base));
  background-size: 400% 400%;
  animation: loadingScreenGradient 3s ease infinite;
  pointer-events: none;
}
.loadingScreen__icon {
  font-size: 120px;
  font-weight: normal;
  animation: rotation 1s infinite linear;
}

@keyframes loadingScreenGradient {
  0%, 100% {
    background-position: 0 87%;
  }
  50% {
    background-position: 100% 14%;
  }
}
body.is-loading-screen {
  overflow: hidden;
}

/*
Actionbox

Markup:
<div class="actionBox">
  Text
</div>

Styleguide Components.Actionbox
*/
.actionBox {
  padding: 30px;
  background-color: var(--main-color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) {
  .actionBox {
    padding: 60px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  }
}

/*
Max Height Content

Markup:
<div class="maxHeightContent js-maxHeightContent" data-button-foldout="read more" data-button-foldin="fold in">
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
  </div>
</div>

Styleguide Components.Max Height Content
*/
.maxHeightContent {
  max-height: 40vh;
  max-height: 40svh;
  overflow: hidden;
  position: relative;
}
.maxHeightContent__buttonWrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background: linear-gradient(0deg, rgb(255, 255, 255) 20px, rgba(255, 255, 255, 0.5) 60px, rgba(255, 255, 255, 0) 100%);
  padding-top: 40px;
}
.maxHeightContent__button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  line-height: 1;
}
.maxHeightContent__button:before {
  content: "+";
}
.maxHeightContent.is-open {
  max-height: none;
  padding-bottom: 60px;
}
.maxHeightContent.is-open .maxHeightContent__button:before {
  content: "-";
}
.maxHeightContent:not(.is-active) .maxHeightContent__buttonWrapper {
  display: none;
}

.ticker {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ticker__content {
  display: inline-block;
  animation: ticker 24s linear infinite;
}
@media (min-width: 768px) {
  .ticker__content {
    animation: ticker 30s linear infinite;
  }
}
.ticker__content span {
  display: inline-block;
  font-size: 12rem;
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: var(--main-font-weight-black);
  color: var(--main-color-yellow-light);
  line-height: 1;
}
@media (min-width: 768px) {
  .ticker__content span {
    font-size: 18rem;
    margin-right: 30px;
  }
}
@media (min-width: 1250px) {
  .ticker__content span {
    font-size: 26rem;
    margin-right: 120px;
  }
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.contentTabs__header {
  display: flex;
  margin: 0;
  padding: 0;
}
.contentTabs__header li {
  margin: 0;
  padding: 0 15px;
  list-style-type: none;
  text-align: center;
  cursor: pointer;
  border-right: 1px solid var(--main-color-black);
  font-size: 2rem;
  font-weight: var(--main-font-weight-medium);
}
@media (min-width: 768px) {
  .contentTabs__header li {
    flex-grow: 1;
  }
}
.contentTabs__header li:first-child {
  padding-left: 0;
}
.contentTabs__header li:last-child {
  border-right: 0;
}
.contentTabs__header li:hover {
  color: var(--main-color-dark-gray);
}
.contentTabs__header li.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.contentTabs__headerWrapper {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
@media (min-width: 768px) {
  .contentTabs__headerWrapper {
    flex-direction: row;
    align-items: center;
    gap: 70px;
  }
}
.contentTabs__headerWrapper h1, .contentTabs__headerWrapper h2, .contentTabs__headerWrapper h3, .contentTabs__headerWrapper h4, .contentTabs__headerWrapper h5, .contentTabs__headerWrapper h6,
.contentTabs__headerWrapper .h1, .contentTabs__headerWrapper .h2, .contentTabs__headerWrapper .itemcardHeadline, .contentTabs__headerWrapper .orderboxSummary__headline, .contentTabs__headerWrapper .h3, .contentTabs__headerWrapper .h4, .contentTabs__headerWrapper .h5, .contentTabs__headerWrapper .h6 {
  margin-bottom: 0;
}
.contentTabs__content {
  padding-block: 30px;
}
.contentTabs__content > * {
  display: none;
}
.contentTabs__content > *.is-active {
  display: block;
}
.contentTabs:not(.initialized) .contentTabs__content > *:first-child {
  display: block;
}

.contactPerson__img {
  margin-bottom: 24px;
}
.contactPerson__content {
  font-size: 1.8rem;
  line-height: 1.7;
}
.contactPerson__content .text-uppercase {
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.contactPerson__content a {
  color: var(--main-color-black);
}
.contactPerson__content a:hover, .contactPerson__content a:focus, .contactPerson__content a:active {
  color: var(--main-link-color-hover);
}
.contactPerson__content a[href^="mailto:"] {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 4.23px;
}

/*
Banner

Markup:
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>

.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right

//Styleguide Siteparts.Banner
*/
.banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 3rem;
}
@media (min-width: 1024px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
    font-size: 3.7rem;
  }
}

.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText .itemcardHeadline:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText__text {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.8rem;
}
@media (min-width: 1024px) {
  .banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText .itemcardHeadline:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText__text {
    font-size: 2.4rem;
  }
}

.banner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.banner .contentImage {
  display: flex;
  width: 100%;
  flex-grow: 1;
  height: 100%;
}
.banner .contentImage .textcontent {
  width: 100%;
}
.banner .contentImage video,
.banner .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 100%;
  width: 100%;
  height: 100% !important;
  max-width: none;
  max-height: none;
  flex: 1;
}
@media (max-width: 767px) {
  .banner .contentImage {
    aspect-ratio: 1;
    max-height: 380px;
  }
}
.banner .contentText {
  color: var(--main-color-white);
}
.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText .itemcardHeadline:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted) {
  margin-bottom: 10px;
}
.banner .contentText h3:not(.highlighted), .banner .contentText .h3:not(.highlighted) {
  margin-bottom: 10px;
}
.banner .contentText h1:last-child, .banner .contentText .h1:last-child,
.banner .contentText h2:last-child, .banner .contentText .h2:last-child, .banner .contentText .itemcardHeadline:last-child, .banner .contentText .orderboxSummary__headline:last-child,
.banner .contentText h3:last-child, .banner .contentText .h3:last-child {
  margin-bottom: 0;
}
.banner .contentText .buttonLink {
  color: var(--main-color-white);
}
.banner .contentText .buttonLink:after {
  background: var(--main-color-white);
}
.banner .contentText .textcontent {
  width: 100%;
}
@media (min-width: 768px) {
  .banner .contentText .textcontent {
    width: 50%;
  }
}
.banner .contentText .infieldInputGroup {
  color: var(--main-color-black);
}
.banner .contentText.color--black {
  color: var(--main-color-black);
}
.banner .contentText.color--black .buttonLink {
  color: var(--main-color-black);
}
.banner .contentText.color--black .buttonLink:after {
  background: var(--main-color-black);
}
.banner .contentText {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 36px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1250px) {
  .banner .contentText {
    padding: 72px;
  }
}
.banner .contentText.contentText--left {
  align-items: flex-start;
}
.banner .contentText.contentText--right {
  align-items: flex-end;
}
.banner .contentText.contentText--vertTop {
  justify-content: flex-start;
}
.banner .contentText.contentText--vertBottom {
  justify-content: flex-end;
}
.banner.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner {
  color: var(--main-color-black);
}
/*
Banner with Textbox

Markup:
<a class="banner2" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>

.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right

//Styleguide Siteparts.Banner with Textbox
*/
.banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 3rem;
}
@media (min-width: 1024px) {
  .banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  .banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
    font-size: 3.7rem;
  }
}

.banner2 .contentText h2:not(.highlighted), .banner2 .contentText .h2:not(.highlighted), .banner2 .contentText .itemcardHeadline:not(.highlighted), .banner2 .contentText .orderboxSummary__headline:not(.highlighted), .banner2 .contentText__text {
  margin-top: 0;
  margin-bottom: 30px;
}

.banner2 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.banner2 .contentImage {
  display: flex;
  width: 100%;
}
.banner2 .contentImage .textcontent {
  width: 100%;
}
.banner2 .contentImage video,
.banner2 .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 100%;
}
@media (max-width: 1023px) {
  .banner2 .contentImage {
    aspect-ratio: 16/8;
  }
  .banner2 .contentImage video,
  .banner2 .contentImage img {
    height: 100% !important;
  }
}
@media (max-width: 767px) {
  .banner2 .contentImage {
    aspect-ratio: 4/3;
    max-height: 380px;
  }
}
.banner2 .contentText h2:not(.highlighted), .banner2 .contentText .h2:not(.highlighted), .banner2 .contentText .itemcardHeadline:not(.highlighted), .banner2 .contentText .orderboxSummary__headline:not(.highlighted) {
  font-weight: normal;
  margin-bottom: clamp(10px, 0.5em, 10px);
}
.banner2 .contentText h3:not(.highlighted), .banner2 .contentText .h3:not(.highlighted) {
  margin-bottom: 10px;
}
.banner2 .contentText h1:last-child, .banner2 .contentText .h1:last-child,
.banner2 .contentText h2:last-child, .banner2 .contentText .h2:last-child, .banner2 .contentText .itemcardHeadline:last-child, .banner2 .contentText .orderboxSummary__headline:last-child,
.banner2 .contentText h3:last-child, .banner2 .contentText .h3:last-child {
  margin-bottom: 0;
}
.banner2 .contentText .textcontent {
  width: 100%;
  background: var(--main-color-white);
  padding: 20px 0;
  color: var(--main-color-black);
}
@media (min-width: 768px) {
  .banner2 .contentText .textcontent {
    width: 50%;
    padding: 30px;
  }
}
@media (min-width: 1024px) {
  .banner2 .contentText .textcontent {
    max-width: 500px;
    padding: 40px;
  }
}
.banner2 .contentText {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .banner2 .contentText {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 36px;
  }
}
@media (min-width: 1250px) {
  .banner2 .contentText {
    padding: 72px;
  }
}
@media (min-width: 1540px) {
  .banner2 .contentText {
    padding: 72px 144px;
  }
}
.banner2 .contentText.contentText--left {
  align-items: flex-start;
}
.banner2 .contentText.contentText--right {
  align-items: flex-end;
}
.banner2 .contentText.contentText--vertTop {
  justify-content: flex-start;
}
.banner2 .contentText.contentText--vertBottom {
  justify-content: flex-end;
}
.banner2.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner2 {
  color: var(--main-color-black);
  text-decoration: none;
}
/*
Banner with Textbox Type 2

Markup:
<a class="banner3" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>

.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right

//Styleguide Siteparts.Banner with Textbox Type 2
*/
.banner3 .contentText h1:not(.highlighted), .banner3 .contentText .h1:not(.highlighted), .banner3 .contentText__headline {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 3rem;
}
@media (min-width: 1024px) {
  .banner3 .contentText h1:not(.highlighted), .banner3 .contentText .h1:not(.highlighted), .banner3 .contentText__headline {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  .banner3 .contentText h1:not(.highlighted), .banner3 .contentText .h1:not(.highlighted), .banner3 .contentText__headline {
    font-size: 4.7rem;
  }
}

.banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .itemcardHeadline:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted), .banner3 .contentText__text {
  font-size: 2rem;
}
@media (min-width: 1024px) {
  .banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .itemcardHeadline:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted), .banner3 .contentText__text {
    font-size: 2.4rem;
  }
}
@media (min-width: 1250px) {
  .banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .itemcardHeadline:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted), .banner3 .contentText__text {
    font-size: 3rem;
  }
}

.banner3 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  background: var(--main-color-black);
  color: var(--main-color-white);
}
@media (min-width: 768px) {
  .banner3 {
    flex-direction: row;
  }
}
.banner3 .contentImage {
  display: flex;
  width: 100%;
}
@media (min-width: 768px) {
  .banner3 .contentImage {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .banner3 .contentImage {
    width: 60%;
  }
}
.banner3 .contentImage .textcontent {
  width: 100%;
}
.banner3 .contentImage video,
.banner3 .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 100%;
  aspect-ratio: 5/3;
}
@media (min-width: 1024px) {
  .banner3 .contentImage video,
  .banner3 .contentImage img {
    aspect-ratio: 1232/520;
  }
}
.banner3 .contentText {
  padding: 30px 20px;
  display: flex;
  align-items: flex-end;
  flex-grow: 1;
}
@media (min-width: 768px) {
  .banner3 .contentText {
    padding: 30px;
  }
}
@media (min-width: 1024px) {
  .banner3 .contentText {
    padding: 40px;
  }
}
@media (min-width: 1250px) {
  .banner3 .contentText {
    padding: 60px;
  }
}
.banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .itemcardHeadline:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted) {
  font-weight: normal;
  margin-bottom: clamp(10px, 0.5em, 10px);
}
.banner3 .contentText h3:not(.highlighted), .banner3 .contentText .h3:not(.highlighted) {
  margin-bottom: 10px;
}
.banner3 .contentText h1:last-child, .banner3 .contentText .h1:last-child,
.banner3 .contentText h2:last-child, .banner3 .contentText .h2:last-child, .banner3 .contentText .itemcardHeadline:last-child, .banner3 .contentText .orderboxSummary__headline:last-child,
.banner3 .contentText h3:last-child, .banner3 .contentText .h3:last-child {
  margin-bottom: 0;
}
.banner3.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner3 {
  color: var(--main-color-white);
  text-decoration: none;
}
/*
Slideshow

Markup:
<div class="slideshow swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a class="banner" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
    <div class="swiper-slide">
      <a class="banner" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

.slideshow--arrows-outside - Arrows Outside

//Styleguide Siteparts.Slideshow
*/
.slideshow.swiper .swiper-button-prev,
.slideshow.swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  font-size: 36px;
  color: var(--main-color-white);
  scale: 1;
  transition: 0.2s ease-in-out;
}
.slideshow.swiper .swiper-button-prev:hover, .slideshow.swiper .swiper-button-prev:focus, .slideshow.swiper .swiper-button-prev:active,
.slideshow.swiper .swiper-button-next:hover,
.slideshow.swiper .swiper-button-next:focus,
.slideshow.swiper .swiper-button-next:active {
  scale: 1.4;
}
.slideshow.swiper .swiper-button-prev {
  left: 10px;
}
.slideshow.swiper .swiper-button-next {
  right: 10px;
}
@media (min-width: 1520px) {
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev,
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
    color: var(--main-color-black);
  }
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
    left: -50px;
  }
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
    right: -50px;
  }
}

.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev,
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
  color: var(--main-color-white);
}
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
  left: 10px;
}
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
  right: 10px;
}

/*
Slideshow 3

Markup:
<div class="slideshow slideshow3 swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a class="banner3" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
    <div class="swiper-slide">
      <a class="banner3" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
  </div>
  <div class="swiper-pagination swiper-pagination-vertical"></div>
</div>

//Styleguide Siteparts.Slideshow 3
*/
.slideshow--3.swiper .swiper-slide {
  display: flex;
}
.slideshow--3.swiper .swiper-pagination {
  position: absolute;
  z-index: 1;
  left: auto;
  right: 10px;
  bottom: 0;
  width: auto;
  margin: 0;
}
@media (min-width: 768px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 15px;
    top: 50%;
    bottom: auto;
  }
}
@media (min-width: 1024px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 30px;
  }
}
@media (min-width: 1250px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 40px;
  }
}
.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet {
  background: var(--main-color-white);
  opacity: 1;
  border: 1px solid var(--main-color-white);
}
.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: transparent;
}

/*
Bannergroup

Markup:
<div class="bannerGroup">
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
</div>

//Styleguide Siteparts.Bannergroup
*/
@media (min-width: 768px) {
  .bannerGroup {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(auto, 280px));
    gap: 20px;
    grid-template-areas: "banner1 banner1 banner1 banner1 banner1 banner1" "banner2 banner2 banner2 banner3 banner3 banner3";
  }
}
@media (min-width: 1024px) {
  .bannerGroup {
    grid-template-areas: "banner1 banner1 banner1 banner1 banner2 banner2" "banner1 banner1 banner1 banner1 banner3 banner3";
  }
}
.bannerGroup .banner {
  display: flex;
  margin-bottom: 20px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .bannerGroup .banner {
    margin-bottom: 0;
  }
}
.bannerGroup .banner > .link {
  display: flex;
  width: 100%;
}
.bannerGroup .banner .contentImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.bannerGroup .banner .contentText {
  padding: 20px;
}
@media (min-width: 1250px) {
  .bannerGroup .banner .contentText {
    padding: 30px;
  }
}
.bannerGroup .banner .contentText .textcontent {
  width: 100%;
}
.bannerGroup .banner .contentText .textcontent p:last-child {
  margin-bottom: 0;
}
.bannerGroup .banner:first-child {
  grid-area: banner1;
}
@media (min-width: 1024px) {
  .bannerGroup .banner:not(:first-child) .contentImage {
    position: relative;
    width: 100%;
  }
  .bannerGroup .banner:not(:first-child) .contentImage img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .bannerGroup .banner:nth-child(2) .contentImage, .bannerGroup .banner:nth-child(3) .contentImage {
    aspect-ratio: 16/9;
  }
}
.bannerGroup .banner:nth-child(2) {
  grid-area: banner2;
}
.bannerGroup .banner:nth-child(3) {
  grid-area: banner3;
}

.dcCookieBar {
  position: fixed;
  left: 0;
  bottom: 0;
  line-height: 1.3;
  width: 100%;
  min-width: 320px;
  box-shadow: 0 0 10px black;
  z-index: 6000;
  padding: 15px;
  padding-left: 90px;
  background-color: var(--main-color-white);
  font-size: var(--main-font-size-base);
  color: var(--main-color-black);
  box-sizing: border-box;
}
.dcCookieBar a {
  color: var(--main-link-color);
  text-decoration: underline;
}
.dcCookieBar a:hover {
  color: var(--main-link-color-hover);
}
.dcCookieBar__button {
  line-height: 1.6;
  padding: 5px 20px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-width: 40px;
  width: auto;
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
  color: var(--main-color-black);
  border: 1px solid var(--main-color-gray-base);
  background-color: var(--main-color-white);
  border-radius: 25px;
  transition: 0.2s ease-in-out;
}
.dcCookieBar__button:hover {
  background-color: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.dcCookieBar__button:active, .dcCookieBar__button:focus {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
@media (max-width: 1024px) {
  .dcCookieBar__button {
    font-size: var(--main-font-size-base);
  }
}
.dcCookieBar__buttonaction {
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  background-color: var(--main-color-primary);
}
.dcCookieBar__buttonaction:hover {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
.dcCookieBar__buttonaction:active, .dcCookieBar__buttonaction:focus {
  background-color: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
.dcCookieBar__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 7.5px;
}
.dcCookieBar__buttons .dcCookieBar__button {
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  flex-basis: 100% !important;
}
.dcCookieBar__main {
  text-align: center;
}
.dcCookieBar__text {
  padding-left: 7.5px;
  padding-right: 7.5px;
  padding-bottom: 15px;
  text-align: left;
}
.dcCookieBar__links {
  text-align: right;
  font-size: var(--main-font-size-small);
}
.dcCookieBar__links a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}
.dcCookieBar__center {
  text-align: center;
  margin-top: 15px;
}
.dcCookieBar__center a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}

.dcCookieModal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(204, 204, 204, 0.7);
  color: var(--main-color-black);
  display: none;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 6001;
  font-size: var(--main-font-size-base);
}
@media (min-width: 441px) {
  .dcCookieModal.dcCookieTopPadding {
    padding-top: 150px;
  }
}
.dcCookieModal__dialog {
  background-color: #ffffff;
  padding: 30px;
  width: 600px;
  max-width: 100%;
  margin: 15px auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  border-radius: 25px;
}
@media (max-width: 767px) {
  .dcCookieModal__dialog {
    padding: 15px;
  }
}
.dcCookieModal a {
  color: var(--main-link-color);
  text-decoration: underline;
  cursor: pointer;
}
.dcCookieModal a:hover {
  color: var(--main-link-color-hover);
}
.dcCookieModal .dcCookieBar__button {
  color: var(--main-color-black);
  background-color: var(--main-color-white);
  text-decoration: none;
  cursor: pointer;
}
.dcCookieModal .dcCookieBar__button:hover {
  background-color: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.dcCookieModal .dcCookieBar__button:active, .dcCookieModal .dcCookieBar__button:focus {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
.dcCookieModal .dcCookieBar__buttonaction {
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  background-color: var(--main-color-primary);
  cursor: pointer;
}
.dcCookieModal .dcCookieBar__buttonaction:hover {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
.dcCookieModal .dcCookieBar__buttonaction:active, .dcCookieModal .dcCookieBar__buttonaction:focus {
  background-color: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
.dcCookieModal .dcCookieBar__links {
  margin-top: 15px;
  text-align: left;
}
.dcCookieModal .dcCookieBar__links a {
  margin-left: 0;
  margin-right: 15px;
}
.dcCookieModal.open {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}

.dcCookieModalBody__headline {
  font-size: 20px;
  margin-bottom: 15px;
}
.dcCookieModalBody__info {
  margin-bottom: 15px;
}

.dcCookieBarSwitch {
  width: 50px;
  position: relative;
  height: 26px;
  display: inline-block;
  cursor: pointer;
  border-radius: 13px;
  margin: 0;
  background-color: var(--main-color-light-gray);
}
.dcCookieBarSwitch span {
  font-style: normal;
  position: absolute;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: var(--main-color-black);
  top: 50%;
  margin-top: -10px;
  display: block;
  pointer-events: none;
  margin-bottom: 0;
  border-radius: 50%;
  transition: 0.1s ease-in-out;
}
.dcCookieBarSwitch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
}
.dcCookieBarSwitch input:checked + span {
  left: 100%;
  margin-left: -23px;
  background-color: var(--main-color-primary);
}
.dcCookieBarSwitch__label {
  color: var(--main-color-black);
  margin-bottom: 0;
  line-height: 26px;
  margin-right: 10px;
}

.dcCookieBarBox {
  padding: 15px;
  border: 2px solid var(--main-color-light-gray);
  margin-top: 15px;
}
.dcCookieBarBox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.dcCookieBarBox__title {
  margin-right: 30px;
  font-size: 16px;
}
.dcCookieBarBox__info {
  margin-bottom: 15px;
}

.dcCookieBarMoreBox {
  margin-top: 15px;
}
.dcCookieBarMoreBox.open {
  display: block;
}

.dcCookieBarTable {
  margin-top: 15px;
}
.dcCookieBarTable__row {
  padding: 8px 0;
  border-bottom: 1px solid var(--main-color-light-gray);
}
.dcCookieBarTable__row:last-child {
  border-bottom: 0;
}
.dcCookieBarTable__cell > a {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.dcCookieBarTable__cell--description {
  font-weight: bold;
  font-size: 1.2em;
}
.dcCookieBarTable__cell--switch {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .dcCookieBarTable__row {
    display: flex;
    align-items: center;
  }
  .dcCookieBarTable__cell {
    flex-grow: 1;
    text-align: left;
    width: calc(100% - 200px);
  }
  .dcCookieBarTable__cell:first-child {
    padding-right: 10px;
    flex-shrink: 0;
    flex-grow: 0;
    width: 200px;
  }
  .dcCookieBarTable__cell:first-child.dcCookieBarTable__cell--description {
    width: 50%;
  }
  .dcCookieBarTable__cell--switch {
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .dcCookieBarTable__cell:first-child {
    margin-bottom: 4px;
  }
  .dcCookieBarTable__cell:first-child:after {
    content: ":";
  }
}

.dcCookieBarRecurringTable__row {
  padding: 8px 0;
  border-bottom: 1px solid var(--main-color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dcCookieBarRecurringTable__row:last-child {
  border-bottom: 0;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label {
  position: relative;
  padding-left: 20px;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--main-color-black);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  transition: 0.2s ease-in-out;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label.active:before {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  border-color: transparent transparent transparent var(--main-color-primary);
}
.dcCookieBarRecurringTable__row--child {
  padding-left: 20px;
}
.dcCookieBarRecurringTable__label {
  font-weight: bold;
}

.dcCookieBarHistoryTable {
  font-size: 1.1rem;
}
.dcCookieBarHistoryTable__row {
  padding: 8px 0;
  border-bottom: 1px solid var(--main-color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dcCookieBarHistoryTable__row:last-child {
  border-bottom: 0;
}
.dcCookieBarHistoryTable__label {
  flex-grow: 1;
  margin-right: 8px;
}
.dcCookieBarHistoryTable__badge {
  width: 12px;
  height: 12px;
  background-color: red;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 8px;
  margin-top: 1px;
}
.dcCookieBarHistoryTable__badge.active {
  background-color: green;
}
.dcCookieBarHistoryTable__active {
  margin-left: 8px;
  flex-shrink: 0;
  width: 60px;
  text-align: right;
}

.dcCookieBarRecurring {
  z-index: 6001;
  position: fixed;
  left: 20px;
  bottom: 20px;
  box-sizing: border-box;
}

.dcCookieBarRecurringBox {
  position: fixed;
  z-index: 6001;
  left: 20px;
  bottom: 80px;
  background-color: var(--main-color-white);
  box-shadow: 0 0 20px black;
  width: 400px;
  font-size: var(--main-font-size-base);
}
.dcCookieBarRecurringBox__close {
  height: 14px;
  width: 14px;
  cursor: pointer;
}
.dcCookieBarRecurringBox__close svg path {
  fill: #000000;
}
.dcCookieBarRecurringBox__close:hover svg path {
  fill: var(--main-color-primary);
}
.dcCookieBarRecurringBox__head {
  padding: 15px;
  border-bottom: 1px solid var(--main-color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dcCookieBarRecurringBox__title {
  margin-right: 15px;
}
.dcCookieBarRecurringBox__footer .dcCookieBar__button {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 440px) {
  .dcCookieBarRecurringBox {
    max-width: 100%;
    left: 0;
    bottom: 0;
    max-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
  }
}

.dcCookieBarRecurringButton {
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px black;
}
.dcCookieBarRecurringButton:hover, .dcCookieBarRecurringButton:focus {
  background-color: var(--main-color-primary-dark);
}
.dcCookieBarRecurringButton svg path {
  fill: #000000;
}
.dcCookieBarRecurringButton .closelabel {
  display: none;
  position: relative;
  top: 3px;
}
.dcCookieBarRecurringButton .openlabel {
  position: relative;
  top: 6px;
}
.dcCookieBarRecurringButton.open .openlabel {
  display: none;
}
.dcCookieBarRecurringButton.open .closelabel {
  display: block;
}

.dcCookieBarTab {
  text-align: center;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
}
.dcCookieBarTab:not(.active) {
  background-color: var(--main-color-light-gray);
}
.dcCookieBarTab:hover {
  background-color: var(--main-color-white);
}

.dcCookieBarTabContent {
  padding: 15px;
  display: none;
  height: 240px;
  max-height: 50vh;
  overflow: hidden;
  overflow-y: auto;
}
.dcCookieBarTabContent.active {
  display: block;
}

.dcCookieBarTabs__header {
  display: flex;
}
.dcCookieBarTabs__header .dcCookieBarTab {
  flex-grow: 1;
  width: 50%;
}

.dcCookieExternal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dcCookieExternal__info {
  padding: 30px;
  border: 1px solid var(--main-color-gray-base);
  background-color: #ffffff;
}
.dcCookieExternal__headline {
  padding-bottom: 20px;
}
.dcCookieExternal__button {
  line-height: 1.6;
  padding: 5px 20px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-width: 40px;
  width: auto;
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
  color: var(--main-color-black);
  border: 1px solid var(--main-color-gray-base);
  background-color: var(--main-color-white);
  transition: 0.2s ease-in-out;
}
.dcCookieExternal__button:hover {
  background-color: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.dcCookieExternal__button:active, .dcCookieExternal__button:focus {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}

.hidden {
  display: none !important;
}

/*
Filegallery

Markup:
<div class="filegallery">
    <div>
      <a class="filegalleryFile" href="#" download>
          <i class="icon icon-file-document"></i><span>Name</span>
      </a>
    </div>
    <div>
      <a class="filegalleryFile" href="#" download>
          <i class="icon icon-file-document"></i><span>Name</span>
      </a>
    </div>
    <div>
      <a class="filegalleryFile" href="#" download>
          <i class="icon icon-file-document"></i><span>Name</span>
      </a>
    </div>
</div>

Styleguide Siteparts.Filegallery
*/
.filegallery {
  margin-bottom: -12px;
}

.filegalleryFile {
  margin-bottom: 12px;
  color: var(--main-color-black);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  text-decoration: none;
}
.filegalleryFile .icon {
  margin-right: 5px;
  font-size: 2em;
  line-height: 1;
  margin-top: -2px;
}
.filegalleryFile span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.filegalleryFile:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}

/*
Image Gallery

Markup:
<div class="imageGallery swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

//Styleguide Siteparts.Image Gallery
*/
.imageGalleryItem {
  overflow: hidden;
  cursor: pointer;
}
.imageGalleryItem__content {
  position: relative;
}
.imageGalleryItem__content:after {
  content: var(--base-icon-search);
  font-family: "icons", Helvetica, Arial, sans-serif;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--main-color-white);
  opacity: 0;
  transition: 0.2s opacity ease-in-out;
}
.imageGalleryItem__img {
  transition: 0.2s ease-in-out;
  scale: 1;
}
.imageGalleryItem:hover .imageGalleryItem__content:after {
  opacity: 1;
}
.imageGalleryItem:hover .imageGalleryItem__img {
  scale: 1.1;
}

@media (min-width: 1250px) {
  .imageGallery {
    padding-bottom: 52px;
  }
}
.imageGallery:not(.swiper-initialized) .swiper-wrapper {
  gap: 12px;
}
.imageGallery .swiper-slide {
  width: 86.66666%;
}
@media (min-width: 768px) {
  .imageGallery .swiper-slide {
    width: calc(40% - 7px);
  }
}
@media (min-width: 1250px) {
  .imageGallery .swiper-slide {
    width: calc(40% - 24px);
  }
}
.imageGallery .swiper-wrapper {
  overflow: visible;
}
.imageGallery .swiper-button-prev,
.imageGallery .swiper-button-next {
  display: none;
  left: calc(50% - 30px);
  top: auto;
  bottom: 10px;
  color: var(--main-color-black);
  font-size: 3.8rem;
}
@media (min-width: 1250px) {
  .imageGallery .swiper-button-prev,
  .imageGallery .swiper-button-next {
    display: flex;
  }
}
.imageGallery .swiper-button-next {
  left: calc(50% + 20px);
}

.languageSwitchButton {
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  padding-right: 15px;
}
.languageSwitchButton:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.languageSwitchList {
  padding: 0;
  list-style: none;
  display: flex;
  margin: 0;
  flex-wrap: wrap;
}
.languageSwitchList li {
  width: 100%;
  padding: 0;
  display: flex;
  text-align: center;
}
.languageSwitchList li:not(:last-child) {
  border-bottom: 1px solid var(--main-color-middle-gray);
}
.languageSwitchList li.is-active a {
  font-weight: var(--main-font-weight-bold);
}
.languageSwitchList li img {
  width: 40px;
  flex-shrink: 0;
}
.languageSwitchList li a {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: var(--main-link-color);
  padding: 15px 0;
  width: 100%;
}
.languageSwitchList li a:hover, .languageSwitchList li a:focus {
  text-decoration: underline;
  color: var(--main-link-color);
}

/*
Scrollbar

Markup:
<div class="scrollbar swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

.scrollbar--arrows-outside - Arrows Outside

Styleguide Siteparts.Scrollbar
*/
.scrollbar.swiper .swiper-slide {
  text-align: center;
}
.scrollbar.swiper .swiper-button-prev,
.scrollbar.swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  font-size: 36px;
  color: var(--main-color-white);
  scale: 1;
  transition: 0.2s ease-in-out;
}
.scrollbar.swiper .swiper-button-prev:hover, .scrollbar.swiper .swiper-button-prev:focus, .scrollbar.swiper .swiper-button-prev:active,
.scrollbar.swiper .swiper-button-next:hover,
.scrollbar.swiper .swiper-button-next:focus,
.scrollbar.swiper .swiper-button-next:active {
  scale: 1.4;
}
.scrollbar.swiper .swiper-button-prev {
  left: 10px;
}
.scrollbar.swiper .swiper-button-next {
  right: 10px;
}
@media (min-width: 1520px) {
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
    color: var(--main-color-black);
  }
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
    left: -50px;
  }
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
    right: -50px;
  }
}

.container .scrollbar {
  margin-left: -20px;
  margin-right: -20px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
  color: var(--main-color-white);
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
  left: 10px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
  right: 10px;
}

/*
Slidecontent

Markup:
<div class="slidecontent">
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
</div>

Styleguide Siteparts.Slidecontent
*/
.slidecontentItem {
  border-bottom: 1px solid var(--main-color-black);
}
.slidecontentItem:not(:last-child) {
  margin-bottom: 20px;
}
.slidecontentItem__headline {
  position: relative;
  font-size: 1.6rem;
  color: var(--main-color-black);
  padding: 10px;
  padding-left: 30px;
  cursor: pointer;
}
.slidecontentItem__headline:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 0;
  top: 50%;
  font-size: 20px;
  width: 20px;
  text-align: center;
  transition: 0.2s ease-in-out;
  translate: 0 -50%;
}
.slidecontentItem__headline:hover, .slidecontentItem__headline:active, .slidecontentItem__headline:focus {
  color: var(--main-color-primary);
}
.slidecontentItem__content {
  display: none;
  padding: 10px 10px 20px 30px;
}
.slidecontentItem.is-active .slidecontentItem__headline:after {
  rotate: 180deg;
}

.slidecontentItem {
  border-bottom: none;
}
.slidecontentItem__headline {
  padding-left: 58px;
  font-weight: var(--main-font-weight-medium);
}
.slidecontentItem__headline:after {
  content: var(--base-icon-plus);
  width: 40px;
  height: 40px;
  border: 2px solid var(--main-color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slidecontentItem__content {
  padding-left: 58px;
  font-size: var(--main-font-size-medium);
}
.slidecontentItem.is-active .slidecontentItem__headline:after {
  rotate: none;
  content: var(--base-icon-minus);
}

.newsletterFooterForm .newsletterForm {
  display: flex;
  width: 100%;
}
.newsletterFooterForm .newsletterForm .infieldInputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.newsletterFooterForm .newsletterForm button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: transparent;
  color: var(--main-color-black);
  border-color: var(--main-color-black);
}

.newsletterBanner__container {
  padding: 40px 20px;
  margin-left: -20px;
  margin-right: -20px;
  display: grid;
  gap: 40px;
}
@media (min-width: 768px) {
  .newsletterBanner__container {
    grid-template-columns: 1fr 1fr;
    padding: 50px;
  }
}
@media (min-width: 1250px) {
  .newsletterBanner__container {
    grid-template-columns: 1.5fr 1fr;
    margin-left: 0;
    margin-right: 0;
  }
}
.newsletterBanner__container > .row {
  gap: 30px;
}
@media (min-width: 768px) {
  .newsletterBanner__container > .row {
    gap: 0;
  }
}
.newsletterBanner__container .newsletterBanner {
  align-self: center;
}
.newsletterBanner__container .newsletterBanner__infotext {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.newsletterBanner__container .newsletterBanner__infotext h2 {
  flex-grow: 1;
  max-width: 500px;
}
@media (min-width: 768px) {
  .newsletterBanner__container .newsletterBanner__infotext h2 {
    margin-bottom: 20px;
  }
}
.newsletterBanner__container .newsletterBanner__infotext .checkList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 45px;
  font-size: 1.5rem;
  font-weight: var(--main-font-weight-medium);
}
@media (min-width: 768px) {
  .newsletterBanner__container .newsletterBanner__infotext .checkList {
    font-size: 2rem;
  }
}
.newsletterBanner__container .newsletterBanner__infotext .checkList li {
  margin-bottom: 0;
}
.newsletterBanner__container .newsletterForm {
  width: 100%;
}
.newsletterBanner__container .newsletterForm .infieldInputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterBanner__container .newsletterForm .infieldInputGroup > label {
  color: var(--main-color-middle-gray);
  margin-top: 2px;
}
@media (min-width: 768px) {
  .newsletterBanner__container .newsletterForm .infieldInputGroup > label {
    margin-top: 0;
  }
}
.newsletterBanner__container .newsletterForm > label {
  margin-bottom: 0;
}
.newsletterBanner__container .newsletterForm .inputGroup input {
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--main-color-black);
  background: transparent;
  border-right: none;
}
.newsletterBanner__container .newsletterForm button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: transparent;
  color: var(--main-color-black);
  border-color: var(--main-color-black);
  border-left: none;
  padding-block: 4px;
  line-height: 1;
}
@media (min-width: 768px) {
  .newsletterBanner__container .newsletterForm button {
    padding-block: 10px;
  }
}
.newsletterBanner__container .newsletterForm button i {
  font-size: 2.4rem;
  line-height: 2.4rem;
}

.banner .textcontent + .newsletterBanner {
  margin-top: 20px;
}

.fullscreenSwiper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 106;
  background-color: var(--main-color-white);
  display: flex;
  flex-direction: column;
}
.fullscreenSwiper:before {
  content: var(--base-icon-loading);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: 80px;
  z-index: 106;
  color: var(--main-color-middle-gray);
  animation: rotation 1s infinite ease-in-out;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .fullscreenSwiper:before {
    font-size: 120px;
  }
}
.fullscreenSwiper.is-loading:before {
  opacity: 1;
}
.fullscreenSwiper.is-loading .fullscreenSwiperImage,
.fullscreenSwiper.is-loading .fullscreenSwiperThumbs {
  opacity: 0;
}
.fullscreenSwiperImage {
  width: 100%;
  flex-grow: 1;
  padding: 72px 120px;
  display: flex;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}
.fullscreenSwiperImage:before, .fullscreenSwiperImage:after {
  display: none;
}
.fullscreenSwiperImage::before, .fullscreenSwiperImage::after {
  display: none;
}
.fullscreenSwiperImage .swiper-slide {
  position: relative;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.fullscreenSwiperImage .swiper-slide > * {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
.fullscreenSwiperImage .swiper-slide iframe {
  width: 100%;
  height: 100%;
}
.fullscreenSwiperImage .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.fullscreenSwiperImage .swiper-button-prev,
.fullscreenSwiperImage .swiper-button-next {
  font-size: 40px;
  border: 2px solid transparent;
  color: var(--main-color-gray-base);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-top: -30px;
  cursor: pointer;
}
.fullscreenSwiperImage .swiper-button-prev:hover,
.fullscreenSwiperImage .swiper-button-next:hover {
  color: var(--main-color-action);
  border-color: var(--main-color-action);
}
.fullscreenSwiperImage .swiper-button-prev.swiper-button-lock,
.fullscreenSwiperImage .swiper-button-next.swiper-button-lock {
  display: none;
}
.fullscreenSwiperImage .swiper-button-prev {
  left: 20px;
}
.fullscreenSwiperImage .swiper-button-next {
  right: 20px;
}
@media (max-width: 767px) {
  .fullscreenSwiperImage {
    padding: 12px;
  }
  .fullscreenSwiperImage .swiper-button-prev,
  .fullscreenSwiperImage .swiper-button-next {
    display: none;
  }
}

.fullscreenSwiperThumbs {
  flex-shrink: 0;
  height: 104px;
  padding-bottom: 24px;
  transition: opacity 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs {
    height: 72px;
    padding-bottom: 12px;
  }
}
.fullscreenSwiperThumbs .swiper-wrapper {
  justify-content: center;
}
.fullscreenSwiperThumbs .swiper-slide {
  width: 80px;
  cursor: pointer;
  opacity: 0.4;
  transition: 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs .swiper-slide {
    width: 60px;
  }
}
.fullscreenSwiperThumbs .swiper-slide > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.fullscreenSwiperThumbs .swiper-slide:hover, .fullscreenSwiperThumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.fullscreenSwiperThumbs .swiper-button-disabled {
  opacity: 0;
}

.fullscreenSwiperClose {
  position: fixed;
  right: 20px;
  top: 20px;
  font-size: 40px;
  border: 2px solid transparent;
  color: var(--main-color-black);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: 0.2s ease-in-out;
}
.fullscreenSwiperClose:hover {
  color: var(--main-color-action);
  border-color: var(--main-color-action);
}
@media (max-width: 767px) {
  .fullscreenSwiperClose {
    top: 10px;
    right: 10px;
    font-size: 30px;
    border-width: 1px;
    width: 40px;
    height: 40px;
  }
}

body.fullscreen-gallery-opened {
  overflow: hidden;
}

.highlightPicture {
  display: flex;
  flex-direction: column;
}
.highlightPicture__image {
  align-self: center;
  position: relative;
}

.highlightBullet {
  position: absolute;
}
.highlightBullet__button {
  width: 32px;
  height: 32px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: var(--main-color-action);
  color: var(--main-color-white);
  position: relative;
  cursor: pointer;
  z-index: 1;
}
.highlightBullet__button:before {
  font-size: 22px;
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-plus);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--main-color-white);
  transition: 0.1s all ease-in-out;
}
.highlightBullet__button:hover {
  background: var(--main-color-secondary);
}
.highlightBullet__content {
  position: absolute;
  padding: 10px;
  display: none;
  background: var(--main-color-white);
  font-size: var(--main-font-size-base);
  line-height: var(--main-line-height);
  min-width: 150px;
}
@media (min-width: 768px) {
  .highlightBullet__content {
    min-width: 200px;
  }
}
.highlightBullet a {
  color: var(--main-color-black);
  text-decoration: none;
  font-size: var(--main-font-size-base);
  line-height: var(--main-line-height);
}
.highlightBullet a:hover .highlightBullet__description {
  text-decoration: underline;
}
.highlightBullet__headline {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .highlightBullet__headline {
    white-space: nowrap;
  }
}
.highlightBullet__itemNo {
  font-size: var(--main-font-size-small);
}
.highlightBullet__description {
  line-height: 1.2;
}
.highlightBullet__inventory {
  margin-top: 5px;
}
.highlightBullet__inventory p {
  white-space: nowrap;
}
.highlightBullet--left .highlightBullet__content {
  top: 50%;
  right: 16px;
  padding-right: 26px;
  transform: translateY(-50%);
}
.highlightBullet--right .highlightBullet__content {
  top: 50%;
  left: 16px;
  padding-left: 26px;
  transform: translateY(-50%);
}
.highlightBullet.active .highlightBullet__button {
  background: var(--main-color-secondary);
}
.highlightBullet.active .highlightBullet__button:before {
  content: var(--base-icon-minus);
}

body[data-site_code=catalog] .highlightBullet__price {
  display: none;
}

.collectionArea.is-loading, .collectionArea.is-error {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}
.collectionArea.is-loading {
  cursor: wait;
}
.collectionArea.is-error {
  background: red;
}

.blogList__entrySection {
  display: grid;
  position: relative;
  grid-template-columns: auto auto;
  grid-template-areas: "blogTitle blogImg" "blogFilter blogFilter";
  align-items: center;
  gap: 20px;
  width: calc(100vw - 6px);
  padding-inline: 20px;
  margin-left: -20px;
  margin-right: -20px;
  contain: paint;
}
@media (min-width: 768px) {
  .blogList__entrySection {
    grid-template-columns: 1fr 0.75fr;
  }
}
@media (min-width: 1024px) {
  .blogList__entrySection {
    gap: 0;
    grid-template-areas: "blogTitle blogImg" "blogFilter blogImg";
    width: 100%;
    padding-inline: 0;
    margin-left: 0;
    margin-right: 0;
  }
}
.blogList__entrySection:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--main-color-middle-gray);
  content: "";
  display: block;
  bottom: 0;
}
@media (min-width: 1024px) {
  .blogList__entrySection:after {
    bottom: 40px;
  }
}
.blogList__entrySection .marginBottom--large:has(> .tags) {
  grid-area: blogFilter;
  margin-left: -20px;
}
.blogList__entrySection .marginBottom--large:has(> .tags) .tag:first-child {
  margin-left: 20px;
}
.blogList__entrySection .marginBottom--large:has(> .tags) .tag:last-child {
  margin-right: 20px;
}
@media (min-width: 1024px) {
  .blogList__entrySection .marginBottom--large:has(> .tags) {
    max-width: 920px;
    align-self: start;
    margin-left: 0;
  }
  .blogList__entrySection .marginBottom--large:has(> .tags) .tag:first-child {
    margin-left: 0;
  }
  .blogList__entrySection .marginBottom--large:has(> .tags) .tag:last-child {
    margin-right: 0;
  }
}
.blogList__entrySectionLeft {
  grid-area: blogTitle;
  max-width: 920px;
  width: 230px;
}
@media (min-width: 768px) {
  .blogList__entrySectionLeft {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .blogList__entrySectionLeft {
    align-self: end;
  }
}
.blogList__entrySectionLeft h1 {
  font-weight: var(--main-font-weight-black);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .blogList__entrySectionLeft h1 {
    margin-bottom: 48px;
  }
}
.blogList__entrySectionLeft h1 span {
  color: var(--main-color-middle-gray);
}
.blogList__entrySectionRight {
  grid-area: blogImg;
  z-index: 1;
  width: 100%;
}
@media (min-width: 1024px) {
  .blogList__entrySectionRight {
    position: relative;
    width: auto;
    margin-right: 0;
  }
}
.blogList__entrySectionRight img {
  background: var(--main-color-white);
  min-width: 184px;
}
@media (min-width: 1024px) {
  .blogList__entrySectionRight img {
    width: auto;
    position: static;
    right: auto;
    transform: none;
  }
}
@container blogItemContainer (min-width:600px) {
  .blogList {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}
.blogList:hover, .blogList:focus, .blogList:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.blogList:hover .blog__previewimage img, .blogList:focus .blog__previewimage img, .blogList:active .blog__previewimage img {
  scale: 1.05;
}
.blogList:hover .blog__link, .blogList:focus .blog__link, .blogList:active .blog__link {
  color: var(--main-link-color-hover);
}
.blogList__container {
  display: grid;
  gap: 40px 10px;
}
@media (min-width: 768px) {
  .blogList__container:not(.preview) {
    grid-template-columns: repeat(12, 1fr);
    gap: 90px 10px;
  }
}
@media (min-width: 1024px) {
  .blogList__container:not(.preview) {
    grid-template-columns: repeat(12, 1fr);
  }
}
.blogList__previewimage {
  position: relative;
  margin-bottom: 24px;
  contain: paint;
  aspect-ratio: 1.1219512195;
}
.blogList__previewimage > a {
  width: 100%;
}
.blogList__previewimage img {
  aspect-ratio: 1.1219512195;
  object-fit: cover;
  transition: all 0.2s ease-in-out;
  transform: scale(1);
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.blogList__previewimage:hover img {
  transform: scale(1.03);
}
.blogList__previewimage .tags {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: calc(100% - 24px);
  overflow-y: inherit;
  scroll-snap-type: none;
  flex-wrap: wrap;
}
.blogList__previewimage .tags .tag {
  padding: 12px;
}
.blogList__previewimage .tags > * {
  scroll-snap-align: center;
  flex-shrink: 0;
}
@container (inline-size > 420px) {
  .blogList__previewimage .tags {
    bottom: 32px;
    left: 32px;
    width: calc(100% - 64px);
  }
}
.blogList__headline a {
  text-decoration: none;
}
.blogList__headline a:hover {
  color: var(--main-link-color-hover);
}
.blogList__readingTime {
  text-transform: uppercase;
  color: var(--main-color-middle-gray);
  font-size: 1.5rem;
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 12px;
  letter-spacing: 0.96px;
}
@media (min-width: 768px) {
  .blogList__item {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .blogList__item {
    grid-column: span 4;
  }
  .blogList__item:first-child {
    grid-column: span 5;
  }
  .blogList__item:first-child .blogList__previewimage {
    aspect-ratio: 1.1706081081;
  }
  .blogList__item:first-child .blogList__previewimage img {
    aspect-ratio: 1.1706081081;
  }
  .blogList__item:nth-child(2) {
    grid-column: span 7;
  }
  .blogList__item:nth-child(2) .blogList__previewimage {
    aspect-ratio: 1.6469594595;
  }
  .blogList__item:nth-child(2) .blogList__previewimage img {
    aspect-ratio: 1.6469594595;
  }
}

.blog .container--small, .cocktaillab .container--small {
  max-width: 1156px;
}
.blog__content3Box .h3, .cocktaillab__content3Box .h3 {
  margin-bottom: 0;
}
.blog__readingTime, .cocktaillab__readingTime {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: var(--main-font-weight-bold);
  letter-spacing: 0.96px;
}
.blog__title, .cocktaillab__title {
  padding-block: 10px;
}
.blog__previewimage, .cocktaillab__previewimage {
  display: flex;
  max-width: 100%;
  width: 100%;
  position: relative;
}
.blog__previewimage .tags, .cocktaillab__previewimage .tags {
  left: 12px;
  bottom: 12px;
  position: absolute;
}
@media (min-width: 768px) {
  .blog__previewimage .tags, .cocktaillab__previewimage .tags {
    bottom: 40px;
    left: 40px;
  }
}
.blog__previewimage img, .cocktaillab__previewimage img {
  object-fit: cover;
  aspect-ratio: 1.5;
  width: 100%;
}
.blog__headline, .cocktaillab__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  margin-bottom: 10px;
}
@container blogItemContainer (min-width:600px) {
  .blog__headline, .cocktaillab__headline {
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 52px;
  }
}
.blog__gallery, .cocktaillab__gallery {
  contain: paint;
}
.blog__summary, .cocktaillab__summary {
  flex-grow: 1;
}
.blog__summary > div, .cocktaillab__summary > div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog__link, .cocktaillab__link {
  font-size: 24px;
  text-align: right;
  padding-top: 10px;
}
@container blogItemContainer (min-width:600px) {
  .blog__link, .cocktaillab__link {
    padding-top: 20px;
  }
}
.blog__content, .cocktaillab__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
@container blogItemContainer (min-width:600px) {
  .blog__content, .cocktaillab__content {
    padding: 30px;
  }
}
@container blogItemContainer (min-width:600px) {
  .blog, .cocktaillab {
    flex-direction: row;
    align-items: center;
  }
  .blog__previewimage, .cocktaillab__previewimage {
    width: 50%;
    flex-shrink: 0;
  }
  .blog__content, .cocktaillab__content {
    flex-grow: 0;
  }
  .blog__link, .cocktaillab__link {
    display: none;
  }
}

.blogList__item {
  container: blogItemContainer/inline-size;
}

.blogPreview__entrySection {
  border-bottom: 1px solid var(--main-color-gray-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blogPreview__entrySection .h3, .blogPreview__entrySection .h2, .blogPreview__entrySection .itemcardHeadline, .blogPreview__entrySection .orderboxSummary__headline {
  margin-bottom: 0;
}
@media (max-width: 1023.98px) {
  .blogPreview__entrySection {
    margin-bottom: 12px;
  }
}

.blogList__container.preview .preview__tags {
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--main-color-middle-gray);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 12px;
  justify-content: center;
  font-weight: var(--main-font-weight-bold);
  letter-spacing: 0.96px;
}
.blogList__container.preview .preview__tags > a {
  padding-right: 12px;
  color: var(--main-color-middle-gray);
  border-right: 1px solid var(--main-color-middle-gray);
}
.blogList__container.preview .preview__tags > a:hover, .blogList__container.preview .preview__tags > a:focus {
  color: var(--main-link-color);
}
.blogList__container.preview .preview__tags > a:last-child {
  border-right: 0;
}
@media (min-width: 1024px) {
  .blogList__container.preview {
    grid-template-columns: 1.2fr 1fr;
    gap: 20px 40px;
    grid-template-areas: "left rightTop" "left rightMiddle" "left rightBottom";
  }
  .blogList__container.preview .blogList__item {
    grid-column: inherit;
  }
  .blogList__container.preview .blogList__item:first-child {
    grid-area: left;
  }
  .blogList__container.preview .blogList__item:first-child .blogList__previewimage {
    aspect-ratio: 1.2;
  }
  .blogList__container.preview .blogList__item:first-child .blogList__previewimage img {
    aspect-ratio: 1.2;
  }
  .blogList__container.preview .blogList__item:nth-child(2) {
    grid-area: rightTop;
  }
  .blogList__container.preview .blogList__item:nth-child(3) {
    grid-area: rightMiddle;
  }
  .blogList__container.preview .blogList__item:nth-child(4) {
    grid-area: rightBottom;
  }
  .blogList__container.preview .blogList__item:not(:first-child) {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .blogList__container.preview .blogList__item:not(:first-child) .preview__tags {
    justify-content: flex-start;
  }
}
@media (min-width: 1024px) {
  .blogList__container.preview .blogList__item:not(:first-child) .blogList__previewimage {
    margin-bottom: 0;
    aspect-ratio: 1.25;
  }
  .blogList__container.preview .blogList__item:not(:first-child) .blogList__previewimage img {
    aspect-ratio: 1.25;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .blogList__container.preview .blogList__item:not(:first-child) .blogList__content {
    text-align: left;
  }
}
@media (min-width: 1250px) {
  .blogList__container.preview {
    gap: 30px 80px;
  }
  .blogList__container.preview .blogList__item:first-child .blogList__previewimage {
    aspect-ratio: 1.5;
  }
  .blogList__container.preview .blogList__item:first-child .blogList__previewimage img {
    aspect-ratio: 1.5;
  }
}
@media (max-width: 1023.98px) {
  .blogList__container.preview {
    display: flex;
    padding-top: 24px;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    width: calc(100vw - 6px);
    flex-wrap: nowrap;
    margin-inline: -20px;
    padding-inline: 10px;
  }
  .blogList__container.preview > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    padding-left: 8px;
    padding-right: 8px;
    width: calc(60% - 20px);
    width: -moz-calc(60% - 20px);
    width: -webkit-calc(60% - 20px);
    width: -o-calc(60% - 20px);
  }
}
@media (max-width: 767.98px) {
  .blogList__container.preview > * {
    width: calc(70% - 20px);
    width: -moz-calc(70% - 20px);
    width: -webkit-calc(70% - 20px);
    width: -o-calc(70% - 20px);
  }
}

.blogList__container.preview .blogList__item .blogList__previewimage > a {
  padding: 0;
}
.blogList__container.preview .blogList__item .blogList__previewimage img {
  object-fit: cover;
}

.eventsList__wrapper {
  max-width: 1720px;
  margin-inline: auto;
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid var(--main-color-middle-gray);
  margin-top: 32px;
}
@media (min-width: 768px) {
  .eventsList__wrapper {
    padding-top: 140px;
  }
}
.eventsList__wrapper .eventsList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px 20px;
}
@media (min-width: 768px) {
  .eventsList__wrapper .eventsList {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .eventsList__wrapper .eventsList {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.eventsList__wrapper .eventsList .event {
  padding-inline: 30px;
}
.eventsList__wrapper .inner {
  display: flex;
}
@media (min-width: 768px) {
  .eventsList__wrapper {
    padding-bottom: 140px;
  }
}
.eventsList__wrapper .swiper-slide {
  width: 100%;
  padding-inline: 30px;
}
@media (min-width: 768px) {
  .eventsList__wrapper .swiper-slide {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .eventsList__wrapper .swiper-slide {
    width: 33.33%;
  }
}
@media (min-width: 768px) {
  .eventsList__wrapper .swiper-slide {
    border-right: 1px solid var(--main-color-middle-gray);
  }
}
.eventsList__wrapper .swiper-slide:last-child {
  border-right: none;
}
.eventsList__wrapper .swiper-button-prev,
.eventsList__wrapper .swiper-button-next {
  bottom: auto;
  top: 46px;
}
.eventsList__wrapper .swiper-button-prev {
  left: auto;
  right: 84px;
}
.eventsList__wrapper .swiper-button-next {
  left: auto;
  right: 16px;
}

.event {
  color: var(--main-color-black);
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 15px;
  max-width: 900px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  container-type: inline-size;
}
.event:hover, .event:focus, .event:active {
  text-decoration: none;
  color: var(--main-color-black);
}
.event:hover .event__title,
.event:hover .event__link, .event:focus .event__title,
.event:focus .event__link, .event:active .event__title,
.event:active .event__link {
  color: var(--main-link-color-hover);
}
.event__headlineContainer {
  border-bottom: 1px solid var(--main-color-gray-base);
}
.event__headline {
  font-size: 3rem;
  hyphens: auto;
  line-height: 1.2;
  font-weight: var(--main-font-weight-medium);
  text-transform: uppercase;
}
@container (inline-size > 420px) {
  .event__headline {
    font-size: 4rem;
  }
}
@container (inline-size > 520px) {
  .event__headline {
    font-size: 5rem;
    hyphens: inherit;
  }
}
.event__row {
  display: grid;
  border-bottom: 1px solid var(--main-color-gray-base);
}
@media (min-width: 768px) {
  .event__row {
    gap: 40px;
    grid-template-columns: 1fr 1fr;
  }
}
.event__date {
  font-size: var(--main-font-size-base);
  padding: 10px 14px;
  border: 1px solid var(--main-color-black);
  border-radius: 20px;
  line-height: 1;
  display: inline-flex;
  background: rgba(0, 0, 0, 0.2);
}
.event__register {
  max-width: 367px;
  margin-inline: auto;
}
.event__mainImgContainer {
  position: relative;
  min-height: 300px;
}
.event__mainImgContainer .event__date {
  color: var(--main-color-white);
  border-color: var(--main-color-white);
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  z-index: 1;
}
.event__mainImg {
  height: 300px;
}
.event__mainImg img {
  height: 300px !important;
  object-fit: cover;
}

.eventsTicker__container {
  position: relative;
}
.eventsTicker__title {
  max-width: 100vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.events.isList .event__date {
  background: transparent;
}

.events.isList.preview .eventsList__wrapper {
  border-top: none;
  margin-top: 0;
}
@media (min-width: 768px) {
  .events.isList.preview .eventsList__wrapper {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}

.producersList__entrySection {
  border-bottom: 1px solid var(--main-color-middle-gray);
  display: grid;
}
@media (min-width: 1250px) {
  .producersList__entrySection {
    padding-top: 64px;
    margin-bottom: 120px;
    grid-template-columns: 500px 1fr;
    gap: 120px;
  }
}
@media (max-width: 1249.98px) {
  .producersList__entrySectionRight .marginBottom--large {
    margin-bottom: 24px !important;
  }
  .producersList__entrySectionRight .js-collectionFilter {
    max-width: calc(100vw - 30px);
  }
}
.producersList__entrySectionRight .searchBar {
  max-width: 708px;
  margin-bottom: 32px;
}
.producersList__entrySectionRight .tag {
  min-width: 70px;
  justify-content: center;
}
.producersList__container {
  display: grid;
  gap: 12px;
}
@media (min-width: 1024px) {
  .producersList__container {
    grid-template-columns: 1fr 1fr;
  }
}
.producersList__item {
  container-type: inline-size;
}
.producersList__item > .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@container (inline-size > 590px) {
  .producersList__item > .inner {
    flex-direction: row;
  }
}
.producersList__item .producersList__imageContainer {
  width: 100%;
  height: 100%;
  order: 1;
}
@container (inline-size > 590px) {
  .producersList__item .producersList__imageContainer {
    width: 50%;
  }
}
.producersList__item .producersList__content {
  width: 100%;
  order: 2;
}
@container (inline-size > 590px) {
  .producersList__item .producersList__content {
    width: 50%;
  }
}
@container (inline-size > 590px) {
  .producersList__item:nth-child(4n+3) .producersList__imageContainer, .producersList__item:nth-child(4n+4) .producersList__imageContainer {
    order: 2;
  }
  .producersList__item:nth-child(4n+3) .producersList__content, .producersList__item:nth-child(4n+4) .producersList__content {
    order: 1;
  }
}
.producersList__item .producersList__content {
  padding: 32px;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}
.producersList__item .producersList__location {
  margin-bottom: 5px;
}
.producersList__item .producersList__imageContainer {
  position: relative;
}
.producersList__item .producersList__logo {
  width: 140px;
  margin-block: 24px;
  aspect-ratio: 1.944;
  display: flex;
  align-items: center;
  justify-content: center;
}
@container (inline-size > 590px) {
  .producersList__item .producersList__logo {
    width: 160px;
  }
}
.producersList__item .producersList__logo img {
  width: 120px;
  aspect-ratio: 1.944;
  object-fit: contain;
}
@container (inline-size > 590px) {
  .producersList__item .producersList__logo img {
    width: 140px;
  }
}
.producersList__item .producersList__previewimage {
  width: 100%;
  height: 100%;
}
@container (inline-size > 590px) {
  .producersList__item .producersList__previewimage picture {
    height: 100%;
  }
}
.producersList__item .producersList__previewimage img {
  object-fit: cover;
}
@container (inline-size < 590px) {
  .producersList__item .producersList__previewimage img {
    aspect-ratio: 2;
  }
}
@container (inline-size > 690px) {}
@container (inline-size > 740px) {}

.producers__mainImg img {
  aspect-ratio: 1.25;
  object-fit: cover;
}
@media (min-width: 768px) {
  .producers__mainImg img {
    aspect-ratio: 2;
  }
}
@media (min-width: 1250px) {
  .producers__mainImg img {
    aspect-ratio: 2.6;
  }
}
@media (min-width: 1540px) {
  .producers__mainImg img {
    aspect-ratio: 3.2;
  }
}
.producers__logo {
  width: 150px;
  height: 100px;
  margin-top: -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.producers__logo img {
  width: 120px;
}
@media (min-width: 768px) {
  .producers__logo {
    width: 180px;
    height: 115px;
    margin-top: -67px;
  }
  .producers__logo img {
    width: 150px;
  }
}
@media (min-width: 1024px) {
  .producers__logo {
    width: 300px;
    height: 150px;
    margin-top: -75px;
  }
  .producers__logo img {
    width: 220px;
  }
}
@media (min-width: 1250px) {
  .producers__logo {
    width: 450px;
    height: 300px;
    margin-top: -150px;
  }
  .producers__logo img {
    width: 360px;
  }
}
@media (min-width: 1540px) {
  .producers__logo {
    width: 552px;
    height: 307px;
    margin-top: -154px;
  }
  .producers__logo img {
    width: 389px;
  }
}
.producers__back {
  text-align: right;
}
@media (min-width: 1250px) {
  .producers__back {
    margin-top: -100px;
  }
}
.producers__summary {
  font-family: var(--main-font-family-display);
  font-size: 4rem;
  line-height: 0.9;
}
@media (min-width: 768px) {
  .producers__summary {
    font-size: 7rem;
  }
}
@media (min-width: 1250px) {
  .producers__summary {
    font-size: 12rem;
    line-height: 100px;
  }
}
.producers__facts {
  display: flex;
  gap: 12px;
  justify-content: space-around;
  flex-wrap: wrap;
}
.producers__fact {
  width: 100%;
  text-align: center;
}
.producers__fact .h4 {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .producers__fact {
    width: calc(50% - 6px);
  }
}
@media (min-width: 1250px) {
  .producers__fact {
    width: calc(25% - 9px);
  }
}
@media (min-width: 768px) {
  .producers__contentContainer .contentImageWithText__container {
    align-items: center;
  }
}
@media (min-width: 768px) {
  .producers__contentContainer .contentImageWithText__img {
    width: calc(50% - 6px);
  }
}
@media (min-width: 768px) {
  .producers__contentContainer .contentImageWithText__content {
    width: calc(50% - 6px);
  }
}
.producers__contentContainer .contentImageWithText__text {
  font-size: 1.8rem;
}
@media (min-width: 1540px) {
  .producers__contentContainer .contentImageWithText__line {
    margin-top: -140px;
  }
}

.jobsList__entrySection {
  display: grid;
  position: relative;
  align-items: center;
  gap: 20px;
  width: calc(100vw - 6px);
  padding-inline: 20px;
  margin-left: -20px;
  margin-right: -20px;
  contain: paint;
  padding-block: 32px;
}
@media (min-width: 768px) {
  .jobsList__entrySection {
    grid-template-columns: auto auto;
  }
}
@media (min-width: 1250px) {
  .jobsList__entrySection {
    padding-block: 0;
  }
}
@media (min-width: 768px) {
  .jobsList__entrySectionTitle {
    hyphens: inherit;
  }
}
.jobsList__entrySectionDescription {
  margin-bottom: 24px;
}
.jobsList__entrySectionDescriptionSub {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .jobsList__entrySection {
    grid-template-columns: 1fr 0.75fr;
  }
}
@media (min-width: 1024px) {
  .jobsList__entrySection {
    gap: 0;
    width: 100%;
    padding-inline: 0;
    margin-left: 0;
    margin-right: 0;
  }
}
.jobsList__entrySection:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--main-color-middle-gray);
  content: "";
  display: block;
  bottom: 0;
}
@media (min-width: 1024px) {
  .jobsList__entrySection:after {
    bottom: 40px;
  }
}
.jobsList__entrySectionLeft {
  max-width: 830px;
}
@media (min-width: 768px) {
  .jobsList__entrySectionLeft {
    width: auto;
  }
}
.jobsList__entrySectionLeft h1 {
  font-weight: var(--main-font-weight-black);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .jobsList__entrySectionLeft h1 {
    margin-bottom: 48px;
  }
}
.jobsList__entrySectionLeft h1 span {
  color: var(--main-color-middle-gray);
}
.jobsList__entrySectionRight {
  z-index: 1;
  width: 100%;
  max-width: 320px;
}
@media (min-width: 768px) {
  .jobsList__entrySectionRight {
    max-width: none;
  }
}
@media (min-width: 1024px) {
  .jobsList__entrySectionRight {
    position: relative;
    width: auto;
    margin-right: 0;
  }
}
.jobsList__entrySectionRight img {
  background: var(--main-color-white);
  min-width: 184px;
}
@media (min-width: 1024px) {
  .jobsList__entrySectionRight img {
    width: auto;
    position: static;
    right: auto;
    transform: none;
  }
}
.jobsList__displayText {
  text-align: center;
  font-size: 8rem;
  line-height: 83.333%;
  max-width: 834px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .jobsList__displayText {
    font-size: 12rem;
  }
}
.jobsList:hover, .jobsList:focus, .jobsList:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.jobsList:hover .jobs__previewimage img, .jobsList:focus .jobs__previewimage img, .jobsList:active .jobs__previewimage img {
  scale: 1.05;
}
.jobsList:hover .jobs__link, .jobsList:focus .jobs__link, .jobsList:active .jobs__link {
  color: var(--main-link-color-hover);
}
.jobsList__contact {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .jobsList__contact {
    grid-template-columns: 372px 1fr;
    gap: 90px;
  }
}

.jobsList__container {
  display: flex;
  flex-direction: column;
}

.job__item {
  display: grid;
  grid-template-columns: 1fr 60px;
  justify-content: space-between;
  align-items: center;
  padding-block: 32px;
  gap: 16px;
  border-bottom: 1px solid var(--main-color-black);
}
.job__item:hover .h3 {
  color: var(--main-link-color-hover);
}
.job__link {
  font-size: 4.8rem;
}
.job__info {
  max-width: 520px;
}
.job__info strong {
  display: block;
}
@media (min-width: 768px) {
  .job__info strong {
    display: inline-block;
  }
}
.job__footer {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  color: var(--main-color-black);
}

.isFullView .job__title {
  hyphens: inherit;
}
.isFullView .job__title h1 {
  hyphens: inherit;
  margin-bottom: 0;
}
.isFullView .job__titleContainer {
  display: grid;
  gap: 60px;
}
@media (min-width: 1024px) {
  .isFullView .job__titleContainer {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .isFullView .job__titleContainer {
    grid-template-columns: 920px 1fr;
    align-items: end;
  }
}
.isFullView .job__dates {
  display: flex;
  gap: 40px;
}
.isFullView .job__content {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .isFullView .job__content {
    grid-template-columns: 372px 1fr;
    gap: 60px;
  }
}
@media (min-width: 1250px) {
  .isFullView .job__content {
    gap: 120px;
  }
}
@media (min-width: 1024px) {
  .isFullView .job__contact > * {
    position: sticky;
    top: 120px;
  }
}
.isFullView .job__detailsContent ul, .isFullView .job__capabilitiesContent ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.isFullView .job__details, .isFullView .job__capabilities {
  border-bottom: 1px solid var(--main-color-middle-gray);
}
@media (min-width: 768px) {
  .isFullView .job__description #contact form {
    max-width: 654px;
  }
}

.benefits__grid {
  display: grid;
  margin-bottom: 180px;
  grid-template-columns: repeat(2, 1fr);
}
@container (inline-size > 460px) and (inline-size < 722px) {
  .benefits__grid .benefits--img:nth-child(even) .benefits__content {
    order: 1;
  }
  .benefits__grid .benefits--img:nth-child(even) .benefits__img {
    order: 2;
  }
  .benefits__grid .benefits--img:nth-child(odd) .benefits__content {
    order: 2;
  }
  .benefits__grid .benefits--img:nth-child(odd) .benefits__img {
    order: 1;
  }
}
@media (min-width: 768px) {
  .benefits__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.benefits__grid--img {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .benefits__grid--img {
    grid-template-columns: repeat(2, 1fr);
  }
}

.benefits {
  container-type: inline-size;
}
.benefits__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.benefits__content i {
  font-size: 8.4rem;
  width: 8.4rem;
  height: 8.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.benefits__title {
  font-size: 1.8rem;
  hyphens: auto;
  font-weight: var(--main-font-weight-medium);
  text-align: center;
}
@media (min-width: 768px) {
  .benefits__title {
    font-size: 2rem;
  }
}
.benefits__img {
  contain: paint;
}
.benefits__img img {
  display: flex;
  aspect-ratio: 1.5;
  object-fit: cover;
  width: 100%;
}
@container (inline-size > 460px) {
  .benefits__img img {
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 1;
  }
}
.benefits--img .inner {
  display: flex;
  flex-direction: column;
}
@container (inline-size > 460px) {
  .benefits--img .inner {
    flex-direction: row;
    height: 100%;
  }
}
.benefits--img .benefits__img {
  width: 100%;
  order: 2;
}
@container (inline-size > 460px) {
  .benefits--img .benefits__img {
    width: 50%;
  }
}
.benefits--img .benefits__content {
  width: 100%;
  order: 2;
}
@container (inline-size > 460px) {
  .benefits--img .benefits__content {
    width: 50%;
  }
}

@container (inline-size > 460px) {
  .benefits--img:nth-child(4n+3) .benefits__img, .benefits--img:nth-child(4n+4) .benefits__img {
    order: 1;
  }
  .benefits--img:nth-child(4n+3) .benefits__content, .benefits--img:nth-child(4n+4) .benefits__content {
    order: 2;
  }
}
.benefits--img .benefits__title {
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  .benefits--img .benefits__title {
    font-size: 2.4rem;
  }
}

.cocktaillabList__container.blogList__container .blogList__item .blogList {
  box-shadow: none;
}

.cocktaillab .blog__summary {
  font-size: 6rem;
}
@media (min-width: 768px) {
  .cocktaillab .blog__summary {
    font-size: 8rem;
  }
}
@media (min-width: 1250px) {
  .cocktaillab .blog__summary {
    font-size: 10rem;
  }
}

.teaserBox__item {
  container-type: inline-size;
}
.teaserBox.gridCols--1 {
  display: grid;
}
.teaserBox.gridCols--2 {
  display: grid;
}
@media (min-width: 520px) {
  .teaserBox.gridCols--2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .teaserBox.gridCols--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.teaserBox.gridCols--3 {
  display: grid;
}
@media (min-width: 520px) {
  .teaserBox.gridCols--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .teaserBox.gridCols--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .teaserBox.gridCols--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.teaserBox.gridCols--4 {
  display: grid;
}
@media (min-width: 520px) {
  .teaserBox.gridCols--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .teaserBox.gridCols--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .teaserBox.gridCols--4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .teaserBox.gridCols--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.teaserBox.gridCols--5 {
  display: grid;
}
@media (min-width: 520px) {
  .teaserBox.gridCols--5 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .teaserBox.gridCols--5 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .teaserBox.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .teaserBox.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 1540px) {
  .teaserBox.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.teaserBox--basic.gridCols--1 {
  display: grid;
}
.teaserBox--basic.gridCols--2 {
  display: grid;
}
@media (min-width: 420px) {
  .teaserBox--basic.gridCols--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.teaserBox--basic.gridCols--3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .teaserBox--basic.gridCols--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .teaserBox--basic.gridCols--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.teaserBox--basic.gridCols--4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .teaserBox--basic.gridCols--4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .teaserBox--basic.gridCols--4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .teaserBox--basic.gridCols--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.teaserBox--basic.gridCols--5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .teaserBox--basic.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .teaserBox--basic.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .teaserBox--basic.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 1540px) {
  .teaserBox--basic.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.teaserBox--basic .teaserBox__item {
  text-decoration: none;
}
.teaserBox--basic .teaserBox__item .inner {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@container (inline-size > 320px) {
  .teaserBox--basic .teaserBox__item .inner {
    padding: 40px;
  }
}
.teaserBox--basic .teaserBox__imageContainer {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.teaserBox--basic .teaserBox__image {
  position: relative;
  width: 70%;
  right: 30px;
  margin-bottom: 24px;
  transition: all 0.3s ease-in-out;
}
@container (inline-size > 280px) {
  .teaserBox--basic .teaserBox__image {
    right: 40px;
  }
}
@container (inline-size > 320px) {
  .teaserBox--basic .teaserBox__image {
    right: 45px;
  }
}
@media (min-width: 768px) {
  .teaserBox--basic .teaserBox__image {
    right: 0;
  }
}
.teaserBox--basic .teaserBox__image img {
  aspect-ratio: 0.6;
  object-fit: contain;
  object-position: bottom;
}
.teaserBox--basic .teaserBox__sideImage {
  position: absolute;
  right: -10px;
  bottom: 24px;
  width: 70%;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}
@container (inline-size > 280px) {
  .teaserBox--basic .teaserBox__sideImage {
    bottom: 24px;
  }
}
@container (inline-size > 320px) {
  .teaserBox--basic .teaserBox__sideImage {
    bottom: 24px;
  }
}
.teaserBox--basic .teaserBox__link {
  position: relative;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: var(--main-font-weight-medium);
  text-decoration: none;
}
@container (inline-size > 280px) {
  .teaserBox--basic .teaserBox__link {
    font-size: 2.4rem;
  }
}
.teaserBox--basic .teaserBox__link span {
  transition: 0.3s ease-in-out;
  position: relative;
  right: 0;
}
.teaserBox--basic .teaserBox__link i {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-size: 3.4rem;
  transition: 0.3s ease-in-out;
}
.teaserBox--basic .teaserBox__link:hover, .teaserBox--basic .teaserBox__link:active, .teaserBox--basic .teaserBox__link:focus {
  text-decoration: none;
}
@media (min-width: 768px) {
  .teaserBox--basic .teaserBox__item:hover .teaserBox__link span {
    right: 2.25rem;
  }
  .teaserBox--basic .teaserBox__item:hover .teaserBox__link i {
    opacity: 1;
    right: -2.25rem;
  }
  .teaserBox--basic .teaserBox__item:hover .teaserBox__image {
    right: 4.5rem;
  }
  .teaserBox--basic .teaserBox__item:hover .teaserBox__sideImage {
    opacity: 1;
  }
}
@media (max-width: 767.98px) {
  .teaserBox--basic .teaserBox__link {
    text-align: center;
  }
  .teaserBox--basic .teaserBox__link i {
    display: none;
  }
  .teaserBox--basic .teaserBox__sideImage {
    opacity: 1;
  }
}
.teaserBox--big .teaserBox__item .inner {
  padding: 15px 10px;
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr;
  gap: 15px 10px;
  grid-template-areas: "teaserBoxImg teaserHeadline teaserHeadline" "teaserBoxImg teaserBoxLink teaserBoxSmallImg" "teaserBoxImg teaserBoxLink teaserBoxSmallImg";
}
@container (inline-size > 360px) {
  .teaserBox--big .teaserBox__item .inner {
    padding: 20px;
    gap: 20px 14px;
  }
}
@container (inline-size > 420px) {
  .teaserBox--big .teaserBox__item .inner {
    padding: 40px;
    gap: 30px 20px;
  }
}
.teaserBox--big .teaserBox__headline {
  grid-area: teaserHeadline;
  font-size: 4rem;
  font-weight: var(--main-font-weight-black);
  line-height: 1;
  text-transform: uppercase;
  hyphens: auto;
}
@container (inline-size > 420px) {
  .teaserBox--big .teaserBox__headline {
    font-size: 6rem;
  }
}
.teaserBox--big .teaserBox__image {
  grid-area: teaserBoxImg;
}
.teaserBox--big .teaserBox__sideImage {
  grid-area: teaserBoxSmallImg;
  align-self: end;
  margin-bottom: -15px;
}
@container (inline-size > 360px) {
  .teaserBox--big .teaserBox__sideImage {
    margin-bottom: -20px;
  }
}
@container (inline-size > 420px) {
  .teaserBox--big .teaserBox__sideImage {
    margin-bottom: -40px;
  }
}
.teaserBox--big .teaserBox__link {
  grid-area: teaserBoxLink;
  align-self: end;
  display: flex;
  gap: 8px;
  flex-direction: column;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: var(--main-font-weight-medium);
  text-decoration: none;
  color: var(--main-color-black);
}
.teaserBox--big .teaserBox__link:hover span, .teaserBox--big .teaserBox__link:active span, .teaserBox--big .teaserBox__link:focus span {
  text-decoration: underline;
}
.teaserBox--big .teaserBox__link i {
  font-size: 3.4rem;
}

.teaserSlider:not(.swiper-initialized) .swiper-wrapper {
  gap: 12px;
  justify-content: center;
}
@media (min-width: 768px) {
  .teaserSlider:not(.swiper-initialized) .swiper-wrapper {
    justify-content: flex-start;
  }
}
.teaserSlider .swiper-slide {
  width: 83.3333333333%;
}
@media (min-width: 768px) {
  .teaserSlider .swiper-slide {
    width: 44.666%;
  }
}
@media (min-width: 1024px) {
  .teaserSlider .swiper-slide {
    width: calc(33.33% - 8px);
  }
}
.teaserSlider__imageContainer {
  position: relative;
  contain: paint;
}
.teaserSlider__image {
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.teaserSlider__item {
  container-type: inline-size;
}
.teaserSlider__item:hover .teaserSlider__image {
  transform: scale(1.05);
}
.teaserSlider__content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  color: var(--main-color-white);
  width: 100%;
}
@container (inline-size > 520px) {
  .teaserSlider__content {
    padding: 40px;
  }
}
.teaserSlider__content .inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: flex-end;
}
.teaserSlider__headline {
  text-transform: uppercase;
  font-size: 2.8rem;
  font-weight: var(--main-font-weight-black);
  line-height: 1.2;
  hyphens: auto;
}
@container (inline-size > 520px) {
  .teaserSlider__headline {
    font-size: 4rem;
  }
}
.titleWithImage {
  text-align: center;
  contain: paint;
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .titleWithImage {
    padding-top: 70px;
  }
}
.titleWithImage__title {
  margin-bottom: -40px;
  font-size: 8rem;
  line-height: 1;
  transform: rotate(-6.17deg);
}
@media (min-width: 768px) {
  .titleWithImage__title {
    font-size: 14rem;
    margin-bottom: -60px;
  }
}
@media (min-width: 1024px) {
  .titleWithImage__title {
    margin-bottom: -100px;
  }
}
@media (min-width: 1250px) {
  .titleWithImage__title {
    margin-bottom: -200px;
  }
}
@media (min-width: 1540px) {
  .titleWithImage__title {
    font-size: 21rem;
  }
}
@media (min-width: 1800px) {
  .titleWithImage__title {
    margin-bottom: -300px;
  }
}

.contentImageWithText__container {
  display: flex;
  gap: 24px;
  position: relative;
  flex-direction: column;
  z-index: 1;
}
@media (min-width: 768px) {
  .contentImageWithText__container {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .contentImageWithText__img {
    width: 41.6666666667%;
  }
}
@media (min-width: 768px) {
  .contentImageWithText__content {
    width: calc(58.3333333333% - 24px);
  }
}
.contentImageWithText__title {
  font-size: 8rem;
  line-height: 0.75;
  transform: rotate(-6.17deg);
  text-align: right;
  display: flex;
  justify-self: center;
  margin-bottom: 36px;
}
@media (min-width: 768px) {
  .contentImageWithText__title {
    font-size: 12rem;
  }
}
@media (min-width: 1024px) {
  .contentImageWithText__title {
    font-size: 14rem;
  }
}
@media (min-width: 1540px) {
  .contentImageWithText__title {
    font-size: 21rem;
  }
}
.contentImageWithText__text {
  max-width: 680px;
  margin-left: auto;
  font-size: 1.8rem;
}
@media (min-width: 1024px) {
  .contentImageWithText__text {
    font-size: 2.4rem;
  }
}
.contentImageWithText__link {
  max-width: 680px;
  margin-left: auto;
  margin-top: 20px;
}
.contentImageWithText__line {
  margin-top: 30px;
}
@media (min-width: 1540px) {
  .contentImageWithText__line {
    margin-top: -220px;
  }
}
@media (min-width: 768px) {
  .contentImageWithText.image--right .contentImageWithText__container {
    flex-direction: row-reverse;
  }
}
.contentImageWithText.image--right .contentImageWithText__text {
  margin-left: 0;
}
.contentImageWithText.image--right .contentImageWithText__link {
  margin-left: 0;
}
@media (min-width: 1540px) {
  .contentImageWithText.image--right .contentImageWithText__link a {
    margin-left: 160px;
  }
}
.contentImageWithText.image--right .contentImageWithText__line img {
  transform: scaleX(-1);
}

.contactPersons.gridCols--1 {
  display: grid;
}
.contactPersons.gridCols--2 {
  display: grid;
}
@media (min-width: 520px) {
  .contactPersons.gridCols--2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .contactPersons.gridCols--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.contactPersons.gridCols--3 {
  display: grid;
}
@media (min-width: 520px) {
  .contactPersons.gridCols--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .contactPersons.gridCols--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .contactPersons.gridCols--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.contactPersons.gridCols--4 {
  display: grid;
}
@media (min-width: 520px) {
  .contactPersons.gridCols--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .contactPersons.gridCols--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .contactPersons.gridCols--4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .contactPersons.gridCols--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.contactPersons.gridCols--5 {
  display: grid;
}
@media (min-width: 520px) {
  .contactPersons.gridCols--5 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .contactPersons.gridCols--5 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .contactPersons.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1250px) {
  .contactPersons.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 1540px) {
  .contactPersons.gridCols--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

.contactPerson__item {
  container-type: inline-size;
}
.contactPerson__item .inner {
  gap: 16px;
  padding: 32px 24px;
  display: grid;
}
@container (inline-size > 420px) {
  .contactPerson__item .inner {
    grid-template-columns: 80px 1fr;
    gap: 32px;
    padding: 24px 48px;
  }
}
@container (inline-size > 520px) {
  .contactPerson__item .inner {
    padding: 32px 54px 32px 16px;
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
}
@container (inline-size > 760px) {
  .contactPerson__item .inner {
    padding: 45px 100px 45px 60px;
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
}
.contactPerson__image img {
  max-width: 170px;
}
@container (inline-size > 520px) {
  .contactPerson__image img {
    max-width: none;
  }
}
@container (inline-size > 760px) {
  .contactPerson__image img {
    max-width: none;
  }
}
.contactPerson__content {
  min-width: 0;
  overflow: hidden;
}
.contactPerson__name {
  text-transform: uppercase;
}
.contactPerson__position {
  font-size: var(--main-font-size-medium);
  font-weight: var(--main-font-weight-bold);
  text-transform: uppercase;
}
.contactPerson__mail {
  font-size: var(--main-font-size-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  display: block;
}

.contentBoxWithImg {
  position: relative;
  padding-top: 300px;
  padding-bottom: 100px;
  display: flex;
  justify-content: end;
}
.contentBoxWithImg__img {
  width: 100%;
  max-width: 700px;
  left: 0;
  top: 0;
  position: absolute;
}
@media (min-width: 520px) {
  .contentBoxWithImg__img {
    width: 66.66%;
  }
}
.contentBoxWithImg__content {
  padding: 20px;
  position: relative;
}
@media (min-width: 768px) {
  .contentBoxWithImg__content {
    width: 66.66%;
    padding: 50px;
  }
}

.contentImgText {
  container-type: inline-size;
}
.contentImgText .inner {
  display: grid;
}
@container (inline-size > 820px) {
  .contentImgText .inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
@container (inline-size > 1040px) {
  .contentImgText .inner {
    gap: 100px;
  }
}
.contentImgText .inner .contentImgText__col--left img {
  max-width: calc(100% - 40px);
  margin-left: auto;
}
@container (inline-size > 820px) {
  .contentImgText .inner .contentImgText__col--left img {
    max-width: calc(100% - 120px);
  }
}
.contentImgText .inner .contentImgText__col--right {
  display: flex;
  flex-direction: column;
}
.contentImgText .inner .contentImgText__col--right .contentImgText__img {
  order: 2;
}
@container (inline-size > 820px) {
  .contentImgText .inner .contentImgText__col--right .contentImgText__img {
    order: 1;
  }
}
.contentImgText .inner .contentImgText__col--right .contentImgText__content {
  order: 1;
}
@container (inline-size > 820px) {
  .contentImgText .inner .contentImgText__col--right .contentImgText__content {
    order: 2;
  }
}
.contentImgText .inner .contentImgText__col--right img {
  max-width: calc(100% - 40px);
  margin-right: auto;
}
@container (inline-size > 820px) {
  .contentImgText .inner .contentImgText__col--right img {
    max-width: calc(100% - 120px);
  }
}

.heroBanner--big {
  position: relative;
}
@media (min-width: 1250px) {
  .heroBanner--big {
    padding-bottom: 550px;
  }
}
.heroBanner--big .heroBanner__content {
  padding: 20px 20px 250px 20px;
}
@media (min-width: 768px) {
  .heroBanner--big .heroBanner__content {
    padding: 40px 40px 250px 40px;
  }
}
@media (min-width: 1024px) {
  .heroBanner--big .heroBanner__content {
    padding: 40px;
  }
}
@media (min-width: 1250px) {
  .heroBanner--big .heroBanner__content {
    padding: 100px 120px;
  }
}
.heroBanner--big .heroBanner__title {
  position: relative;
  z-index: 2;
}
@media (min-width: 1250px) {
  .heroBanner--big .heroBanner__title {
    width: 47%;
  }
}
.heroBanner--big .heroBanner__title h1 {
  font-size: 6rem;
}
.heroBanner--big .heroBanner__text {
  max-width: 520px;
  position: relative;
  z-index: 2;
}
@media (min-width: 1250px) {
  .heroBanner--big .heroBanner__text {
    width: 47%;
  }
}
.heroBanner--big .heroBanner__img {
  position: relative;
  top: -230px;
  margin-bottom: -230px;
  left: 0;
  width: 100%;
  z-index: 1;
}
@media (min-width: 1250px) {
  .heroBanner--big .heroBanner__img {
    position: absolute;
    top: auto;
    bottom: 0;
    margin-bottom: 0;
  }
}

@media (min-width: 1250px) {
  .heroBanner--gradient {
    margin-inline: -20px;
  }
}
.heroBanner--gradient .heroBanner__container {
  position: relative;
}
.heroBanner--gradient .heroBanner__img {
  mask: linear-gradient(180deg, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(180deg, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  contain: paint;
  height: 420px;
}
@media (min-width: 768px) {
  .heroBanner--gradient .heroBanner__img {
    height: 640px;
  }
}
@media (min-width: 1250px) {
  .heroBanner--gradient .heroBanner__img {
    height: 960px;
  }
}
.heroBanner--gradient .heroBanner__img img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}
.heroBanner--gradient .heroBanner__title {
  position: absolute;
  width: 100%;
  left: 0;
  top: 25%;
  color: var(--main-color-white);
  padding-inline: 10px;
}
@media (min-width: 1024px) {
  .heroBanner--gradient .heroBanner__title {
    width: 100%;
  }
}
.heroBanner--gradient .heroBanner__title h1 {
  color: white;
}
@media (min-width: 1250px) {
  .heroBanner--gradient .heroBanner__title h1 {
    font-size: 10rem;
  }
}

/*
Promotions

Markup:
<div class='promotions'>
<div class='promotion promotion--1'>Action</div>
<div class='promotion promotion--2'>Sale</div>
<div class='promotion promotion--3'>New</div>
<div class='promotion promotion--clickable'>New</div>
</div>

Styleguide Shop.Promotions
*/
.promotion {
  min-width: 40px;
  border-radius: 20px;
  background: var(--main-color-black);
  color: var(--main-color-white);
  line-height: 1;
  text-transform: uppercase;
  padding: 8px 12px;
  display: inline-flex;
  font-size: var(--main-font-size-small);
  font-weight: var(--main-font-weight-black);
  letter-spacing: 0.15px;
  text-align: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .promotion {
    font-size: 1.5rem;
    min-width: 50px;
  }
}
.promotion--clickable {
  cursor: pointer;
}
.promotion--clickable:hover {
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.promotion--clickable:hover.promotion--1, .promotion--clickable:hover.promotion--2 {
  background: var(--main-color-danger-dark);
  color: var(--main-color-danger-dark-contrast);
}
.promotion--clickable:hover.promotion--3 {
  background: var(--main-color-success-dark);
  color: var(--main-color-success-dark-contrast);
}

.itembox .promotion {
  border-radius: 2px;
  padding: 8px;
}

.promotions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/*
Prices

Markup:
<div class="prices">
    <span class="crossPrice">299,95&nbsp;€</span>
    <span class="basePrice">199,95&nbsp;€</span>
    <span class="priceNotice">Price incl. 19% VAT.</span>
</div>

Styleguide Shop.Prices
*/
.crossPrice {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  color: var(--main-color-dark-gray);
  font-size: 1.4rem;
}
.crossPrice:before {
  content: " ";
  height: 1px;
  background-color: var(--main-color-dark-gray);
  width: calc(100% + 6px);
  display: block;
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .crossPrice:before {
    height: 1px;
  }
}

.discountPercent {
  font-weight: var(--main-font-weight-medium);
  font-size: 1.4rem;
}

.basePrice,
.actionPrice {
  white-space: nowrap;
  font-weight: var(--main-font-weight-medium);
}

.priceNotice {
  width: 100%;
  margin-top: 5px;
  font-size: var(--main-font-size-small);
}

.prices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
}
/*
Inventory

Markup:
<div class="inventoryWrapper">
    <div class="inventory {{modifier_class}}">
      <span itemprop="availability" content="http://schema.org/InStock"></span>
      <p>Text</p>
    </div>
    <div class="inventoryShippingInfo">
      Shipping Info
    </div>
</div>

.available - Available
.low_availability - Low availability
.not_available - Not Available
.not_available_orderable - Not Available Orderable
.not_available_orderable_number - Not Available Orderable Number




<div class="itemcardInventory p--base">
    <div class="inventoryWrapper">
        <div class="inventory__row">
            <div class="inventory inventory--dual {{availability_code}}">
                {{#availability_schema}}
                    <span itemprop="availability"
                          content="{{availability_schema}}"></span>
                {{/availability_schema}}
                <span class="inventory__label"><strong>Online</strong></span>
                <div class="inventory__stock"> > 100 verfügbar</div>
            </div>
            <div class="inventory--delivery">
                <strong>Lieferung am: </strong><span>14.11.2025</span>
            </div>
        </div>
        <div class="inventory__row">
            <div class="inventory inventory--dual {{availability_code}}">
                {{#availability_schema}}
                    <span itemprop="availability"
                          content="{{availability_schema}}"></span>
                {{/availability_schema}}
                <span class="inventory__label"><strong>Vinothek</strong></span>
                <div class="inventory__stock"> < 20 verfügbar</div>
            </div>
            <div class="inventory--delivery">
                <strong>Abholung am: </strong><span>10.11.2025</span>
            </div>
        </div>
    </div>
</div>

Styleguide Shop.Inventory
*/
.inventory:not(.inventory--dual) {
  position: relative;
  padding-left: 12px;
  display: inline-flex;
  align-items: center;
}
.inventory:not(.inventory--dual):before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  text-align: center;
  translate: 0 -50%;
  background: var(--main-color-success);
}
.inventory:not(.inventory--dual).low_availability:before {
  background: var(--main-color-warning);
}
.inventory:not(.inventory--dual).not_available:before {
  background: var(--main-color-black);
}
.inventory:not(.inventory--dual) p {
  margin: 0;
}

.inventory--dual .inventory__stock {
  position: relative;
  padding-left: 12px;
  display: inline-flex;
  align-items: center;
}
.inventory--dual .inventory__stock:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  text-align: center;
  translate: 0 -50%;
  background: var(--main-color-success);
}
.inventory--dual .inventory__stock.low_availability:before {
  background: var(--main-color-warning);
}
.inventory--dual .inventory__stock.not_available:before {
  background: var(--main-color-black);
}

.inventoryShippingInfo {
  border-left: 1px solid var(--main-color-black);
  padding-left: 5px;
  margin-left: 5px;
}

.inventoryWrapper {
  display: grid;
  gap: 8px 20px;
  font-size: 1.5rem;
  line-height: 1;
}
@container (inline-size > 560px) {
  .inventoryWrapper .inventory__row {
    display: contents;
  }
}
.inventoryWrapper.loading .inventory:before {
  background: var(--main-color-light-gray);
  animation: pulse 1s infinite ease-in-out;
  color: transparent !important;
}

.itemcardInventory {
  container-type: inline-size;
}
@container (inline-size > 560px) {
  .itemcard .inventoryWrapper {
    grid-template-columns: max-content max-content;
  }
}
@container (inline-size <= 560px) {
  .itemcard .inventoryWrapper {
    font-size: 1.4rem;
    gap: 16px 20px;
  }
  .itemcard .inventoryWrapper .inventory__label, .itemcard .inventoryWrapper .inventory--delivery strong {
    font-size: 1.4rem;
  }
  .itemcard .inventoryWrapper .inventory--delivery {
    margin-left: 72px;
    gap: 4px;
  }
  .itemcard .inventoryWrapper .inventory__label {
    font-size: 1.5rem;
    margin-right: 0;
  }
}

@container (inline-size <= 560px) {
  .inventory__row {
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .inventory__row > * {
    display: flex;
  }
}
@container (inline-size > 560px) {
  .inventory__row {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
    gap: 20px;
  }
}
.inventory__label {
  display: inline-block;
  min-width: 72px;
  margin-right: 20px;
  font-size: 1.6rem;
}
.inventory--delivery strong {
  font-size: 1.6rem;
}

/*
Quantity Spinner

Markup:
<div class="quantity">
    <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
    <div class="quantity__spinner">
        <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
            <i class="icon icon-spinner-up"></i>
        </div>
        <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
            <i class="icon icon-spinner-down"></i>
        </div>
    </div>
</div><br/>
<strong>Small</strong><br/>
<div class="quantity quantity--small">
    <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
    <div class="quantity__spinner">
        <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
            <i class="icon icon-spinner-up"></i>
        </div>
        <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
            <i class="icon icon-spinner-down"></i>
        </div>
    </div>
</div>

:hover - Hover
:focus - Focus
:active - Active
disabled - Disabled

Styleguide Shop.Quantity Spinner
*/
.quantity {
  max-width: 130px;
  display: flex;
  flex-shrink: 0;
  width: 100%;
}
.quantity input {
  flex-grow: 1;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
}
.quantity__spinner {
  width: 25px;
  position: relative;
  border-left: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.quantity__spinnerItem {
  position: absolute;
  right: 0;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  background: var(--main-color-white);
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
}
.quantity__spinnerItem:hover, .quantity__spinnerItem:focus, .quantity__spinnerItem:active {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.quantity__spinnerItem .icon:before {
  line-height: 1;
}
.quantity__spinnerItem--up {
  top: 0;
}
.quantity__spinnerItem--down {
  bottom: 0;
}
.quantity:not(.quantity--small) {
  position: relative;
  padding-left: 40px;
}
.quantity:not(.quantity--small) input {
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
  border-radius: 0;
  max-height: 40px;
  border: none;
}
.quantity:not(.quantity--small) .quantity__spinner {
  width: 40px;
  position: static;
  border: 0;
}
.quantity:not(.quantity--small) .quantity__spinnerItem {
  width: 40px;
  height: 40px;
}
.quantity:not(.quantity--small) .quantity__spinnerItem--down {
  right: auto;
  left: 0;
  top: 0;
}
.quantity--small {
  position: relative;
  padding-left: 30px;
  width: 100px;
  max-width: 100%;
}
.quantity--small input {
  line-height: 30px;
  max-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0;
  border: none;
}
.quantity--small .quantity__spinner {
  position: static;
  border: 0;
}
.quantity--small .quantity__spinnerItem {
  width: 30px;
  height: 30px;
}
.quantity--small .quantity__spinnerItem--down {
  right: auto;
  left: 0;
  top: 0;
}
.quantity--inactive .quantity__spinnerItem {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--main-color-light-gray);
}
.quantity:has(input[disabled]) .quantity__spinnerItem {
  background-color: var(--main-color-light-gray);
  color: var(--main-color-middle-gray);
  border-color: var(--main-color-light-gray);
  cursor: not-allowed;
}
.quantity:has(input[disabled]) input {
  background: var(--main-color-white);
  color: var(--main-color-middle-gray);
  cursor: not-allowed;
}

/*
Categorylist

Markup:
<div class="categoryList">
    <div class="row row--flexsub gridGap--small">
          <div class="col-6 col-md-4 marginBottom">
              <a href="#" class="categoryItem">
                  <div class="categoryItem__image imageCover">
                      <img src="kss-assets/sample.png" alt="Categoryname">
                  </div>
                  <div class="categoryItem__content">
                      <div class="categoryItem__headline">Categoryname</div>
                  </div>
              </a>
          </div>
          <div class="col-6 col-md-4 marginBottom">
              <a href="#" class="categoryItem">
                  <div class="categoryItem__image imageCover">
                      <img src="kss-assets/sample.png" alt="Categoryname">
                  </div>
                  <div class="categoryItem__content">
                      <div class="categoryItem__headline">Categoryname</div>
                  </div>
              </a>
          </div>
          <div class="col-6 col-md-4 marginBottom">
              <a href="#" class="categoryItem">
                  <div class="categoryItem__image imageCover">
                      <img src="kss-assets/sample.png" alt="Categoryname">
                  </div>
                  <div class="categoryItem__content">
                      <div class="categoryItem__headline">Categoryname</div>
                  </div>
              </a>
          </div>
    </div>
</div>

Styleguide Shop.Categorylist
*/
body:has(.algoliaSearchLayout__pagination > *) .categoryList {
  margin-top: -120px;
  padding-top: 32px;
  border-top: 0;
}

.categoryList {
  padding-top: 64px;
  border-top: 1px solid var(--main-color-middle-gray);
}
.categoryList nav {
  justify-content: center;
}
.categoryList nav ul {
  justify-content: center;
  gap: 8px 0;
}

.categoryItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--main-color-white);
}
.categoryItem:hover, .categoryItem:focus, .categoryItem:active {
  color: var(--main-color-white);
}
.categoryItem:hover .categoryItem__image img, .categoryItem:focus .categoryItem__image img, .categoryItem:active .categoryItem__image img {
  scale: 1.05;
}
.categoryItem__image {
  background: var(--main-color-light-gray);
}
.categoryItem__image img {
  transition: 0.2s ease-in-out;
  aspect-ratio: 4/3;
}
.categoryItem__content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  padding: 15px;
}
@media (min-width: 768px) {
  .categoryItem__content {
    padding: 30px;
  }
}
.categoryItem__headline {
  line-height: 1.1;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .categoryItem__headline {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  .categoryItem__headline {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  .categoryItem__headline {
    font-size: 3rem;
  }
}
.categoryItem__description {
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.categoryList.categoryList--marken .categoryItem:after,
.categoryList.categoryList--marken .categoryItem__content {
  display: none;
}

/*
Categorybox

Markup:
<div class="categoryList">
    <div class="row gridGap--small">
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
    </div>
</div>

Styleguide Shop.Categorybox
*/
.categoryBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--main-color-primary);
  text-align: center;
  color: var(--main-color-black);
  text-decoration: none;
  padding: 30px 10px;
  border-radius: 15px;
}
@media (min-width: 768px) {
  .categoryBox {
    padding: 60px 30px;
  }
}
.categoryBox:hover, .categoryBox:focus, .categoryBox:active {
  background: var(--main-color-dark-gray);
  color: var(--main-color-white);
  text-decoration: none;
}
.categoryBox__headline {
  line-height: 1.1;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .categoryBox__headline {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  .categoryBox__headline {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  .categoryBox__headline {
    font-size: 3rem;
  }
}

.categoryPicture {
  margin-bottom: 30px;
}

.categoryMain {
  display: flex;
  flex-direction: column;
  gap: 120px;
  align-items: flex-start;
}

h1.shopSiteHeadline {
  margin-bottom: 0;
}

.categoryBreadcrumb {
  display: grid;
  gap: 24px;
  align-items: end;
  flex-wrap: wrap;
  padding: 24px 0 24px 24px;
  border-radius: 20px;
}
@media (min-width: 1024px) {
  .categoryBreadcrumb {
    grid-template-columns: minmax(auto, 50%) 1fr;
    gap: 120px;
  }
}
@media (min-width: 768px) {
  .categoryBreadcrumb {
    padding: 44px 0 40px 40px;
  }
}
.categoryBreadcrumb .breadcrumbWrapper {
  margin-top: 0;
  margin-bottom: 12px;
}
.categoryBreadcrumb__left .shopSiteHeadline {
  word-break: break-word;
}
.categoryBreadcrumb__right {
  min-width: 0;
  overflow: hidden;
}

.categoryNav {
  display: flex;
}

.categoryContent {
  flex: 1;
  width: 100%;
}

.nav-swiper {
  --nav-gap: 12px;
  padding-bottom: 48px;
  padding-top: 12px;
  padding-left: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.nav-swiper .swiper-wrapper {
  margin-left: 0;
  display: flex;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.nav-swiper .swiper-wrapper > li {
  flex-shrink: 0;
  width: auto;
  padding: 0;
}
.nav-swiper .swiper-wrapper > li a {
  padding: 8px 16px;
  font-size: var(--main-font-size-base);
  color: var(--main-color-black);
}
.nav-swiper .swiper-wrapper > li a:hover, .nav-swiper .swiper-wrapper > li a:focus {
  color: var(--main-link-color-hover);
}
.nav-swiper .swiper-wrapper > li.is-active a {
  border: 1px solid var(--main-color-black);
  border-radius: 24px;
}
.nav-swiper .swiper-button-prev,
.nav-swiper .swiper-button-next {
  position: absolute;
  top: auto;
  bottom: 0;
  color: currentColor;
  font-size: 32px;
  display: flex;
}
.nav-swiper .swiper-button-prev {
  left: 0;
}
.nav-swiper .swiper-button-next {
  left: 60px;
}

.categoryDescription {
  margin-bottom: 30px;
}

/*
Categorylist Itempreview

Markup:
<div class="categoryItempreviewList">
    <div class="row row--flexsub gridGap--small">
        <div class="col-xs-12 col-sm-4 col-md-3 marginBottom">
            <a href="#" class="categoryItempreview">
                <div class="categoryItempreview__headline">Name</div>
                <div class="categoryItempreview__items">
                    <div class="categoryItempreview__item">
                        <span class="categoryItempreview__itemImage image">
                            <img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
                        </span>
                    </div>
                    <div class="categoryItempreview__item">
                        <span class="categoryItempreview__itemImage image">
                            <img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
                        </span>
                    </div>
                    <div class="categoryItempreview__item">
                        <span class="categoryItempreview__itemImage image">
                            <img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
                        </span>
                    </div>
                    <div class="categoryItempreview__count">
                        +99
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

Styleguide Shop.Categorylist Itempreview
*/
.categoryItempreview {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  text-decoration: none;
  color: var(--main-color-black);
  transition: 0.2s ease-in-out;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .categoryItempreview {
    padding: 20px;
  }
}
.categoryItempreview:hover, .categoryItempreview:focus, .categoryItempreview:active {
  text-decoration: none;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  color: var(--main-color-black);
}
.categoryItempreview:hover .categoryItempreview__headline,
.categoryItempreview:hover .categoryItempreview__count, .categoryItempreview:focus .categoryItempreview__headline,
.categoryItempreview:focus .categoryItempreview__count, .categoryItempreview:active .categoryItempreview__headline,
.categoryItempreview:active .categoryItempreview__count {
  color: var(--main-color-primary);
}
.categoryItempreview__headline {
  text-decoration: none;
  font-weight: var(--main-font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: 0.2s ease-in-out;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  .categoryItempreview__headline {
    margin-bottom: 20px;
    font-size: var(--main-font-size-base);
  }
}
.categoryItempreview__count {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: var(--main-font-weight-bold);
  line-height: 1;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .categoryItempreview__count {
    font-size: 2.4rem;
  }
}
.categoryItempreview__itemImage {
  overflow: hidden;
}
.categoryItempreview__item img {
  scale: 1;
  transition: 0.2s ease-in-out;
  aspect-ratio: 1/1;
}
.categoryItempreview__item:first-child {
  grid-column: 1/span 3;
}
.categoryItempreview__items {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr auto;
  flex-grow: 1;
}
@media (min-width: 768px) {
  .categoryItempreview__items {
    grid-gap: 10px;
  }
}

.itemlistElement {
  border: 1px solid var(--main-color-black);
  border-radius: 10px;
  padding: 0 10px;
  font-size: var(--main-font-size-small);
  container: containerItemlistElement/inline-size;
}
.itemlistElement:not(:last-child) {
  margin-bottom: 20px;
}
.itemlistElement__toggle {
  grid-area: toggle;
}
.itemlistElement__toggle .icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: 0.2s ease-in-out;
}
.itemlistElement__toggle .icon:hover, .itemlistElement__toggle .icon:focus, .itemlistElement__toggle .icon:active {
  color: var(--main-color-primary);
}
.itemlistElement__toggle .icon.is-loading, .itemlistElement__toggle .icon.is-success, .itemlistElement__toggle .icon.is-error {
  cursor: not-allowed;
  pointer-events: none;
}
.itemlistElement__toggle .icon.is-loading {
  cursor: wait;
}
.itemlistElement__toggle .icon.is-loading:before {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.itemlistElement__toggle .icon.is-error {
  color: var(--main-color-danger);
}
.itemlistElement__toggle .icon.is-error:before {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.itemlistElement__image img {
  aspect-ratio: 5/3;
}
.itemlistElement__media {
  grid-area: media;
}
.itemlistElement__name {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
  text-decoration: none;
  font-size: var(--main-font-size-medium);
}
.itemlistElement__description {
  grid-area: description;
}
.itemlistElement__info {
  grid-area: info;
}
.itemlistElement__inventory {
  grid-area: inventory;
}
.itemlistElement__inventory .inventoryShippingInfo {
  display: none;
}
.itemlistElement__prices {
  grid-area: prices;
}
.itemlistElement__orderbutton .orderButtonWrapper {
  justify-content: start;
}
.itemlistElement__orderbutton .button, .itemlistElement__orderbutton .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .itemlistElement__orderbutton .orderButton {
  width: 100%;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton {
  padding: 0;
  transition: ease-in-out 0.2s;
  width: 40px;
  max-width: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton span {
  display: none;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton .icon {
  position: static;
  transform: none;
  margin: 0;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton.is-loading:after, .itemlistElement__orderbutton .orderButtonWrapper .orderButton.is-success:after, .itemlistElement__orderbutton .orderButtonWrapper .orderButton.is-error:after {
  right: 50%;
  translate: 50% -50%;
}
.itemlistElement__actions {
  margin-left: 10px;
  width: 36px;
}
.itemlistElement__addon {
  grid-area: addon;
  display: flex;
  align-items: center;
}
.itemlistElement__wrapper {
  display: grid;
  padding-top: 5px;
  padding-bottom: 5px;
  grid-column-gap: 5px;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper {
    grid-column-gap: 10px;
    grid-template-columns: 0 60px 1fr auto;
    grid-template-areas: ". media description prices" ". media inventory addon";
  }
}
@container containerItemlistElement (max-width: 800px) {
  .itemlistElement__wrapper .orderButtonWrapper .quantity {
    width: 110px;
    position: relative;
    padding-left: 30px;
    max-width: 100%;
  }
  .itemlistElement__wrapper .orderButtonWrapper .quantity input {
    line-height: 30px;
    max-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    border: none;
  }
  .itemlistElement__wrapper .orderButtonWrapper .quantity:not(.quantity--small) .quantity__spinnerItem {
    width: 30px;
    height: 30px;
  }
  .itemlistElement__wrapper .orderButtonWrapper .quantity:not(.quantity--small) .quantity__spinner {
    width: 30px;
  }
  .itemlistElement__wrapper .orderButtonWrapper .orderButton {
    width: 30px;
    height: 30px;
  }
  .itemlistElement__wrapper .orderButtonWrapper .orderButton .icon {
    font-size: 2.4rem;
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper {
    align-items: center;
    grid-template-columns: 0 80px 1fr auto auto;
    grid-template-areas: ". media description prices addon" ". media inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1100px) {
  .itemlistElement__wrapper {
    grid-template-columns: 0 280px 1fr 190px auto auto;
    grid-template-areas: ". media description inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1200px) {
  .itemlistElement__wrapper {
    grid-template-columns: 0 100px 320px 1fr 190px auto auto;
    grid-template-areas: ". media description info inventory prices addon";
  }
}
@container containerItemlistElement (max-width: 400px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 60px 1fr;
    grid-template-areas: "media description" "media inventory" "media prices" "media addon";
  }
}
@container containerItemlistElement (max-width: 400px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-columns: 30px 60px 1fr;
    grid-template-areas: "toggle media description" "toggle media inventory" "toggle media prices" "toggle media addon";
  }
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description prices" "toggle media inventory addon";
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description prices addon" "toggle media inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1100px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1200px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description info inventory prices addon";
  }
}
.itemlistElement__wrapper--isVariant {
  border-top: 1px solid var(--main-color-light-gray);
}
.itemlistElement__wrapper .itemlistElement__inventory {
  margin-top: 5px;
}
.itemlistElement__wrapper .itemlistElement__inventory p {
  font-size: 1.4rem;
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper .itemlistElement__inventory {
    margin-top: 0;
  }
}
.itemlistElement__wrapper .itemlistElement__prices {
  margin-top: 5px;
}
.itemlistElement__wrapper .itemlistElement__prices .price {
  font-weight: var(--main-font-weight-medium);
  font-size: 1.8rem;
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper .itemlistElement__prices {
    margin-top: 0;
  }
}
.itemlistElement__wrapper .itemlistElement__addon {
  margin-top: 5px;
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper .itemlistElement__addon {
    margin-top: 0;
  }
}
@container containerItemlistElement (max-width: 1199px) {
  .itemlistElement__wrapper .itemlistElement__info {
    display: none;
  }
}
.itemlistElement .itemlistElement__brand {
  display: block;
  font-size: 14px;
}
.itemlistElement.is-active .itemlistElement__wrapper--hasVariant .itemlistElement__toggle .icon {
  rotate: 90deg;
}
.itemlistElement.is-active .itemlistElement__wrapper--isVariant {
  display: grid;
}

a.itemlistElement__name:hover, a.itemlistElement__name:focus, a.itemlistElement__name:active {
  color: var(--main-color-primary);
  text-decoration: none;
}

.itembox {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--main-color-white);
  position: relative;
  transition: 0.1s ease-in-out;
  container-type: inline-size;
}
.itembox__badges {
  position: absolute;
  z-index: 1;
  top: auto;
  left: 0;
  bottom: 25px;
  transform: rotate(-90deg) translateX(-35px);
  transform-origin: top left;
}
.itembox__badges .promotions {
  flex-direction: row;
}
.itembox__actions {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 10px;
}
@media (min-width: 768px) {
  .itembox__actions {
    left: 16px;
    top: 16px;
  }
}
.itembox__name {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  font-size: calc(var(--main-font-size-base) * 0.9);
}
@media (min-width: 768px) {
  .itembox__name {
    font-size: var(--main-font-size-base);
  }
}
.itembox__rating {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itembox__rating .rating__label {
  margin-left: 5px;
}
.itembox__summary {
  font-size: 1.6rem;
}
.itembox__prices {
  margin-top: 0;
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .itembox__prices {
    font-size: calc(var(--main-font-size-base) * 0.9);
  }
}
.itembox__prices .prices {
  justify-content: center;
}
.itembox__image {
  margin-top: 24px;
}
@container (inline-size > 400px) {
  .itembox__image {
    margin-top: 0;
  }
}
.itembox__image img {
  aspect-ratio: 1;
  width: 100%;
  display: block;
}
.itembox__imageSrc {
  opacity: 1;
  transition: 0.2s ease-in-out;
}
.itembox__imageSrc--hover {
  opacity: 0;
}
.itembox__head {
  position: relative;
}
.itembox__content {
  flex-grow: 1;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.itembox__main {
  flex-grow: 1;
  color: var(--main-color-black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.itembox__main:hover, .itembox__main:focus, .itembox__main:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.itembox__addon {
  background: transparent;
}
.itembox .inventoryWrapper {
  justify-content: flex-start;
  margin-bottom: 0;
}
.itembox .orderButtonWrapper + .inventoryWrapper {
  margin-top: 10px;
}
.itembox .priceNotice {
  text-align: center;
}
.itembox .priceNotice + .orderButtonWrapper {
  margin-top: 10px;
}
.itembox.hoverintent .itembox__addon {
  display: block;
}
.itembox.hoverintent.has-hover-image .itembox__imageSrc {
  opacity: 0;
}
.itembox.hoverintent.has-hover-image .itembox__imageSrc--hover {
  opacity: 1;
}
.itembox--imageLeft {
  border: 1px solid var(--main-color-black);
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
}
.itembox--imageLeft .itembox__contentContainer {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  width: 100%;
  gap: 16px;
  flex-grow: 1;
}
@container (inline-size > 360px) {
  .itembox--imageLeft .itembox__contentContainer {
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }
}
@container (inline-size > 400px) {
  .itembox--imageLeft .itembox__contentContainer {
    grid-template-columns: 180px 1fr;
  }
}
.itembox--imageLeft .itembox__tags ul {
  justify-content: start;
}
.itembox--imageLeft .itembox__content {
  text-align: left;
  padding-left: 0;
}
.itembox--imageLeft .itembox__name {
  text-align: left;
  align-items: flex-start;
}
.itembox--imageLeft .itembox__summary {
  text-align: left;
}
.itembox--imageLeft .itembox__prices {
  text-align: left;
}
.itembox--imageLeft .itembox__prices .prices {
  justify-content: start;
}
.itembox--imageLeft .itembox__image {
  padding-left: 6px;
  padding-top: 24px;
}
.itembox--imageLeft .itembox__image img {
  width: 160px;
  aspect-ratio: 0.724;
  margin-inline: auto;
}
.itembox--imageLeft .variantButton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.itembox--imageLeft .variantButton i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  border-radius: 50%;
  background: var(--main-color-black);
  color: var(--main-color-white);
  transition: all 0.2s ease;
}
.itembox--imageLeft .variantButton i:hover, .itembox--imageLeft .variantButton i:focus {
  background: var(--main-color-primary);
  color: var(--main-color-black);
}
.itembox--imageLeft .variantButton:hover, .itembox--imageLeft .variantButton:focus {
  color: var(--main-color-black);
}
.itembox--imageLeft .variantButton:hover i, .itembox--imageLeft .variantButton:focus i {
  background: var(--main-color-primary);
  color: var(--main-color-black);
}
.itembox--imageLeft .orderButtonWrapper:has(.variantButton) {
  width: auto;
}
.itembox--imageLeft .orderButtonWrapper {
  margin-bottom: -20px;
  position: relative;
}
.itembox--imageLeft .orderButtonWrapper:before {
  content: "";
  width: calc(100% + 28px);
  height: 3px;
  background: var(--main-color-white);
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
}

.itemboxList:not(.previewListType--2) {
  display: grid;
  grid-column-gap: 14px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (min-width: 768px) {
  .itemboxList:not(.previewListType--2) {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}
@media (min-width: 1024px) {
  .itemboxList:not(.previewListType--2) {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}
@media (min-width: 1250px) {
  .itemboxList:not(.previewListType--2) {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}
@media (min-width: 1540px) {
  .itemboxList:not(.previewListType--2) {
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  }
}

.itembox__tags ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 16px;
}
.itembox__tags ul li {
  padding: 0;
  font-size: var(--main-font-size-medium);
}
.itembox__tags ul li a {
  font-size: var(--main-font-size-medium);
}

.textLink {
  font-weight: var(--main-font-weight-medium);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (max-width: 767.98px) {
  .container:has(.itemboxList.previewListType--2) {
    padding-left: 0;
    padding-right: 0;
  }
}
.itemboxList.previewListType--2 .swiper-wrapper {
  padding-left: 20px;
  width: calc(100% + 20px);
}
@media (min-width: 768px) {
  .itemboxList.previewListType--2 .swiper-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    display: grid;
    display: grid;
    grid-column-gap: 14px;
    grid-row-gap: 40px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .itemboxList.previewListType--2 .swiper-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  .itemboxList.previewListType--2 .swiper-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}
@media (min-width: 768px) and (min-width: 1250px) {
  .itemboxList.previewListType--2 .swiper-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}
@media (min-width: 768px) and (min-width: 1540px) {
  .itemboxList.previewListType--2 .swiper-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  }
}
@media (min-width: 1024px) {
  .itemboxList.previewListType--2 .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1250px) {
  .itemboxList.previewListType--2 .swiper-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 768px) {
  .itemboxList.previewListType--2 {
    padding-bottom: 120px;
  }
}
.itemboxList.previewListType--2 .swiper-button-prev,
.itemboxList.previewListType--2 .swiper-button-next {
  display: none;
}
@media (min-width: 768px) {
  .itemboxList.previewListType--2 .swiper-slide:nth-child(2n) {
    transform: translateY(120px);
  }
}
@media (min-width: 1024px) {
  .itemboxList.previewListType--2 .swiper-slide:nth-child(2n) {
    transform: translateY(0);
  }
}
@media (min-width: 1024px) {
  .itemboxList.previewListType--2 .swiper-slide:nth-child(3n-1) {
    transform: translateY(120px);
  }
}
@media (min-width: 1250px) {
  .itemboxList.previewListType--2 .swiper-slide:nth-child(3n-1) {
    transform: translateY(0);
  }
}
@media (min-width: 1250px) {
  .itemboxList.previewListType--2 .swiper-slide:nth-child(2n) {
    transform: translateY(120px);
  }
}
.itemboxList.previewListType--2 .itembox {
  height: 100%;
}
.itemboxList.previewListType--2 .itembox__inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.itemboxList.previewListType--2 .itembox__tags {
  margin-bottom: 16px !important;
}
.itemboxList.previewListType--2 .itembox__summary {
  display: none;
}
.itemboxList.previewListType--2 .itembox__image img {
  aspect-ratio: 39/37;
  height: 370px;
}
.itemboxList.previewListType--2 .itembox__actions {
  top: auto;
  bottom: 0;
  right: 16px;
  left: auto;
}
.itemboxList.previewListType--2 .itembox__badges {
  top: auto;
  bottom: 0;
  left: 16px;
}
.itemboxList.previewListType--2 .itembox .inventoryWrapper {
  justify-content: center;
  margin-bottom: 24px;
}

.algoliaAutocompleteProducts .itembox .marginBottom--small {
  margin-bottom: 18px;
}
.algoliaAutocompleteProducts .itembox .itembox__tags {
  margin-top: -5px;
}
.algoliaAutocompleteProducts .itembox .itembox__tags ul li {
  line-height: 1.5;
}
.algoliaAutocompleteProducts .itembox .itembox__tags ul li a {
  line-height: 1;
  font-size: var(--main-font-size-small);
}
.algoliaAutocompleteProducts .itembox .itembox__name {
  font-size: var(--main-font-size-medium);
}
.algoliaAutocompleteProducts .itembox .itembox__summary {
  font-size: var(--main-font-size-small);
}
.algoliaAutocompleteProducts .itembox .itembox__content {
  padding: 18px;
  padding-left: 0;
}
.algoliaAutocompleteProducts .itembox .itembox__contentContainer {
  grid-template-columns: 120px 1fr;
  gap: 8px;
  padding-left: 8px;
}
@container (inline-size > 400px) {
  .algoliaAutocompleteProducts .itembox .itembox__contentContainer {
    grid-template-columns: 120px 1fr;
  }
}
.algoliaAutocompleteProducts .itembox .itembox__actions {
  top: 8px;
  left: 0;
}
.algoliaAutocompleteProducts .itembox .basePrice, .algoliaAutocompleteProducts .itembox .actionPrice {
  font-size: var(--main-font-size-medium);
}
.algoliaAutocompleteProducts .itembox .inventoryWrapper {
  font-size: var(--main-font-size-small);
}

.itemPreviewAddToBasketButtonWrapper {
  display: flex;
  justify-content: center;
}

.itemboxList.swiper.previewListType--1 {
  max-width: 1720px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7px;
  padding-bottom: 7px;
  display: block;
  margin-top: -28px;
  margin-bottom: -28px;
  padding-left: 7px;
  padding-right: 7px;
}
.itemboxList.swiper.previewListType--1 + .itemPreviewAddToBasketButtonWrapper {
  max-width: 1720px;
  padding-inline: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -48px;
}
.itemboxList.swiper.previewListType--1 + .itemPreviewAddToBasketButtonWrapper .button, .itemboxList.swiper.previewListType--1 + .itemPreviewAddToBasketButtonWrapper .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .itemboxList.swiper.previewListType--1 + .itemPreviewAddToBasketButtonWrapper .orderButton {
  position: relative;
  z-index: 1;
}
.itemboxList.swiper.previewListType--1 > .swiper-wrapper {
  align-items: stretch;
  padding-bottom: 58px;
}
@media (max-width: 767.98px) {
  .itemboxList.swiper.previewListType--1 > .swiper-wrapper {
    padding-left: 8px;
  }
}
.itemboxList.swiper.previewListType--1 > .swiper-wrapper > * {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  height: auto;
  padding: 14px;
}
@media (max-width: 767.98px) {
  .itemboxList.swiper.previewListType--1 > .swiper-wrapper > * {
    padding: 8px;
  }
}
.itemboxList.swiper.previewListType--1 .swiper-slide:not(.swiper-slide-visible) {
  opacity: 0;
}
.itemboxList.swiper.previewListType--1 .itembox__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  contain: paint;
  border: 1px solid var(--main-color-black);
  border-radius: 300px;
  padding: 30px 5px 50px 5px;
}
@container (inline-size > 280px) {
  .itemboxList.swiper.previewListType--1 .itembox__inner {
    padding: 30px 20px 50px 20px;
  }
}
@container (inline-size > 320px) {
  .itemboxList.swiper.previewListType--1 .itembox__inner {
    padding: 50px 45px;
  }
}
.itemboxList.swiper.previewListType--1 .itembox__tags {
  margin-inline: -36px;
}
.itemboxList.swiper.previewListType--1 .itembox__tags ul li a {
  font-size: var(--main-font-size-small);
}
@container (inline-size > 320px) {
  .itemboxList.swiper.previewListType--1 .itembox__tags ul li a {
    font-size: 1.6rem;
  }
}
.itemboxList.swiper.previewListType--1 .itembox__brand {
  font-size: 1.5rem;
}
.itemboxList.swiper.previewListType--1 .itembox .marginBottom--small {
  margin-bottom: 24px;
}
.itemboxList.swiper.previewListType--1 .itembox__actions {
  top: -6px;
  left: 48px;
}
.itemboxList.swiper.previewListType--1 .itembox__actions .actionIcon {
  font-size: 32px;
}
@container (inline-size < 321px) {
  .itemboxList.swiper.previewListType--1 .itembox__actions {
    top: 16px;
    left: 32px;
  }
  .itemboxList.swiper.previewListType--1 .itembox__actions .actionIcon {
    font-size: 24px;
  }
}
.itemboxList.swiper.previewListType--1 .itembox__name {
  font-weight: var(--main-font-weight-medium);
  margin-inline: -36px;
}
@container (inline-size < 321px) {
  .itemboxList.swiper.previewListType--1 .itembox__name {
    font-size: 1.6rem;
  }
}
.itemboxList.swiper.previewListType--1 .itembox__summary {
  margin-inline: -36px;
}
@container (inline-size < 321px) {
  .itemboxList.swiper.previewListType--1 .itembox__summary {
    font-size: 1.2rem;
  }
}
.itemboxList.swiper.previewListType--1 .itembox__prices {
  margin-bottom: 8px;
}
@container (inline-size < 321px) {
  .itemboxList.swiper.previewListType--1 .itembox__prices {
    font-size: 1.6rem;
  }
}
.itemboxList.swiper.previewListType--1 .itembox__image img {
  aspect-ratio: 57/35;
  height: 210px;
}
.itemboxList.swiper.previewListType--1 .itembox__content {
  padding-bottom: 0;
}
.itemboxList.swiper.previewListType--1 .itembox .inventoryWrapper {
  justify-content: center;
  margin-bottom: 24px;
}
@container (inline-size < 321px) {
  .itemboxList.swiper.previewListType--1 .itembox .inventoryWrapper {
    font-size: 1.2rem;
  }
}
.itemboxList.swiper.previewListType--1 .itembox__badges {
  top: 160px;
  left: -5px;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: top left;
}
.itemboxList.swiper.previewListType--1 .itembox__badges .promotions {
  flex-direction: row;
}
@container (inline-size > 280px) {
  .itemboxList.swiper.previewListType--1 .itembox__badges {
    left: -20px;
  }
}
@container (inline-size > 320px) {
  .itemboxList.swiper.previewListType--1 .itembox__badges {
    left: -45px;
  }
}
.itemboxList.swiper.previewListType--1.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
  width: 45.4545454545%;
}
@media (min-width: 768px) {
  .itemboxList.swiper.previewListType--1.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
    width: 33.3333333333%;
  }
}
@media (min-width: 1024px) {
  .itemboxList.swiper.previewListType--1.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
    width: 25%;
  }
}
@media (min-width: 1540px) {
  .itemboxList.swiper.previewListType--1.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
    width: 20%;
  }
}

.row--flexsub .itemboxList .swiper-wrapper {
  height: 100%;
}

.itemBasketBox {
  position: relative;
  display: grid;
  padding-top: 20px;
  padding-bottom: 20px;
  grid-gap: 10px;
  grid-template-columns: auto 1fr auto;
  color: var(--main-color-black);
  text-decoration: none;
  grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxQuantity itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxSumPrice itemBasketBoxAddon";
}
.itemBasketBox:not(:last-child) {
  border-bottom: 1px solid var(--main-color-middle-gray);
}
@media (min-width: 768px) {
  .itemBasketBox {
    grid-gap: 10px;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
}
@media (min-width: 1024px) and (max-width: 1249px) {
  .itemBasketBox {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInfo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
}
@media (min-width: 1250px) {
  .itemBasketBox {
    grid-gap: 20px;
    align-items: center;
    grid-template-columns: auto 1fr auto auto auto auto;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
}
.itemBasketBox a {
  color: var(--main-color-black);
  text-decoration: none;
}
.itemBasketBox a:hover, .itemBasketBox a:focus, .itemBasketBox a:active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}
.itemBasketBox__img {
  flex-shrink: 0;
  grid-area: itemBasketBoxImg;
  padding-right: 10px;
  width: 70px;
}
@media (min-width: 768px) {
  .itemBasketBox__img {
    width: 90px;
  }
}
.itemBasketBox__badges {
  margin-bottom: 10px;
}
.itemBasketBox__description {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
  display: block;
}
@media (min-width: 768px) {
  .itemBasketBox__description {
    font-size: var(--main-font-size-base);
  }
}
.itemBasketBox__description .itemBasketBox__brandname {
  font-size: var(--main-font-size-small);
  display: block;
}
.itemBasketBox__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.itemBasketBox__info {
  grid-area: itemBasketBoxInfo;
}
@media (min-width: 768px) {
  .itemBasketBox__info {
    padding-top: 5px;
  }
}
.itemBasketBox__price {
  display: flex;
  align-items: baseline;
  grid-area: itemBasketBoxPrice;
  text-align: right;
}
@media (min-width: 1250px) {
  .itemBasketBox__price {
    width: 120px;
  }
}
@media (min-width: 1540px) {
  .itemBasketBox__price {
    justify-content: flex-end;
  }
}
.itemBasketBox__price .prices .basePrice {
  order: 1;
}
.itemBasketBox__price .prices .crossPrice {
  order: 2;
}
.itemBasketBox__price .prices .discountPercent {
  order: 3;
}
@media (min-width: 1250px) {
  .itemBasketBox__price .prices {
    justify-content: flex-end;
    flex-direction: column;
    align-items: end;
  }
  .itemBasketBox__price .prices .basePrice {
    order: 2;
  }
  .itemBasketBox__price .prices .crossPrice {
    order: 1;
  }
  .itemBasketBox__price .prices .discountPercent {
    order: 3;
  }
}
.itemBasketBox__price .basePrice {
  font-weight: var(--main-font-weight);
}
.itemBasketBox__actions {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  grid-area: itemBasketBoxActions;
}
.itemBasketBox__quantityWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.itemBasketBox__quantity {
  grid-area: itemBasketBoxQuantity;
  width: 140px;
}
.itemBasketBox__sumPrice {
  font-weight: var(--main-font-weight-bold);
  grid-area: itemBasketBoxSumPrice;
  font-size: var(--main-font-size-base);
}
@media (min-width: 768px) {
  .itemBasketBox__sumPrice {
    padding-top: 5px;
    width: 100px;
    text-align: right;
  }
}
@media (min-width: 1024px) {
  .itemBasketBox__sumPrice {
    padding-top: 0;
    align-self: center;
  }
}
.itemBasketBox__addon {
  grid-area: itemBasketBoxAddon;
  width: 40px;
  text-align: center;
}
.itemBasketBox__addon .actionIcon {
  background: transparent;
}
.itemBasketBox__addon .actionIcon .icon {
  font-size: 2.8rem;
}

a.itemBasketBox:hover, a.itemBasketBox:focus, a.itemBasketBox:active {
  text-decoration: none;
}
a.itemBasketBox:hover .itemBasketBox__description, a.itemBasketBox:focus .itemBasketBox__description, a.itemBasketBox:active .itemBasketBox__description {
  color: var(--main-link-color-hover);
}

/*
Orderbutton

Markup:
<div class="orderButtonWrapper {{modifier_class}}">
    <div class="quantity">
        <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
        <div class="quantity__spinner">
            <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
                <i class="icon icon-spinner-up"></i>
            </div>
            <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
                <i class="icon icon-spinner-down"></i>
            </div>
        </div>
    </div>
    <button type="submit" class="button button--primary orderButton">
          <span>Warenkorb</span><i class="icon icon-basket"></i>
    </button>
</div>
<div class="orderButtonWrapper {{modifier_class}}">
    <div class="quantity">
        <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
        <div class="quantity__spinner">
            <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
                <i class="icon icon-spinner-up"></i>
            </div>
            <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
                <i class="icon icon-spinner-down"></i>
            </div>
        </div>
    </div>
    <button type="submit" class="button button--primary orderButton orderButton--customizable">
          <span>Individualisieren</span><i class="icon icon-basket"></i>
    </button>
</div>

.orderButtonWrapper--inactive - Inactive

Styleguide Shop.Orderbutton
*/
.orderButtonWrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.orderButtonWrapper .quantity {
  flex-shrink: 0;
  margin-right: 16px;
  width: 130px;
}
.orderButtonWrapper .orderButton {
  width: 40px;
  height: 40px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.orderButtonWrapper .orderButton .icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: absolute;
  line-height: 1;
  left: -1px;
  top: -1px;
}
.orderButtonWrapper .orderButton > span {
  display: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container (inline-size < 460px) {
  .orderButtonWrapper .orderButton.is-loading:after, .orderButtonWrapper .orderButton.is-success:after, .orderButtonWrapper .orderButton.is-error:after {
    right: 7px !important;
  }
}

.orderButton--customizable .icon:before {
  content: var(--base-icon-edit);
}

/*
Amount Lines

Markup:
<div class="amountLines">
    <div class="amountLine">
        <div class="amountLine__label">
            Zwischensumme:
        </div>
        <div class="amountLine__value">
            0,00&nbsp;€
        </div>
    </div>
    <div class="amountLine">
        <div class="amountLine__label">
            Versand:
        </div>
        <div class="amountLine__value">
            0,00&nbsp;€
        </div>
    </div>
    <div class="amountLine amountLine--big">
        <div class="amountLine__label">
            Gutschein
            <span class="tag">Code<i class="icon icon-close"></i></span>
        </div>
        <div class="amountLine__value">
            2,00&nbsp;€
        </div>
    </div>
</div>

Styleguide Shop.Amount Lines
*/
.amountLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  padding-bottom: 5px;
}
.amountLine__label {
  margin-right: 5px;
}
.amountLine__label .tag {
  margin-left: 10px;
}
.amountLine--big {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}

.order_sum,
.vat_table {
  border: 0;
}
.order_sum td,
.vat_table td {
  padding: 4px 0;
  border: 0;
}
.order_sum tr:first-child td,
.order_sum tr:first-child th,
.vat_table tr:first-child td,
.vat_table tr:first-child th {
  border-top: 0;
  background: var(--main-color-white);
  font-size: var(--main-font-size-medium);
  font-weight: var(--main-font-weight);
}
.order_sum .order_price_total_label,
.order_sum .order_price_total,
.vat_table .order_price_total_label,
.vat_table .order_price_total {
  border-top: 1px solid var(--main-color-middle-gray);
  padding-top: 10px;
  margin-top: 5px;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}

/*
orderboxSummary

Markup:
<div class="orderboxSummary">
  <div class="orderboxSummary__head">
    <div class="orderboxSummary__headline">Headline</div>
  </div>
  <div class="orderboxSummary__main">
    <div class="amountLines">
      <div class="amountLine">
          <div class="amountLine__label">Summe Bestellung</div>
          <div class="amountLine__value">999,00&nbsp;€</div>
      </div>
      <div class="amountLine">
          <div class="amountLine__label">Versandkosten</div>
          <div class="amountLine__value">+8,90&nbsp;€</div>
      </div>
    </div>
  </div>
  <div class="orderboxSummary__footer">
    <div class="amountLines">
        <div class="amountLine amountLine--big">
            <div class="amountLine__label">Gesamtsumme</div>
            <div class="amountLine__value">1.007,90&nbsp;€</div>
        </div>
        <div class="amountLine">
            <div class="amountLine__label">enthaltene MwSt. 19%</div>
            <div class="amountLine__value">160,93&nbsp;€</div>
        </div>
    </div>
    <div class="orderboxSummary__buttons">
      <button type="submit" class="button button--primary button--xl">Order</button>
    </div>
    <div class="orderboxSummary__trust">
      <ul class="trustList">
          <li><i class="icon icon-shipping"></i> Kostenloser Versand ab 50€</li>
          <li><i class="icon icon-invoice"></i> Kauf auf Rechnung</li>
          <li><i class="icon icon-retoure"></i> 50&nbsp;Tage Rückgaberecht</li>
      </ul>
    </div>
  </div>
</div>

Styleguide Shop.orderboxSummary
*/
@media (min-width: 768px) {
  .orderboxSummary {
    padding: 20px 30px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
    background: var(--main-color-white);
  }
}
@media (min-width: 1024px) {
  .orderboxSummary {
    padding: 30px 40px;
  }
}
.orderboxSummary .amountLines {
  font-size: var(--main-font-size-medium);
}
.orderboxSummary .amountLine--big {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--main-color-middle-gray);
}
.orderboxSummary__headline {
  margin: 0;
}
.orderboxSummary__main {
  padding-top: 20px;
}
@media (max-width: 767px) {
  .orderboxSummary__main {
    padding-top: 0;
  }
}
.orderboxSummary__main a {
  text-decoration: none;
  font-size: var(--main-font-size-small);
}
@media (max-width: 767px) {
  .orderboxSummary__head {
    display: none;
  }
}
.orderboxSummary__head + .orderboxSummary__footer {
  border-top: 0;
}
.orderboxSummary__buttons .button, .orderboxSummary__buttons .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .orderboxSummary__buttons .orderButton {
  width: 100%;
  margin-top: 20px;
}
.orderboxSummary__trust {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--main-color-light-gray);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .orderboxSummary__trust .trustList {
    flex-direction: column;
  }
}
.orderboxSummary a:not(.button):not(.tag) {
  color: var(--main-link-color);
}
.orderboxSummary a:not(.button):not(.tag):hover, .orderboxSummary a:not(.button):not(.tag):focus, .orderboxSummary a:not(.button):not(.tag):active, .orderboxSummary a:not(.button):not(.tag).is-active {
  color: var(--main-link-color-hover);
}

@media (min-width: 1250px) {
  .orderBoxContainer {
    margin-left: 50px;
  }
}

/*
Sorting

Markup:
<div class="customSelect js-customSelect customSelect--small sortingSelect ">
                            <select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by">
                                <option value="item_no">Artikelnummer</option>
                                <option value="description">Artikelbezeichnung</option>
                                <option value="creation_date">Neueste</option>
                                <option value="sorting">Empfehlung</option>
                                <option value="base_price_asc">Preis aufsteigend</option>
                                <option value="base_price_desc" selected="">Preis absteigend</option>
                            </select>
                            <div class="customSelect__selected">Preis absteigend</div>
                            <div class="customSelect__dropdown">
                                <div class="customSelect__dropdownClose">
                                    <i class="icon icon-close"></i>
                                </div>
                                <div class="customSelect__dropdownHeader d-block d-sm-none">
                                    <div class="customSelect__dropdownTitle">
                                        Sortierung
                                    </div>
                                </div>
                                <div class="customSelect__dropdownBody">
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
                                        <div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
                                        <div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="creation_date">
                                        <div class="customSelect__dropdownItemHeadline">Neueste</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
                                        <div class="customSelect__dropdownItemHeadline">Empfehlung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="base_price_asc">
                                        <div class="customSelect__dropdownItemHeadline">Preis aufsteigend</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="base_price_desc">
                                        <div class="customSelect__dropdownItemHeadline">Preis absteigend</div>
                                    </div>
                                </div>
                            </div>
                        </div>

Styleguide Shop.Sorting
*/
.sortingSelect.customSelect .customSelect__selected {
  padding-right: 25px;
  font-size: var(--main-font-size-base);
}
@media (min-width: 768px) {
  .sortingSelect.customSelect .customSelect__selected {
    text-decoration: underline;
  }
}
.sortingSelect.customSelect .customSelect__selected:after {
  content: var(--base-icon-sorting);
  font-size: 2rem;
}
.sortingSelect.customSelect.is-active .customSelect__selected:after {
  content: var(--base-icon-sorting);
}

/*
Filter

Markup:
<div class="filterBox">
    <div class="filterBox__mobileButton">Filter</div>
    <div class="filterBox__content">
        <div class="filterBox__contentHeader">
            <div class="filterBox__contentTitle">Filter</div>
            <div class="filterBox__close">
                <i class="icon icon-close"></i>
            </div>
        </div>
        <div class="filterBox__filter">
            <div class="row gridGap--small">
                <div class="col-12 col-lg-9 filtersColumn">
                    <div class="row gridGap--small">
                        <div class="col-12 col-sm-4 col-md-3 marginBottom">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="callaway">filter-Marke-8</option>
                                        <option value="titleist">filter-Marke-8</option>
                                        <option value="taylormade">filter-Marke-8</option>
                                    </select>
                                    <div class="customSelect__selected">Marke</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Marke
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?marke=callaway&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Callaway
                                                </div>
                                            </a>
                                            <a href="?marke=titleist&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Titleist
                                                </div>
                                            </a>
                                            <a href="?marke=taylormade&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    TaylorMade
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <form method="get" class="customSelect js-customSelect customSelect--multiple">
                                <input class="customSelect__hiddenFormField" name="farbe" value="">
                                <input class="customSelect__hiddenFormField" name="sort_by" value="base_price_desc">
                                <div class="customSelect__selected">
                                    Farbe <span class="customSelect__selectedCount"></span>
                                </div>
                                <div class="customSelect__dropdown js-searchWrapper">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader">
                                        <div class="customSelect__dropdownTitle">
                                            Farbe
                                        </div>
                                        <div class="inputGroup searchBar">
                                            <input class="js-searchInput" data-wrapper="js-searchWrapper" data-item="js-searchItem" type="text" placeholder="Filter suchen">
                                            <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/silber">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Silber</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/rot">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Rot</div>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownFooter">
                                        <button type="submit" class="button button--action button--sm">
                                            Anwenden
                                        </button>
                                        <br>
                                        <button class="linkWithIcon customSelectReset">
                                            <i class="icon icon-retoure"></i><span>Zurücksetzen</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="regular">filter-Flex-4</option>
                                    <option value="stiff">filter-Flex-4</option>
                                </select>
                                <div class="customSelect__selected">Flex</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Flex
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?flex=regular&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Regular (R)
                                            </div>
                                        </a>
                                        <a href="?flex=stiff&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Stiff (S)
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="60.00">filter-Lie-Winkel-6</option>
                                        <option value="58.50">filter-Lie-Winkel-6</option>
                                    </select>
                                    <div class="customSelect__selected">Lie-Winkel</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Lie-Winkel
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?lie=60.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    60
                                                </div>
                                            </a>
                                            <a href="?lie=58.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    58.50
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="10.00">filter-Loft-7</option>
                                    <option value="11.50">filter-Loft-7</option>
                                    <option value="10.50">filter-Loft-7</option>
                                    <option value="9.00">filter-Loft-7</option>
                                </select>
                                <div class="customSelect__selected">Loft</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Loft
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?loft=10.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10
                                            </div>
                                        </a>
                                        <a href="?loft=11.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                11.50
                                            </div>
                                        </a>
                                        <a href="?loft=10.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10.50
                                            </div>
                                        </a>
                                        <a href="?loft=9.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                9
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="filterBox__toggleFilterColumn marginBottom">
                            <span class="link filterBox__showHiddenFilters">+ Mehr Filter</span>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-4 col-lg-3 marginBottom sortSelectColumn">
                    <form method="get" class="inputGroup is-filled">
                        <div class="customSelect js-customSelect customSelect--small sortingSelect ">
                            <select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by">
                                <option value="item_no">Artikelnummer</option>
                                <option value="description">Artikelbezeichnung</option>
                                <option value="creation_date">Neueste</option>
                                <option value="sorting">Empfehlung</option>
                                <option value="base_price_asc">Preis aufsteigend</option>
                                <option value="base_price_desc" selected="">Preis absteigend</option>
                            </select>
                            <div class="customSelect__selected">Preis absteigend</div>
                            <div class="customSelect__dropdown">
                                <div class="customSelect__dropdownClose">
                                    <i class="icon icon-close"></i>
                                </div>
                                <div class="customSelect__dropdownHeader d-block d-sm-none">
                                    <div class="customSelect__dropdownTitle">
                                        Sortierung
                                    </div>
                                </div>
                                <div class="customSelect__dropdownBody">
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
                                        <div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
                                        <div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="creation_date">
                                        <div class="customSelect__dropdownItemHeadline">Neueste</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
                                        <div class="customSelect__dropdownItemHeadline">Empfehlung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="base_price_asc">
                                        <div class="customSelect__dropdownItemHeadline">Preis aufsteigend</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="base_price_desc">
                                        <div class="customSelect__dropdownItemHeadline">Preis absteigend</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide Shop.Filter
*/
.filterForm {
  width: 100%;
}

.filterReset {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  text-decoration: none;
  padding-left: 40px !important;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.filterReset .icon, .filterReset:before {
  position: absolute;
  font-size: 18px;
  left: 15px;
  top: 50%;
  translate: 0 -50%;
  transition: left 0.2s ease-in-out;
}
.filterReset:before {
  content: var(--base-icon-trash);
  font-family: "icons", Helvetica, Arial, sans-serif;
  left: -50%;
}
.filterReset:hover, .filterReset:focus, .filterReset:active {
  background: var(--main-color-middle-gray);
  border-color: var(--main-color-middle-gray);
  color: var(--main-color-black);
  text-decoration: none;
}
.filterReset:hover .icon, .filterReset:focus .icon, .filterReset:active .icon {
  left: -50%;
}
.filterReset:hover:before, .filterReset:focus:before, .filterReset:active:before {
  left: 15px;
}

.filterBox__mobileButton {
  margin-bottom: 20px;
  display: flex;
  position: relative;
  border: 1px solid var(--main-color-black);
  border-radius: 25px;
  padding: 5px 10px 5px 35px;
  line-height: 24px;
}
.filterBox__mobileButton:before {
  content: var(--base-icon-filter);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 2rem;
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
}
@media (min-width: 768px) {
  .filterBox__mobileButton {
    display: none;
  }
}
.filterBox__filter .customSelect {
  width: 100%;
}
.filterBox__contentTitle {
  font-weight: var(--main-font-weight-bold);
  font-size: 1.9rem;
}
.filterBox__close {
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.filterBox__close i {
  display: block;
}
.filterBox__close:hover {
  background: var(--main-color-light-gray);
}
.filterBox__contentHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .filterBox__contentHeader {
    display: none;
  }
}
.filterBox__showHiddenFilters {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .filterBox__filter {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: scroll;
  }
}
@media (min-width: 768px) {
  .filterBox__filter .hiddenFilter {
    display: none;
  }
}
.filterBox__filter > .row {
  align-items: flex-start;
}
.filterBox__filter > .row > .filterBox__toggleFilterColumn {
  width: auto;
  display: none;
}
@media (min-width: 768px) {
  .filterBox__filter > .row > .filterBox__toggleFilterColumn {
    display: flex;
    align-items: center;
    min-height: 50px;
  }
}
@media (max-width: 767px) {
  .filterBox__buttons {
    flex-shrink: 0;
    padding-top: 10px;
  }
}
@media (max-width: 767px) {
  .filterBox__content {
    flex-direction: column;
    z-index: 104;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--main-color-white);
    max-height: 100%;
    padding: 20px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1019607843);
    translate: 0 110%;
    transition: 0.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .filterBox.is-active .filterBox__content {
    display: flex;
    translate: 0 0;
    pointer-events: auto;
    opacity: 1;
  }
}
.filterBox .button, .filterBox .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .filterBox .orderButton {
  min-width: 0;
}
.filterBox .button_row {
  margin-top: 0;
  margin-bottom: -10px;
}
.filterBox .button_row .button, .filterBox .button_row .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .filterBox .button_row .orderButton,
.filterBox .button_row .buttonLink,
.filterBox .button_row .buttonPrimary,
.filterBox .button_row .buttonAction {
  margin-top: 0;
  margin-bottom: 10px;
  min-width: 0;
}

.sortSelectColumn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.sortSelectColumn .inputGroup,
.sortSelectColumn .customSelect {
  width: auto;
  max-width: 100%;
  margin: 0;
}
@media (min-width: 768px) {
  .sortSelectColumn {
    min-height: 50px;
    flex-wrap: nowrap;
  }
}
@media (max-width: 767px) {
  .sortSelectColumn .inputGroup,
  .sortSelectColumn .customSelect {
    width: 100%;
  }
  .sortSelectColumn .customSelect__selected {
    width: 100%;
    border: 1px solid var(--main-color-black);
    border-radius: 25px;
    padding: 5px 35px 5px 10px;
    line-height: 24px;
    display: flex;
  }
  .sortSelectColumn .customSelect__selected:after {
    right: 10px;
  }
}

.filterSortLine {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .filterSortLine {
    margin-bottom: 30px;
  }
}

.rangeSlider {
  position: relative;
  padding-bottom: 45px;
}
.rangeSlider__track {
  width: 100%;
  height: 3px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  margin-top: 2px;
}
.rangeSlider__inputs {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 200px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.rangeSlider__inputs span {
  flex-grow: 1;
}
.rangeSlider__inputs input {
  text-align: center;
}
.rangeSlider__ranges {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
}
.rangeSlider input[type=range] {
  appearance: none;
  width: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  background-color: transparent;
  pointer-events: none;
  line-height: 0;
  padding: 0;
  border: 0;
  z-index: 1;
}
.rangeSlider input[type=range]::-webkit-slider-runnable-track, .rangeSlider input[type=range]::-moz-range-track, .rangeSlider input[type=range]::-ms-track {
  height: 5px;
}
.rangeSlider input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}
.rangeSlider input[type=range]::-moz-range-track {
  -moz-appearance: none;
}
.rangeSlider input[type=range]::-ms-track {
  appearance: none;
}
.rangeSlider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background-color: var(--main-color-black);
  cursor: pointer;
  margin-top: -6px;
  pointer-events: auto;
  border-radius: 50%;
}
.rangeSlider input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.rangeSlider input[type=range]::-ms-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.rangeSlider input[type=range]:active::-webkit-slider-thumb {
  background-color: var(--main-color-primary);
}

.customSelect__dropdownBody .rangeSlider {
  padding-left: 10px;
  padding-right: 10px;
}
.customSelect__dropdownBody .rangeSlider__ranges {
  left: 10px;
  max-width: calc(100% - 20px);
  max-width: -moz-calc(100% - 20px);
  max-width: -webkit-calc(100% - 20px);
  max-width: -o-calc(100% - 20px);
}

/*
Variantselection

Markup:
<div class="variantSelection">
  <a class="variantSelection__item" data-tooltip="Label">
    <img src="kss-assets/sample.png" alt="Text" />
  </a>
</div>

Styleguide Shop.Variantselection
*/
.variantSelection {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 5px;
}
.variantSelection__item {
  border: 2px solid var(--main-color-black);
  border-radius: 25px;
  padding: 5px;
  display: flex;
}
.variantSelection__item:hover {
  border-color: var(--main-color-black);
}
.variantSelection__item.is-active {
  border-color: var(--main-color-black);
}
.variantSelection__item img {
  aspect-ratio: 1;
  object-fit: contain;
}

.variantSelection {
  position: relative;
}
.variantSelection .swiper-button-prev,
.variantSelection .swiper-button-next {
  top: 50%;
  margin-top: -10px;
  color: var(--main-color-dark-gray);
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.variantSelection .swiper-button-prev:not(.swiper-button-disabled),
.variantSelection .swiper-button-next:not(.swiper-button-disabled) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.variantSelection .swiper-button-prev:not(.swiper-button-disabled):hover,
.variantSelection .swiper-button-next:not(.swiper-button-disabled):hover {
  color: var(--main-color-black);
}
.variantSelection .swiper-button-prev.swiper-button-disabled,
.variantSelection .swiper-button-next.swiper-button-disabled {
  display: none;
}
.variantSelection .swiper-button-prev {
  left: -20px;
}
@media (min-width: 1024px) {
  .variantSelection .swiper-button-prev {
    left: -30px;
  }
}
.variantSelection .swiper-button-next {
  right: -20px;
}
@media (min-width: 1024px) {
  .variantSelection .swiper-button-next {
    right: -30px;
  }
}
.variantSelection .swiper-slide {
  width: 70px;
}
.variantSelection .swiper {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.variantSelection .swiper:not(.swiper-initialized) .swiper-wrapper {
  grid-gap: 5px;
}

/*
Shop Attributes Icons

Markup:
<div class="attributesIcons">
    <div class="attributesIcons__img image">
        <img src="kss-assets/sample.png" alt="" width="70px" height="70px">
    </div>
    <div class="attributesIcons__img image">
        <img src="kss-assets/sample.png" alt="" width="70px" height="70px">
    </div>
</div>

Styleguide Shop.Attributes Icons
*/
.attributesIcons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 8px;
}
.attributesIcons__img {
  max-width: 40px;
}
@media (min-width: 768px) {
  .attributesIcons__img {
    max-width: 70px;
  }
}

@media (max-width: 767.98px) {
  .itemcardMedia {
    max-width: calc(100vw - 40px);
    overflow-x: hidden;
  }
}

.itemcardBadges {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.itemcardImagesAttributes {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  max-width: 50%;
  justify-content: flex-end;
}

.itemcardImagesMain {
  overflow: hidden;
  position: relative;
  padding-bottom: 36px;
}
.itemcardImagesMain .swiper-button-prev.swiper-button-disabled.swiper-button-lock,
.itemcardImagesMain .swiper-button-next.swiper-button-disabled.swiper-button-lock {
  opacity: 0;
}
.itemcardImagesMain .swiper-button-prev {
  right: auto;
  left: calc(50% - 48px);
}
.itemcardImagesMain .swiper-button-next {
  right: auto;
  left: calc(50% + 16px);
}
.itemcardImagesMain .itemcardImages__img {
  aspect-ratio: 3/4;
  max-height: 80vh;
  max-height: 80dvh;
  max-width: calc(100vw - 40px);
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemcardImagesMain .itemcardImages__img > video,
.itemcardImagesMain .itemcardImages__img > img {
  aspect-ratio: 3/4;
  width: 100%;
  height: 100%;
  max-height: 80vh;
  max-height: 80dvh;
  max-width: calc(100vw - 40px);
  object-fit: contain;
}
.itemcardImagesMain .itemcardImages__img .swiper-zoom-container {
  height: 100%;
  width: 100%;
  max-height: 80vh;
  max-height: 80dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemcardImagesMain .itemcardImages__img .swiper-zoom-container img.swiper-zoom-target {
  cursor: zoom-in;
  transform-origin: center center;
  width: 100%;
  height: 100%;
  max-height: 80vh;
  max-height: 80dvh;
  max-width: calc(100vw - 40px);
  aspect-ratio: 3/4;
  object-fit: contain;
}
.itemcardImagesMain .itemcardImages__img .swiper-zoom-container img.swiper-zoom-target:active {
  cursor: grabbing;
}
.swiper-slide-zoomed .itemcardImagesMain .itemcardImages__img {
  overflow: visible !important;
}
.itemcardImagesMain .itemcardImages__img .viewer360Wrapper .viewer360Images img {
  aspect-ratio: 3/4;
}
.itemcardImagesMain .itemcardImages__item {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  background: var(--main-color-white);
}
.itemcardImagesMain .swiper-slide-zoomed .swiper-zoom-container img.swiper-zoom-target {
  cursor: grab;
}
.itemcardImagesMain .swiper-slide-zoomed .swiper-zoom-container img.swiper-zoom-target:active {
  cursor: grabbing;
}

.itemcardImagesThumbs img {
  pointer-events: none;
  user-select: None;
}
.itemcardImagesThumbs .itemcardImages__img {
  pointer-events: none;
}
.itemcardImagesThumbs .itemcardImages__img > video,
.itemcardImagesThumbs .itemcardImages__img > img {
  width: auto;
}
.itemcardImagesThumbs .itemcardImages__item {
  width: 70px;
  display: flex;
  cursor: pointer;
  padding: 10px;
  pointer-events: none;
}
@media (min-width: 768px) {
  .itemcardImagesThumbs .itemcardImages__item {
    width: 104px;
  }
}
.itemcardImagesThumbs .swiper-container {
  flex-grow: 1;
}
@media (max-width: 767px) {
  .itemcardImagesThumbs .swiper-wrapper {
    justify-content: center;
  }
}
.itemcardImagesThumbs .swiper-slide {
  cursor: pointer;
  transition: 0.2s ease-in-out;
  display: flex;
  height: auto;
  width: 70px;
}
@media (min-width: 768px) {
  .itemcardImagesThumbs .swiper-slide {
    width: 104px;
  }
}
.itemcardImagesThumbs .swiper-slide .itemcardImages__item {
  border: 1px solid var(--main-color-black);
}
.itemcardImagesThumbs .swiper-slide:not(.swiper-slide-thumb-active) .itemcardImages__item {
  border-color: var(--main-color-middle-gray);
}
.itemcardImagesThumbs .swiper-slide:hover {
  opacity: 1;
}
.itemcardImagesThumbs.swiper {
  position: relative;
}
.itemcardImagesThumbs.swiper .swiper-button-prev,
.itemcardImagesThumbs.swiper .swiper-button-next {
  top: auto;
  bottom: auto;
  left: 50%;
  right: auto;
  margin: 0;
  transform: translateX(-50%) rotate(90deg);
}
.itemcardImagesThumbs.swiper .swiper-button-prev.swiper-button-disabled,
.itemcardImagesThumbs.swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0;
}
.itemcardImagesThumbs.swiper .swiper-button-prev {
  top: 0;
}
.itemcardImagesThumbs.swiper .swiper-button-next {
  bottom: 0;
}
@media (max-width: 767px) {
  .itemcardImagesThumbs .swiper-slide {
    width: 30px;
  }
  .itemcardImagesThumbs .swiper-slide .itemcardImages__item {
    border: 0;
    background: var(--main-color-middle-gray);
    padding: 0;
    height: 2px;
  }
  .itemcardImagesThumbs .swiper-slide.swiper-slide-thumb-active .itemcardImages__item {
    background: var(--main-color-black);
  }
  .itemcardImagesThumbs .itemcardImages__img {
    display: none;
  }
  .itemcardImagesThumbs .swiper .swiper-button-prev,
  .itemcardImagesThumbs .swiper .swiper-button-next {
    display: none;
  }
}

.itemcardImages {
  position: relative;
  width: 100%;
}
.itemcardImages:before {
  content: var(--base-icon-loading);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: 80px;
  z-index: 106;
  color: var(--main-color-middle-gray);
  animation: rotation 1s infinite ease-in-out;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .itemcardImages:before {
    font-size: 120px;
  }
}
.itemcardImages > * {
  transition: opacity 0.2s ease-in-out;
}
.itemcardImages.is-loading:before {
  opacity: 1;
}
.itemcardImages.initialized:before {
  display: none;
}
.itemcardImages:not(.initialized) > * {
  opacity: 0;
}
@media (min-width: 768px) {
  .itemcardImages.thumbsLeft {
    display: flex;
  }
  .itemcardImages.thumbsLeft .itemcardImagesMain {
    order: 1;
    flex-grow: 1;
    width: 0;
  }
  .itemcardImages.thumbsLeft .itemcardImagesMain .swiper-wrapper {
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .itemcardImages .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) {
    margin-left: -5px;
    margin-right: -5px;
  }
  .itemcardImages .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-slide {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.itemcardBuybox {
  background: var(--main-color-white);
}
.itemcardBuybox .itemcardSummary, .itemcardBuybox .itemcardInventory, .itemcardBuybox .itemcardDescriptionsInHeader {
  margin-bottom: 46px;
}
.itemcardBuybox__variant {
  margin-bottom: 46px;
}
.itemcardBuybox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .itemcardBuybox__main {
    padding-bottom: 20px;
  }
}
.itemcardBuybox__bottom {
  padding-top: 20px;
}
@media (min-width: 768px) {
  .itemcardBuybox__bottom {
    padding-bottom: 20px;
    border-top: 1px solid var(--main-color-light-gray);
  }
}
.itemcardBuybox__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .itemcardBuybox__actions {
    margin-top: 40px;
    margin-bottom: 20px;
  }
}
.itemcardBuybox__actions .button--primary, .itemcardBuybox__actions .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .itemcardBuybox__actions .orderButton {
  flex-grow: 1;
}
.itemcardBuybox__trustSection {
  padding: 20px 40px;
}
.itemcardBuybox__trustSection .trustInfobar img {
  max-height: 30px;
  width: 50px !important;
}
.itemcardBuybox .itemcardInventory__label {
  font-size: var(--main-font-size-medium);
}
.itemcardBuybox .itemcardInventory__label span {
  font-weight: var(--main-font-weight-medium);
}
.itemcardBuybox .itemcardInventory, .itemcardBuybox .itemcardItemNo {
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  gap: 7px;
}
.itemcardBuybox .itemcardInventory > div:first-child, .itemcardBuybox .itemcardItemNo > div:first-child {
  min-width: 120px;
}
.itemcardBuybox .inventoryWrapper {
  margin-top: 20px;
}
.itemcardBuybox .prices .basePrice {
  margin-bottom: 0;
  font-weight: var(--main-font-weight-bold);
  font-size: 2.4rem;
}
@media (min-width: 1024px) {
  .itemcardBuybox .prices .basePrice {
    font-size: 2.7rem;
  }
}
.itemcardBuybox .amountLine:not(:last-child) {
  border-bottom: 1px solid var(--main-color-light-gray);
}
.itemcardBuybox .amountLine__label {
  color: var(--main-color-dark-gray);
  font-size: var(--main-font-size-small);
}
.itemcardBuybox .amountLines {
  margin-bottom: 20px;
}
.itemcardBuybox .itemcardOrderActions {
  container-type: inline-size;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: end;
}
.itemcardBuybox .itemcardOrderActions .orderbox {
  flex-grow: 1;
}
.itemcardBuybox .itemcardOrderActions .actionIcon .icon {
  font-size: 2.8rem;
}
.itemcardBuybox .orderButtonWrapper {
  margin-top: 46px;
  justify-content: start;
  flex-grow: 1;
}
.itemcardBuybox .orderButtonWrapper .orderButton {
  width: 40px;
  height: 40px;
  padding: 13px 19px;
}
@media (max-width: 767.98px) {
  .itemcardBuybox .orderButtonWrapper .orderButton {
    width: auto;
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton > span {
    display: block;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton > span .mobile-hidden {
    display: none;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton > .icon {
    position: static;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton.disabled {
    display: none;
  }
}
@container (inline-size > 580px) {
  .itemcardBuybox .orderButtonWrapper .quantity:not(.quantity--small) .quantity__spinnerItem {
    width: 50px;
    height: 50px;
  }
  .itemcardBuybox .orderButtonWrapper .quantity:not(.quantity--small) .quantity__spinnerItem .icon {
    left: 0;
    top: 0;
  }
  .itemcardBuybox .orderButtonWrapper .quantity:not(.quantity--small) input {
    line-height: 50px;
    max-height: 50px;
    font-size: 2rem;
  }
  .itemcardBuybox .orderButtonWrapper .quantity:not(.quantity--small) .quantity__spinner {
    width: 50px;
  }
  .itemcardBuybox .orderButtonWrapper .quantity {
    width: 170px;
    max-width: 170px;
    padding-left: 50px;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton {
    flex-grow: 1;
    justify-content: space-between;
    height: 50px;
    width: auto;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton > span {
    display: block;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton > span .mobile-hidden {
    display: inline-block;
  }
  .itemcardBuybox .orderButtonWrapper .orderButton .icon {
    position: inherit;
  }
}
@media (max-width: 767.98px) {
  .itemcardBuybox .orderButtonWrapper {
    position: fixed;
    z-index: 1;
    bottom: 16px;
    left: 16px;
    width: calc(100vw - 32px);
    justify-content: center;
    background-color: var(--main-color-white);
    padding: 14px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
    border-radius: 34px;
  }
}

.itemcardOrderSections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.itemcardOrderSections .itemcardOrderSections__section {
  border-radius: 25px;
  border: 1px solid var(--main-color-black);
  padding: 16px;
}
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .inventoryWrapper,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .orderButtonWrapper,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .priceNotice,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .itemcardOrderSections__sectionOptions {
  display: none;
}
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .prices .basePrice {
  font-size: var(--main-font-size-base);
}
.itemcardOrderSections .itemcardOrderSections__section.is-active {
  border-width: 2px;
  border-color: var(--main-color-black);
}

.itemcardHeadline:last-child {
  margin-bottom: 0;
}
.itemcardHeadline + .itemcardRating {
  margin-top: -20px;
}

.itemcardActions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}

.itemcardBrand .image, .itemcardBrand .imageCover, .itemcardBrand .itemcardImagesMain .itemcardImages__img, .itemcardImagesMain .itemcardBrand .itemcardImages__img, .itemcardBrand .itemcardImagesThumbs .itemcardImages__img, .itemcardImagesThumbs .itemcardBrand .itemcardImages__img {
  max-width: 80px;
}
.itemcardBrand .image img, .itemcardBrand .imageCover img, .itemcardBrand .itemcardImagesMain .itemcardImages__img img, .itemcardImagesMain .itemcardBrand .itemcardImages__img img, .itemcardBrand .itemcardImagesThumbs .itemcardImages__img img, .itemcardImagesThumbs .itemcardBrand .itemcardImages__img img {
  aspect-ratio: 4/3;
  object-position: left center;
}

.itemcardBrand {
  font-size: 1.5rem;
  margin-bottom: 26px;
}

.itemcardBadges {
  margin-left: 20px;
}

.itemcardAttributes {
  display: flex;
  flex-wrap: wrap;
  container-type: inline-size;
}
.itemcardAttributes__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  aspect-ratio: 1.05;
  width: 50%;
  flex-wrap: wrap;
  text-align: center;
  gap: 16px;
  background: var(--main-color-blue-smoke);
}
@container (inline-size > 540px) {
  .itemcardAttributes__item {
    width: 33.33%;
  }
}
.itemcardAttributes__item.attribute--ALLERGENE {
  background: var(--main-color-brown-middle);
}
.itemcardAttributes__item.attribute--REGION {
  background: var(--main-color-rose-light);
}
.itemcardAttributes__item.attribute--REBSORTE {
  background: var(--main-color-coral);
}
.itemcardAttributes__item.attribute--TRINKTEMPERATUR {
  background: var(--main-color-green-grass);
  color: var(--main-color-white);
}
.itemcardAttributes__item.attribute--TRINKTEMPERATUR .itemcardAttributes__text {
  color: var(--main-color-white);
}
.itemcardAttributes__item.attribute--CODE {
  background: var(--main-color-blue-smoke);
  color: var(--main-color-white);
}
.itemcardAttributes__item.attribute--ALKOHOLGEHALT {
  background: var(--main-color-turquoise-light);
}
.itemcardAttributes__item.attribute--WINE-TYPE {
  background: var(--main-color-green-moss);
  color: var(--main-color-white);
}
.itemcardAttributes__item.attribute--WINE-TYPE .itemcardAttributes__text {
  color: var(--main-color-white);
}
.itemcardAttributes__item.attribute--VOLUME {
  background: var(--main-color-coral-dark);
}
.itemcardAttributes__item.attribute--PRODUZENT {
  background: var(--main-color-yellow-light);
}
.itemcardAttributes__item.attribute--URSPRUNGSLAND {
  background: var(--main-color-lilac);
}
.itemcardAttributes__item.attribute--JAHRGANG {
  background: var(--main-color-blue-smoke);
  color: var(--main-color-white);
}
.itemcardAttributes__item.attribute--JAHRGANG .itemcardAttributes__text {
  color: var(--main-color-white);
}
.itemcardAttributes__text {
  margin-bottom: 0;
}
.itemcardAttributes__headline {
  font-size: 1.8rem;
}

.itemcardMainDescription:last-child {
  margin-bottom: 120px;
}
@media (min-width: 1024px) {
  .itemcardMainDescription:last-child {
    margin-bottom: 64px;
  }
}

.itemcardItemNo {
  border-top: 1px solid var(--main-color-middle-gray);
  padding: 20px 10px 0 10px;
  font-size: var(--main-font-size-medium);
}
.itemcardItemNo span {
  font-weight: var(--main-font-weight-medium);
}

.itemcardInventory {
  border-bottom: 1px solid var(--main-color-middle-gray);
  padding: 8px 10px 20px 10px;
}
.itemcardInventory .inventoryWrapper {
  margin-top: 0;
}

.itemcardOrderActions .prices .crossPrice {
  order: 2;
  font-size: var(--main-font-size-base);
}
.itemcardOrderActions .prices .basePrice {
  order: 1;
}
.itemcardOrderActions .prices .discountPercent {
  order: 3;
  font-size: var(--main-font-size-base);
}
.itemcardOrderActions .prices .item_order_button_discount_info_wrapper {
  order: 4;
}
.itemcardOrderActions .prices .priceNotice {
  order: 5;
}

.itemcardDescriptions {
  grid-area: cardDescriptions;
  display: flex;
  flex-direction: column;
  grid-gap: 46px;
}
.itemcardDescriptions table {
  min-width: 100%;
}

.itemcardMain {
  display: grid;
  width: 100%;
  grid-column-gap: 14px;
  max-width: 1440px;
  margin-inline: auto;
}
.itemcardMain > * {
  margin-bottom: 14px;
}
@media (min-width: 768px) {
  .itemcardMain {
    grid-template-columns: 1fr 50%;
  }
}
@media (min-width: 1024px) {
  .itemcardMain {
    grid-template-columns: 1fr 1fr;
  }
  .itemcardMain .itemcardSide {
    margin-bottom: 0;
  }
}
@media (min-width: 1250px) {
  .itemcardMain > * {
    margin-bottom: 14px;
  }
}
@media (min-width: 1540px) {
  .itemcardMain {
    grid-column-gap: 60px;
  }
}
.itemcardMain__left .itemcardMedia__stickyWrapper {
  height: 100%;
}
.itemcardMain__left .itemcardMedia__stickyContent {
  overflow: hidden;
  position: sticky;
  top: 120px;
}

.itemcardNavigation__nav {
  display: none;
  position: fixed;
  top: 50vh;
  top: 50dvh;
  top: 50svh;
  transform: translateY(-50%);
  z-index: 99;
  padding: 10px;
  font-size: 1.5rem;
  letter-spacing: 0.9px;
  color: var(--main-color-dark-gray);
  background: rgba(255, 255, 255, 0.7);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.itemcardNavigation__nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.itemcardNavigation__nav ul li {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.itemcardNavigation__nav ul li a {
  color: var(--main-color-dark-gray);
}
.itemcardNavigation__nav ul li a.is-active {
  color: var(--main-color-black);
}
.itemcardNavigation__nav ul li:before {
  content: "";
  display: inline-flex;
  width: 22px;
  height: 2px;
  background: var(--main-color-dark-gray);
  transition: width 0.2s ease;
}
.itemcardNavigation__nav ul li:has(.is-active):before {
  width: 28px;
}
@media (min-width: 1024px) {
  .itemcardNavigation__nav {
    display: block;
  }
}
.itemcardNavigation__content .swiper {
  margin-left: -20px !important;
  margin-right: -20px !important;
}

.itemcard .contentTabItem {
  display: block;
}

.itemcardNavigation__content {
  min-width: 0;
}
.itemcardNavigation__content #itemcard-descriptions {
  display: none;
}
.itemcardNavigation__content #itemcard-descriptions:has(> *) {
  display: block;
}

.variantSelection {
  gap: 24px;
}
.variantSelection__row .customSelect__selected {
  min-height: 50px;
}

/*
Accountbox

Markup:
<div class="accountBox {{modifier_class}}">
    <div class="accountBox__header">
        <div class="accountBox__headline">
           <i class="icon icon-user"></i>
           Headline
        </div>
        <div class="accountBox__actions">
                <a href="#" class="actionIcon" title="">
                    <i class="icon icon-edit"></i>
                </a>
        </div>
    </div>
    <div class="accountBox__content">
        <div class="marginBottom"><small>Name</small><br>John Doe</div>
        <div class="marginBottom"><small>E-Mail</small><br>info@dc.ag</div>
    </div>
    <div class="accountBox__footer">
        <div class="accountBox__footerLeft">
            <button><i class="icon icon-delete"></i>Delete</button>
        </div>
    </div>
</div>
<div class="accountBox">
    <div class="accountBox__header">
        <div class="accountBox__headline">
           <i class="icon icon-user"></i>
           Headline
        </div>
        <div class="accountBox__headerButton">
            <a href="#" title="">
              Show All
            </a>
        </div>
    </div>
    <div class="accountBox__content">
        <div class="marginBottom"><small>Name</small><br>John Doe</div>
        <div class="marginBottom"><small>E-Mail</small><br>info@dc.ag</div>
    </div>
</div>

.accountBox--new - New

Styleguide Shop.Accountbox
*/
.gp.accountBox h3, .gp.accountBox .h3, .accountBox__headline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  min-height: 30px;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-base);
  margin: 0;
}
.gp.accountBox h3 .icon, .gp.accountBox .h3 .icon, .accountBox__headline .icon {
  font-size: 1.4em;
  margin-right: 5px;
  font-weight: normal;
  width: 30px;
  text-align: center;
}

.accountBox {
  border: 1px solid var(--main-color-black);
  padding: 10px 20px 20px 20px;
  border-radius: 25px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .accountBox {
    min-height: 120px;
  }
}
.accountBox__actions {
  margin-left: 20px;
  margin-right: -10px;
}
.accountBox__actions a, .accountBox__actions button {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--main-color-dark-gray);
  width: 30px;
  height: 30px;
  display: flex;
  align-content: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  flex-wrap: wrap;
  line-height: 1;
}
.accountBox__actions a:hover, .accountBox__actions button:hover {
  color: var(--main-color-black);
}
.accountBox__actions a:not(:last-child), .accountBox__actions button:not(:last-child) {
  margin-bottom: 10px;
}
.accountBox__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.accountBox__headerButton {
  font-size: var(--main-font-size-small);
}
.accountBox__content {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accountBox__content small {
  color: var(--main-color-dark-gray);
}
.accountBox__content .marginBottom:last-child, .accountBox__content .algoliaSearchLayout:last-child {
  margin-bottom: 0;
}
.accountBox__footer {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--main-color-dark-gray);
}
.accountBox__footer a,
.accountBox__footer button {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--main-font-size-small);
  color: var(--main-color-dark-gray);
}
.accountBox__footer a:hover,
.accountBox__footer button:hover {
  color: var(--main-color-black);
}
.accountBox--new {
  text-align: center;
  height: 100%;
  color: var(--main-color-dark-gray);
  font-size: var(--main-font-size-base);
  cursor: pointer;
}
.accountBox--new:hover {
  color: var(--main-color-black);
}
.accountBox--new .accountBox__content {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.accountBox--new .accountBox__content .icon {
  font-size: 40px;
}

a.accountBox {
  color: var(--main-color-black);
  text-decoration: none;
}
a.accountBox:hover {
  text-decoration: none;
  border-color: var(--main-color-primary);
}

.gp.accountBox:hover {
  border-color: var(--main-color-primary);
}
.gp.accountBox > .link {
  text-decoration: none;
  color: var(--main-color-black);
}
.gp.accountBox > .link:hover {
  text-decoration: none;
}
.gp.accountBox h3, .gp.accountBox .h3 {
  margin-bottom: 10px;
}

.accountBoxForm {
  width: 100%;
  display: flex;
}

@media (min-width: 768px) {
  .iconbarHover--basket {
    width: 380px;
  }
}
.iconbarHover--basket .iconbarHover__footer .amountLines {
  margin-bottom: 20px;
}
.iconbarHover--basket .itemBasketBox {
  font-size: var(--main-font-size-small);
  grid-gap: 10px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxPrice" "itemBasketBoxImg itemBasketBoxActions itemBasketBoxActions";
}
.iconbarHover--basket .itemBasketBox__img {
  width: 60px;
}
.iconbarHover--basket .itemBasketBox__description {
  font-size: inherit;
}
.iconbarHover--basket .itemBasketBox .linkWithIcon {
  font-size: var(--main-font-size-small);
}

.availability_message {
  margin-top: 24px;
}
.availability_message .availability_message_button {
  display: inline-block;
  margin-bottom: 12px;
}
.availability_message .availability_message_button .icon {
  padding-right: 12px;
}
.availability_message .availability_message_box {
  padding: 24px;
  border: 1px solid var(--main-color-gray-base);
  background-color: var(--main-color-white);
  margin-bottom: 24px;
}
.availability_message .availability_message_box .button, .availability_message .availability_message_box .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .availability_message .availability_message_box .orderButton {
  width: 100%;
}

.js-itemBasketList.is-loading,
.js-basketOrderBox.is-loading {
  cursor: wait;
  pointer-events: none;
}
.js-itemBasketList.is-loading input,
.js-itemBasketList.is-loading .quantity,
.js-basketOrderBox.is-loading input,
.js-basketOrderBox.is-loading .quantity {
  opacity: 0.5;
}

.archiveFilterbox {
  margin-bottom: 40px;
}
.archiveFilterbox > .inner {
  container-type: inline-size;
}
.archiveFilterbox .filterGrid {
  display: grid;
  gap: 24px;
}
.archiveFilterbox .filterGrid__left {
  display: grid;
  gap: 12px;
}
.archiveFilterbox .filterGrid__right {
  display: flex;
  gap: 12px;
}

@container (inline-size > 540px) {
  .archiveFilterbox .filterGrid__left {
    grid-template-columns: 1fr 1fr;
  }
  .archiveFilterbox .filterGrid.col4 .filterGrid__left {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@container (inline-size > 890px) {
  .archiveFilterbox .filterGrid {
    grid-template-columns: 1fr auto;
  }
  .archiveFilterbox .filterGrid__left {
    grid-template-columns: 1fr 1fr;
  }
  .archiveFilterbox .filterGrid__right {
    align-items: flex-end;
  }
}
.archiveTable {
  margin-bottom: 36px;
}
.archiveTable .button, .archiveTable .itemcardBuybox .orderButtonWrapper .orderButton, .itemcardBuybox .orderButtonWrapper .archiveTable .orderButton {
  min-width: 0;
}
.archiveTable__label {
  color: var(--main-color-gray-base);
  display: block;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .archiveTable {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .archiveTable__row {
    display: table-row;
  }
  .archiveTable__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 12px;
    border-top: 1px solid var(--main-color-black);
    width: 120px;
  }
  .archiveTable__cell--auto {
    width: auto;
  }
  .archiveTable__cell:first-child {
    padding-left: 0;
  }
  .archiveTable__cell:last-child {
    padding-right: 0;
    width: auto;
  }
  .archiveTable__infoLine {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .archiveTable__label {
    display: none;
  }
  .archiveTable__header .archiveTable__cell {
    border-top: 0;
  }
}
@media (min-width: 1250px) {
  .archiveTable__cell {
    width: 180px;
  }
}
@media (max-width: 767px) {
  .archiveTable__header {
    display: none;
  }
  .archiveTable__cell {
    text-align: left;
    margin-bottom: 12px;
  }
  .archiveTable__cell:last-child {
    margin-bottom: 0;
  }
  .archiveTable__row {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--main-color-black);
  }
  .archiveTable__label {
    color: var(--main-color-black);
  }
  .archiveTable__statusLine {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 15px;
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 0;
  }
  .archiveTable__statusLine span {
    margin: 0;
  }
  .archiveTable__statusLine:before {
    content: var(--base-icon-angle-right);
    font-family: "icons";
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%) rotate(0);
    font-size: 1.1rem;
    margin-top: 0.5px;
    transition: all 0.2s ease-in-out;
  }
  .archiveTable__statusLine.is-active:before {
    transform: translateY(-50%) rotate(90deg);
  }
  .archiveTable__infoLine {
    display: none;
    padding-left: 15px;
    margin-top: 10px;
  }
  .archiveTable__actionLine {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 5px;
  }
}

@media (min-width: 768px) {
  .archiveTableInTable {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .archiveTableInTable__row {
    display: table-row;
  }
  .archiveTableInTable__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 6px 12px;
    width: 120px;
  }
  .archiveTableInTable__cell--auto {
    width: auto;
  }
  .archiveTableInTable__cell:first-child {
    padding-left: 0;
  }
  .archiveTableInTable__cell:last-child {
    padding-right: 0;
    width: auto;
  }
}
@media (min-width: 1250px) {
  .archiveTableInTable__cell {
    width: 180px;
  }
}
@media (max-width: 767px) {
  .archiveTableInTable__cell {
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .archiveTableInTable__cell:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .toggleTableRow {
    padding-left: 24px;
  }
}

.itemSharing__item {
  margin-top: 10px;
}
.itemSharing__btn {
  position: relative;
  padding-left: 24px;
  display: inline-block;
  cursor: pointer;
  color: var(--main-color-black);
}
.itemSharing__btn .icon {
  text-align: center;
  font-size: 1.2em;
  color: var(--main-color-primary);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.itemSharing__btn:hover {
  color: var(--main-link-color-hover);
}

.itemtable_list {
  display: table;
  width: 100%;
  table-layout: auto;
}
.itemtable_row {
  display: table-row;
}
@media (min-width: 768px) {
  .itemtable_row:last-child .itemtable_cell {
    border-bottom: 1px solid var(--main-color-black);
  }
}
.itemtable_cell {
  display: table-cell;
  vertical-align: top;
  padding: 24px;
  border-top: 1px solid var(--main-color-black);
}
.itemtable_cell .description {
  font-weight: var(--main-font-weight-bold);
}
.itemtable_cell .description > a {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
}
.itemtable_cell .description > a:hover {
  color: var(--main-color-primary);
}
.itemtable_cell .basket_delete {
  margin-top: 24px;
  display: inline-block;
}
.itemtable_cell .order_price {
  font-weight: var(--main-font-weight-bold);
}
.itemtable_label {
  display: none;
  color: var(--main-color-gray-base);
  font-weight: var(--main-font-weight);
  font-size: var(--main-font-size-base);
  margin-bottom: 5px;
}
.itemtable_header .itemtable_cell {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 0;
}
@media (min-width: 768px) {
  .itemtable_cell.image_line {
    width: 140px;
  }
  .itemtable_cell.quantity_line {
    width: 150px;
  }
  .itemtable_cell.price_line, .itemtable_cell.line_amount_line {
    width: 150px;
  }
}
@media (max-width: 767px) {
  .itemtable_list {
    display: block;
  }
  .itemtable_row {
    border-top: 1px solid var(--main-color-black);
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
  }
  .itemtable_row:after {
    content: "";
    display: block;
    clear: both;
  }
  .itemtable_row:last-child {
    border-bottom: 1px solid var(--main-color-black);
  }
  .itemtable_header {
    display: none;
  }
  .itemtable_cell {
    padding: 5px 10px;
    border: 0;
    text-align: left;
    width: 100%;
    width: calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: -o-calc(100% - 80px);
    float: right;
  }
  .itemtable_cell.image_line {
    width: 80px;
    float: left;
  }
  .itemtable_label {
    display: block;
  }
}

.orderOptionList__image {
  width: 80px;
  padding-right: 24px;
}
.orderOptionList__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: 16px;
  margin-bottom: 12px;
}
.orderOptionList__item {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
  color: var(--main-color-black);
  padding: 24px;
  border: 2px solid var(--main-color-light-gray);
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: relative;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  margin-bottom: 14px;
}
.orderOptionList__item input {
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
}
.orderOptionList__item:hover {
  border-color: var(--main-color-primary);
}
.orderOptionList__item.selected {
  border-color: var(--main-color-primary);
}
.orderOptionList > .row > div {
  display: flex;
}

.order_price_total,
.order_price_total_label {
  font-size: 16px;
  font-weight: var(--main-font-weight-bold);
}

.orderSummaryHead {
  margin-bottom: 12px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}
.orderSummaryHead__text {
  font-size: 1.6rem;
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-black);
}

@media (max-width: 767px) {
  .order_prices_box {
    display: block;
  }
  .order_prices_box .order_prices_box_left {
    width: 100%;
    border-bottom: 0;
  }
  .order_prices_box .order_prices_box_right {
    width: 100%;
  }
}
/*
Checkout Buttons

Markup:
<div id="AmazonPayButton" class="checkoutButton checkoutButton--amazon">
    <img class="checkoutButton__logo" src="/userdata/checkout/amazonCheckoutLogo.svg" alt="Amazon" />
    <div class="checkoutButton__text"><span>Pay with</span> Amazon</div>
</div>
<a href="#" class="checkoutButton checkoutButton--paypal">
    <img class="checkoutButton__logo" src="/userdata/checkout/paypalCheckoutLogo.svg" alt="PayPal">
    <div class="checkoutButton__text"><span>Pay with</span> Paypal</div>
</a>

Styleguide Shop.Checkout Buttons
*/
.checkoutButton {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  color: var(--main-color-black);
  cursor: pointer;
  background: var(--main-color-light-gray);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 5px 10px;
  font-weight: var(--main-font-weight-bold);
  min-height: 40px;
}
@media (min-width: 768px) {
  .checkoutButton {
    min-height: 50px;
    padding: 10px;
  }
}
.checkoutButton:hover {
  background: var(--main-color-gray-base);
  color: var(--main-color-black) !important;
  text-decoration: none;
}
.checkoutButton:active {
  background: var(--main-color-gray-base);
  color: var(--main-color-black) !important;
  text-decoration: none;
}
.checkoutButton__logo {
  aspect-ratio: 1;
  width: 24px;
  height: 24px !important;
  object-fit: contain;
}

.checkoutButton--amazon .amazonpay-button-inner-image {
  display: none;
}
.checkoutButton--amazon .checkoutButton__text span {
  color: #FF9900;
}

.checkoutButton--paypal .checkoutButton__text span {
  color: #179BD7;
}

.shipmentAddressList {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.shipmentAddressList .accountBox {
  height: 100%;
}

.campaignBanner {
  padding: 20px 40px;
  background: var(--main-color-light-gray);
}

.campaignBannerImg {
  margin-bottom: 20px;
}

.campaignBadge--icon {
  width: 50px;
}
.campaignBadge--icon img {
  display: block;
  object-fit: contain;
  object-position: center;
}

.campaignBadges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.promotion--campaign {
  background: var(--main-color-warning);
  color: var(--main-color-white);
}
.promotion--campaign.promotion--clickable:hover {
  background: var(--main-color-warning-dark);
  color: var(--main-color-white);
}

.itemcard .promotionText {
  margin-bottom: 120px;
}

.dcOrderSelectedBackground img {
  aspect-ratio: 100/56;
  object-fit: cover;
  width: 100%;
}

.dcOrderBackgroundSelect {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  width: 20%;
  cursor: pointer;
  position: relative;
  opacity: 0.7;
}
.dcOrderBackgroundSelect:before, .dcOrderBackgroundSelect:after {
  content: "";
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--main-color-white);
  position: absolute;
  right: 10px;
  top: 5px;
  border-radius: 50%;
  font-size: 24px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}
@media (max-width: 767px) {
  .dcOrderBackgroundSelect:before, .dcOrderBackgroundSelect:after {
    right: 15px;
    width: 20px;
    height: 20px;
    font-size: 16px;
  }
}
.dcOrderBackgroundSelect:after {
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  opacity: 0;
}
.dcOrderBackgroundSelect img {
  aspect-ratio: 100/56;
  object-fit: cover;
  width: 100%;
}
.dcOrderBackgroundSelect:hover {
  opacity: 1;
}
.dcOrderBackgroundSelect:hover:after {
  opacity: 0.5;
}
.dcOrderBackgroundSelect.is-active {
  opacity: 1;
}
.dcOrderBackgroundSelect.is-active:after {
  opacity: 1;
}

.dcOrderBackgroundSelects {
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
}
@media (max-width: 767px) {
  .dcOrderBackgroundSelects {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .dcOrderBackgroundSelects > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: calc(50% - 16px);
    width: -moz-calc(50% - 16px);
    width: -webkit-calc(50% - 16px);
    width: -o-calc(50% - 16px);
    padding-left: 8px;
    padding-right: 8px;
  }
}

.dcOrderTags {
  justify-content: space-between;
}
@media (max-width: 767px) {
  .dcOrderTags {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .dcOrderTags > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
  .dcOrderTags .tag {
    padding: 15px 10px;
  }
}

.giftPackageElement {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: var(--main-color-black);
}
.giftPackageElement:hover, .giftPackageElement:focus, .giftPackageElement:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.giftPackageElement__image img {
  aspect-ratio: 4/3;
  object-fit: contain;
  object-position: left center;
}
.giftPackageElement__description {
  font-weight: var(--main-font-weight-bold);
}
.giftPackageElement__summary {
  margin-top: 10px;
}
.giftPackageElement__content {
  flex-grow: 1;
  padding-top: 20px;
  padding-bottom: 20px;
}

.giftPackageList {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
@media (min-width: 768px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (min-width: 1024px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (min-width: 1250px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (min-width: 1540px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

/*
Skeleton

Markup:
<div class='loadSkeleton'>XXX</div>
<span class='loadSkeleton'>XXX,00 €</span>


Styleguide Components.Skeleton
*/
.loadSkeleton {
  background: var(--main-color-light-gray) !important;
  animation: pulse 1s infinite ease-in-out;
  color: transparent !important;
}

.favorites__viewToggle {
  display: flex;
  justify-content: start;
}
.favorites__viewToggle .viewToggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  gap: 6px;
}
.favorites__viewToggle .viewToggle__button {
  background: var(--main-color-white);
  border: none;
  padding: 8px 12px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--main-color-black);
}
.favorites__viewToggle .viewToggle__button .icon {
  font-size: 2.4rem;
  color: var(--main-color-black);
}
.favorites__viewToggle .viewToggle__button:hover {
  background: var(--main-link-color-hover);
  color: var(--main-color-white);
}
.favorites__viewToggle .viewToggle__button:hover .icon {
  color: var(--main-color-white);
}
.favorites__viewToggle .viewToggle__button--active {
  background: var(--main-color-primary);
}
.favorites__viewToggle .viewToggle__button--active .icon {
  color: var(--main-color-black);
}
.favorites__viewToggle .viewToggle__button--active:hover {
  background: var(--main-color-primary);
}
.favorites__viewToggle .viewToggle__button--active:hover .icon {
  color: var(--main-color-black);
}

.favorites__content .grid-view {
  display: block;
}
.favorites__content .itemcardVariants {
  display: none;
}
.favorites__content.show-list-view .grid-view {
  display: none;
}
.favorites__content.show-list-view .itemcardVariants {
  display: block;
}

.favoriteList__overview {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.favoriteList__overview .favoriteListItem {
  background: var(--main-color-white);
  border: 1px solid var(--main-color-black);
  border-radius: 15px;
  padding: 15px;
}
.favoriteList__overview .favoriteListItem--new {
  cursor: pointer;
  transition: all 0.2s ease;
}
.favoriteList__overview .favoriteListItem--new .favoriteListItem__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  align-items: center;
  height: 100%;
}
.favoriteList__overview .favoriteListItem--new .favoriteListItem__content i {
  font-size: 5rem;
}
.favoriteList__overview .favoriteListItem--new:hover {
  background: var(--main-color-primary);
}
.favoriteList__overview .favoriteListItem__count {
  border-radius: 100px;
  min-height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--main-font-weight-bold);
  align-self: center;
}
.favoriteList__overview .favoriteListItem__header {
  display: flex;
  align-items: center;
  justify-content: end;
}
.favoriteList__overview .favoriteListItem__container .h3 {
  margin-bottom: 0;
}

.headerLogo a, .headerLogo img {
  max-width: 109px;
  width: 100%;
  display: block;
  aspect-ratio: 2.07;
  object-fit: contain;
  object-position: left center;
}
@media (min-width: 374px) {
  .headerLogo a, .headerLogo img {
    max-width: 120px;
  }
}
@media (min-width: 768px) {
  .headerLogo a, .headerLogo img {
    max-width: 140px;
  }
}
@media (min-width: 1250px) {
  .headerLogo a, .headerLogo img {
    max-width: 207px;
  }
}

.headerTrust {
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  font-size: var(--main-font-size-small);
}
.headerTrust a {
  color: var(--main-color-primary-contrast);
  text-decoration: underline;
}
.headerTrust a:hover {
  color: var(--main-color-primary-dark-contrast);
}

.headerTopRight {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}

.headerTop {
  background: var(--main-color-rose);
  padding-block: 5px;
  font-size: var(--main-font-size-small);
  font-weight: var(--main-font-weight-medium);
  line-height: 1.2;
  position: relative;
  z-index: 1;
  color: var(--main-color-black);
}
@media (min-width: 1024px) {
  .headerTop {
    font-size: 1.5rem;
  }
}
.headerTop a {
  color: var(--main-color-black);
}
.headerTop a:hover, .headerTop a:focus, .headerTop a:active {
  color: var(--main-link-color-hover);
  text-decoration: none;
}
.headerTop .linkWithIcon {
  line-height: 1.2;
}
.headerTop .container {
  max-width: 1720px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.headerTop__trust {
  text-align: center;
}
@media (min-width: 1024px) {
  .headerTop__trust {
    font-size: 1.5rem;
  }
}
.headerTop__trust .textcontent {
  display: flex;
  align-items: center;
}

@media (max-width: 767.98px) {
  #header .headerMain__top > .container {
    gap: 16px 0;
  }
  #header .headerMain .headerLogo {
    order: 1;
    flex: 1 1 50%;
    margin-right: 0;
    max-width: 50%;
  }
  #header .headerMain .headerAccount {
    order: 2;
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end;
    max-width: 50%;
    margin-left: 0;
  }
  #header .headerMain #js-toggleNavigation {
    display: flex;
    margin-right: 16px;
    order: 3;
    flex: 0 0 50px;
    max-width: 50px;
  }
  #header .headerMain #js-toggleNavigation .navToggler {
    margin-left: 0;
  }
  #header .headerMain .headerSearch {
    order: 4;
    margin-top: 0;
    flex: 1 1 calc(100% - 66px);
    max-width: calc(100% - 66px);
  }
  #header .headerMain .headerSearch--minimal {
    display: none;
    margin-right: -24px;
  }
  #header.sticky .headerMain__top {
    padding-block: 8px !important;
  }
  #header.sticky .headerLogo {
    order: 2;
    margin-right: 0;
  }
  #header.sticky .headerLogo a, #header.sticky .headerLogo img {
    max-width: 80px;
  }
  #header.sticky .iconbarItem--favorites {
    display: none;
  }
  #header.sticky .iconbarItem--login {
    display: none;
  }
}
@media (max-width: 767.98px) and (min-width: 340px) {
  #header.sticky .iconbarItem--favorites {
    display: flex;
  }
}
@media (max-width: 767.98px) and (min-width: 420px) {
  #header.sticky .iconbarItem--login {
    display: flex;
  }
}
@media (max-width: 767.98px) {
  #header.sticky .headerAccount {
    order: 4;
    flex-grow: inherit;
    max-width: none;
    flex: inherit;
  }
  #header.sticky #js-toggleNavigation {
    display: flex;
    margin-right: 0;
    order: 1;
  }
  #header.sticky #js-toggleNavigation .navToggler {
    margin-left: 0;
  }
  #header.sticky .headerSearch {
    display: none;
  }
  #header.sticky .headerSearch--minimal {
    order: 3;
    display: block;
    margin-left: auto;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  #header .headerMain__top > .container {
    gap: 24px;
  }
  #header .headerMain .headerAccount {
    margin-left: 0;
  }
  #header .headerMain #js-toggleNavigation {
    display: flex;
  }
  #header .headerMain #js-toggleNavigation .navToggler {
    margin-left: 0;
  }
  #header .headerMain .headerSearch {
    max-width: 405px;
    margin-left: auto;
  }
  #header .headerMain .headerSearch--minimal {
    margin-right: -24px;
    display: none;
  }
  #header.sticky .headerMain__top {
    padding-block: 12px !important;
  }
  #header.sticky .headerLogo {
    order: 2;
  }
  #header.sticky .headerLogo a, #header.sticky .headerLogo img {
    max-width: 107px;
  }
  #header.sticky .headerAccount {
    order: 4;
  }
  #header.sticky #js-toggleNavigation {
    display: flex;
    margin-right: 0;
    order: 1;
  }
  #header.sticky #js-toggleNavigation .navToggler {
    margin-left: 0;
  }
  #header.sticky .headerSearch {
    order: 3;
    max-width: 450px;
  }
}
@media (min-width: 1249px) {
  #header .headerMain #js-toggleNavigation {
    display: none;
  }
  #header .headerMain .headerSearch {
    display: none;
  }
  #header .headerMain .headerSearch--minimal {
    display: block;
  }
  #header.sticky .headerLogo {
    order: 2;
  }
  #header.sticky .headerAccount {
    order: 4;
  }
  #header.sticky #js-toggleNavigation {
    display: flex;
    margin-right: 0;
    order: 1;
  }
  #header.sticky #js-toggleNavigation .navToggler {
    margin-left: 0;
  }
  #header.sticky .headerSearch {
    order: 3;
    flex-grow: 1;
    display: block;
  }
  #header.sticky .headerSearch--minimal {
    display: none;
  }
}
@media (min-width: 1540px) {
  #header .headerMain .headerSearch {
    display: block;
  }
  #header .headerMain .headerSearch--minimal {
    display: none;
  }
  #header.sticky .headerLogo {
    order: 2;
  }
  #header.sticky .headerAccount {
    order: 4;
  }
  #header.sticky #js-toggleNavigation {
    display: flex;
    margin-right: 0;
    order: 1;
  }
  #header.sticky #js-toggleNavigation .navToggler {
    margin-left: 0;
  }
  #header.sticky .headerSearch {
    order: 3;
  }
}
@media (min-width: 1680px) {
  #header .headerMain .searchBar, #header .headerMain .headerSearch {
    width: 450px;
    max-width: 450px;
  }
}
.headerMain {
  background: var(--main-color-white);
  position: relative;
}
.headerMain__top {
  padding-block: 15px;
  border-bottom: 1px solid var(--main-color-middle-gray);
}
@media (min-width: 768px) {
  .headerMain__top {
    padding-block: 30px;
  }
}
.headerMain__top > .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1720px;
}
@media (min-width: 768px) {
  .headerMain__top > .container {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1250px) {
  .headerMain__bottom {
    padding-block: 18px;
  }
}
.headerMain .headerLogo {
  margin-right: 10px;
}
@media (min-width: 1024px) {
  .headerMain .headerLogo {
    margin-right: 20px;
  }
}
@media (min-width: 1250px) {
  .headerMain .headerLogo {
    margin-right: 42px;
  }
}
.headerMain .headerContentNavigation {
  flex-grow: 1;
  display: none;
  font-weight: var(--main-font-weight-medium);
}
@media (min-width: 1024px) {
  .headerMain .headerContentNavigation {
    font-size: 1.7rem;
  }
}
@media (min-width: 1250px) {
  .headerMain .headerContentNavigation {
    display: flex;
  }
}
.headerMain .headerContentNavigation li.level_2 a.is-active {
  color: var(--main-link-color-hover);
}
.headerMain .headerMainNavigation {
  flex-grow: 1;
}
@media (max-width: 1249px) {
  .headerMain .headerMainNavigation {
    display: none;
  }
}
.headerMain .headerSearch {
  margin-left: 10px;
}
@media (min-width: 1024px) {
  .headerMain .headerSearch {
    margin-left: 20px;
  }
}
@media (min-width: 1250px) {
  .headerMain .headerSearch {
    margin-left: 40px;
  }
}
@media (max-width: 1249px) {
  .headerMain .headerSearch {
    flex-grow: 1;
  }
}
@media (max-width: 767px) {
  .headerMain .headerSearch {
    width: 100%;
    margin-left: 0;
    order: 4;
    margin-top: 10px;
  }
}
.headerMain .headerAccount {
  justify-content: flex-end;
  margin-left: 20px;
}
@media (min-width: 1540px) {
  .headerMain .headerAccount {
    margin-left: 40px;
  }
}
@media (max-width: 767px) {
  .headerMain .headerAccount {
    flex-grow: 1;
  }
}
.headerMain .headerNavToggler {
  display: none;
  margin-left: 10px;
}
@media (max-width: 1249px) {
  .headerMain .headerNavToggler {
    display: block;
  }
}

#header {
  position: relative;
  z-index: 100;
}
#header .headerNavToggler {
  display: none;
}
#header .headerNavToggler__container {
  display: none;
  align-items: center;
  gap: 8px;
}
#header .headerNavToggler__label {
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  #header .headerNavToggler__label {
    display: none;
  }
}
@media (max-width: 1249px) {
  #header .headerNavToggler {
    display: block;
  }
}
#header.sticky > .headerStickyContainer {
  transform: translateY(0);
  transition: transform 0.75s ease;
  position: fixed;
  width: 100vw;
  left: 0;
  top: 0;
  z-index: 100;
  border-bottom: 0;
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.1);
}
#header.sticky .headerNavToggler {
  display: block;
}
#header.sticky .headerNavToggler__container {
  margin-right: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#header.sticky .headerTop {
  display: none;
}
#header.sticky .headerContentNavigation {
  display: none;
}
#header.sticky .headerMain {
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.1);
}
#header.sticky .headerMain__top {
  border-bottom: none;
}
@media (min-width: 1540px) {
  #header.sticky .headerMain__top {
    padding-block: 15px;
  }
}
#header.sticky .headerMain__bottom {
  display: none;
}
#header.sticky .headerLogo {
  max-width: 106px;
}
@media (min-width: 1540px) {
  #header.sticky .headerLogo {
    margin-right: 40px;
  }
}
#header.sticky .headerSearch {
  margin-left: auto;
}
#header.is-sticking > .headerStickyContainer {
  top: 0;
  transform: translateY(-100%);
  position: fixed;
}

body:has(.algoliaSearchLayout__header) #header.sticky .headerMain, body:has(.algoliaSearchLayout__header) #header.sticky .headerStickyContainer {
  box-shadow: none;
}

.footerTrust {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.footerTop {
  background: var(--main-color-light-gray);
  padding-top: 30px;
  padding-bottom: 30px;
}

.footerMain {
  padding-top: 20px;
  border-top: 1px solid var(--main-color-middle-gray);
}
@media (min-width: 768px) {
  .footerMain {
    padding-top: 40px;
  }
}
.footerMain__grid {
  display: grid;
  gap: 40px;
  grid-template-areas: "nav" "hofer" "wine";
}
@media (min-width: 768px) {
  .footerMain__grid {
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas: "nav nav" "hofer hofer" "wine wine";
  }
}
@media (min-width: 1250px) {
  .footerMain__grid {
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas: "hofer nav" "wine wine";
  }
}
.footerMain__font--hofer {
  grid-area: hofer;
  margin-bottom: -40px;
}
@media (min-width: 768px) {
  .footerMain__font--hofer {
    width: 40%;
  }
}
@media (min-width: 1250px) {
  .footerMain__font--hofer {
    width: 100%;
    margin-bottom: 0;
  }
}
.footerMain__font--wineAndSpirits {
  grid-area: wine;
}
@media (min-width: 768px) {
  .footerMain__font--wineAndSpirits {
    display: flex;
    gap: 15px;
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {
  .footerMain__font--wineAndSpirits {
    gap: 25px;
  }
}
.footerMain__navPayment {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1540px) {
  .footerMain__navPayment {
    padding-top: 30px;
  }
}
@media (min-width: 768px) {
  .footerMain__navPayment {
    flex-direction: row;
    gap: 16px;
  }
}
.footerMain__nav {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .footerMain__nav {
    grid-template-columns: 1fr 0.75fr;
  }
}
.footerMain .navgroup {
  margin: 0;
}
.footerMain .navgroup__title {
  color: var(--main-color-middle-gray);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: var(--main-font-weight-black);
  font-size: var(--main-font-size-small);
  letter-spacing: 1.12px;
}
.footerMain .navgroup > ul {
  margin: 0;
}
.footerMain .navgroup > ul > li {
  padding: 0;
  margin: 0;
}
.footerMain .navgroup > ul > li > a {
  margin: 0;
  font-weight: var(--main-font-weight);
  font-size: var(--main-font-size-base);
  padding-block: 5px;
}
.footerMain .navgroup--col-2 > ul {
  gap: 0 6px;
  margin-bottom: 16px;
}
.footerMain .navgroup--col-2 > ul li {
  width: calc(50% - 3px);
}
.footerMain__payment {
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .footerMain__payment {
    max-width: 221px;
  }
}

.footerBottom {
  font-size: var(--main-font-size-small);
  padding-top: 40px;
}
.footerBottom .container {
  max-width: 1720px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footerBottom .footerBottomLeft {
  margin-right: 14px;
}
.footerBottom .footerBottomLeft .nav ul {
  gap: 8px 0;
}
.footerBottom .footerBottomLeft,
.footerBottom .footerBottomRight,
.footerBottom .footerBottomMiddle {
  margin-bottom: 30px;
}
.footerBottom .footerBottomRight {
  justify-self: end;
}
@media (max-width: 767.98px) {
  .footerBottom .footerBottomRight {
    margin-bottom: 20px;
  }
}
.footerBottom .footerBottomMiddle {
  justify-self: center;
}

@media (min-width: 768px) {
  .footerBottom > .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.footerSocial ul {
  list-style: none;
  display: flex;
  gap: 18px;
  padding-left: 0;
}
.footerSocial ul li {
  margin: 0;
}

.mobileMenu {
  position: fixed;
  top: 0;
  width: 320px;
  height: 100%;
  z-index: 105;
  background-color: var(--main-color-white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  right: -340px;
  opacity: 0;
  transition: 0.2s ease-in-out;
  pointer-events: none;
}
.mobileMenu__close {
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
}
.mobileMenu__header {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px 0 30px;
  height: 45px;
}
.mobileMenu__subHeader {
  margin-bottom: 20px;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}
.mobileMenu__backLink {
  justify-content: flex-start !important;
  margin-bottom: 20px;
  font-size: var(--main-font-size-small);
  display: inline-flex !important;
}
.mobileMenu__backLink:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-left);
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobileMenu__seperator {
  height: 1px;
  width: 100%;
  background: var(--main-color-gray-base);
  display: block;
}
.mobileMenu__navigation a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--main-color-black);
  padding: 8px 0;
}
.mobileMenu__navigation a:hover, .mobileMenu__navigation a:focus, .mobileMenu__navigation a:active {
  color: var(--main-link-color-hover);
  text-decoration: none;
}
.mobileMenu__navigation li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.mobileMenu__navigation ul {
  margin: 0;
  padding: 15px 20px 15px 30px;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: var(--main-color-white);
  transition: 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.mobileMenu__navigation > ul {
  left: 0;
  opacity: 1;
  pointer-events: auto;
  position: static;
  height: auto;
}
.mobileMenu__navigation li.hasChildren > a:after {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-right);
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobileMenu__navigation li.hasChildren.is-open {
  overflow: hidden;
}
.mobileMenu__navigation li.hasChildren.is-open > ul {
  pointer-events: auto;
  opacity: 1;
  left: 0;
  z-index: 1;
  overflow-y: auto;
}
.mobileMenu__navigation--main > ul > li > a {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-base);
}
.mobileMenu__section {
  border-top: 1px solid var(--main-color-gray-base);
  padding: 30px 20px 30px 30px;
}
.mobileMenu__body {
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 45px);
  max-height: calc(100dvh - 45px);
  max-height: calc(100svh - 45px);
  overflow-y: auto;
  padding: 0;
  width: 100%;
  flex-grow: 1;
}
.mobileMenu__body:has(li.hasChildren.is-open) {
  max-height: none;
  overflow-y: hidden;
}
.mobileMenu.is-open {
  right: 0;
  opacity: 1;
  pointer-events: auto;
}
.mobileMenu .searchBar--small {
  max-width: none;
}

body.is-mobilemenuopen {
  overflow: hidden;
}

@media print {
  a[href]:after {
    content: none !important;
  }
}
.algoliaAutocomplete__layout {
  width: 100%;
  flex-direction: column;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(auto, 420px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header" "content content";
  column-gap: 45px;
}
@media (max-width: 1539px) {
  .algoliaAutocomplete__layout {
    grid-template-columns: minmax(auto, 300px) 1fr;
    column-gap: 30px;
  }
}
@media (max-width: 1249px) {
  .algoliaAutocomplete__layout {
    grid-template-columns: auto 1fr;
  }
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__layout {
    grid-template-columns: 1fr;
    padding: 0;
    grid-template-areas: "header" "content";
  }
}
.algoliaAutocomplete__wrapper:has(.algoliaAutocomplete__results:empty) {
  display: none;
}
.algoliaAutocomplete__header {
  position: sticky;
  top: 0;
  background: var(--main-color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  grid-area: header;
}
.algoliaAutocomplete__controls {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-bottom: 20px;
}
@media (max-width: 767px) {
  .algoliaAutocomplete__controls {
    justify-content: unset;
  }
}
.algoliaAutocomplete__content {
  grid-area: content;
  display: flex;
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__content {
    gap: 30px;
    padding: 24px;
    flex-direction: column;
    overflow-x: hidden;
    flex-wrap: nowrap;
    margin-bottom: 100px;
  }
}
.algoliaAutocomplete__side {
  padding-right: 45px;
  width: 20%;
  flex-shrink: 0;
}
.algoliaAutocomplete__side:empty {
  display: none;
}
@media (max-width: 1539px) {
  .algoliaAutocomplete__side {
    padding-right: 30px;
  }
}
@media (max-width: 1249px) {
  .algoliaAutocomplete__side {
    width: 25%;
  }
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__side {
    padding-right: 0;
    border-right: none;
    width: 100%;
    margin-top: 0;
    min-width: unset;
  }
}
.algoliaAutocomplete__results {
  flex-grow: 1;
  width: 80%;
}
.algoliaAutocomplete__results:empty {
  display: none;
}
.algoliaAutocomplete__results .emptybox {
  margin-bottom: 16px;
}
@media (max-width: 1249px) {
  .algoliaAutocomplete__results {
    width: 75%;
  }
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__results {
    margin-top: 0;
    height: 100%;
    width: 100%;
  }
}
.algoliaAutocomplete .searchBar__dummy {
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.algoliaAutocompletePanel .itembox__name {
  display: block;
}
.algoliaAutocompletePanel .itembox__name mark {
  background-color: var(--main-color-turquoise-light);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
  display: inline !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.algoliaCategories {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 16px;
}
@media (max-width: 1023px) {
  .algoliaCategories {
    flex-direction: row;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 0 14px;
    scroll-padding-left: 14px;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
  }
}
.algoliaCategories__item {
  display: flex;
  margin: 0;
}
.algoliaCategories__item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 16px;
  font-size: var(--main-font-size-medium);
}
.algoliaCategories__item img {
  display: inline-flex;
  width: 55px;
  height: 55px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100%;
}
.algoliaCategories__item span {
  display: inline-flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .algoliaCategories__item {
    display: inline-flex;
    width: auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .algoliaCategories__item:has(img) {
    padding-right: 55px;
  }
  .algoliaCategories__item a {
    display: inline-flex;
  }
}

.algoliaAutocompleteModal {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 100;
}
.algoliaAutocompleteModal--minimal {
  height: auto !important;
  min-height: auto;
  max-height: 70vh;
  max-height: 70dvh;
  max-height: 70svh;
  left: 0;
  right: 0;
  bottom: auto;
}
.algoliaAutocompleteModal:not(.is-active) {
  display: none;
}
.algoliaAutocompleteModal__box {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--main-color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 24px 0 0 0;
  overflow-y: auto;
  height: auto;
  max-height: 70vh;
  max-height: 70dvh;
  max-height: 70svh;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__box {
    padding: 0;
  }
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side {
  margin-top: 70px;
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side:empty + .algoliaAutocomplete__results {
  margin-top: 70px;
}
@media (min-width: 1250px) {
  .algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__results, .algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side {
    margin-top: 100px;
  }
}
.algoliaAutocompleteModal--minimal .algoliaAutocompleteModal__box {
  height: auto;
}
.algoliaAutocompleteModal__content {
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: auto;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__content {
    padding: 0;
  }
}
.algoliaAutocompleteModal--minimal .algoliaAutocompleteModal__content {
  height: auto;
}
.algoliaAutocompleteModal__close {
  position: absolute;
  top: 0;
  right: 16px;
  clip-path: none;
  font-size: 20px;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 11;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.algoliaAutocompleteModal__close .icon {
  padding: 0;
  border: 0;
  margin: 0 !important;
  background: transparent;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__close {
    position: absolute;
    top: 20px;
    right: 26px;
  }
}
.algoliaAutocompleteModal__close:hover, .algoliaAutocompleteModal__close:focus, .algoliaAutocompleteModal__close:active {
  background: var(--main-color-light-gray);
}
.algoliaAutocompleteModal__close:hover .icon, .algoliaAutocompleteModal__close:focus .icon, .algoliaAutocompleteModal__close:active .icon {
  background: transparent;
}

.algoliaAutocompleteProducts {
  padding-left: 0;
}
@media (min-width: 768px) {
  .algoliaAutocompleteProducts.itemboxList:not(.previewListType--2) {
    grid-template-columns: repeat(auto-fill, minmax(358px, 1fr));
  }
}
.algoliaAutocompleteProducts li {
  margin-bottom: 0;
}

.algoliaAutocompleteForm {
  max-width: 630px;
  flex-grow: 1;
  width: 100%;
  gap: 12px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.algoliaAutocompleteForm.is-loaded {
  opacity: 1;
}
.algoliaAutocompleteForm__input {
  padding-right: 50px;
  padding-left: 12px;
}
.algoliaAutocompleteForm__clear {
  position: absolute;
  right: 0;
  border: none;
}
.algoliaAutocompleteForm__submit, .algoliaAutocompleteForm__clear {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 0;
}
.algoliaAutocompleteForm__submit i, .algoliaAutocompleteForm__clear i {
  margin: 0 !important;
  padding: 0;
  background: transparent;
  font-size: 24px;
  border-radius: 0;
  height: 100%;
  aspect-ratio: 1;
}
.algoliaAutocompleteForm__legend {
  color: var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
}

.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders {
  min-height: 1.2em;
  height: 1.2em;
  flex-grow: 1;
  contain: paint;
  display: flex;
  align-items: center;
}
.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container {
  color: var(--main-color-dark-gray);
  padding-left: 45px;
  pointer-events: none;
  container-type: inline-size;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
  padding-left: 50px;
  opacity: 1;
}
@media (min-width: 768px) {
  .searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container {
    padding-left: 65px;
  }
}
.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container > .inner {
  display: flex;
  position: relative;
  align-items: center;
  gap: 7px;
  height: 100%;
}
.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container > .inner > div:first-child {
  height: 100%;
  align-content: center;
}
@container (inline-size < 360px) {
  .searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container > .inner .searchPlaceholder {
    display: none !important;
  }
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text {
  position: absolute;
  white-space: nowrap;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(200%);
  transition: transform 0.75s ease-in-out;
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text > span {
  color: var(--main-color-dark-gray);
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text.current {
  transform: translateY(0);
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text.slide-in {
  transform: translateY(0);
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text.slide-out {
  transform: translateY(-200%);
}
.searchBar.searchBar--dynamicPlaceholders.is-filled .dynamicPlaceholders__container, .searchBar.searchBar--dynamicPlaceholders.is-focus .dynamicPlaceholders__container {
  display: none;
}

.algoliaAutocompleteModal {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 100;
}
.algoliaAutocompleteModal--minimal {
  height: auto !important;
  min-height: auto;
  max-height: 70vh;
  max-height: 70dvh;
  max-height: 70svh;
  left: 0;
  right: 0;
  bottom: auto;
}
.algoliaAutocompleteModal:not(.is-active) {
  display: none;
}
.algoliaAutocompleteModal__box {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--main-color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 24px 0 0 0;
  overflow-y: auto;
  height: auto;
  max-height: 70vh;
  max-height: 70dvh;
  max-height: 70svh;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__box {
    padding: 0;
  }
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side {
  margin-top: 70px;
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side:empty + .algoliaAutocomplete__results {
  margin-top: 70px;
}
@media (min-width: 1250px) {
  .algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__results, .algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side {
    margin-top: 100px;
  }
}
.algoliaAutocompleteModal--minimal .algoliaAutocompleteModal__box {
  height: auto;
}
.algoliaAutocompleteModal__content {
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: auto;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__content {
    padding: 0;
  }
}
.algoliaAutocompleteModal--minimal .algoliaAutocompleteModal__content {
  height: auto;
}
.algoliaAutocompleteModal__close {
  position: absolute;
  top: 0;
  right: 16px;
  clip-path: none;
  font-size: 20px;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 11;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.algoliaAutocompleteModal__close .icon {
  padding: 0;
  border: 0;
  margin: 0 !important;
  background: transparent;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__close {
    position: absolute;
    top: 20px;
    right: 26px;
  }
}
.algoliaAutocompleteModal__close:hover, .algoliaAutocompleteModal__close:focus, .algoliaAutocompleteModal__close:active {
  background: var(--main-color-light-gray);
}
.algoliaAutocompleteModal__close:hover .icon, .algoliaAutocompleteModal__close:focus .icon, .algoliaAutocompleteModal__close:active .icon {
  background: transparent;
}

.algoliaAutocompletePanel {
  display: flex;
  flex-direction: column;
}
.algoliaAutocompletePanel__header {
  margin-bottom: 5px;
}
@media (min-width: 1024px) {
  .algoliaAutocompletePanel__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: auto;
  }
}

.algoliaAutocompleteShowAllButton {
  background: var(--main-color-white);
}
@media (max-width: 1023px) {
  .algoliaAutocompleteShowAllButton {
    grid-area: footer;
    padding: 30px 24px;
    bottom: 0;
    display: grid;
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 1;
  }
}
@media (min-width: 1024px) {
  .algoliaAutocompleteShowAllButton {
    padding: 16px 0;
    border-top: 1px solid #eee;
  }
}

.algoliaAutocompleteModal__mobileSearch {
  padding: 1rem;
  position: fixed;
  left: 0;
  right: 0;
  background: white;
  z-index: 15;
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile {
  padding-top: 16px;
  width: 100%;
  max-width: calc(100vw - 76px);
}
@media (max-width: 767.98px) {
  .algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile {
    padding-top: 0;
  }
}
@media (min-width: 768px) {
  .algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile {
    margin: 0 auto 16px auto;
    width: 520px;
  }
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar {
  margin: 0;
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar .algoliaAutocompleteForm__input {
  padding: 0.75rem 1rem;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  /* Prevent iOS cursor jump */
}
@supports (-webkit-touch-callout: none) {
  .algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar .algoliaAutocompleteForm__input {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar .algoliaAutocompleteForm__clear {
  display: flex;
  align-items: center;
  justify-content: center;
}

.algoliaAutocompleteModal .algoliaAutocomplete__header {
  display: none;
}

.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) {
  padding-top: 0;
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocompleteModal__close {
  position: fixed;
  right: 16px;
  z-index: 20;
}
@media (max-width: 767.98px) {
  .algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocompleteModal__close {
    margin-top: -16px;
  }
}

@media (max-width: 1023px) {
  .algoliaAutocompleteFilter {
    width: 100%;
  }
}
.algoliaAutocompleteFilter__tags {
  display: flex;
  gap: 5px;
  height: 42px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .algoliaAutocompleteFilter__tags {
    display: none;
  }
}
.algoliaAutocompleteFilter__selectWrapper {
  display: none;
}
@media (max-width: 767px) {
  .algoliaAutocompleteFilter__selectWrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
.algoliaAutocompleteFilter__label {
  font-size: var(--main-font-size-small);
}
.algoliaAutocompleteFilter__select {
  border: none;
  appearance: none;
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: var(--main-color-light-gray);
  font-size: var(--main-font-size-small);
  border-radius: 0;
}
.algoliaAutocompleteFilter__item {
  font-size: 13px;
  text-transform: uppercase;
  background: transparent;
  border: none;
  height: 29px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-dark-gray);
}
.algoliaAutocompleteFilter__item.is-active {
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
}

:root {
  --algolia-header-height: 56px;
  --algolia-mobile-menu-max-width: 330px;
  --sticky-header-height: 62px;
}
@media (min-width: 1024px) {
  :root {
    --algolia-header-height: 58px;
    --algolia-sidebar-width: 350px;
  }
}
@media (min-width: 1250px) {
  :root {
    --algolia-header-height: 60px;
    --algolia-sidebar-width: 390px;
  }
}
@media (min-width: 1540px) {
  :root {
    --algolia-header-height: 64px;
    --algolia-sidebar-width: 432px;
  }
}
@media (min-width: 768px) {
  :root {
    --sticky-header-height: 75px;
  }
}

.algoliaSearchLayout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .algoliaSearchLayout {
    contain: layout;
  }
}
.algoliaSearchLayout__header {
  display: flex;
  justify-content: space-between;
  position: sticky;
  width: 100%;
  background: var(--main-color-white);
  height: var(--algolia-header-height);
  top: var(--sticky-header-height);
  z-index: 2;
  align-items: center;
}
@media (min-width: 1024px) {
  .algoliaSearchLayout__header {
    margin-bottom: 20px;
  }
}
.algoliaSearchLayout__main {
  flex: 1;
}
.algoliaSearchLayout__pagination:empty {
  display: none;
}
.algoliaSearchLayout__section {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.algoliaSearchLayout__sorting {
  display: flex;
  gap: 32px;
  align-items: center;
}

@media (min-width: 1024px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu {
    position: static;
    padding: 0;
    flex-grow: 1;
    display: flex;
    transform: none;
  }
}
@media (min-width: 1024px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchLayout__filterToggle {
    display: none;
  }
}
@media (max-width: 1023px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu:not(.is-active) {
    opacity: 0;
  }
}
@media (min-width: 1024px) {
  .algoliaSearchLayout.algoliaSearchLayout--filterPositionLeft .algoliaSearchSidebarMenu {
    position: absolute;
    background: var(--main-color-white);
    height: 100%;
  }
  .algoliaSearchLayout.algoliaSearchLayout--filterPositionLeft .algoliaSearchSidebarMenu__container {
    position: sticky;
    max-height: calc(100dvh - 30px - var(--sticky-header-height) + var(--algolia-header-height));
    top: calc(var(--sticky-header-height) + var(--algolia-header-height));
  }
}

.algoliaColorRefinementList__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 16px;
  flex-wrap: wrap;
}
.algoliaColorRefinementList__item {
  margin: 0;
  display: inline-flex;
}
.algoliaColorRefinementList__dot {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 100%;
  transition: 0.05s ease-in-out;
}
.algoliaColorRefinementList__label {
  display: inline-flex;
  position: relative;
  gap: 10px;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
}
.algoliaColorRefinementList__label span {
  position: relative;
}
.algoliaColorRefinementList__label.is-active .algoliaColorRefinementList__dot, .algoliaColorRefinementList__label:hover .algoliaColorRefinementList__dot, .algoliaColorRefinementList__label:focus .algoliaColorRefinementList__dot {
  border: 3px solid var(--main-color-light-gray);
  outline: 1px solid var(--main-color-black);
}
.algoliaColorRefinementList__checkbox {
  display: none;
}

.algoliaPanel {
  border-bottom: 1px solid var(--main-color-gray-base);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 30px;
}
.algoliaPanel__header {
  line-height: 1;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-base);
}

.algoliaSearchItemBox .prices.loading {
  width: 50%;
}

.algoliaSearchItemList.itemboxList,
.algoliaSearchItemList.itemlist {
  padding-left: 0;
}
.algoliaSearchItemList.itemboxList li,
.algoliaSearchItemList.itemlist li {
  margin-bottom: 0;
  list-style: none;
}

.algoliaSearchItemList.itemlist > li:not(:last-child) {
  margin-bottom: 20px;
}

.algoliaRangeSlider {
  position: relative;
  padding-bottom: 45px;
}
.algoliaRangeSlider__track {
  width: 100%;
  height: 3px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  margin-top: 2px;
}
.algoliaRangeSlider__inputs {
  align-items: center;
  gap: 15px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  grid-template-columns: 2fr auto 2fr;
  display: grid;
}
.algoliaRangeSlider__inputs input {
  text-align: center;
}
@media (max-width: 1023px) {
  .algoliaRangeSlider__inputs input {
    background: var(--main-color-light-gray);
  }
}
.algoliaRangeSlider__ranges {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
}
.algoliaRangeSlider input[type=range] {
  appearance: none;
  width: 100%;
  outline: none;
  position: absolute;
  margin: auto;
  top: 0;
  background-color: transparent;
  pointer-events: none;
  line-height: 0;
  padding: 0;
  border: 0;
}
.algoliaRangeSlider input[type=range]::-webkit-slider-runnable-track, .algoliaRangeSlider input[type=range]::-moz-range-track, .algoliaRangeSlider input[type=range]::-ms-track {
  height: 5px;
}
.algoliaRangeSlider input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}
.algoliaRangeSlider input[type=range]::-moz-range-track {
  -moz-appearance: none;
}
.algoliaRangeSlider input[type=range]::-ms-track {
  appearance: none;
}
.algoliaRangeSlider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background-color: var(--main-color-black);
  cursor: pointer;
  margin-top: -6px;
  pointer-events: auto;
  border-radius: 50%;
}
.algoliaRangeSlider input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.algoliaRangeSlider input[type=range]::-ms-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.algoliaRangeSlider input[type=range]:active::-webkit-slider-thumb {
  background-color: var(--main-color-primary);
}
.algoliaRangeSlider input[type=range]:focus::-webkit-slider-thumb {
  background-color: var(--main-color-primary);
}

.customSelect__dropdownBody .rangeSlider {
  padding-left: 10px;
  padding-right: 10px;
}
.customSelect__dropdownBody .rangeSlider__ranges {
  left: 10px;
  max-width: calc(100% - 20px);
  max-width: -moz-calc(100% - 20px);
  max-width: -webkit-calc(100% - 20px);
  max-width: -o-calc(100% - 20px);
}

.algoliaRefinementList {
  /*  &__checkbox {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }*/
}
.algoliaRefinementList__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 10px;
  flex-wrap: wrap;
  max-height: 500px;
  overflow-x: auto;
}
.algoliaRefinementList__item {
  margin: 0;
  display: inline-flex;
}
.algoliaRefinementList__label {
  display: inline-flex;
  position: relative;
  padding: 10px;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
  font-size: var(--main-font-size-small);
  /*    &:before {
        background: $light-gray;
      }*/
  /*    &:after {
        background: $body-background;
        inset: 1px;
        @media (max-width: $algolia-breakpoint-max) {
          background: $white;
        }
      }*/
}
.algoliaRefinementList__label span {
  position: relative;
}
.algoliaRefinementList__label:before, .algoliaRefinementList__label:after {
  content: "";
  position: absolute;
  inset: 0;
}
.algoliaRefinementList__label:hover:after, .algoliaRefinementList__label:focus:after, .algoliaRefinementList__label:focus-within:after {
  background: var(--main-color-light-gray);
  inset: 0;
}
.algoliaRefinementList__label.is-active:after {
  background: var(--main-color-primary);
  inset: 0;
}
.algoliaRefinementList__showMoreButton {
  margin-top: 20px;
}

.algoliaSearchSidebarMenu {
  position: fixed;
  top: 0;
  left: 0;
  padding: 12px;
  background: var(--main-color-white);
  width: var(--algolia-sidebar-width);
  transition: transform 0.2s ease-out, opacity 0.1s ease-out;
  transform: translateX(-100%);
  height: 100%;
  height: 100svh;
  max-width: 100%;
  z-index: 99;
}
.algoliaSearchSidebarMenu.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 1024px) {
  .algoliaSearchSidebarMenu {
    height: auto;
    padding: 0 20px 0 0;
  }
}
@media (min-width: 1250px) {
  .algoliaSearchSidebarMenu {
    padding: 0 60px 0 0;
  }
}
.algoliaSearchSidebarMenu__container {
  width: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: auto;
}
.algoliaSearchSidebarMenu__content {
  gap: 30px;
  display: flex;
  flex-direction: column;
}
.algoliaSearchSidebarMenu__header {
  display: none;
}
.algoliaSearchSidebarMenu__title {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.algoliaSearchSidebarMenu__titleHeadline {
  font-weight: var(--main-font-weight-bold);
}
@media (min-width: 1024px) {
  .algoliaSearchSidebarMenu__footer {
    display: none;
  }
}
.algoliaSearchSidebarMenu__close {
  margin-left: auto;
  clip-path: none;
  width: 17px;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
}
.algoliaSearchSidebarMenu__close:hover, .algoliaSearchSidebarMenu__close:focus, .algoliaSearchSidebarMenu__close:active {
  border: none;
  background: transparent;
}
.algoliaSearchSidebarMenu__close .icon {
  font-size: 20px;
}
.algoliaSearchSidebarMenu .algoliaSearchSearchBox form,
.algoliaSearchSidebarMenu .ais-SearchBox form {
  display: flex;
}
.algoliaSearchSidebarMenu .algoliaSearchSearchBox input,
.algoliaSearchSidebarMenu .ais-SearchBox input {
  max-width: 100% !important;
  width: 100%;
}
@media (max-width: 1023px) {
  .algoliaSearchSidebarMenu__header {
    display: block;
  }
  body:has(.algoliaSearchSidebarMenu.is-active) {
    overflow: hidden;
  }
  .algoliaSearchSidebarMenu.is-active .algoliaSearchSidebarMenu__container {
    height: 100%;
    overflow: hidden;
  }
  .algoliaSearchSidebarMenu.is-active .algoliaSearchSidebarMenu__content {
    flex: 1;
    overflow-y: auto;
  }
  .algoliaSearchSidebarMenu.is-active .algoliaSearchSidebarMenu__footer {
    display: grid;
  }
}

.algoliaScrollTo {
  scroll-margin-top: calc(var(--algolia-header-height) + var(--sticky-header-height));
}

.ais-sidebar {
  top: calc(var(--sticky-header-height) + var(--algolia-header-height));
  max-height: calc(100svh - 2 * var(--algolia-header-height) - var(--sticky-header-height));
  position: sticky;
  contain: content;
}
@media (min-width: 768px) {
  .ais-sidebar {
    min-height: 620px;
  }
}
.ais-sidebar__container {
  position: relative;
  display: block;
  height: 100%;
}
.ais-sidebar__gap {
  width: 0;
  will-change: width;
  transition: width 0.2s linear;
}
.ais-sidebar__gap[data-state=open] {
  width: var(--algolia-sidebar-width);
}
.ais-sidebar__content {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  transition: left 0.2s linear;
  width: var(--algolia-sidebar-width);
  left: calc(var(--algolia-sidebar-width) * -1);
  padding-right: 20px;
}
@media (min-width: 1540px) {
  .ais-sidebar__content {
    padding-right: 40px;
  }
}
.ais-sidebar__content[data-state=open] {
  left: 0;
}
.ais-sidebar__inner {
  overflow-y: auto;
  padding-right: 20px;
  width: 100%;
}
.ais-sidebar .ais-SearchBox form,
.ais-sidebar .algoliaSearchSearchBox form {
  display: flex;
}
.ais-sidebar .ais-SearchBox input,
.ais-sidebar .algoliaSearchSearchBox input {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}

.ais-filterArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
}
.ais-filterArea__content {
  padding-inline: 2px;
  margin-inline: -2px;
  gap: 30px;
  display: flex;
  flex-direction: column;
}
.ais-filterArea__content > div:last-child .algoliaPanel:not(:first-child) {
  padding-top: 32px;
}
.ais-filterArea__header:empty {
  display: none;
}
.ais-filterArea__title {
  display: none;
}
@media (min-width: 1024px) {
  .ais-filterArea__footer {
    display: none;
  }
}
@media (max-width: 1023px) {
  .ais-filterArea__title {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--main-color-black);
    padding-bottom: 24px;
    margin-bottom: 30px;
  }
  .ais-filterArea__title h2 {
    margin-bottom: 0;
  }
}

.ais-stats {
  display: inline-flex;
  align-items: center;
}
.ais-stats__root {
  margin-right: 24px;
  font-size: var(--main-font-size-medium);
  font-weight: var(--main-font-weight);
  color: var(--main-color-dark-gray);
  display: none;
  align-items: center;
  gap: 0.625em;
  text-transform: none;
}
@media (min-width: 1024px) {
  .ais-stats__root {
    display: inline-flex;
  }
}

@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.ais-filterBoxToggle {
  display: flex;
  position: relative;
  clip-path: none;
  padding: 8px 12px;
  gap: 12px;
}
.ais-filterBoxToggle.button i, .itemcardBuybox .orderButtonWrapper .ais-filterBoxToggle.orderButton i {
  font-size: 2.2rem;
}

.ais-filterCheckboxList__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  max-height: 500px;
  overflow-x: auto;
}
.ais-filterCheckboxList__item {
  margin: 0;
  display: inline-flex;
}
.ais-filterCheckboxList__label {
  display: inline-flex;
  position: relative;
  padding: 7px 12px;
  border-radius: 28px;
  border: 1px solid var(--main-color-middle-gray);
  line-height: 1;
  cursor: pointer;
  font-size: var(--main-font-size-small);
}
.ais-filterCheckboxList__label span {
  position: relative;
  z-index: 1;
}
.ais-filterCheckboxList__label:hover, .ais-filterCheckboxList__label:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.ais-filterCheckboxList__label.is-active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.ais-filterCheckboxList__showMoreButton {
  margin-top: 20px;
  font-size: var(--main-font-size-medium);
}
.ais-filterCheckboxList__showMoreButton .icon {
  font-size: 1.5rem;
}

.ais-sortBy {
  gap: 0;
  padding: 0.5em 0;
  display: inline-flex;
  align-items: center;
}
.ais-sortBy__content {
  letter-spacing: 1.1px;
}
.ais-sortBy .ais-sortBy__filterIcon {
  font-size: 1.1em;
  margin-top: 1px;
}
.ais-sortBy__label {
  padding: 0 0.625em 0 0.5em;
}
.ais-sortBy .ais-sortBy__arrowIcon {
  font-size: 1.2em;
}

.ais-badge {
  border-radius: 100px;
  min-height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--main-font-weight-bold);
  align-self: center;
}

[data-radix-popper-content-wrapper] {
  z-index: 3 !important;
}

.ais-dropdownMenu__trigger {
  font-size: var(--main-font-size-small);
  background: transparent;
  line-height: 1.2;
  text-transform: none;
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  user-select: none;
  clip-path: none;
  border: none;
}
.ais-dropdownMenu__trigger i {
  margin: 0 !important;
}
@media (min-width: 1024px) {
  .ais-dropdownMenu__trigger {
    font-size: 16px;
  }
}
.ais-dropdownMenu__trigger:hover, .ais-dropdownMenu__trigger:active, .ais-dropdownMenu__trigger:focus {
  background: transparent;
}
.ais-dropdownMenu__trigger--sorting {
  padding: 0.5em 0;
}
.ais-dropdownMenu__content {
  min-width: 220px;
  overflow: hidden;
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 12px 0;
  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.ais-dropdownMenu__content[data-side=top] {
  animation-name: slideDownAndFade;
}
.ais-dropdownMenu__content[data-side=right] {
  animation-name: slideLeftAndFade;
}
.ais-dropdownMenu__content[data-side=bottom] {
  animation-name: slideUpAndFade;
}
.ais-dropdownMenu__content[data-side=left] {
  animation-name: slideRightAndFade;
}
.ais-dropdownMenu__item {
  position: relative;
  padding: 0.75em 1.25em 0.75em 3em;
  display: flex;
  align-items: center;
  user-select: none;
  outline: none;
  font-size: 15px;
  cursor: pointer;
  text-transform: none;
}
.ais-dropdownMenu__item[data-disabled] {
  background: var(--main-color-middle-gray);
  pointer-events: none;
}
.ais-dropdownMenu__item:hover {
  background: var(--main-color-light-gray);
}
.ais-dropdownMenu__itemIndicator {
  position: absolute;
  padding: 0.25em;
  top: 50%;
  left: 0.8em;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  aspect-ratio: 1;
  background: var(--main-color-turquoise-light);
}

.ais-filterColor__list {
  display: flex;
  list-style: none;
  gap: 16px;
  flex-wrap: wrap;
  padding: 1px;
}
.ais-filterColor__item {
  margin: 0;
  display: inline-flex;
}
.ais-filterColor__dot {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: inherit;
  transition: border 0.1s;
  outline-offset: 0;
}
.ais-filterColor__label {
  display: inline-flex;
  position: relative;
  gap: 10px;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
}
.ais-filterColor__label span {
  position: relative;
  z-index: 1;
}
.ais-filterColor__label:hover .ais-filterColor__dot, .ais-filterColor__label:focus .ais-filterColor__dot, .ais-filterColor__label.is-active .ais-filterColor__dot {
  border: 3px solid transparent;
  outline: 1px solid var(--main-color-black);
  background-clip: padding-box;
}
.ais-filterColor__label:is(:hover, :focus):not(.is-active) .ais-filterColor__dot {
  border: 1px solid transparent;
}
.ais-filterColor__checkbox {
  display: none;
}
.ais-filterColor__showMoreButton {
  margin-top: 20px;
}

.ais-filterRange__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.ais-filterRange__controls {
  align-items: center;
  gap: 15px;
  max-width: 100%;
  text-align: center;
  grid-template-columns: 2fr auto 2fr;
  display: grid;
  align-self: stretch;
}
.ais-filterRange__label {
  display: flex;
  gap: 20px;
}
.ais-filterRange__input {
  font-variant-numeric: lining-nums tabular-nums;
  background: transparent;
  background: var(--main-color-white);
  border-radius: 100px;
  text-align: center;
  padding: 6px 10px;
}
.ais-filterRange__inputAddon {
  padding: 0 10px;
}
.ais-filterRange__actions {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.ais-filterRange__button {
  border-radius: 25px;
  border-color: var(--main-color-primary);
  font-size: 14px;
  line-height: 18px;
  padding: 10px 15px;
  justify-content: center;
}
.ais-filterRange__button--apply {
  background: var(--main-color-primary);
  margin-bottom: 16px;
}
.ais-filterRange__button--reset {
  background: transparent;
  gap: 5px;
}
.ais-filterRange__button--reset:hover, .ais-filterRange__button--reset:focus, .ais-filterRange__button--reset:active {
  background: transparent;
}
.ais-filterRange__button--reset .icon {
  font-size: 1.2em;
}

.ais-mobileMenu__overlay {
  display: none;
  background-color: rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 103;
}
.ais-mobileMenu__overlay[data-state=open] {
  display: flex;
}
.ais-mobileMenu__dialog {
  top: 0;
  bottom: 0;
  position: fixed;
  transform: translateX(0);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 24px;
  background: var(--main-color-white);
  width: 100%;
  max-width: var(--algolia-mobile-menu-max-width);
  z-index: 1040;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ais-mobileMenu__dialog[data-state=open] {
  animation: aisSlideIn 200ms linear;
}
.ais-mobileMenu__dialog[data-state=closed] {
  animation: aisSlideOut 200ms linear;
}
.ais-mobileMenu__dialog .ais-SearchBox form,
.ais-mobileMenu__dialog .algoliaSearchSearchBox form {
  display: flex;
}
.ais-mobileMenu__dialog .ais-SearchBox input,
.ais-mobileMenu__dialog .algoliaSearchSearchBox input {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}
.ais-mobileMenu__title {
  margin-bottom: 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.ais-mobileMenu__close {
  margin-left: auto;
  clip-path: none;
  width: 17px;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
}
.ais-mobileMenu__close:hover, .ais-mobileMenu__close:focus, .ais-mobileMenu__close:active {
  border: none;
  background: transparent;
}
.ais-mobileMenu__close .icon {
  font-size: 20px;
}
.ais-mobileMenu__header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--main-color-black);
  padding-bottom: 24px;
}
.ais-mobileMenu__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0 20px 0;
}
.ais-mobileMenu__footer {
  display: grid;
}

@keyframes aisSlideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes aisSlideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.ais-activeRefinements {
  margin-bottom: 16px;
  display: flex;
  padding: 0;
  gap: 10px;
  flex-wrap: wrap;
  overflow-x: auto;
}
.ais-activeRefinements__item {
  display: inline-flex;
  position: relative;
  padding: 9px 30px 9px 12px;
  border-radius: 28px;
  border: 1px solid var(--main-color-middle-gray);
  line-height: 1;
  contain: paint;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--main-font-size-small);
  font-weight: var(--main-font-weight);
}
.ais-activeRefinements__item span {
  position: relative;
  z-index: 1;
}
.ais-activeRefinements__item .icon, .ais-activeRefinements__item:after {
  position: absolute;
  font-size: 18px;
  right: 15px;
  top: 50%;
  translate: 0 -50%;
  transition: right 0.2s ease-in-out;
}
.ais-activeRefinements__item:after {
  content: var(--base-icon-trash);
  font-family: "icons", Helvetica, Arial, sans-serif;
  right: -50%;
}
.ais-activeRefinements__item:hover .icon, .ais-activeRefinements__item:focus .icon, .ais-activeRefinements__item:active .icon {
  right: -50%;
}
.ais-activeRefinements__item:hover:after, .ais-activeRefinements__item:focus:after, .ais-activeRefinements__item:active:after {
  right: 7px;
}

.ais-slider__root {
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  touch-action: none;
  width: calc(100% - 10px);
  height: 20px;
}
.ais-slider__track {
  background-color: var(--main-color-middle-gray);
  position: relative;
  flex-grow: 1;
  border-radius: 9999px;
  height: 3px;
}
.ais-slider__range {
  position: absolute;
  background-color: var(--main-color-black);
  border-radius: 9999px;
  height: 100%;
}
.ais-slider__thumb {
  width: 20px;
  height: 20px;
  background-color: var(--main-color-black);
  box-shadow: 0 2px 10px rgba(var(--main-color-black), 0.5);
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.ais-slider__thumb:before {
  position: absolute;
  content: "";
  min-height: 48px;
  min-width: 48px;
}
.ais-slider__thumb:hover {
  background-color: var(--main-color-primary);
}
.ais-slider__thumb:focus {
  outline: none;
  box-shadow: 0 0 0 5px rgba(var(--main-color-black), 0.6);
}
/*# sourceMappingURL=main.css.map */