@charset "UTF-8";
/* dm-sans-300 - 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: "DM Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/dm-sans-v17-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-300italic - 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: "DM Sans";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/dm-sans-v17-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-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: "DM Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/dm-sans-v17-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-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: "DM Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/dm-sans-v17-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-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: "DM Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/dm-sans-v17-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-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: "DM Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/dm-sans-v17-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-900 - 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: "DM Sans";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/dm-sans-v17-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-900italic - 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: "DM Sans";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/dm-sans-v17-latin-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
  --main-color-white: #ffffff;
  --main-color-black: #20201E;
  --main-color-gray-base: #565656;
  --main-color-middle-gray: #9C9C98;
  --main-color-dark-gray: #565656;
  --main-color-light-gray: #ECECEC;
  --main-color-primary: #20201E;
  --main-color-primary-dark: #131312;
  --main-color-primary-darken: #060605;
  --main-color-primary-light: #4E4E4C;
  --main-color-secondary: #9C9C98;
  --main-color-action: #1989B7;
  --main-color-blue: #4CCAFF;
  --main-color-blue-light: #0d739b;
  --main-color-danger: #D32D2D;
  --main-color-danger-dark: #bf2828;
  --main-color-warning: #FF9903;
  --main-color-warning-dark: #e98a00;
  --main-color-success: #00B90C;
  --main-color-success-dark: #9ec40d;
  --main-color-info: #ECECEC;
  --main-color-primary-contrast: var(--main-color-white);
  --main-color-primary-dark-contrast: var(--main-color-white);
  --main-color-primary-darken-contrast: var(--main-color-white);
  --main-color-secondary-contrast: var(--main-color-white);
  --main-color-action-contrast: var(--main-color-white);
  --main-color-danger-contrast: var(--main-color-white);
  --main-color-danger-dark-contrast: var(--main-color-white);
  --main-color-warning-contrast: #20201E;
  --main-color-warning-dark-contrast: #20201E;
  --main-color-success-contrast: var(--main-color-white);
  --main-color-success-dark-contrast: #20201E;
  --main-color-info-contrast: #20201E;
  --main-font-family: 'DM Sans',Helvetica, Arial, sans-serif;
  --main-font-weight: 300;
  --main-font-weight-semibold: 700;
  --main-font-weight-bold: 900;
  --main-font-size-base: 1.5rem;
  --main-font-size-small: 1.4rem;
  --main-font-size-big: 1.8rem;
  --main-line-height: 1.4;
  --main-link-color: #4E4E4C;
  --main-link-color-hover: #0d739b;
}

/*
Icons

Markup:
<i class="icon icon-name"></i>

<div class="kss-icons">

<i class='icon icon-24-7'></i> <span>icon icon-24-7</span>

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

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

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

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

<i class='icon icon-aichat'></i> <span>icon icon-aichat</span>

<i class='icon icon-air-water'></i> <span>icon icon-air-water</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-expand'></i> <span>icon icon-expand</span>

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-fire'></i> <span>icon icon-fire</span>

<i class='icon icon-flame'></i> <span>icon icon-flame</span>

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

<i class='icon icon-hamburger-menu'></i> <span>icon icon-hamburger-menu</span>

<i class='icon icon-handshake'></i> <span>icon icon-handshake</span>

<i class='icon icon-headset'></i> <span>icon icon-headset</span>

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

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

<i class='icon icon-heat'></i> <span>icon icon-heat</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-messe'></i> <span>icon icon-messe</span>

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

<i class='icon icon-news'></i> <span>icon icon-news</span>

<i class='icon icon-newsletter'></i> <span>icon icon-newsletter</span>

<i class='icon icon-package'></i> <span>icon icon-package</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-rocket'></i> <span>icon icon-rocket</span>

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

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

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

<i class='icon icon-setting'></i> <span>icon icon-setting</span>

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

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

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

<i class='icon icon-shirt'></i> <span>icon icon-shirt</span>

<i class='icon icon-solar'></i> <span>icon icon-solar</span>

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

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

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

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

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

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

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

<i class='icon icon-trophy'></i> <span>icon icon-trophy</span>

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

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

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

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

<i class='icon icon-virtual-fitting'></i> <span>icon icon-virtual-fitting</span>

<i class='icon icon-voice'></i> <span>icon icon-voice</span>

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

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

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

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

</div>

Styleguide Base.Icons
*/
@font-face {
  font-family: "icons";
  font-display: swap;
  src: url("../fonts/icons.woff2") format("woff2"), url("../fonts/icons.woff") format("woff");
}
.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before {
  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-24-7: "";
  --base-icon-360: "";
  --base-icon-academy: "";
  --base-icon-address: "";
  --base-icon-addressbook: "";
  --base-icon-aichat: "";
  --base-icon-air-water: "";
  --base-icon-angle-down: "";
  --base-icon-angle-left: "";
  --base-icon-angle-right: "";
  --base-icon-angle-up: "";
  --base-icon-arrow-down: "";
  --base-icon-arrow-left: "";
  --base-icon-arrow-right: "";
  --base-icon-arrow-up-right: "";
  --base-icon-arrow-up: "";
  --base-icon-basket: "";
  --base-icon-bike: "";
  --base-icon-chart: "";
  --base-icon-chat: "";
  --base-icon-check-circle: "";
  --base-icon-check: "";
  --base-icon-clock: "";
  --base-icon-close: "";
  --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-expand: "";
  --base-icon-facebook-f: "";
  --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-fire: "";
  --base-icon-flame: "";
  --base-icon-gift: "";
  --base-icon-hamburger-menu: "";
  --base-icon-handshake: "";
  --base-icon-headset: "";
  --base-icon-heart-filled: "";
  --base-icon-heart: "";
  --base-icon-heat: "";
  --base-icon-home: "";
  --base-icon-info: "";
  --base-icon-inquiry-basket: "";
  --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-messe: "";
  --base-icon-minus: "";
  --base-icon-news: "";
  --base-icon-newsletter: "";
  --base-icon-package: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment: "";
  --base-icon-pen-to-square: "";
  --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-rocket: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-setting: "";
  --base-icon-settings: "";
  --base-icon-share: "";
  --base-icon-shipping: "";
  --base-icon-shirt: "";
  --base-icon-solar: "";
  --base-icon-sorting: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star: "";
  --base-icon-subscriptions: "";
  --base-icon-tiktok: "";
  --base-icon-trash: "";
  --base-icon-trophy: "";
  --base-icon-twitter: "";
  --base-icon-upload: "";
  --base-icon-user: "";
  --base-icon-users: "";
  --base-icon-virtual-fitting: "";
  --base-icon-voice: "";
  --base-icon-whatsapp: "";
  --base-icon-xing: "";
  --base-icon-youtube: "";
  --base-icon-zoom: "";
}

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

.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-aichat:before {
  content: var(--base-icon-aichat);
}

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

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

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

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

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

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

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

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

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

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

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

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

.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:before {
  content: var(--base-icon-check);
}

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

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

.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-expand:before {
  content: var(--base-icon-expand);
}

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

.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-fire:before {
  content: var(--base-icon-fire);
}

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

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

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

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

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

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

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

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

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

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

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

.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-messe:before {
  content: var(--base-icon-messe);
}

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

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

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

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

.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-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-rocket:before {
  content: var(--base-icon-rocket);
}

.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-setting:before {
  content: var(--base-icon-setting);
}

.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-shirt:before {
  content: var(--base-icon-shirt);
}

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

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

.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-subscriptions:before {
  content: var(--base-icon-subscriptions);
}

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

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

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

.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-virtual-fitting:before {
  content: var(--base-icon-virtual-fitting);
}

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

.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-24-7'></i>

<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-aichat'></i>

<i class='icon icon-air-water'></i>

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-bike'></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'></i>

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

<i class='icon icon-close'></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-expand'></i>

<i class='icon icon-facebook-f'></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-fire'></i>

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

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

<i class='icon icon-hamburger-menu'></i>

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

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

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

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

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

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

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

<i class='icon icon-inquiry-basket'></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-messe'></i>

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

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

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

<i class='icon icon-package'></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-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-rocket'></i>

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

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

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

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

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

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

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

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

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

<i class='icon icon-sorting'></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-subscriptions'></i>

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

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

<i class='icon icon-trophy'></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-virtual-fitting'></i>

<i class='icon icon-voice'></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>

*/
/*
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;
}
@media (min-width: 1024px) {
  html {
    font-size: 10px;
  }
}

body {
  background-color: var(--main-color-light-gray);
  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;
  text-rendering: geometricPrecision;
}

#container {
  background-color: var(--main-color-light-gray);
}

.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;
}
b, strong {
  font-weight: var(--main-font-weight-bold);
}

label {
  font-size: var(--main-font-size-small);
  display: inline-block;
}

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

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

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

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

.emptybox {
  border: 1px solid #CFCFCF;
  border-radius: 18px;
}

/*
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,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: var(--main-font-weight-bold);
  margin: 0;
  margin-bottom: clamp(10px, 1em, 20px);
}
h1.highlighted, .h1.highlighted,
h2.highlighted, .h2.highlighted,
h3.highlighted, .h3.highlighted,
h4.highlighted, .h4.highlighted,
h5.highlighted, .h5.highlighted,
h6.highlighted, .h6.highlighted {
  font-weight: var(--main-font-weight);
  line-height: 1;
}

h1, .h1 {
  margin-bottom: clamp(10px, 1em, 30px);
  font-size: 2.4rem;
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 5rem;
  }
}
h1.highlighted, .h1.highlighted {
  font-size: 3.4rem;
}
@media (min-width: 1024px) {
  h1.highlighted, .h1.highlighted {
    font-size: 7rem;
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .h1.highlighted {
    font-size: 11.5rem;
  }
}

h2, .h2 {
  font-size: 2.2rem;
}
@media (min-width: 1024px) {
  h2, .h2 {
    font-size: 3rem;
  }
}
h2.highlighted, .h2.highlighted {
  font-size: 3.4rem;
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted {
    font-size: 7rem;
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted {
    font-size: 11.5rem;
  }
}

h3, .h3 {
  font-weight: var(--main-font-weight-semibold);
  font-size: 2.2rem;
}

h4, .h4 {
  font-weight: var(--main-font-weight-semibold);
  font-size: 2rem;
}

h5, .h5 {
  font-weight: var(--main-font-weight);
  font-size: 2rem;
}

h6, .h6 {
  font-size: 1.5rem;
}

/*
Button

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

.button--primary - Primary
.button--action - Action
.button--danger - Danger
.button--bordered - Bordered
:disabled - Disabled
.btnNoStyle - no style

Styleguide Base.Buttons
*/
button:hover,
button:focus,
.button:hover,
.button:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}

button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--main-color-white);
  border-radius: 18px;
  color: var(--main-color-black);
  cursor: pointer;
  background: var(--main-color-white);
  text-align: center;
  text-decoration: none;
  line-height: 18px;
  font-size: var(--main-font-size-small);
  padding: 10px 15px 10px 15px;
  transition: ease-in-out 0.1s;
  position: relative;
  gap: 10px;
}
@media (min-width: 768px) {
  button,
  .button {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 13px 24px 13px 24px;
  }
}
button .icon,
button .animationHouse__labelLink::before,
button .infoBox--onlyIcon:before,
button .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after,
button .mainnav .headerContentNavigation > li > span:before,
.mainnav button .headerContentNavigation > li > span:before,
.button .icon,
.button .animationHouse__labelLink::before,
.button .infoBox--onlyIcon:before,
.button .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after,
.button .mainnav .headerContentNavigation > li > span:before,
.mainnav .button .headerContentNavigation > li > span:before {
  font-size: 1.4em;
  line-height: 1;
  position: relative;
}
button:focus-visible,
.button:focus-visible {
  outline: 1px dotted var(--main-color-middle-gray);
  outline-offset: -1px;
}
button:focus-within,
.button:focus-within {
  border-color: var(--main-color-middle-gray);
}
button:active,
.button:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}
button--primary,
.button--primary {
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  border-color: var(--main-color-primary);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-blue);
}
button--primary:active,
.button--primary:active {
  background: var(--main-color-primary-light);
  border-color: var(--main-color-primary-light);
  color: var(--main-color-white);
}
button.orderButton,
.button.orderButton {
  background: linear-gradient(226deg, #00A4E7 0.85%, #1989B7 99.15%);
  color: var(--main-color-white);
  border-color: transparent;
}
button.orderButton:hover,
button.orderButton:focus,
.button.orderButton:hover,
.button.orderButton:focus {
  background: radial-gradient(69.49% 69.49% at 50% 50%, #9CE2FF 0%, #4CCAFF 100%);
  border-color: transparent;
  color: var(--main-color-white);
}
button.orderButton:active,
.button.orderButton:active {
  background: radial-gradient(69.49% 69.49% at 50% 50%, #9CE2FF 0%, #4CCAFF 100%);
  border-color: transparent;
  color: var(--main-color-white);
}
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--bordered,
.button--bordered {
  background: transparent;
  color: var(--main-color-black);
  border-color: var(--main-color-black);
}
button--bordered:hover,
button--bordered:focus,
.button--bordered:hover,
.button--bordered:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
button--bordered:active,
.button--bordered:active {
  background: var(--main-color-primary-light);
  border-color: var(--main-color-primary-light);
  color: var(--main-color-white);
}
button--danger,
.button--danger {
  background: var(--main-color-danger);
  color: var(--main-color-danger-contrast);
  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-danger-dark-contrast);
}
button--danger:active,
.button--danger:active {
  background: #a92424;
  border-color: #a92424;
  color: var(--main-color-white);
}
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-small);
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 18px;
    padding-right: 30px;
    padding-bottom: 18px;
    padding-left: 30px;
    line-height: 22px;
    font-size: var(--main-font-size-big);
  }
}
button.is-loading,
button.is-success,
button.is-error,
.button.is-loading,
.button.is-success,
.button.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
}
button.is-loading:not(:has(.icon)),
button.is-success:not(:has(.icon)),
button.is-error:not(:has(.icon)),
.button.is-loading:not(:has(.icon)),
.button.is-success:not(:has(.icon)),
.button.is-error:not(:has(.icon)) {
  padding-right: 40px;
  padding-left: 10px;
}
button.is-loading:not(:has(.icon)):after,
button.is-success:not(:has(.icon)):after,
button.is-error:not(:has(.icon)):after,
.button.is-loading:not(:has(.icon)):after,
.button.is-success:not(:has(.icon)):after,
.button.is-error:not(:has(.icon)):after {
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: 0 -50%;
  font-size: 24px;
}
button.is-loading,
.button.is-loading {
  cursor: wait;
  color: var(--main-color-black) !important;
}
button.is-loading:not(:has(.icon)):after,
.button.is-loading:not(:has(.icon)):after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .icon:before,
button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .animationHouse__labelLink:before,
button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .infoBox--onlyIcon:before,
button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .mainnav .headerContentNavigation > li > span:before,
.mainnav button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .headerContentNavigation > li > span:before,
.button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .icon:before,
.button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .animationHouse__labelLink:before,
.button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .infoBox--onlyIcon:before,
.button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .mainnav .headerContentNavigation > li > span:before,
.mainnav .button.is-loading:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .headerContentNavigation > li > span:before {
  content: var(--base-icon-loading);
  animation: rotation 1s infinite ease-in-out;
}
button.is-success,
.button.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-success-contrast) !important;
}
button.is-success:not(:has(.icon)):after,
.button.is-success:not(:has(.icon)):after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .icon:before,
button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .animationHouse__labelLink:before,
button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .infoBox--onlyIcon:before,
button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .mainnav .headerContentNavigation > li > span:before,
.mainnav button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .headerContentNavigation > li > span:before,
.button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .icon:before,
.button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .animationHouse__labelLink:before,
.button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .infoBox--onlyIcon:before,
.button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .mainnav .headerContentNavigation > li > span:before,
.mainnav .button.is-success:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .headerContentNavigation > li > span:before {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
button.is-error,
.button.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-danger-contrast) !important;
}
button.is-error:not(:has(.icon)):after,
.button.is-error:not(:has(.icon)):after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .icon:before,
button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .animationHouse__labelLink:before,
button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .infoBox--onlyIcon:before,
button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .mainnav .headerContentNavigation > li > span:before,
.mainnav button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .headerContentNavigation > li > span:before,
.button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .icon:before,
.button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .animationHouse__labelLink:before,
.button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .infoBox--onlyIcon:before,
.button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .mainnav .headerContentNavigation > li > span:before,
.mainnav .button.is-error:has(.icon, .animationHouse__labelLink::before, .infoBox--onlyIcon:before, .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .mainnav .headerContentNavigation > li > span:before) .headerContentNavigation > li > span:before {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled] {
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
  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[disabled]:hover,
.button[disabled]:focus,
.button[disabled]:active {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  color: var(--main-color-black);
}

.btnNoStyle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  text-align: inherit;
  line-height: inherit;
  border-radius: inherit;
}
.btnNoStyle .icon, .btnNoStyle .animationHouse__labelLink::before, .btnNoStyle .infoBox--onlyIcon:before, .btnNoStyle .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .btnNoStyle .mainnav .headerContentNavigation > li > span:before, .mainnav .btnNoStyle .headerContentNavigation > li > span:before {
  line-height: inherit;
  margin: 0;
  font-size: inherit;
  position: inherit;
}
.btnNoStyle:hover, .btnNoStyle:focus, .btnNoStyle:active {
  background: none;
  border: 0;
  color: inherit;
  text-decoration: none;
}

@keyframes scaleRequestIconBtn {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.footer__trust {
  padding-top: 36px;
  padding-bottom: 12px;
}
@media (min-width: 768px) {
  .footer__trust {
    padding-top: 60px;
    padding-bottom: 28px;
  }
}
.footer__trust ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.footer__trust ul li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid #CFCFCF;
  justify-content: center;
}
.footer__trust ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.footer__trust ul li .icon, .footer__trust ul li .animationHouse__labelLink::before, .footer__trust ul li .infoBox--onlyIcon:before, .footer__trust ul li .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .footer__trust ul .mainnav .headerContentNavigation > li > span:before, .mainnav .footer__trust ul .headerContentNavigation > li > span:before {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  .footer__trust ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .footer__trust ul li {
    width: 50%;
  }
  .footer__trust ul li:nth-last-child(2), .footer__trust ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .footer__trust ul {
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: space-between;
  }
  .footer__trust ul li {
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

footer.footer {
  background: var(--main-color-primary);
  color: var(--main-color-white);
}
footer.footer .nav a, footer.footer a {
  color: var(--main-color-white);
  text-decoration: none !important;
}
footer.footer .nav a:hover, footer.footer .nav a .is-active, footer.footer .nav a:active, footer.footer .nav a:focus, footer.footer a:hover, footer.footer a .is-active, footer.footer a:active, footer.footer a:focus {
  color: var(--main-color-blue);
}
footer.footer .nav--shop {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
footer.footer .nav--shop li a {
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}
footer.footer .nav--shop li a:hover, footer.footer .nav--shop li a:active, footer.footer .nav--shop li a:focus, footer.footer .nav--shop li a.is-active {
  color: var(--main-color-blue);
}
footer.footer .nav--shop.level_1 > li > a {
  font-weight: var(--main-font-weight-bold);
  padding-bottom: 12px;
  font-size: 1.8rem;
  color: var(--main-color-white);
}
footer.footer .nav--shop.level_1 > li > a:hover, footer.footer .nav--shop.level_1 > li > a .is-active, footer.footer .nav--shop.level_1 > li > a:active, footer.footer .nav--shop.level_1 > li > a:focus {
  color: var(--main-color-blue);
}
footer.footer .nav--shop.level_1 > li > .nav--shop__toggle {
  display: none;
}
footer.footer .nav--shop > li > ul {
  display: flex;
  flex-direction: column;
}
footer.footer .nav--shop > li > ul > li > a {
  font-weight: var(--main-font-weight);
}
@media (max-width: 767px) {
  footer.footer .nav--shop.level_1 {
    flex-direction: column;
  }
  footer.footer .nav--shop.level_1 > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--main-color-middle-gray);
    padding-block: 10px;
  }
  footer.footer .nav--shop.level_1 > li > a {
    flex: 1;
    padding-bottom: 0;
  }
  footer.footer .nav--shop.level_1 > li > .nav--shop__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--main-color-white);
    padding: 8px;
    cursor: pointer;
  }
  footer.footer .nav--shop.level_1 > li > .nav--shop__toggle .icon, footer.footer .nav--shop.level_1 > li > .nav--shop__toggle .animationHouse__labelLink::before, footer.footer .nav--shop.level_1 > li > .nav--shop__toggle .infoBox--onlyIcon:before, footer.footer .nav--shop.level_1 > li > .nav--shop__toggle .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, footer.footer .nav--shop.level_1 > li > .nav--shop__toggle .mainnav .headerContentNavigation > li > span:before, .mainnav footer.footer .nav--shop.level_1 > li > .nav--shop__toggle .headerContentNavigation > li > span:before {
    font-size: 1.6rem;
    transition: transform 0.2s ease;
  }
  footer.footer .nav--shop.level_1 > li > ul.level_2 {
    display: none;
    flex-direction: column;
    flex-basis: 100%;
    padding: 4px 0 8px;
  }
  footer.footer .nav--shop.level_1 > li.is-open > ul.level_2 {
    display: flex;
  }
  footer.footer .nav--shop.level_1 > li.is-open > .nav--shop__toggle .icon, footer.footer .nav--shop.level_1 > li.is-open > .nav--shop__toggle .animationHouse__labelLink::before, footer.footer .nav--shop.level_1 > li.is-open > .nav--shop__toggle .infoBox--onlyIcon:before, footer.footer .nav--shop.level_1 > li.is-open > .nav--shop__toggle .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, footer.footer .nav--shop.level_1 > li.is-open > .nav--shop__toggle .mainnav .headerContentNavigation > li > span:before, .mainnav footer.footer .nav--shop.level_1 > li.is-open > .nav--shop__toggle .headerContentNavigation > li > span:before {
    transform: rotate(180deg);
  }
}
footer.footer .footerMain {
  padding-top: 20px;
}
@media (min-width: 768px) {
  footer.footer .footerMain {
    padding-top: 60px;
  }
}
footer.footer .footerMain__top .container {
  padding-bottom: 55px;
  display: flex;
  gap: 20px;
}
footer.footer .footerMain__top .container > nav {
  flex-grow: 1;
}
@media (min-width: 768px) {
  footer.footer .footerMain__top .container {
    border-bottom: 1px solid var(--main-color-gray-base);
  }
}
@media (min-width: 1250px) {
  footer.footer .footerMain__top .container {
    gap: 120px;
  }
}
@media (min-width: 768px) and (max-width: 1249.98px) {
  footer.footer .footerMain__top .container > nav > .nav--shop {
    flex-wrap: wrap;
    gap: 20px;
  }
  footer.footer .footerMain__top .container > nav > .nav--shop > li {
    width: calc(50% - 20px);
  }
}
footer.footer .footerMain__bottom {
  padding-bottom: 0;
}
@media (min-width: 768px) {
  footer.footer .footerMain__bottom {
    padding-top: 55px;
  }
}
footer.footer .footerMain__bottom .footerContentNavigation {
  display: flex;
  gap: 50px;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  footer.footer .footerMain__bottom .footerContentNavigation {
    flex-direction: row;
    gap: 40px;
  }
}
@media (min-width: 1250px) {
  footer.footer .footerMain__bottom .footerContentNavigation {
    gap: 120px;
  }
}
footer.footer .footerMain__bottom .footerContentNavigation__container {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 1540px) {
  footer.footer .footerMain__bottom .footerContentNavigation__container {
    padding-left: 120px;
    display: flex;
    flex-direction: row;
    gap: 120px;
  }
}
footer.footer .footerMain__bottom .navgroup__title {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 12px;
  font-size: 1.8rem;
}
footer.footer .footerMain__bottom .navgroup ul li a {
  font-weight: var(--main-font-weight);
  margin-bottom: 5px;
  font-size: 1.5rem;
}
footer.footer .footerMain__bottom .navgroup ul li a.is-active {
  color: var(--main-color-blue);
}
footer.footer .footerMain__bottom .footerSocialmedia__container {
  display: flex;
  align-items: center;
}
@media (min-width: 1540px) {
  footer.footer .footerMain__bottom .footerSocialmedia__container {
    justify-content: flex-end;
  }
}
footer.footer .footerMain__bottom .footerSocialmedia__container .textcontent {
  display: flex;
  gap: 12px;
}
footer.footer .footerMain__bottom .footerSocialmedia__container a {
  font-size: 3.8rem;
  text-decoration: none;
  height: 4.2rem;
}
footer.footer .footerBottom {
  border-top-color: var(--main-color-gray-base);
}
@media (max-width: 767.98px) {
  footer.footer .footerBottom .container {
    flex-direction: column;
    align-items: start;
  }
  footer.footer .footerBottom .container .nav ul {
    flex-direction: row;
  }
  footer.footer .footerBottom .container .footerBottomLeft {
    margin-right: 0;
    margin-bottom: 16px;
  }
}
footer.footer .footerInfo__container {
  container-type: inline-size;
}
footer.footer .footerInfo__container .inner {
  display: flex;
  align-items: flex-end;
  height: 100%;
  gap: 30px;
}
footer.footer .footerInfo__mhg {
  flex: 0 0 28%;
}
footer.footer .footerInfo__claim {
  flex: 1;
}
@container (inline-size < 600px) {
  footer.footer .footerInfo__container .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  footer.footer .footerInfo__mhg {
    flex: none;
    width: 80%;
  }
  footer.footer .footerInfo__claim {
    flex: none;
    width: 100%;
  }
}

.headerLogo a, .headerLogo img {
  aspect-ratio: 113/78;
}

.headerMain {
  background: var(--main-color-light-gray);
  box-shadow: none;
}
@media (min-width: 1250px) {
  .headerMain {
    padding-block: 12px;
  }
}
.headerMain > .container {
  justify-content: space-between;
}
.headerMain .mainnav__seperator {
  background: transparent;
  padding-inline: 10px;
  margin-inline: 10px;
}
.headerMain .headerMainNavigation {
  margin-top: 0;
  flex-grow: unset;
}
.headerMain .headerMainNavigation > ul {
  border-bottom: 1px solid #CFCFCF;
}
.headerMain .headerNavToggler {
  border: 1px solid #CFCFCF;
  border-radius: 14px;
  width: 36px;
  height: 34px;
}
@media (min-width: 768px) {
  .headerMain .headerNavToggler {
    width: 48px;
    height: 40px;
  }
}
@media (max-width: 767.98px) {
  .headerMain .headerNavToggler {
    margin-left: 8px;
  }
}
.headerMain .headerNavToggler .navToggler__bar {
  width: calc(100% - 22px);
  left: 11px;
}
.headerMain .headerNavToggler .navToggler__bar:first-child {
  top: 10px;
}
.headerMain .headerNavToggler .navToggler__bar:nth-child(2) {
  left: 13px;
}
.headerMain .headerNavToggler .navToggler__bar:last-child {
  bottom: 10px;
}
.headerMain .headerAccount {
  gap: 10px;
}
@media (max-width: 767.98px) {
  .headerMain .headerAccount {
    gap: 8px;
  }
  .headerMain .headerAccount .button {
    padding: 3px 10px;
    width: 36px;
    height: 33px;
  }
}
.headerMain .headerAccount .actionIcon {
  border: none;
}
.headerMain .headerAccount .iconbarIcon__label {
  display: none;
}
.headerMain .searchBar {
  width: auto;
}
.headerMain.sticky {
  box-shadow: none;
  border-bottom: 1px solid #CFCFCF;
}

.headerTop {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
@media (min-width: 768px) {
  .headerTop {
    padding-block: 10px;
    font-size: 1.5rem;
  }
}
.headerTop a:hover, .headerTop a:active, .headerTop a:focus {
  color: #4CCAFF;
  text-decoration: none;
}
.headerTop a:hover > span, .headerTop a:active > span, .headerTop a:focus > span {
  color: #4CCAFF;
}

.headerTopLeft__info .textcontent {
  display: flex;
  align-items: center;
  gap: 20px;
}
.headerTopLeft__info .textcontent a {
  color: var(--main-color-white);
}
.headerTopLeft__info .textcontent a:hover, .headerTopLeft__info .textcontent a:active, .headerTopLeft__info .textcontent a:focus {
  text-decoration: none;
  color: #4CCAFF;
}
.headerTopLeft__info .textcontent a:hover i, .headerTopLeft__info .textcontent a:active i, .headerTopLeft__info .textcontent a:focus i {
  color: #4CCAFF;
}

.mainnav > ul > li > a {
  font-weight: var(--main-font-weight);
}

.headerTopNavigation.nav a {
  color: var(--main-color-white) !important;
}
.headerTopNavigation.nav a:hover, .headerTopNavigation.nav a:active, .headerTopNavigation.nav a:focus, .headerTopNavigation.nav a.is-active {
  color: var(--main-color-blue) !important;
}

/*
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: 45px;
  height: 40px;
  color: var(--main-color-black);
  background: var(--main-color-white);
  border-radius: 14px;
}
.actionIcon:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.actionIcon:focus, .actionIcon:active {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.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, .actionIcon .animationHouse__labelLink::before, .actionIcon .infoBox--onlyIcon:before, .actionIcon .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .actionIcon .mainnav .headerContentNavigation > li > span:before, .mainnav .actionIcon .headerContentNavigation > li > span:before {
  opacity: 1;
}
.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-loading .animationHouse__labelLink::before, .actionIcon.is-loading .infoBox--onlyIcon:before, .actionIcon.is-loading .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .actionIcon.is-loading .mainnav .headerContentNavigation > li > span:before, .mainnav .actionIcon.is-loading .headerContentNavigation > li > span:before, .actionIcon.is-success .icon, .actionIcon.is-success .animationHouse__labelLink::before, .actionIcon.is-success .infoBox--onlyIcon:before, .actionIcon.is-success .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .actionIcon.is-success .mainnav .headerContentNavigation > li > span:before, .mainnav .actionIcon.is-success .headerContentNavigation > li > span:before, .actionIcon.is-error .icon, .actionIcon.is-error .animationHouse__labelLink::before, .actionIcon.is-error .infoBox--onlyIcon:before, .actionIcon.is-error .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .actionIcon.is-error .mainnav .headerContentNavigation > li > span:before, .mainnav .actionIcon.is-error .headerContentNavigation > li > span:before {
  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;
}
.actionIcon.js-searchTrigger {
  background: var(--main-color-black);
  color: var(--main-color-white);
  font-size: 1.8rem;
}
.actionIcon.js-searchTrigger:hover, .actionIcon.js-searchTrigger:focus {
  background: var(--main-color-white);
  color: var(--main-color-black);
}

/*
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 {
  background: transparent;
}
.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-color-white);
  background: var(--main-color-black);
}
.iconbarIcon:hover .iconbarIcon__count, .iconbarIcon:focus .iconbarIcon__count, .iconbarIcon:active .iconbarIcon__count, .iconbarIcon.is-active .iconbarIcon__count {
  color: var(--main-color-white);
}
.iconbarIcon__icon {
  font-size: 24px;
  border-radius: 14px;
  background: var(--main-color-white);
  width: 45px;
  height: 40px;
}
.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: #9C9C98;
  color: #20201E;
  font-size: 1.2rem;
}
.iconbarIcon__label {
  color: var(--main-color-white);
}
.iconbarIcon__count {
  top: -6px;
  left: calc(50% + 8px);
  background: linear-gradient(226deg, #00A4E7 0.85%, #1989B7 99.15%);
  color: var(--main-color-white);
}
@media (max-width: 767.98px) {
  .iconbarIcon__icon {
    font-size: 20px;
    border-radius: 12px;
    width: 36px;
    height: 33px;
  }
  .iconbarIcon__count {
    left: calc(50% + 3px);
  }
}

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

.iconbarHover {
  right: 20px;
  border-radius: 18px;
  margin-top: 6px;
  box-shadow: none;
}
.iconbarHover:before {
  right: 7px;
  display: none;
}
.iconbarHover__navigation li > a:hover, .iconbarHover__navigation li > a:focus, .iconbarHover__navigation li > a:active, .iconbarHover__navigation li > a.is-active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}

.iconbarIcon.active .iconbarIcon__icon {
  background: var(--main-color-black);
  color: var(--main-color-blue);
}
.iconbarIcon--basket.active .iconbarIcon__icon {
  background: linear-gradient(226deg, #00A4E7 0.85%, #1989B7 99.15%);
  color: var(--main-color-white);
}

.headerAccount .iconbarHover {
  right: -10px;
}
.headerAccount .iconbarHover:before {
  right: 12px;
}

.mainnav a {
  color: var(--main-color-text-base);
  text-decoration: none !important;
}
.mainnav li:hover > a, .mainnav li:focus > a, .mainnav li:active > a {
  color: var(--main-color-black);
}
.mainnav li.is-active > a, .mainnav li.is-active-tree > a {
  color: var(--main-link-color-hover);
}
.mainnav li.is-active > a:after, .mainnav li.is-active-tree > a:after {
  height: 2px;
  background: var(--main-link-color-hover);
}
.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 {
  color: var(--main-color-black);
}
.mainnav li.is-active:hover > a:after, .mainnav li.is-active:focus > a:after, .mainnav li.is-active:active > a:after, .mainnav li.is-active-tree:hover > a:after, .mainnav li.is-active-tree:focus > a:after, .mainnav li.is-active-tree:active > a:after {
  background: var(--main-color-black);
}
.mainnav > ul {
  gap: 20px;
  font-size: var(--main-font-size-base);
}
@media (min-width: 1540px) {
  .mainnav > ul {
    gap: 40px;
    font-size: 1.8rem;
  }
}
.mainnav > ul > li {
  padding: 0;
}
.mainnav > ul > li > a, .mainnav > ul > li span {
  font-weight: var(--main-font-weight);
  display: block;
  padding-block: 11px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.mainnav > ul > li > a.is-active, .mainnav > ul > li span.is-active {
  color: var(--main-color-black) !important;
}
.mainnav > ul > li > a:hover:after, .mainnav > ul > li span:hover:after {
  height: 1px;
  background: var(--main-color-black);
}
.mainnav > ul > li > a:after, .mainnav > ul > li span:after {
  height: 1px;
}
.mainnav > ul > li > ul a.is-active {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mainnav > ul > li > ul {
  border-radius: 18px;
  margin-top: 0;
  bottom: auto;
  top: -10px;
  padding-top: 80px;
  padding-inline: 20px;
}
.mainnav > ul > li > ul > li:not(:last-child) {
  margin-bottom: 0;
}
.mainnav > ul > li > ul li {
  font-size: 1.75rem;
}
.mainnav > ul > li > ul li:hover > a, .mainnav > ul > li > ul li:focus > a, .mainnav > ul > li > ul li:active > a {
  color: var(--main-link-color-hover);
}
.mainnav > ul > li > ul:before {
  display: none;
}
.mainnav > ul > li.hoverintent > a, .mainnav > ul > li.hoverintent span {
  border-bottom: 1px solid #CFCFCF;
  z-index: 102;
}
.mainnav > ul > li.is-active > a:after {
  height: 1px;
}
.mainnav > ul.nav--content > li > a {
  font-weight: var(--main-font-weight);
}
.mainnav > ul.nav--showMore {
  margin-left: 20px;
}
@media (min-width: 1540px) {
  .mainnav > ul.nav--showMore {
    margin-left: 40px;
  }
}

.mainnav .headerContentNavigation > li > span {
  display: block;
  position: relative;
  padding-left: 26px;
  border-bottom: 1px solid transparent;
}
.mainnav .headerContentNavigation > li > span:before {
  content: var(--base-icon-angle-right);
  position: absolute;
  left: 0;
  top: 8px;
  font-size: 2rem;
}
.mainnav .headerContentNavigation > li.hoverintent > a, .mainnav .headerContentNavigation > li.hoverintent span {
  border-bottom: 1px solid #CFCFCF;
  z-index: 102;
}
.mainnav .headerContentNavigation > li > ul {
  border-radius: 18px;
  margin-top: 0;
  bottom: auto;
  top: -10px;
  padding-top: 80px;
  padding-inline: 20px;
}
.mainnav .headerContentNavigation > li > ul:before {
  display: none;
}
.mainnav .headerContentNavigation > li > ul > li.is-active-tree > a {
  color: var(--main-color-black) !important;
}
.mainnav .headerContentNavigation > li > ul > li > a {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.mainnav .headerContentNavigation > li > ul > li > a > ul a.is-active {
  color: var(--main-color-blue-light);
}

.itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::before, .itemcardNavigation__nav[data-nav-mode=overlay]:not(.is-collapsed), .iconbarHover, .mainnav > ul > li > ul, .mainnav .headerContentNavigation > li > ul {
  background: rgba(236, 236, 236, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid #CFCFCF;
  box-shadow: none;
}

.accountBox {
  border-color: #CFCFCF;
  border-radius: 18px;
}

.tag {
  border-radius: 18px;
  padding: 14px 20px;
  border: 1px solid #CFCFCF;
}
.tag:hover, .tag:active, .tag:focus, .tag.is-active {
  border-color: var(--main-color-black);
  background: var(--main-color-black);
  color: var(--main-color-white);
}

@media (max-width: 1249.98px) {
  .tags {
    max-width: calc(100vw - 40px);
  }
}
.imgGrid {
  display: grid;
  gap: 38px;
}
.imgGrid .imageGallery.swiper {
  display: contents;
}
.imgGrid .imageGallery.swiper .swiper-wrapper {
  display: contents;
}
.imgGrid .imageGallery.swiper .swiper-button-prev,
.imgGrid .imageGallery.swiper .swiper-button-next {
  display: none;
}
.imgGrid__item, .imgGrid .swiper-slide {
  width: auto !important;
  margin-right: 0 !important;
  display: flex;
  overflow: hidden;
  border-radius: 13px;
}
.imgGrid__item img, .imgGrid .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.imgGrid:has(> .imgGrid__item:nth-child(1):last-child) > .imgGrid__item, .imgGrid:has(> .imgGrid__item:nth-child(1):last-child) .swiper-slide, .imgGrid:has(.swiper-slide:nth-child(1):last-child) > .imgGrid__item, .imgGrid:has(.swiper-slide:nth-child(1):last-child) .swiper-slide {
  aspect-ratio: 16/9;
}
.imgGrid:has(> .imgGrid__item:nth-child(2):last-child), .imgGrid:has(.swiper-slide:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}
.imgGrid:has(> .imgGrid__item:nth-child(2):last-child) > .imgGrid__item, .imgGrid:has(> .imgGrid__item:nth-child(2):last-child) .swiper-slide, .imgGrid:has(.swiper-slide:nth-child(2):last-child) > .imgGrid__item, .imgGrid:has(.swiper-slide:nth-child(2):last-child) .swiper-slide {
  aspect-ratio: 4/3;
}
.imgGrid:has(> .imgGrid__item:nth-child(3):last-child), .imgGrid:has(.swiper-slide:nth-child(3):last-child) {
  grid-template-columns: 1fr 1.3fr;
}
.imgGrid:has(> .imgGrid__item:nth-child(3):last-child) > .imgGrid__item:nth-child(1), .imgGrid:has(> .imgGrid__item:nth-child(3):last-child) .swiper-slide:nth-child(1), .imgGrid:has(.swiper-slide:nth-child(3):last-child) > .imgGrid__item:nth-child(1), .imgGrid:has(.swiper-slide:nth-child(3):last-child) .swiper-slide:nth-child(1) {
  margin-left: 20%;
}
.imgGrid:has(> .imgGrid__item:nth-child(3):last-child) > .imgGrid__item:nth-child(3), .imgGrid:has(> .imgGrid__item:nth-child(3):last-child) .swiper-slide:nth-child(3), .imgGrid:has(.swiper-slide:nth-child(3):last-child) > .imgGrid__item:nth-child(3), .imgGrid:has(.swiper-slide:nth-child(3):last-child) .swiper-slide:nth-child(3) {
  grid-column: 2;
  grid-row: 1/3;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)), .imgGrid:has(.swiper-slide:nth-child(4)) {
  grid-template-columns: 1fr 0.3fr 1fr;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(6n+1),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(6n+1), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(6n+1),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(6n+1) {
  margin-left: 20%;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(6n+5),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(6n+5), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(6n+5),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(6n+5) {
  margin-right: 20% !important;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(3),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(3), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(3),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(3) {
  grid-column: 2/4;
  grid-row: 1/3;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(4),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(4), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(4),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(4) {
  grid-column: 1/3;
  grid-row: 3/5;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(9),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(9), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(9),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(9) {
  grid-column: 2/4;
  grid-row: 5/7;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(10),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(10), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(10),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(10) {
  grid-column: 1/3;
  grid-row: 7/9;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(15),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(15), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(15),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(15) {
  grid-column: 2/4;
  grid-row: 9/11;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(16),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(16), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(16),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(16) {
  grid-column: 1/3;
  grid-row: 11/13;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(21),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(21), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(21),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(21) {
  grid-column: 2/4;
  grid-row: 13/15;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(22),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(22), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(22),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(22) {
  grid-column: 1/3;
  grid-row: 15/17;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(27),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(27), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(27),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(27) {
  grid-column: 2/4;
  grid-row: 17/19;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(28),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(28), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(28),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(28) {
  grid-column: 1/3;
  grid-row: 19/21;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(33),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(33), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(33),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(33) {
  grid-column: 2/4;
  grid-row: 21/23;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(34),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(34), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(34),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(34) {
  grid-column: 1/3;
  grid-row: 23/25;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(39),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(39), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(39),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(39) {
  grid-column: 2/4;
  grid-row: 25/27;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(40),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(40), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(40),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(40) {
  grid-column: 1/3;
  grid-row: 27/29;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(45),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(45), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(45),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(45) {
  grid-column: 2/4;
  grid-row: 29/31;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(46),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(46), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(46),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(46) {
  grid-column: 1/3;
  grid-row: 31/33;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(51),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(51), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(51),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(51) {
  grid-column: 2/4;
  grid-row: 33/35;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(52),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(52), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(52),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(52) {
  grid-column: 1/3;
  grid-row: 35/37;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(57),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(57), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(57),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(57) {
  grid-column: 2/4;
  grid-row: 37/39;
  aspect-ratio: unset;
  align-self: center;
}
.imgGrid:has(> .imgGrid__item:nth-child(4)) > .imgGrid__item:nth-child(58),
.imgGrid:has(> .imgGrid__item:nth-child(4)) .swiper-slide:nth-child(58), .imgGrid:has(.swiper-slide:nth-child(4)) > .imgGrid__item:nth-child(58),
.imgGrid:has(.swiper-slide:nth-child(4)) .swiper-slide:nth-child(58) {
  grid-column: 1/3;
  grid-row: 39/41;
  aspect-ratio: unset;
  align-self: center;
}

.imageGallery img {
  display: block;
  object-fit: cover;
}
.imageGallery .imageGalleryItem {
  border-radius: 18px;
}

.searchBar {
  width: 100%;
  border-radius: 14px;
  box-shadow: none !important;
}
.searchBar input {
  border-radius: 14px;
  border-color: var(--main-color-white) !important;
}
@media (min-width: 768px) {
  .searchBar input {
    padding: 10px 24px 10px 14px;
  }
}
.searchBar input:-webkit-autofill,
.searchBar input:-webkit-autofill:hover,
.searchBar input:-webkit-autofill:focus,
.searchBar input:-webkit-autofill:active {
  -webkit-box-shadow: none;
}
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
  background: var(--main-color-white);
  border-color: transparent !important;
  padding-block: 8px;
}
@media (max-width: 767.98px) {
  .searchBar .inputGroup__addon,
  .searchBar button.inputGroup__addon {
    padding: 5px 4px 6px 4px;
  }
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.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;
  background: var(--main-color-white);
  padding-block: 8px;
}
@media (max-width: 767.98px) {
  .searchBar--minified .inputGroup__addon {
    padding: 9px 7px;
  }
}
.searchBar--minified.is-active input {
  width: 330px;
  padding-right: 48px;
  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: var(--main-color-white) !important;
  border-color: transparent !important;
}
.searchBar--small .inputGroup__addon .icon, .searchBar--small .inputGroup__addon .animationHouse__labelLink::before, .searchBar--small .inputGroup__addon .infoBox--onlyIcon:before, .searchBar--small .inputGroup__addon .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .searchBar--small .inputGroup__addon .mainnav .headerContentNavigation > li > span:before, .mainnav .searchBar--small .inputGroup__addon .headerContentNavigation > li > span:before,
.searchBar--small button.inputGroup__addon .icon {
  font-size: 18px;
}
.searchBar--small.is-focus input {
  border-color: transparent !important;
}
.searchBar--small.is-focus .inputGroup__addon,
.searchBar--small.is-focus button.inputGroup__addon {
  border-color: transparent !important;
}
.searchBar.is-focus {
  box-shadow: none;
}
.searchBar.is-focus input, .searchBar.is-focus .inputGroup__addon, .searchBar.is-focus button.inputGroup__addon {
  border-color: var(--main-color-white);
}
.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);
}
@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;
    z-index: 104;
  }
  .searchBar--minified-xs .inputGroup__addon {
    z-index: 1;
    border-radius: 14px;
    background: var(--main-color-white);
    border-color: var(--main-color-white);
  }
  .searchBar--minified-xs.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-xs.is-focus input {
    width: 330px;
    padding-right: 48px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-white);
    border-radius: 14px;
  }
  .searchBar--minified-xs.is-focus .inputGroup__addon {
    z-index: 105;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--main-color-black) !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;
    z-index: 104;
  }
  .searchBar--minified-sm .inputGroup__addon {
    z-index: 1;
    border-radius: 14px;
    background: var(--main-color-white);
    border-color: var(--main-color-white);
  }
  .searchBar--minified-sm.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-sm.is-focus input {
    width: 330px;
    padding-right: 48px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-white);
    border-radius: 14px;
  }
  .searchBar--minified-sm.is-focus .inputGroup__addon {
    z-index: 105;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--main-color-black) !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;
    z-index: 104;
  }
  .searchBar--minified-md .inputGroup__addon {
    z-index: 1;
    border-radius: 14px;
    background: var(--main-color-white);
    border-color: var(--main-color-white);
  }
  .searchBar--minified-md.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-md.is-focus input {
    width: 330px;
    padding-right: 48px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-white);
    border-radius: 14px;
  }
  .searchBar--minified-md.is-focus .inputGroup__addon {
    z-index: 105;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--main-color-black) !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;
    z-index: 104;
  }
  .searchBar--minified-lg .inputGroup__addon {
    z-index: 1;
    border-radius: 14px;
    background: var(--main-color-white);
    border-color: var(--main-color-white);
  }
  .searchBar--minified-lg.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-lg.is-focus input {
    width: 330px;
    padding-right: 48px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-white);
    border-radius: 14px;
  }
  .searchBar--minified-lg.is-focus .inputGroup__addon {
    z-index: 105;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--main-color-black) !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;
    z-index: 104;
  }
  .searchBar--minified-xlg .inputGroup__addon {
    z-index: 1;
    border-radius: 14px;
    background: var(--main-color-white);
    border-color: var(--main-color-white);
  }
  .searchBar--minified-xlg.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-xlg.is-focus input {
    width: 330px;
    padding-right: 48px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-white);
    border-radius: 14px;
  }
  .searchBar--minified-xlg.is-focus .inputGroup__addon {
    z-index: 105;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--main-color-black) !important;
  }
  .searchBar--minified-xlg.is-focus .inputGroup__addon:hover, .searchBar--minified-xlg.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (max-width: 767.98px) {
  .searchBar {
    position: static;
  }
  .searchBar.is-focus input {
    position: absolute;
    width: 90vw;
    max-width: 90vw;
    left: 5vw;
    top: 90px;
  }
}
@media (max-width: 374px) {
  .searchBar.is-focus input {
    top: 65px;
  }
}

/*
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);
  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 > li > a {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}
.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.is-active {
  color: var(--main-link-color-hover);
}
.subnav > ul ul a:hover:before, .subnav > ul ul a.is-active:before {
  opacity: 1;
  transform: translate(0, -50%);
}

.customSelect__selected {
  border-radius: 18px;
}
.customSelect__dropdown {
  border-radius: 18px;
}

input,
select,
textarea,
.selectBody__fakeOption {
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 1px solid #CFCFCF;
  border-radius: 18px;
  box-shadow: none;
  display: block;
  width: 100%;
  line-height: 18px;
  font-size: clamp(16px, var(--main-font-size-small), 20px);
  padding: 10px 15px 10px 15px;
}
@media (min-width: 768px) {
  input,
  select,
  textarea,
  .selectBody__fakeOption {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 13px 24px 13px 24px;
  }
}
input:not(:disabled):active, input:not(:disabled):focus,
select:not(:disabled):active,
select:not(:disabled):focus,
textarea:not(:disabled):active,
textarea:not(:disabled):focus,
.selectBody__fakeOption:not(:disabled):active,
.selectBody__fakeOption:not(:disabled):focus {
  border-color: var(--main-color-primary);
}
input:not(:disabled):focus-visible,
select:not(:disabled):focus-visible,
textarea:not(:disabled):focus-visible,
.selectBody__fakeOption:not(:disabled):focus-visible {
  outline-offset: -1px;
}
input:not(:disabled):focus-within,
select:not(:disabled):focus-within,
textarea:not(:disabled):focus-within,
.selectBody__fakeOption:not(:disabled):focus-within {
  border-color: var(--main-color-primary);
}
input.error,
select.error,
textarea.error,
.error.selectBody__fakeOption {
  border-color: var(--main-color-danger);
}
input:disabled,
select:disabled,
textarea:disabled,
.selectBody__fakeOption:disabled {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--main-color-middle-gray);
}

.infieldInputGroup:has(input:disabled) label {
  background-color: rgba(255, 255, 255, 0.5);
}

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;
}

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

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

form {
  margin: 0;
}

.inputGroup {
  border-radius: 18px;
}
.inputGroup input {
  border-radius: 18px;
}
.inputGroup__addon:first-child {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.inputGroup__addon:last-child {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.inputGroup--infieldAddon > input:first-child {
  border-radius: 18px;
}

.inputGroup .iti__flag-container + input {
  border-top-left-radius: 18px !important;
  border-bottom-left-radius: 18px !important;
}

.fileBody input + span {
  border-radius: 18px;
  border-color: #CFCFCF;
}

.quantity {
  max-width: 90px;
}
.quantity input {
  background: transparent;
}
.quantity__spinnerItem {
  height: calc(50% - 3px);
  background: var(--main-color-white);
  border-radius: 8px;
}
.quantity__spinnerItem--up {
  top: 1px;
}
.quantity__spinnerItem--down {
  bottom: 1px;
}

.itemlistElement {
  border: 1px solid #CFCFCF;
  border-radius: 18px;
  padding: 0 30px;
  font-size: var(--main-font-size-base);
}
@media (min-width: 1024px) {
  .itemlistElement {
    font-size: var(--main-font-size-small);
  }
  .itemlistElement .itemlistElement__name {
    font-size: 2rem;
  }
}
.itemlistElement__image picture,
.itemlistElement__image img {
  aspect-ratio: 1;
  mix-blend-mode: multiply;
}
.itemlistElement__name {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
}
.itemlistElement__actions {
  width: 45px;
}
.itemlistElement__actions .actionIcon {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.itemlistElement__orderbutton {
  flex-grow: 1;
}
.itemlistElement__orderbutton .orderButton {
  padding: 12px 14px;
}
.itemlistElement__wrapper {
  display: grid;
  padding-top: 10px;
  padding-bottom: 10px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  position: relative;
}
.itemlistElement__wrapper--hasVariant {
  grid-template-columns: 80px 1fr;
  grid-template-areas: "media description" "addon addon";
}
.itemlistElement__wrapper--hasVariant .itemlistElement__inventory,
.itemlistElement__wrapper--hasVariant .itemlistElement__prices,
.itemlistElement__wrapper--hasVariant .itemlistElement__info,
.itemlistElement__wrapper--hasVariant .itemlistElement__toggle {
  display: none;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__name {
  font-size: 2rem;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__orderbutton {
  display: flex;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__orderbutton .button {
  flex-grow: inherit;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__orderbutton span {
  display: none;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--hasVariant {
    align-items: center;
    grid-template-columns: 80px 1fr auto;
    grid-template-areas: "media description addon";
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--hasVariant {
    grid-template-columns: 80px 1fr 170px;
    grid-template-areas: "media description addon";
  }
  .itemlistElement__wrapper--hasVariant .itemlistElement__name {
    font-size: 2.5rem;
  }
}
@container containerItemlistElement (min-width: 1150px) {
  .itemlistElement__wrapper--hasVariant {
    align-items: center;
    grid-template-columns: 30px 102px 1fr 1fr 170px;
    grid-template-areas: "toggle media description info addon";
  }
  .itemlistElement__wrapper--hasVariant .itemlistElement__info {
    display: block;
  }
  .itemlistElement__wrapper--hasVariant .itemlistElement__toggle {
    display: flex;
  }
}
.itemlistElement__wrapper--noVariant {
  grid-template-columns: 80px 1fr;
  grid-template-areas: "media description" "inventory inventory" "prices prices" "addon addon";
}
.itemlistElement__wrapper--noVariant .itemlistElement__info,
.itemlistElement__wrapper--noVariant .itemlistElement__toggle {
  display: none;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--noVariant {
    align-items: center;
    grid-template-columns: 80px 1fr 150px;
    grid-template-areas: "media description description" "inventory inventory addon" "prices prices addon";
  }
}
@container containerItemlistElement (max-width: 659px) {
  .itemlistElement__wrapper--noVariant .itemlistElement__actions {
    position: absolute;
    right: 0;
    top: 10px;
  }
  .itemlistElement__wrapper--noVariant .itemlistElement__description {
    padding-right: 40px;
  }
}
@container containerItemlistElement (min-width: 660px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 80px 1fr 140px 205px;
    grid-template-areas: "media description inventory addon" "media description prices addon";
  }
  .itemlistElement__wrapper--noVariant .itemlistElement__addon .orderButtonWrapper {
    justify-content: end;
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 80px 1fr 220px 205px;
  }
}
@container containerItemlistElement (min-width: 1150px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 30px 100px 1fr auto 140px 320px 205px;
    grid-template-areas: ". media description info inventory prices addon";
  }
  .itemlistElement__wrapper--noVariant .itemlistElement__info {
    display: block;
  }
}
.itemlistElement__wrapper--isVariant {
  border-top: 1px solid #CFCFCF;
  padding-block: 28px;
  grid-template-columns: 1fr;
  grid-template-areas: "description" "inventory" "prices" "addon";
}
.itemlistElement__wrapper--isVariant .itemlistElement__media {
  display: none;
}
.itemlistElement__wrapper--isVariant .itemlistElement__name {
  font-size: 2rem;
}
.itemlistElement__wrapper--isVariant .itemlistElement__info,
.itemlistElement__wrapper--isVariant .itemlistElement__toggle {
  display: none;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--isVariant {
    align-items: center;
    grid-template-columns: 1fr 198px;
    grid-template-areas: "description description" "inventory addon" "prices addon";
  }
}
@container containerItemlistElement (min-width: 660px) {
  .itemlistElement__wrapper--isVariant {
    grid-template-columns: 80px 1fr 140px 150px;
    grid-template-areas: ". description inventory addon" ". description prices addon";
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--isVariant {
    grid-template-columns: 80px 1fr 220px 150px;
    grid-template-areas: ". description inventory addon" ". description prices addon";
  }
}
@container containerItemlistElement (min-width: 1150px) {
  .itemlistElement__wrapper--isVariant {
    grid-template-columns: 30px 100px 360px 1fr 140px 320px 150px;
    grid-template-areas: ". media description info inventory prices addon";
  }
}

.pricesList .price:not(:last-child):after {
  display: none;
}
.pricesList .price--actionPrice .price__value {
  font-weight: var(--main-font-weight-bold);
}

.itemlistElement__orderbutton {
  display: flex;
  justify-content: end;
}
.itemlistElement__wrapper--hasVariant {
  grid-template-columns: 80px 1fr;
  grid-template-areas: "media description" "addon addon";
}
.itemlistElement__wrapper--hasVariant .itemlistElement__inventory,
.itemlistElement__wrapper--hasVariant .itemlistElement__prices,
.itemlistElement__wrapper--hasVariant .itemlistElement__info,
.itemlistElement__wrapper--hasVariant .itemlistElement__toggle {
  display: none;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__name {
  font-size: 2rem;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__orderbutton {
  display: flex;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__orderbutton .button {
  flex-grow: inherit;
}
.itemlistElement__wrapper--hasVariant .itemlistElement__orderbutton span {
  display: none;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--hasVariant {
    align-items: center;
    grid-template-columns: 80px 1fr auto;
    grid-template-areas: "media description addon";
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--hasVariant {
    grid-template-columns: 80px 1fr 170px;
    grid-template-areas: "media description addon";
  }
  .itemlistElement__wrapper--hasVariant .itemlistElement__name {
    font-size: 2.5rem;
  }
}
@container containerItemlistElement (min-width: 1150px) {
  .itemlistElement__wrapper--hasVariant {
    align-items: center;
    grid-template-columns: 30px 102px 1fr auto 170px;
    grid-template-areas: "toggle media description info addon";
  }
  .itemlistElement__wrapper--hasVariant .itemlistElement__info {
    display: block;
  }
  .itemlistElement__wrapper--hasVariant .itemlistElement__toggle {
    display: flex;
  }
}
.itemlistElement__wrapper--noVariant {
  grid-template-columns: 80px 1fr;
  grid-template-areas: "media description" "inventory inventory" "prices prices" "addon addon";
}
.itemlistElement__wrapper--noVariant .itemlistElement__info,
.itemlistElement__wrapper--noVariant .itemlistElement__toggle {
  display: none;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--noVariant {
    align-items: center;
    grid-template-columns: 80px 1fr 150px;
    grid-template-areas: "media description description" "inventory inventory addon" "prices prices addon";
  }
}
@container containerItemlistElement (max-width: 659px) {
  .itemlistElement__wrapper--noVariant .itemlistElement__actions {
    position: absolute;
    right: 0;
    top: 10px;
  }
  .itemlistElement__wrapper--noVariant .itemlistElement__description {
    padding-right: 40px;
  }
}
@container containerItemlistElement (min-width: 660px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 80px 1fr auto 205px;
    grid-template-areas: "media description inventory addon" "media description prices addon";
  }
  .itemlistElement__wrapper--noVariant .itemlistElement__addon .orderButtonWrapper {
    justify-content: end;
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 80px 1fr auto 205px;
  }
}
@container containerItemlistElement (min-width: 1150px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 30px 100px 1fr auto auto auto 205px;
    grid-template-areas: ". media description info inventory prices addon";
  }
  .itemlistElement__wrapper--noVariant .itemlistElement__info {
    display: block;
  }
}
.itemlistElement__wrapper--isVariant {
  border-top: 1px solid #CFCFCF;
  padding-block: 18px;
  grid-template-columns: 1fr;
  grid-template-areas: "description" "inventory" "prices" "addon";
}
.itemlistElement__wrapper--isVariant .itemlistElement__media {
  display: none;
}
.itemlistElement__wrapper--isVariant .itemlistElement__name {
  font-size: 2rem;
}
.itemlistElement__wrapper--isVariant .itemlistElement__info,
.itemlistElement__wrapper--isVariant .itemlistElement__toggle {
  display: none;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--isVariant {
    align-items: center;
    grid-template-columns: 1fr 198px;
    grid-template-areas: "description description" "inventory addon" "prices addon";
  }
}
@container containerItemlistElement (min-width: 660px) {
  .itemlistElement__wrapper--isVariant {
    grid-template-columns: 80px 1fr auto 150px;
    grid-template-areas: ". description inventory addon" ". description prices addon";
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--isVariant {
    grid-template-columns: 80px 1fr auto 150px;
    grid-template-areas: ". description inventory addon" ". description prices addon";
  }
}
@container containerItemlistElement (min-width: 1150px) {
  .itemlistElement__wrapper--isVariant {
    grid-template-columns: 30px 100px 1fr auto auto auto 150px;
    grid-template-areas: ". media description info inventory prices addon";
  }
}

@media (min-width: 1024px) {
  .categoryBox__headline {
    font-size: 2.2rem;
  }
}
@media (min-width: 1250px) {
  .categoryBox__headline {
    font-size: 2.6rem;
  }
}

.itemcardMain {
  display: block;
}
.itemcardMain .itemcardTop {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .itemcardMain .itemcardTop {
    grid-template-columns: 2fr 1fr;
  }
}
.itemcardMain .itemcardTop .itemcardMedia, .itemcardMain .itemcardTop .itemcardBuybox {
  grid-area: unset;
}
.itemcardMain .itemcardMedia {
  padding: 20px;
  background: var(--main-color-white);
  border-radius: 18px;
}
.itemcardMain .itemcardMedia .itemcardImages__img img {
  width: 100%;
}
.itemcardMain .itemcardBuybox {
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}
.itemcardMain .itemcardBuybox .prices {
  justify-content: end;
}
.itemcardMain .itemcardBuybox .prices .priceNotice {
  text-align: right;
}
.itemcardMain .itemcardBuybox .button:hover, .itemcardMain .itemcardBuybox .button:focus {
  border-color: var(--main-color-white);
}
.itemcardMain .itemcardBuybox .button--primary:not(.orderButton) {
  border-color: var(--main-color-white);
}
.itemcardMain .itemcardBuybox .button--primary:hover, .itemcardMain .itemcardBuybox .button--primary:focus {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.itemcardMain .itemcardBuybox .orderButtonWrapper {
  gap: 10px;
  justify-content: end;
}
.itemcardMain .itemcardBuybox .orderButtonWrapper .orderButton {
  flex-grow: inherit;
}
.itemcardMain .itemcardBuybox .orderButtonWrapper .orderButton span {
  display: none;
}
.itemcardMain .itemcardBuybox .orderButtonWrapper .quantity input {
  background: var(--main-color-white);
}
.itemcardMain .itemcardBuybox .orderButtonWrapper .quantity__spinnerItem {
  color: var(--main-color-black);
}
.itemcardMain .itemcardBuybox .orderButtonWrapper .quantity__spinnerItem:hover, .itemcardMain .itemcardBuybox .orderButtonWrapper .quantity__spinnerItem:focus {
  color: var(--main-color-white);
  background: linear-gradient(226deg, #00A4E7 0.85%, #1989B7 99.15%);
  border-color: var(--main-color-blue);
}
.itemcardMain .itemcardBuybox .inventoryWrapper {
  justify-content: end;
}
.itemcardMain .itemcardBuybox__head {
  padding: 30px 30px 0 30px;
}
.itemcardMain .itemcardBuybox__head .itemcardHeadInfo {
  width: 100%;
}
.itemcardMain .itemcardBuybox__head .itemcardHeadInfo .itemcardHeadInfoHead {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.itemcardMain .itemcardBuybox .itemcardActions button {
  color: var(--main-color-black);
}
.itemcardMain .itemcardBuybox .itemcardActions button:hover, .itemcardMain .itemcardBuybox .itemcardActions button:focus {
  color: var(--main-color-white);
  background: radial-gradient(69.49% 69.49% at 50% 50%, #9CE2FF 0%, #4CCAFF 100%);
}
.itemcardMain .itemcardBuybox .itemcardHeadline {
  font-weight: var(--main-font-weight-bold);
}
.itemcardMain .itemcardBuybox__main {
  padding-inline: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-bottom: 30px;
}
.itemcardMain .itemcardBuybox__main .amountLine {
  border-bottom-color: #565656;
}
.itemcardMain .itemcardBuybox__main .amountLine__label {
  color: var(--main-color-white);
}
.itemcardMain .itemcardBuybox__main .amountLine:last-child .amountLine__label, .itemcardMain .itemcardBuybox__main .amountLine:last-child .amountLine__value {
  font-size: 2rem;
  font-weight: var(--main-font-weight-bold);
}
.itemcardMain .itemcardBuybox .orderbox .button:hover {
  border-color: var(--main-color-white);
}
.itemcardMain .itemcardBuybox .itemcardDescriptionText ul {
  list-style: none;
  padding: 0;
}
.itemcardMain .itemcardBuybox .itemcardDescriptionText ul li {
  background: radial-gradient(69.49% 69.49% at 50% 50%, #9CE2FF 0%, #4CCAFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
}
.itemcardMain .itemcardBuybox .itemcardDescriptionText ul li:before {
  font-family: "icons";
  content: var(--base-icon-arrow-right);
  position: absolute;
  font-size: 2.2rem;
  left: -2px;
  top: -6px;
  display: block;
  background: radial-gradient(69.49% 69.49% at 50% 50%, #9CE2FF 0%, #4CCAFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.itemcardMain .itemlistElement {
  border: none;
  border-radius: 0;
  border-top: 1px solid #CFCFCF;
  margin-bottom: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .itemcardMain .itemlistElement__name {
    font-size: 2rem;
  }
}
.itemcardMain .itemlistElement__actions {
  display: none;
}

.itemcardImagesThumbs .swiper-slide .itemcardImages__item {
  border-radius: 18px;
}

.itemcardVariants, .itemcardCrosssellerList {
  padding: 30px 30px 0 30px;
  border: 1px solid #CFCFCF;
  border-radius: 18px;
}

/* todo: CS remove after golive */
.itemcardVariants .itemlistStickyOrderBar {
  display: none;
}

.itemcardCrosssellerList:has(.itemcardCrosssellerList__toolbar) .itemlistElement:first-child {
  border-top: none;
}
@container (inline-size > 1150px) {
  .itemcardCrosssellerList .itemlistElement__wrapper--noVariant {
    grid-template-columns: 30px 68px 1fr auto 140px 320px 205px;
  }
  .itemcardCrosssellerList .itemlistElement__wrapper {
    padding-block: 4px;
  }
}
.itemcardCrosssellerList .itemlistElement__name {
  font-size: 1.5rem;
}
.itemcardCrosssellerList__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}
.itemcardCrosssellerList__sortBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  white-space: nowrap;
  flex-shrink: 0;
  border-color: #CFCFCF;
}
.itemcardCrosssellerList__searchWrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 400px;
  max-width: 520px;
  min-width: 200px;
}
.itemcardCrosssellerList__searchWrapper .icon, .itemcardCrosssellerList__searchWrapper .animationHouse__labelLink::before, .itemcardCrosssellerList__searchWrapper .infoBox--onlyIcon:before, .itemcardCrosssellerList__searchWrapper .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .itemcardCrosssellerList__searchWrapper .mainnav .headerContentNavigation > li > span:before, .mainnav .itemcardCrosssellerList__searchWrapper .headerContentNavigation > li > span:before {
  position: absolute;
  right: 14px;
  font-size: 2rem;
  pointer-events: none;
}
.itemcardCrosssellerList__searchInput {
  padding-right: 34px;
  width: 100%;
  border-radius: 18px;
  background: transparent;
}

.itemcardDescriptionsWrapper:has(> * > *) {
  padding: 30px;
  border: 1px solid #CFCFCF;
  border-radius: 18px;
}
.itemcardDescriptionsWrapper:has(.itemcardDescriptions + *) .itemcardMainDescription {
  padding-bottom: 30px;
  border-bottom: 1px solid #CFCFCF;
}
.itemcardDescriptionsWrapper .itemcardMainDescription > div {
  max-width: 870px;
}
.itemcardDescriptionsWrapper .itemcardMainDescription ul {
  list-style: none;
  padding: 10px 0;
}
.itemcardDescriptionsWrapper .itemcardMainDescription ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
}
.itemcardDescriptionsWrapper .itemcardMainDescription ul li:before {
  font-family: "icons";
  content: var(--base-icon-arrow-right);
  position: absolute;
  font-size: 2.2rem;
  left: -2px;
  top: -6px;
  display: block;
}

.itemcardAttributes {
  padding-top: 30px;
}
.itemcardAttributes tr td:first-child {
  width: 60%;
}
.itemcardAttributes tr td:last-child {
  width: 40%;
}
.itemcardAttributes .att_description_table {
  width: 100%;
  max-width: 600px;
}
.itemcardAttributes .att_description_table td {
  padding: 5px 0;
  width: 50%;
}
@media (min-width: 768px) {
  .itemcardAttributes .att_description_table td {
    padding: 10px 0;
  }
}
.itemcardAttributes .att_description_table td:first-child {
  font-weight: var(--main-font-weight-bold);
  padding-right: 0;
}
.itemcardAttributes:has(.itemcardAttributesTable) .att_description_table tr:first-child td, .itemcardAttributes:has(.itemcardAttributesTable) .att_description_table tr:first-child th {
  border-top: none;
}

.boxLineLeft {
  padding-left: 90px;
  position: relative;
}
.boxLineLeft:before {
  content: "";
  display: block;
  height: 1px;
  width: 60px;
  background: var(--main-color-primary);
  position: absolute;
  left: 0;
  top: 9px;
}

.orderButtonWrapper .orderButton {
  padding: 9px 10px;
}
.orderButtonWrapper .orderButton .icon, .orderButtonWrapper .orderButton .animationHouse__labelLink::before, .orderButtonWrapper .orderButton .infoBox--onlyIcon:before, .orderButtonWrapper .orderButton .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .orderButtonWrapper .orderButton .mainnav .headerContentNavigation > li > span:before, .mainnav .orderButtonWrapper .orderButton .headerContentNavigation > li > span:before {
  font-size: 28px;
}

@container (inline-size > 1199px) {
  .itemcardVariants .itemlistElement__wrapper {
    grid-template-columns: 100px 1fr auto;
  }
}

.itemcardNavigation__nav {
  display: none;
  position: fixed;
  top: 30svh;
  transform: translateX(-100%) translateY(-50%);
  z-index: 101;
  width: var(--nav-expanded-width, 180px);
  transition: width 0.3s ease;
  margin-left: 4px;
}
.itemcardNavigation__nav:not(:has(li:nth-child(3))) {
  display: none !important;
}
.itemcardNavigation__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.itemcardNavigation__nav ul li {
  display: flex;
  align-items: center;
  padding-left: 14px;
  transition: border-color 0.2s ease, border-left-width 0.15s ease, padding-left 0.15s ease;
}
.itemcardNavigation__nav ul li:has(a.is-active) {
  border-left: 3px solid var(--main-color-black);
  padding-left: 13px;
}
.itemcardNavigation__nav ul li a {
  display: block;
  color: rgba(var(--main-color-black), 0.55);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;
  padding-right: 12px;
  transition: color 0.2s ease, opacity 0.08s ease;
}
.itemcardNavigation__nav ul li a.is-active {
  font-weight: var(--main-font-weight-bold);
}
.itemcardNavigation__nav[data-nav-mode=overlay] {
  transform: translateY(-50%);
}
.itemcardNavigation__nav[data-nav-mode=overlay]:not(.is-collapsed) {
  border-radius: 18px;
  padding: 10px;
}
.itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::before {
  content: "";
  position: absolute;
  left: 9px;
  top: var(--hamburger-top, 50%);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after {
  content: var(--base-icon-hamburger-menu);
  position: absolute;
  font-size: 2.2rem;
  left: 17px;
  top: var(--hamburger-top, 50%);
  transform: translateY(-50%);
}
.itemcardNavigation__nav.is-collapsed {
  width: 7px;
  cursor: pointer;
}
.itemcardNavigation__nav.is-collapsed ul li a {
  opacity: 0;
}
.itemcardNavigation__nav.is-hidden {
  display: none !important;
}
@media (min-width: 1024px) {
  .itemcardNavigation__nav {
    display: block;
  }
}

.orderHistoryListItem {
  padding: 12px;
  border-bottom: 1px solid #CFCFCF;
}
.orderHistoryListItem:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.orderHistoryListItem--header {
  color: var(--main-color-black);
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-bold);
  padding: 12px 0;
}

.categoryBox {
  border-radius: 18px;
  background: var(--main-color-light-gray);
  border: 1px solid #CFCFCF;
  color: var(--main-color-black);
  padding: 20px;
  grid-row: span 2;
}
.categoryBox__headline {
  font-size: 2.2rem;
}
.categoryBox:hover, .categoryBox:focus, .categoryBox:active {
  background: var(--main-color-black);
  border-color: var(--main-color-black);
  color: var(--main-color-white);
}

.categoryContent .categoryInfo {
  display: flex;
  gap: 20px;
  flex-direction: column;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .categoryContent .categoryInfo {
    flex-direction: row-reverse;
    align-items: center;
  }
}
.categoryContent .categoryDescription h1 {
  margin-bottom: 16px;
}
.categoryContent .categoryDescription p {
  padding-left: 100px;
  position: relative;
}
.categoryContent .categoryDescription p:before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--main-color-black);
  position: absolute;
  left: 20px;
  top: 7px;
}
@media (min-width: 768px) {
  .categoryContent .categoryDescription p {
    padding-left: 120px;
  }
  .categoryContent .categoryDescription p:before {
    left: 40px;
  }
}
.categoryContent .categoryPicture {
  aspect-ratio: 150/79;
  object-fit: contain;
}
.categoryContent:not(:has(.categoryPicture)) .categoryInfo {
  display: block;
}

.categoryItem {
  color: var(--main-color-black);
  border: 1px solid #CFCFCF;
  border-radius: 18px;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding: 20px;
}
.categoryItem__image {
  background: transparent;
}
.categoryItem__image img {
  object-fit: contain;
  aspect-ratio: 1;
  width: 52px;
  height: 52px;
  min-width: auto;
  transition: unset;
}
.categoryItem:after {
  display: none;
}
.categoryItem__headline {
  font-size: 2.2rem;
  padding: 0;
}
.categoryItem__content {
  padding: 0;
  position: static;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.categoryItem:hover, .categoryItem:focus, .categoryItem:active {
  text-decoration: none;
  color: var(--main-color-white);
  background: var(--main-color-black);
}
.categoryItem:hover .categoryItem__image img, .categoryItem:focus .categoryItem__image img, .categoryItem:active .categoryItem__image img {
  filter: invert(1);
}

.categoryList {
  container-type: inline-size;
}
.categoryList__grid {
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto;
}
@container (inline-size > 600px) {
  .categoryList__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (inline-size > 800px) {
  .categoryList__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container (inline-size > 1100px) {
  .categoryList__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.categoryList__item {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
}

.itembox {
  background: var(--main-color-light-gray);
  border: 1px solid #CFCFCF;
  border-radius: 18px;
  font-size: var(--main-font-size-small);
}
.itembox:hover, .itembox:focus, .itembox:active {
  border-color: var(--main-color-black);
}
.itembox__badges {
  position: absolute;
}
@media (min-width: 768px) {
  .itembox__name {
    font-size: 2.2rem;
    line-height: 1.2;
    hyphens: auto;
  }
}
.itembox .inventoryWrapper {
  justify-content: start;
}
.itembox__inventory {
  margin-top: 5px;
}
.itembox__prices {
  margin-top: 10px;
}
.itembox__image picture,
.itembox__image img {
  margin-inline: auto;
  aspect-ratio: 1;
  width: 100%;
  display: block;
  mix-blend-mode: multiply;
  max-width: 182px;
}
.itembox__image picture img {
  min-width: 100%;
}
.itembox__head {
  overflow: hidden;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.itembox__content {
  flex-grow: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .itembox__content {
    padding: 20px;
  }
}
.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 {
  padding: 0 10px 10px 10px;
}
@media (min-width: 768px) {
  .itembox__addon {
    padding: 0 20px 20px 20px;
  }
}
.itembox .inventoryWrapper {
  font-size: 1.1rem;
  line-height: 1.2;
  justify-content: flex-start;
}
@media (min-width: 1540px) {
  .itembox .inventoryWrapper {
    justify-content: flex-start;
  }
}
.itembox .orderButtonWrapper + .inventoryWrapper {
  margin-top: 10px;
}
@media (max-width: 767px) {
  .itembox .orderButtonWrapper .quantity {
    flex-shrink: 1;
  }
}

.itemboxList {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.heroSlider {
  position: relative;
}
.heroSlider__swiper {
  width: 100%;
  overflow: hidden;
}
.heroSlider__slide {
  position: relative;
}
@media (min-width: 1024px) {
  .heroSlider__slide {
    min-height: 560px;
  }
}
@media (min-width: 1250px) {
  .heroSlider__slide {
    min-height: 644px;
  }
}
.heroSlider__img {
  width: 100%;
}
.heroSlider__img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .heroSlider__img {
    aspect-ratio: 1.6;
    overflow: hidden;
    position: relative;
  }
  .heroSlider__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}
@media (min-width: 1024px) {
  .heroSlider__img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 66%;
  }
  .heroSlider__img img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: right bottom;
  }
}
@media (min-width: 1024px) {
  .heroSlider__contentWrapper {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
  }
}
.heroSlider__content {
  padding: 12px 12px 12px 0;
}
@media (min-width: 768px) {
  .heroSlider__content {
    padding-block: 32px;
    padding-right: 48px;
  }
}
@media (min-width: 1024px) {
  .heroSlider__content {
    flex: 0 0 50%;
    max-width: 50%;
    padding-block: 60px;
    padding-right: 40px;
    pointer-events: auto;
  }
}
.heroSlider__title {
  margin-bottom: 1rem;
}
.heroSlider__text {
  padding-left: 56px;
  padding-block: 24px;
  position: relative;
}
.heroSlider__text:before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background-color: #20201E;
  position: absolute;
  left: 16px;
  top: 34px;
}
@media (min-width: 1024px) {
  .heroSlider__text {
    padding-left: 100px;
    padding-block: 32px;
  }
  .heroSlider__text:before {
    width: 36px;
    left: 30px;
    top: 42px;
  }
}
.heroSlider__buttons {
  display: flex;
  padding-left: 56px;
  gap: 12px;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .heroSlider__buttons {
    padding-left: 100px;
  }
}
.heroSlider--js .heroSlider__content {
  display: none;
}
.heroSlider--js .heroSlider__content.is-active {
  display: block;
  animation: hsContentIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.heroSlider--js .heroSlider__img {
  opacity: 0;
}
@media (min-width: 1024px) {
  .heroSlider--js .heroSlider__img {
    transform: scale(0.8);
    transform-origin: center bottom;
  }
}
.heroSlider--js .swiper-slide-active .heroSlider__img {
  animation: hsImgIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
}
@media (max-width: 767.98px) {
  .heroSlider--js .swiper-slide-active .heroSlider__img {
    animation: hsImgFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
}
.heroSlider__navigation {
  position: absolute;
  right: 0;
  top: 30%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: 32px;
}
@media (min-width: 1024px) {
  .heroSlider__navigation {
    right: 24px;
    top: 50%;
    padding-bottom: 0;
    transform: translateY(-50%);
    justify-content: flex-start;
  }
}
.heroSlider__navBtn {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.5rem;
  padding: 4px 2px;
  cursor: pointer;
  letter-spacing: 0.08em;
  line-height: 1;
  transition: color 0.3s ease, font-size 0.3s ease;
}
.heroSlider__navBtn:hover, .heroSlider__navBtn:active, .heroSlider__navBtn:focus {
  color: rgba(0, 0, 0, 0.6);
  background: none;
  border: none;
}
.heroSlider__navBtn.is-active {
  color: #20201E;
}
.heroSlider__navBtn.is-active:before {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 12px);
  background-color: #20201E;
  position: absolute;
  left: -10px;
  top: 6px;
}

@keyframes hsContentIn {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes hsImgIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hsImgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.linkBoxes {
  display: grid;
  gap: 40px;
}
@container (inline-size > 1200px) {
  .linkBoxes {
    grid-template-columns: 520px 1fr;
  }
}
.linkBoxes__container {
  container-type: inline-size;
}
.linkBoxes__left {
  display: grid;
  align-items: center;
}
.linkBoxes__left .h2, .linkBoxes__left .h3 {
  margin-bottom: 0;
}
.linkBoxes__left .linkBoxes__welcome,
.linkBoxes__left .linkBoxes__text {
  grid-area: 1/1;
  transition: all 0.3s ease-in-out;
  left: -60px;
}
.linkBoxes__left .linkBoxes__welcome {
  opacity: 1;
  left: 0;
}
.linkBoxes__left .linkBoxes__text {
  opacity: 0;
}
.linkBoxes__left:not(:has(.linkBoxes__welcome)) .linkBoxes__text:first-child {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__right .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__welcome {
  opacity: 0;
  position: relative;
  left: -60px;
}
.linkBoxes:has(.linkBoxes__right .linkBoxes__item:hover):not(:has(.linkBoxes__left .linkBoxes__welcome)) .linkBoxes__left .linkBoxes__text:first-child {
  opacity: 0;
  left: -60px;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(1) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(2) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(2) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(3) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(3) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(4) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(4) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(5) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(5) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(6) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(6) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(7) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(7) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(8) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(8) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(9) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(9) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(10) {
  opacity: 1;
  left: 0;
}
.linkBoxes:has(.linkBoxes__left .linkBoxes__welcome):has(.linkBoxes__right .inner > div:nth-child(10) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(11) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(1) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(1) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(2) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(2) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(3) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(3) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(4) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(4) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(5) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(5) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(6) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(6) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(7) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(7) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(8) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(8) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(9) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(9) {
  opacity: 1;
  left: 0;
}
.linkBoxes:not(:has(.linkBoxes__left .linkBoxes__welcome)):has(.linkBoxes__right .inner > div:nth-child(10) .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__text:nth-child(10) {
  opacity: 1;
  left: 0;
}
.linkBoxes__right {
  container-type: inline-size;
}
.linkBoxes__right .inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
}
.linkBoxes__right .inner > div {
  flex: 1 1 calc(50% - 5px);
}
@container (inline-size > 600px) {
  .linkBoxes__right .inner > div {
    flex-basis: calc(33.33% - 6.67px);
  }
}
@container (inline-size > 700px) {
  .linkBoxes__right .inner > div {
    flex-basis: calc(25% - 7.5px);
  }
}
@container (inline-size > 820px) {
  .linkBoxes__right .inner > div {
    flex-basis: calc(20% - 8px);
  }
}
.linkBoxes__item {
  width: 100%;
  height: 100%;
  border: 1px solid #CFCFCF;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  transition: 0.2s ease-in-out;
}
.linkBoxes__item:hover {
  color: var(--main-color-white);
  border-color: var(--main-color-black);
  background: var(--main-color-black);
}
.linkBoxes__title {
  font-size: 1.7rem;
  text-align: center;
}
.linkBoxes__welcome span {
  display: block;
  font-weight: var(--main-font-weight);
}
.linkBoxes__icon {
  font-size: 5.2rem;
}
.linkBoxes__text {
  padding-left: 32px;
  position: relative;
}
@container (inline-size > 1200px) {
  .linkBoxes__text {
    max-width: 380px;
  }
}
.linkBoxes__text:before {
  content: "";
  display: block;
  height: 1px;
  width: 20px;
  background: var(--main-color-black);
  position: absolute;
  left: 0;
  top: 14px;
}
@media (max-width: 767.98px) {
  .linkBoxes .linkBoxes__text {
    display: none;
  }
  .linkBoxes:has(.linkBoxes__right .linkBoxes__item:hover) .linkBoxes__left .linkBoxes__welcome {
    opacity: 1;
    left: 0;
  }
}

.infoBox {
  container-type: inline-size;
  border: 1px solid #CFCFCF;
  border-radius: 18px;
  contain: paint;
}
.infoBox > .inner {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  padding-inline: 10px;
}
@container (inline-size > 620px) {
  .infoBox > .inner {
    grid-template-columns: 1fr 1fr;
  }
}
@container (inline-size > 1100px) {
  .infoBox > .inner {
    grid-template-columns: 80px 1fr 320px 240px;
    gap: 50px;
    padding-left: 30px;
    padding-top: 0;
  }
}
.infoBox .h3 {
  margin-bottom: 12px;
}
.infoBox__icon {
  font-size: 4rem;
}
@container (inline-size > 620px) {
  .infoBox__icon {
    padding-block: 30px;
    justify-self: center;
    align-self: center;
  }
}
@container (inline-size > 620px) and (inline-size <= 1100px) {
  .infoBox__mainContent {
    grid-column: 1;
    grid-row: 2;
  }
}
@container (inline-size > 1100px) {
  .infoBox__mainContent {
    padding-block: 30px;
  }
}
.infoBox__content {
  padding-block: 15px;
  display: flex;
  flex-direction: column;
  align-self: center;
}
@container (inline-size > 620px) and (inline-size <= 1100px) {
  .infoBox__content {
    grid-column: 2;
    grid-row: 1;
  }
}
@container (inline-size > 900px) {
  .infoBox__content {
    padding-block: 30px;
  }
}
.infoBox__content .button {
  margin-block: 12px;
}
.infoBox__img {
  margin-inline: -10px;
}
@container (inline-size > 1100px) {
  .infoBox__img {
    display: flex;
    flex-direction: column;
  }
  .infoBox__img picture {
    flex: 1;
    min-height: 0;
    display: block;
  }
  .infoBox__img picture img {
    height: 100% !important;
  }
}
.infoBox__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.infoBox--onlyIcon {
  padding: 30px 30px 30px 140px;
  display: flex;
  align-items: center;
}
.infoBox--onlyIcon:before {
  content: var(--base-icon-newsletter);
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: 50px;
  font-size: 4rem;
}
.infoBox--newsletter:before {
  content: var(--base-icon-newsletter);
}
.infoBox--references:before {
  content: var(--base-icon-headset);
}

.pageHero {
  display: grid;
}
.pageHero__title h1, .pageHero__title h2, .pageHero__title h3, .pageHero__title h4, .pageHero__title h5, .pageHero__title h6 {
  margin-bottom: 10px;
}
.pageHero__img {
  grid-area: 1/1;
  align-self: stretch;
  width: 50%;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.pageHero__img img {
  max-height: 100%;
  width: 100%;
  object-fit: contain;
}
.pageHero__content {
  grid-area: 1/1;
  width: 100%;
  padding-block: 20px;
}
@media (min-width: 768px) {
  .pageHero__content {
    padding-block: 40px;
    width: 70%;
  }
}
@media (min-width: 1024px) {
  .pageHero__content {
    padding-block: 60px;
  }
}
@media (min-width: 1250px) {
  .pageHero__content {
    padding-block: 80px;
  }
}

.contentLine {
  padding-left: 78px;
  position: relative;
}
.contentLine:before {
  content: "";
  display: block;
  position: absolute;
  width: 38px;
  height: 1px;
  background: var(--main-color-black);
  left: 0;
  top: 10px;
}

.benefits .textcontent {
  height: 100%;
}
.benefits__item {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
  text-align: center;
  border: 1px solid #CFCFCF;
  border-radius: 18px;
}
@media (min-width: 768px) {
  .benefits__item {
    padding: 20px 20px 40px 20px;
  }
}
@media (min-width: 1024px) {
  .benefits__item {
    padding: 40px 40px 60px 40px;
  }
}
.benefits__item .icon, .benefits__item .animationHouse__labelLink::before, .benefits__item .mainnav .headerContentNavigation > li > span:before, .mainnav .benefits__item .headerContentNavigation > li > span:before, .benefits__item .itemcardNavigation__nav[data-nav-mode=overlay].is-collapsed::after, .benefits__item .infoBox--onlyIcon:before {
  font-size: 4rem;
}
.animationHouse {
  container-type: inline-size;
  position: relative;
  margin-inline: -20px;
  contain: paint;
}
.animationHouse__stage {
  position: relative;
  aspect-ratio: 1920/1047;
  overflow: hidden;
}
@container (inline-size < 600px) {
  .animationHouse__stage {
    margin-inline: -44px;
  }
}
.animationHouse__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}
.animationHouse__frame.is-visible {
  opacity: 1;
}
.animationHouse__labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1920/1047;
  pointer-events: none;
}
@container (inline-size < 740px) {
  .animationHouse__labels {
    position: static;
    aspect-ratio: unset;
    display: flex;
    gap: 0.5rem;
    padding-block: 0.75rem;
    pointer-events: all;
    margin-top: -40px;
    padding-inline: 20px;
  }
}
@container (inline-size < 440px) {
  .animationHouse__labels {
    flex-direction: column;
  }
}
.animationHouse__label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  pointer-events: all;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.3);
  padding: 6px;
}
.animationHouse__label.is-visible {
  opacity: 1;
}
@container (inline-size < 740px) {
  .animationHouse__label {
    position: static;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}
@container (inline-size < 440px) {
  .animationHouse__label {
    flex-direction: row;
    justify-content: space-between;
  }
}
.animationHouse__label--heat {
  left: 7%;
  top: 82%;
}
@container (inline-size < 800px) {
  .animationHouse__label--heat {
    top: 60%;
  }
}
.animationHouse__label--pv {
  left: 42%;
  top: 31%;
}
.animationHouse__label--oil {
  right: 20%;
  bottom: 0;
}
.animationHouse__labelName {
  display: block;
  font-weight: 600;
  line-height: 1.2;
  padding-inline: 12px;
}
@container (inline-size < 740px) {
  .animationHouse__labelName {
    font-size: var(--main-font-size-small);
  }
}
.animationHouse__labelLink {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.animationHouse__labelLink::before {
  content: var(--base-icon-arrow-up-right);
}

@media (min-width: 1024px) {
  .history {
    display: flex;
    align-items: flex-start;
  }
}
@media (min-width: 1024px) {
  .history__intro {
    position: sticky;
    top: 0;
    flex: 0 0 33.333%;
    max-width: 33.333%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 60px;
  }
}
.history__intro-title {
  margin-bottom: 20px;
}
.history__intro-text {
  color: #565656;
}
.history__sticky {
  height: 100vh;
  position: relative;
}
@media (min-width: 1024px) {
  .history__sticky {
    flex: 0 0 66.667%;
    max-width: 66.667%;
  }
}
.history__timeline {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.history__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #CFCFCF;
  transform: translateX(-50%);
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
@media (max-width: 767.98px) {
  .history__line {
    left: 32px;
    transform: none;
  }
}
.history__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1989B7;
  align-self: start;
  justify-self: center;
  margin-top: calc(1.3rem - 7px);
}
@media (max-width: 767.98px) {
  .history__dot {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-self: auto;
    align-self: auto;
    margin-top: 0;
  }
}
.history__item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 14px 1fr;
  align-items: start;
  align-content: center;
}
@media (max-width: 767.98px) {
  .history__item {
    grid-template-columns: 1fr;
    padding: 0 24px 0 64px;
  }
}
.history__year {
  text-align: right;
  padding-right: 48px;
  font-size: clamp(1.8rem, 4vw, 2rem);
  line-height: 1.3;
}
@media (max-width: 767.98px) {
  .history__year {
    text-align: left;
    padding-right: 0;
    padding-bottom: 12px;
    font-size: 3.2rem;
  }
}
.history__text {
  padding-left: 48px;
}
@media (max-width: 767.98px) {
  .history__text {
    padding-left: 0;
  }
}
.history__title {
  font-size: 2.2rem;
  font-weight: var(--main-font-weight-semibold);
  margin-bottom: 12px;
}
.history__content {
  color: #565656;
}
.history--js {
  height: calc(var(--history-count, 1) * 100vh);
}
.history--js .history__sticky {
  position: sticky;
  top: 0;
}
.history--js .history__item {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}
.history--js .history__item.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.history--js .history__item.is-past {
  transform: translateY(-100%);
  opacity: 0;
}

.contactpersonsList__filter {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.contactpersonsList__filter > * {
  margin-bottom: 0 !important;
}
@media (min-width: 1024px) {
  .contactpersonsList__filter {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}
.contactpersonsList__layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 480px) {
  .contactpersonsList__layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .contactpersonsList__layout {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .contactpersonsList__layout {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1250px) {
  .contactpersonsList__layout {
    grid-template-columns: repeat(5, 1fr);
  }
}
.contactpersonsList.preview {
  display: grid;
  gap: 40px;
  container-type: inline-size;
}
@media (min-width: 480px) {
  .contactpersonsList.preview {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .contactpersonsList.preview {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .contactpersonsList.preview {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1250px) {
  .contactpersonsList.preview {
    grid-template-columns: repeat(5, 1fr);
  }
}
.contactpersonsList.preview:not(:has(> div:nth-child(2))) {
  grid-template-columns: 1fr;
}
@container (inline-size > 380px) {
  .contactpersonsList.preview:not(:has(> div:nth-child(2))) .contactpersonsCard {
    flex-direction: row;
    align-items: end;
  }
  .contactpersonsList.preview:not(:has(> div:nth-child(2))) .contactpersonsCard__image {
    width: 50%;
    margin-bottom: 0;
  }
  .contactpersonsList.preview:not(:has(> div:nth-child(2))) .contactpersonsCard__content {
    border-left: none;
    justify-content: end;
  }
}
.contactpersonsList .contactpersonsCard {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 460px;
}
.contactpersonsList .contactpersonsCard__image {
  aspect-ratio: 540/454;
  overflow: hidden;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 18px;
}
.contactpersonsList .contactpersonsCard__image img {
  aspect-ratio: 540/454;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contactpersonsList .contactpersonsCard__content {
  padding-left: 20px;
  border-left: 1px solid #CFCFCF;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.contactpersonsList .contactpersonsCard__department {
  font-size: var(--main-font-size-small);
  margin-bottom: 12px;
}
.contactpersonsList .contactpersonsCard__name {
  font-weight: var(--main-font-weight-semibold);
  margin-bottom: 0;
}
.contactpersonsList .contactpersonsCard__buttons {
  margin-top: auto;
  display: flex;
  gap: 10px;
}
.contactpersonsList .contactpersonsCard__position {
  color: var(--main-color-gray-base);
  font-size: var(--main-font-size-small);
}
.newsList__layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 1250px) {
  .newsList__layout {
    grid-template-columns: 1fr 480px;
    gap: 170px;
    align-items: start;
  }
}
@media (min-width: 1250px) {
  .newsList__right {
    position: sticky;
    top: 120px;
  }
}
.newsList .newsColumn {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .newsList .newsColumn {
    margin-bottom: 90px;
  }
  .newsList .newsColumn:nth-child(2n) {
    padding-left: 70px;
  }
}
.newsList .infoBox {
  margin-bottom: 40px;
}
@media (min-width: 1250px) {
  .newsList .infoBox {
    margin-top: 84px;
  }
}
.newsList .infoBox .button {
  margin-top: 14px;
}
.newsList.preview .newsColumn {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .newsList.preview .newsColumn {
    margin-bottom: 0;
  }
  .newsList.preview .newsColumn:nth-child(2n) {
    padding-left: 0;
  }
}
.newsList.preview .newsColumn:last-child .newsCard__content {
  margin-bottom: 0;
}
.newsList.preview .newsCard {
  grid-template-columns: 1fr !important;
}
.newsList.preview .newsCard__content {
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.newsList .newsCard {
  display: grid;
  gap: 40px;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
@container (inline-size > 600px) {
  .newsList .newsCard {
    grid-template-columns: 278px 1fr;
  }
}
.newsList .newsCard__previewimage {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 18px;
}
.newsList .newsCard__previewimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsList .newsCard__content {
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  flex: 1;
  border-bottom: 1px solid #CFCFCF;
}
.newsList .newsCard__tagsContainer {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 12px;
}
.newsList .newsCard__tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--main-font-size-small);
  white-space: nowrap;
}
.newsList .newsCard__readmore {
  background: transparent;
  border-color: #CFCFCF;
}
.newsList .newsCard__readmore:hover {
  background: var(--main-color-black);
  border-color: var(--main-color-black);
}
.newsList .newsCard__headline {
  margin-bottom: 0;
}
.newsList .newsCard__subtitle {
  color: var(--main-color-gray-base);
  font-size: var(--main-font-size-small);
}
.newsList .newsCard__date {
  font-size: var(--main-font-size-small);
  color: var(--main-color-secondary);
  margin-top: auto;
}

.newsDetail__previewimage {
  border-radius: 18px;
  overflow: hidden;
}
.newsDetail__previewimage img {
  width: 100%;
  height: auto;
  display: block;
}
.newsDetail__tagsContainer {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 6px;
}
.newsDetail__head {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #CFCFCF;
}
.newsDetail__head > * {
  max-width: 630px;
}
.newsDetail__tag {
  font-size: var(--main-font-size-small);
  white-space: nowrap;
}
.newsDetail__content {
  display: grid;
  gap: 60px;
}
@media (min-width: 1024px) {
  .newsDetail__content {
    grid-template-columns: 1fr 1fr;
  }
}
.newsDetail__content img {
  border-radius: 18px;
}
.newsDetail__contentLeft {
  position: relative;
  padding-left: 70px;
}
.newsDetail__contentLeft:before {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  background: var(--main-color-black);
  position: absolute;
  left: 0;
  top: 7px;
}
.newsDetail__contentRight > * {
  max-width: 350px;
}
.newsDetail__date {
  color: var(--main-color-secondary);
  font-size: var(--main-font-size-small);
  margin-bottom: 30px;
}
.newsDetail__gallery .imageGallery.swiper {
  overflow: visible;
}
.newsDetail__gallery .imageGallery.swiper .swiper-wrapper {
  flex-direction: column;
  transform: none !important;
  gap: 20px;
}
.newsDetail__gallery .imageGallery.swiper .swiper-slide {
  width: 100% !important;
  margin-right: 0 !important;
}
.newsDetail__gallery .imageGallery.swiper .swiper-button-prev,
.newsDetail__gallery .imageGallery.swiper .swiper-button-next {
  display: none;
}
.newsDetail__slideshow img {
  border-radius: 18px;
}

.imageGalleryItem:hover .imageGalleryItem__img {
  scale: 1;
}

@media (min-width: 1024px) {
  body.isFullView .breadcrumbWrapper {
    width: calc(80% - 220px);
  }
  body.isFullView .isFullView {
    margin-top: -56px;
  }
}

.referencesList__layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 1250px) {
  .referencesList__layout {
    grid-template-columns: 1fr 480px;
    gap: 170px;
    align-items: start;
  }
}
@media (min-width: 1250px) {
  .referencesList__right {
    position: sticky;
    top: 120px;
  }
}
.referencesList .referencesColumn {
  margin-bottom: 40px;
  container-type: inline-size;
}
@media (min-width: 768px) {
  .referencesList .referencesColumn {
    margin-bottom: 90px;
  }
  .referencesList .referencesColumn:nth-child(2n) {
    padding-left: 70px;
  }
}
.referencesList .infoBox {
  margin-bottom: 40px;
  margin-top: 84px;
}
.referencesList .infoBox .button {
  margin-top: 14px;
}
.referencesList .referencesCard {
  display: grid;
  gap: 40px;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
@container (inline-size > 600px) {
  .referencesList .referencesCard {
    grid-template-columns: 278px 1fr;
  }
}
.referencesList .referencesCard__previewimage {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 18px;
}
.referencesList .referencesCard__previewimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.referencesList .referencesCard__content {
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  flex: 1;
  border-bottom: 1px solid #CFCFCF;
}
.referencesList .referencesCard__contentMain {
  flex: 1;
}
.referencesList .referencesCard__headline {
  margin-bottom: 0;
}
.referencesList .referencesCard__projectname {
  color: var(--main-color-gray-base);
  font-size: var(--main-font-size-small);
}
.referencesList .referencesCard__subtitle {
  color: var(--main-color-secondary);
  font-size: var(--main-font-size-small);
}
.referencesList .referencesCard__tags {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.referencesList .referencesCard__tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--main-font-size-small);
}
.referencesList .referencesCard__tag i {
  font-size: 1.4rem;
}
.referencesList .referencesCard__readmore {
  background: transparent;
  border-color: #CFCFCF;
}
.referencesList .referencesCard__readmore:hover {
  background: var(--main-color-black);
  border-color: var(--main-color-black);
}

.referencesDetail__projectname {
  color: var(--main-color-gray-base);
  margin-bottom: 10px;
  font-size: var(--main-font-size-big);
}
.referencesDetail__subtitle {
  color: var(--main-color-secondary);
  margin-bottom: 30px;
}
.referencesDetail__previewimage {
  border-radius: 18px;
  overflow: hidden;
}
.referencesDetail__previewimage img {
  width: 100%;
  height: auto;
  display: block;
}
.referencesDetail__head {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #CFCFCF;
}
.referencesDetail__head > * {
  max-width: 630px;
}
.referencesDetail__content {
  display: grid;
  gap: 60px;
}
@media (min-width: 1024px) {
  .referencesDetail__content {
    grid-template-columns: 1fr 1fr;
  }
}
.referencesDetail__contentLeft .textcontent {
  position: relative;
  padding-left: 70px;
}
.referencesDetail__contentLeft .textcontent:before {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  background: var(--main-color-black);
  position: absolute;
  left: 0;
  top: 7px;
}
.jobsList .collectionArea {
  border: 1px solid #CFCFCF;
  padding: 20px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}
.jobsList .jobCard {
  gap: 30px;
  padding: 20px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #CFCFCF;
}
.jobsList .jobCard:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.jobsList .jobCard__container {
  container-type: inline-size;
}
.jobsList .jobCard__content {
  flex: 1;
  display: grid;
  gap: 20px;
  align-items: center;
}
@container (inline-size > 960px) {
  .jobsList .jobCard__content {
    grid-template-columns: 1fr 1fr;
  }
}
@container (inline-size > 1040px) {
  .jobsList .jobCard__content {
    grid-template-columns: 1fr 720px;
  }
}
.jobsList .jobCard__title {
  font-weight: var(--main-font-weight-semibold);
  margin-bottom: 0;
}
.jobsList .jobCard__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
@container (inline-size > 960px) {
  .jobsList .jobCard__meta {
    flex-direction: row;
    gap: 60px;
  }
}
.jobsList .jobCard__metaTags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.jobsList .jobCard__metaItem {
  font-size: var(--main-font-size-small);
  width: 120px;
}
.jobsList .jobCard__metaItemLabel {
  font-weight: var(--main-font-weight-bold);
}
.jobsList .jobCard__arrow {
  font-size: 2rem;
  color: var(--main-color-secondary);
  flex-shrink: 0;
}

.jobsDetail__nav {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40px;
}
.jobsDetail__category {
  font-size: 2.4rem;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .jobsDetail__category {
    font-size: 3rem;
  }
}
.jobsDetail__title {
  margin-bottom: 30px;
  max-width: 920px;
}
.jobsDetail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-bottom: 30px;
}
.jobsDetail__metaItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jobsDetail__metaLabel {
  font-weight: var(--main-font-weight-bold);
}
.jobsDetail__cards {
  display: grid;
  gap: 30px;
}
@media (min-width: 1024px) {
  .jobsDetail__cards {
    grid-template-columns: 1fr 1fr;
  }
}
.jobsDetail__card {
  border-radius: 18px;
  padding: 30px;
  border: 1px solid #CFCFCF;
}
@media (min-width: 1250px) {
  .jobsDetail__card {
    padding: 40px;
  }
}
.jobsDetail__cardTitle {
  margin-bottom: 30px;
}
.jobsDetail__cardContent ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jobsDetail__cardContent ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
.jobsDetail__cardContent ul li:last-child {
  margin-bottom: 0;
}
.jobsDetail__cardContent ul li:before {
  font-family: "icons";
  content: var(--base-icon-arrow-right);
  position: absolute;
  font-size: 2.2rem;
  left: -2px;
  top: -6px;
  display: block;
}

:focus,
a:focus,
*:focus-visible {
  outline: none;
}
/*# sourceMappingURL=mhg-catalog.css.map */