@charset "UTF-8";
@font-face {
  font-family: "icons";
  font-display: swap;
  src: url("../fonts/icons.woff2") format("woff2"), url("../fonts/icons.woff") format("woff");
}
.icon, .orderboxSummary__headline:before, .headerShopOrder + .mainContent > .container > h1:before, #userBasket > h1: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-360: "";
  --base-icon-academy: "";
  --base-icon-address: "";
  --base-icon-adress: "";
  --base-icon-adressbook: "";
  --base-icon-angle-down: "";
  --base-icon-angle-left: "";
  --base-icon-angle-right: "";
  --base-icon-angle-up: "";
  --base-icon-angle: "";
  --base-icon-arrow-down-left: "";
  --base-icon-arrow-down-right: "";
  --base-icon-arrow-down: "";
  --base-icon-arrow-left: "";
  --base-icon-arrow-right: "";
  --base-icon-arrow-up-left: "";
  --base-icon-arrow-up-right: "";
  --base-icon-arrow-up: "";
  --base-icon-at: "";
  --base-icon-basket: "";
  --base-icon-bike: "";
  --base-icon-box-circle-check: "";
  --base-icon-box: "";
  --base-icon-cart-plus: "";
  --base-icon-chart: "";
  --base-icon-chat: "";
  --base-icon-check-circle: "";
  --base-icon-check: "";
  --base-icon-checklist: "";
  --base-icon-circle-info: "";
  --base-icon-circle-plus: "";
  --base-icon-clipboard-list-check: "";
  --base-icon-clock: "";
  --base-icon-close: "";
  --base-icon-columns: "";
  --base-icon-copy: "";
  --base-icon-crate: "";
  --base-icon-date: "";
  --base-icon-document-archive: "";
  --base-icon-download: "";
  --base-icon-drag-drop: "";
  --base-icon-edit: "";
  --base-icon-email: "";
  --base-icon-exclamation-circle: "";
  --base-icon-exclamation: "";
  --base-icon-facebook: "";
  --base-icon-favorites-03: "";
  --base-icon-favorites-67: "";
  --base-icon-favorites-filled-04: "";
  --base-icon-favorites-filled-62: "";
  --base-icon-fax: "";
  --base-icon-file-check: "";
  --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-file-zip: "";
  --base-icon-filter: "";
  --base-icon-gears: "";
  --base-icon-gift: "";
  --base-icon-glass: "";
  --base-icon-heart-filled: "";
  --base-icon-heart: "";
  --base-icon-home: "";
  --base-icon-info: "";
  --base-icon-instagram: "";
  --base-icon-invoice: "";
  --base-icon-key: "";
  --base-icon-language: "";
  --base-icon-linkedin: "";
  --base-icon-list: "";
  --base-icon-loading: "";
  --base-icon-lock: "";
  --base-icon-logged: "";
  --base-icon-login: "";
  --base-icon-logout: "";
  --base-icon-mail: "";
  --base-icon-map-pin: "";
  --base-icon-marketing: "";
  --base-icon-minus: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment: "";
  --base-icon-pen-to-square: "";
  --base-icon-phone: "";
  --base-icon-pintereset: "";
  --base-icon-play: "";
  --base-icon-plus-circle: "";
  --base-icon-plus: "";
  --base-icon-print: "";
  --base-icon-question: "";
  --base-icon-quickorder: "";
  --base-icon-register: "";
  --base-icon-reload: "";
  --base-icon-retoure: "";
  --base-icon-right-left: "";
  --base-icon-rma: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-settings: "";
  --base-icon-share: "";
  --base-icon-shipping: "";
  --base-icon-shopping-basket: "";
  --base-icon-sign-up: "";
  --base-icon-solar-panel: "";
  --base-icon-sorting: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star: "";
  --base-icon-stars: "";
  --base-icon-subscriptions: "";
  --base-icon-sun-bright: "";
  --base-icon-support: "";
  --base-icon-tags: "";
  --base-icon-tiktok: "";
  --base-icon-trash: "";
  --base-icon-twitter: "";
  --base-icon-upload: "";
  --base-icon-user: "";
  --base-icon-users: "";
  --base-icon-wave: "";
  --base-icon-whatsapp: "";
  --base-icon-xing: "";
  --base-icon-youtube: "";
  --base-icon-zoom: "";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*

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

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

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

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

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

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

<i class='icon icon-arrow-down-right'></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-left'></i>

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

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

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

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

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

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

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

<i class='icon icon-cart-plus'></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-checklist'></i>

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

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

<i class='icon icon-clipboard-list-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-crate'></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-email'></i>

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

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

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

<i class='icon icon-favorites-03'></i>

<i class='icon icon-favorites-67'></i>

<i class='icon icon-favorites-filled-04'></i>

<i class='icon icon-favorites-filled-62'></i>

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

<i class='icon icon-file-check'></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-file-zip'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-plus-circle'></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-right-left'></i>

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

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

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

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

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

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

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

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

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

<i class='icon icon-solar-panel'></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-stars'></i>

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

<i class='icon icon-sun-bright'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

*/
:root {
  --main-color-white: #ffffff;
  --main-color-black: #000000;
  --main-color-gray-base: #f4f6f6;
  --main-color-middle-gray: #b3b3b3;
  --main-color-dark-gray: #5e6263;
  --main-color-light-gray: #e6e6e6;
  --main-color-primary: #00173f;
  --main-color-primary-dark: #00040c;
  --main-color-primary-darken: black;
  --main-color-secondary: #ff0a19;
  --main-color-secondary-dark: #ff0a19;
  --main-color-secondary-darken: #ff0a19;
  --main-color-action: #000000;
  --main-color-danger: #ff0a19;
  --main-color-danger-dark: #d6000d;
  --main-color-danger-darken: #a3000a;
  --main-color-warning: #f49425;
  --main-color-warning-dark: #db7b0b;
  --main-color-warning-darken: #aa5f09;
  --main-color-success: #53c800;
  --main-color-success-dark: #3e9500;
  --main-color-success-darken: #296200;
  --main-color-info: #e6e6e6;
  --main-color-primary-contrast: colorTextContrast(#00173f);
  --main-color-primary-dark-contrast: colorTextContrast(#00040c);
  --main-color-primary-darken-contrast: colorTextContrast(black);
  --main-color-secondary-contrast: colorTextContrast(#ff0a19);
  --main-color-secondary-dark-contrast: colorTextContrast(#d6000d);
  --main-color-secondary-darken-contrast: colorTextContrast(#a3000a);
  --main-color-action-contrast: colorTextContrast(#000000);
  --main-color-danger-contrast: colorTextContrast(#ff0a19);
  --main-color-danger-dark-contrast: colorTextContrast(#d6000d);
  --main-color-danger-darken-contrast: colorTextContrast(#a3000a);
  --main-color-warning-contrast: colorTextContrast(#f49425);
  --main-color-warning-dark-contrast: colorTextContrast(#db7b0b);
  --main-color-warning-darken-contrast: colorTextContrast(#aa5f09);
  --main-color-success-contrast: colorTextContrast(#53c800);
  --main-color-success-dark-contrast: colorTextContrast(#3e9500);
  --main-color-success-darken-contrast: colorTextContrast(#296200);
  --main-color-info-contrast: colorTextContrast(#e6e6e6);
  --main-font-family: Open Sans, Helvetica, Arial, sans-serif;
  --main-font-weight: 400;
  --main-font-weight-bold: 700;
  --main-font-size-base: 1.7rem;
  --main-font-size-small: 1.3rem;
  --main-font-size-big: 1.9rem;
  --main-line-height: 1.4;
  --main-link-color: #000000;
  --main-link-color-hover: #00040c;
}

:root {
  --main-color-white: #ffffff;
  --main-color-black: #000000;
  --main-color-gray-base: #919191;
  --main-color-middle-gray: #d9dddd;
  --main-color-dark-gray: #848484;
  --main-color-light-gray: #f1f1f1;
  --main-color-primary: #142968;
  --main-color-primary-dark: #102153;
  --main-color-primary-darken: #0c183d;
  --main-color-secondary: #1c3a93;
  --main-color-action: #142968;
  --main-color-danger: #D32D2D;
  --main-color-danger-dark: #bf2828;
  --main-color-warning: #FF9903;
  --main-color-warning-dark: #e98a00;
  --main-color-success: #b1dc0f;
  --main-color-success-dark: #9ec40d;
  --main-color-info: #f1f1f1;
  --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: colorTextContrast(#FF9903);
  --main-color-warning-dark-contrast: colorTextContrast(#e98a00);
  --main-color-success-contrast: var(--main-color-white);
  --main-color-success-dark-contrast: colorTextContrast(#9ec40d);
  --main-color-info-contrast: colorTextContrast(#f1f1f1);
  --main-font-family: Open Sans, Helvetica, Arial, sans-serif;
  --main-font-weight: 400;
  --main-font-weight-bold: 600;
  --main-font-size-base: 1.6rem;
  --main-font-size-small: 1.4rem;
  --main-font-size-big: 1.8rem;
  --main-line-height: 1.4;
  --main-link-color: #000000;
  --main-link-color-hover: #102153;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v26-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/montserrat-v26-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/montserrat-v26-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/montserrat-v26-latin-700italic.woff2") format("woff2");
}
:root {
  --main-color-white: #ffffff;
  --main-color-black: #000000;
  --main-color-gray-base: #f4f6f6;
  --main-color-middle-gray: #b3b3b3;
  --main-color-dark-gray: #5e6263;
  --main-color-light-gray: #e6e6e6;
  --main-color-primary: #00173f;
  --main-color-primary-dark: #00040c;
  --main-color-primary-darken: black;
  --main-color-secondary: #ff0a19;
  --main-color-secondary-dark: #ff0a19;
  --main-color-secondary-darken: #ff0a19;
  --main-color-action: #000000;
  --main-color-danger: #ff0a19;
  --main-color-danger-dark: #d6000d;
  --main-color-danger-darken: #a3000a;
  --main-color-warning: #f49425;
  --main-color-warning-dark: #db7b0b;
  --main-color-warning-darken: #aa5f09;
  --main-color-success: #53c800;
  --main-color-success-dark: #3e9500;
  --main-color-success-darken: #296200;
  --main-color-info: #e6e6e6;
  --main-color-primary-contrast: colorTextContrast(#00173f);
  --main-color-primary-dark-contrast: colorTextContrast(#00040c);
  --main-color-primary-darken-contrast: colorTextContrast(black);
  --main-color-secondary-contrast: colorTextContrast(#ff0a19);
  --main-color-secondary-dark-contrast: colorTextContrast(#d6000d);
  --main-color-secondary-darken-contrast: colorTextContrast(#a3000a);
  --main-color-action-contrast: colorTextContrast(#000000);
  --main-color-danger-contrast: colorTextContrast(#ff0a19);
  --main-color-danger-dark-contrast: colorTextContrast(#d6000d);
  --main-color-danger-darken-contrast: colorTextContrast(#a3000a);
  --main-color-warning-contrast: colorTextContrast(#f49425);
  --main-color-warning-dark-contrast: colorTextContrast(#db7b0b);
  --main-color-warning-darken-contrast: colorTextContrast(#aa5f09);
  --main-color-success-contrast: colorTextContrast(#53c800);
  --main-color-success-dark-contrast: colorTextContrast(#3e9500);
  --main-color-success-darken-contrast: colorTextContrast(#296200);
  --main-color-info-contrast: colorTextContrast(#e6e6e6);
  --main-font-family: Open Sans, Helvetica, Arial, sans-serif;
  --main-font-weight: 400;
  --main-font-weight-bold: 700;
  --main-font-size-base: 1.7rem;
  --main-font-size-small: 1.3rem;
  --main-font-size-big: 1.9rem;
  --main-line-height: 1.4;
  --main-link-color: #000000;
  --main-link-color-hover: #00040c;
}

/*
Button Link

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

Styleguide Base.Button Link
*/
.buttonLink:hover, .buttonLink:focus, .buttonLink:active {
  background: transparent;
  text-decoration: none;
  color: var(--main-color-black);
}
.buttonLink:hover:after, .buttonLink:focus:after, .buttonLink:active:after {
  width: 100%;
}

.buttonLink {
  display: inline-flex;
  color: var(--main-color-black);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  padding: 0;
  border: 0;
  text-decoration: none;
  text-transform: unset;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  letter-spacing: 0.03em;
  line-height: 1.26;
}
.buttonLink:after {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  left: 0;
  bottom: -6px;
  background: var(--main-color-primary);
  height: 4px;
  transition: width 0.2s ease-in;
}
/*
Button

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

.button--primary - Primary
.button--secondary - Secondary
.button--action - Action
.button--danger - Danger
.button--bordered - Bordered
.disabled - Disabled
.button--primary.button--sm - Primary SM
.button--primary.button--xl - Primary XL

Styleguide Base.Buttons
*/
button.disabled:hover,
.button_disabled:hover,
.btn-disabled:hover, button.disabled:focus,
.button_disabled:focus,
.btn-disabled:focus,
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.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 28px;
  color: var(--main-color-black);
  cursor: pointer;
  background: var(--main-color-gray-base);
  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;
  font-weight: var(--main-font-weight-bold);
  letter-spacing: 0.03em;
}
@media (min-width: 768px) {
  button.disabled,
  .button_disabled,
  .btn-disabled,
  .button[disabled],
  button,
  .button {
    line-height: 1.333;
    font-size: 1.8rem;
    border-width: 2px;
    padding: 13px 20px 13px 20px;
  }
}
.button_disabled .icon,
.button_disabled .orderboxSummary__headline:before,
.button_disabled .headerShopOrder + .mainContent > .container > h1:before,
.button_disabled #userBasket > h1:before,
.btn-disabled .icon,
.btn-disabled .orderboxSummary__headline:before,
.btn-disabled .headerShopOrder + .mainContent > .container > h1:before,
.btn-disabled #userBasket > h1:before,
button .icon,
button .orderboxSummary__headline:before,
button .headerShopOrder + .mainContent > .container > h1:before,
button #userBasket > h1:before,
.button .icon,
.button .orderboxSummary__headline:before,
.button .headerShopOrder + .mainContent > .container > h1:before,
.button #userBasket > h1:before {
  font-size: 1.4em;
  line-height: 1;
  position: relative;
  margin-top: -1px;
}
.button_disabled .icon:first-child,
.button_disabled .orderboxSummary__headline:first-child:before,
.button_disabled .headerShopOrder + .mainContent > .container > h1:first-child:before,
.button_disabled #userBasket > h1:first-child:before,
.btn-disabled .icon:first-child,
.btn-disabled .orderboxSummary__headline:first-child:before,
.btn-disabled .headerShopOrder + .mainContent > .container > h1:first-child:before,
.btn-disabled #userBasket > h1:first-child:before,
button .icon:first-child,
button .orderboxSummary__headline:first-child:before,
button .headerShopOrder + .mainContent > .container > h1:first-child:before,
button #userBasket > h1:first-child:before,
.button .icon:first-child,
.button .orderboxSummary__headline:first-child:before,
.button .headerShopOrder + .mainContent > .container > h1:first-child:before,
.button #userBasket > h1:first-child:before {
  margin-left: -5px;
}
.button_disabled .icon:last-child,
.button_disabled .orderboxSummary__headline:last-child:before,
.button_disabled .headerShopOrder + .mainContent > .container > h1:last-child:before,
.button_disabled #userBasket > h1:last-child:before,
.btn-disabled .icon:last-child,
.btn-disabled .orderboxSummary__headline:last-child:before,
.btn-disabled .headerShopOrder + .mainContent > .container > h1:last-child:before,
.btn-disabled #userBasket > h1:last-child:before,
button .icon:last-child,
button .orderboxSummary__headline:last-child:before,
button .headerShopOrder + .mainContent > .container > h1:last-child:before,
button #userBasket > h1:last-child:before,
.button .icon:last-child,
.button .orderboxSummary__headline:last-child:before,
.button .headerShopOrder + .mainContent > .container > h1:last-child:before,
.button #userBasket > h1:last-child:before {
  margin-right: -5px;
}
.button_disabled:active,
.btn-disabled:active,
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: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
}
button--primary:active,
.button--primary:active {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
}
button--secondary,
.button--secondary {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
  border-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
}
button--secondary:hover,
button--secondary:focus,
.button--secondary:hover,
.button--secondary:focus {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
button--secondary:active,
.button--secondary:active {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
button--action,
.button--action {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
  border-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
button--action:active,
.button--action:active {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
button--bordered,
.button--bordered {
  background: transparent;
  color: var(--main-color-black);
  border: 2px solid var(--main-color-black);
  padding: 11px 18px;
}
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-white);
}
button--bordered:active,
.button--bordered:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}
button--danger,
.button--danger {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
  border-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
}
button--danger:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
button--danger:active,
.button--danger:active {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
button--sm,
.button--sm {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 12px;
    padding-right: 30px;
    padding-bottom: 12px;
    padding-left: 30px;
    font-size: 2.2rem;
  }
}
.is-loading.button_disabled,
.is-loading.btn-disabled,
.is-success.button_disabled,
.is-success.btn-disabled,
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-loading,
button.is-success,
button.is-error,
.button.is-loading,
.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;
  padding-right: 40px;
  padding-left: 10px;
}
.is-loading.button_disabled .icon,
.is-loading.button_disabled .orderboxSummary__headline:before,
.is-loading.button_disabled .headerShopOrder + .mainContent > .container > h1:before,
.is-loading.button_disabled #userBasket > h1:before,
.is-loading.btn-disabled .icon,
.is-loading.btn-disabled .orderboxSummary__headline:before,
.is-loading.btn-disabled .headerShopOrder + .mainContent > .container > h1:before,
.is-loading.btn-disabled #userBasket > h1:before,
.is-success.button_disabled .icon,
.is-success.button_disabled .orderboxSummary__headline:before,
.is-success.button_disabled .headerShopOrder + .mainContent > .container > h1:before,
.is-success.button_disabled #userBasket > h1:before,
.is-success.btn-disabled .icon,
.is-success.btn-disabled .orderboxSummary__headline:before,
.is-success.btn-disabled .headerShopOrder + .mainContent > .container > h1:before,
.is-success.btn-disabled #userBasket > h1:before,
.is-error.button_disabled .icon,
.is-error.button_disabled .orderboxSummary__headline:before,
.is-error.button_disabled .headerShopOrder + .mainContent > .container > h1:before,
.is-error.button_disabled #userBasket > h1:before,
.is-error.btn-disabled .icon,
.is-error.btn-disabled .orderboxSummary__headline:before,
.is-error.btn-disabled .headerShopOrder + .mainContent > .container > h1:before,
.is-error.btn-disabled #userBasket > h1:before,
button.is-loading .icon,
button.is-loading .orderboxSummary__headline:before,
button.is-loading .headerShopOrder + .mainContent > .container > h1:before,
button.is-loading #userBasket > h1:before,
button.is-success .icon,
button.is-success .orderboxSummary__headline:before,
button.is-success .headerShopOrder + .mainContent > .container > h1:before,
button.is-success #userBasket > h1:before,
button.is-error .icon,
button.is-error .orderboxSummary__headline:before,
button.is-error .headerShopOrder + .mainContent > .container > h1:before,
button.is-error #userBasket > h1:before,
.button.is-loading .icon,
.button.is-loading .orderboxSummary__headline:before,
.button.is-loading .headerShopOrder + .mainContent > .container > h1:before,
.button.is-loading #userBasket > h1:before,
.button.is-success .icon,
.button.is-success .orderboxSummary__headline:before,
.button.is-success .headerShopOrder + .mainContent > .container > h1:before,
.button.is-success #userBasket > h1:before,
.button.is-error .icon,
.button.is-error .orderboxSummary__headline:before,
.button.is-error .headerShopOrder + .mainContent > .container > h1:before,
.button.is-error #userBasket > h1:before {
  opacity: 0;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-loading:after,
button.is-success:after,
button.is-error:after,
.button.is-loading:after,
.button.is-success:after,
.button.is-error:after {
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: 0 -50%;
  font-size: 24px;
}
.is-loading.button_disabled,
.is-loading.btn-disabled,
button.is-loading,
.button.is-loading {
  cursor: wait;
  color: var(--main-color-black) !important;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
button.is-loading:after,
.button.is-loading:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.is-success.button_disabled,
.is-success.btn-disabled,
button.is-success,
.button.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-black) !important;
}
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
button.is-success:after,
.button.is-success:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-error,
.button.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-error:after,
.button.is-error:after {
  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);
}

@keyframes scaleRequestIconBtn {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
/*
Radioboxes

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

Styleguide Form.Radioboxes
*/ /*
Radioboxes Switch

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

Styleguide Form.Radioboxes Switch
*/
/*
Checkboxes

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

Styleguide Form.Checkboxes
*/
/*
Checkboxes Switch

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

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

.specialcheckbox i {
  border-radius: 28px;
  top: 1px;
  width: 20px;
  height: 20px;
}
.specialcheckbox i:after {
  left: -1px;
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  color: var(--main-color-black);
  top: -1px;
  opacity: 0;
  line-height: 18px;
  transition: opacity 0.1s ease-in;
  font-size: 18px;
  background-color: transparent;
}
.specialcheckbox input {
  width: 24px;
  height: 24px;
  left: 0;
  top: 0;
}

.specialcheckboxSwitch {
  padding-left: 45px;
  margin-bottom: 0;
}
.specialcheckboxSwitch i {
  background: var(--main-color-middle-gray);
  border-radius: 16px;
  width: 36px;
  height: 20px;
  border: 0;
  position: absolute;
  margin-top: 0;
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch i:after {
  content: "";
  display: block;
  background: var(--main-color-light-gray);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 1;
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch input {
  width: 36px;
  height: 20px;
  left: 0;
  top: 0;
}
.specialcheckboxSwitch:has(input:checked) i {
  background: var(--main-color-primary);
}
.specialcheckboxSwitch:has(input:checked) i:after {
  left: 17px;
  background: var(--main-color-white);
}

.specialradiobox i {
  top: -2px;
}

/*
Background

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

Styleguide Colors.Background
*/
/*
Border

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

Styleguide Colors.Border
*/
/*
Font

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

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

Styleguide Colors.Font
*/
.bg--white {
  background-color: #ffffff;
}
.border--white {
  border-color: #ffffff;
}

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

.bg--black {
  background-color: #000000;
  color: colorTextContrast(#000000);
}
.bg--black a:not(.button), .bg--black .link {
  color: colorTextContrast(#000000);
}

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

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

.bg--gray-base {
  background-color: #f4f6f6;
  color: colorTextContrast(#f4f6f6);
}
.bg--gray-base a:not(.button), .bg--gray-base .link {
  color: colorTextContrast(#f4f6f6);
}

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

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

.bg--middle-gray {
  background-color: #b3b3b3;
  color: colorTextContrast(#b3b3b3);
}
.bg--middle-gray a:not(.button), .bg--middle-gray .link {
  color: colorTextContrast(#b3b3b3);
}

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

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

.bg--dark-gray {
  background-color: #5e6263;
  color: colorTextContrast(#5e6263);
}
.bg--dark-gray a:not(.button), .bg--dark-gray .link {
  color: colorTextContrast(#5e6263);
}

.border--dark-gray {
  border-color: #5e6263;
}

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

.bg--light-gray {
  background-color: #e6e6e6;
  color: colorTextContrast(#e6e6e6);
}
.bg--light-gray a:not(.button), .bg--light-gray .link {
  color: colorTextContrast(#e6e6e6);
}

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

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

.bg--primary {
  background-color: #00173f;
  color: colorTextContrast(#00173f);
}
.bg--primary a:not(.button), .bg--primary .link {
  color: colorTextContrast(#00173f);
}

.border--primary {
  border-color: #00173f;
}

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

.bg--primary-dark {
  background-color: #00040c;
  color: colorTextContrast(#00040c);
}
.bg--primary-dark a:not(.button), .bg--primary-dark .link {
  color: colorTextContrast(#00040c);
}

.border--primary-dark {
  border-color: #00040c;
}

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

.bg--primary-darken {
  background-color: black;
  color: colorTextContrast(black);
}
.bg--primary-darken a:not(.button), .bg--primary-darken .link {
  color: colorTextContrast(black);
}

.border--primary-darken {
  border-color: black;
}

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

.bg--secondary {
  background-color: #ff0a19;
  color: colorTextContrast(#ff0a19);
}
.bg--secondary a:not(.button), .bg--secondary .link {
  color: colorTextContrast(#ff0a19);
}

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

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

.bg--secondary-dark {
  background-color: #d6000d;
  color: colorTextContrast(#d6000d);
}
.bg--secondary-dark a:not(.button), .bg--secondary-dark .link {
  color: colorTextContrast(#d6000d);
}

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

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

.bg--secondary-darken {
  background-color: #a3000a;
  color: colorTextContrast(#a3000a);
}
.bg--secondary-darken a:not(.button), .bg--secondary-darken .link {
  color: colorTextContrast(#a3000a);
}

.border--secondary-darken {
  border-color: #a3000a;
}

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

.bg--action {
  background-color: #000000;
  color: colorTextContrast(#000000);
}
.bg--action a:not(.button), .bg--action .link {
  color: colorTextContrast(#000000);
}

.border--action {
  border-color: #000000;
}

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

.bg--danger {
  background-color: #ff0a19;
  color: colorTextContrast(#ff0a19);
}
.bg--danger a:not(.button), .bg--danger .link {
  color: colorTextContrast(#ff0a19);
}

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

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

.bg--warning {
  background-color: #f49425;
  color: colorTextContrast(#f49425);
}
.bg--warning a:not(.button), .bg--warning .link {
  color: colorTextContrast(#f49425);
}

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

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

.bg--success {
  background-color: #53c800;
  color: colorTextContrast(#53c800);
}
.bg--success a:not(.button), .bg--success .link {
  color: colorTextContrast(#53c800);
}

.border--success {
  border-color: #53c800;
}

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

.bg--info {
  background-color: #e6e6e6;
  color: colorTextContrast(#e6e6e6);
}
.bg--info a:not(.button), .bg--info .link {
  color: colorTextContrast(#e6e6e6);
}

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

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

.bg--black .button--action {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
}
.bg--black .button--action:hover {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}

.bg--action .button--action {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
}
.bg--action .button--action:hover {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}

.bg--gray-base [class=button] {
  background: var(--main-color-light-gray);
}
.bg--gray-base [class=button]:hover {
  background: var(--main-color-primary);
}

.bg--primary {
  color: var(--main-color-white);
}
.bg--primary a:not(.button), .bg--primary .link {
  color: var(--main-color-white);
}
.bg--primary a:not(.button):hover, .bg--primary .link:hover {
  text-decoration-color: var(--main-color-secondary);
}
.bg--primary .button:hover {
  background: var(--main-color-primary-dark);
}
.bg--primary .button--primary {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
.bg--primary .button--primary:hover {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
}
.bg--primary .button--action:hover {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}

.bg--secondary {
  color: var(--main-color-white);
}
.bg--secondary a:not(.button), .bg--secondary .link {
  color: var(--main-color-white);
}
.bg--secondary a:not(.button):hover, .bg--secondary .link:hover {
  text-decoration-color: var(--main-color-primary);
}

.bg--light-gray [class=button] {
  background: var(--main-color-gray-base);
}
.bg--light-gray [class=button]:hover {
  background: var(--main-color-primary);
}

/*
Containers

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

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


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

.container {
  max-width: 1720px;
}

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

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

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

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

/*
Fake Tables

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


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

/*
File Input

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

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

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

/*
Inputs

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

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

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

input,
select,
textarea,
.customSelect__selected,
.selectBody__fakeOption {
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 2px solid var(--main-color-middle-gray);
  border-radius: 28px;
  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,
  .customSelect__selected,
  .selectBody__fakeOption {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 13px 20px 13px 20px;
  }
}
input:not(:disabled):active, input:not(:disabled):focus,
select:not(:disabled):active,
select:not(:disabled):focus,
textarea:not(:disabled):active,
textarea:not(:disabled):focus,
.customSelect__selected:not(:disabled):active,
.selectBody__fakeOption:not(:disabled):active,
.customSelect__selected:not(:disabled):focus,
.selectBody__fakeOption:not(:disabled):focus {
  outline: 0;
  border-color: var(--main-color-primary);
}
input.error,
select.error,
textarea.error,
.error.customSelect__selected,
.error.selectBody__fakeOption {
  border-color: var(--main-color-danger);
}
input:disabled, input.disabled,
select:disabled,
select.disabled,
textarea:disabled,
textarea.disabled,
.customSelect__selected:disabled,
.selectBody__fakeOption:disabled,
.disabled.customSelect__selected,
.disabled.selectBody__fakeOption {
  background-color: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  pointer-events: none;
}

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

form {
  margin: 0;
}
form strong {
  display: flex;
  margin-bottom: -10px;
}

/*
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>
<h1 class="decorated">h1.decorated</h1>
<h2 class="decorated">h2.decorated</h2>
<h3 class="decorated">h3.decorated</h3>
<h4 class="decorated">h4.decorated</h4>
<h5 class="decorated">h5.decorated</h5>
<h6 class="decorated">h6.decorated</h6>

Styleguide Typo.Headlines
*/
h1, .h1,
h2, .h2, .orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1, #userBasket > h1, .itemcardHeadline,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: var(--main-font-weight-bold);
  letter-spacing: 0.03em;
  text-transform: none;
  display: flex;
  hyphens: none;
  margin: 0;
  margin-bottom: clamp(10px, 1em, 20px);
}
h1.highlighted, .h1.highlighted,
h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1.highlighted, #userBasket > h1.highlighted, .highlighted.itemcardHeadline,
h3.highlighted, .h3.highlighted,
h4.highlighted, .h4.highlighted,
h5.highlighted, .h5.highlighted,
h6.highlighted, .h6.highlighted {
  font-weight: var(--main-font-weight-bold);
  line-height: 1.23;
}
h1.decorated, .h1.decorated,
h2.decorated, .h2.decorated, .decorated.orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1.decorated, #userBasket > h1.decorated, .decorated.itemcardHeadline,
h3.decorated, .h3.decorated,
h4.decorated, .h4.decorated,
h5.decorated, .h5.decorated,
h6.decorated, .h6.decorated {
  position: relative;
  padding-bottom: 0.25em;
}
h1.decorated:after, .h1.decorated:after,
h2.decorated:after, .h2.decorated:after, .decorated.orderboxSummary__headline:after, .headerShopOrder + .mainContent > .container > h1.decorated:after, #userBasket > h1.decorated:after, .decorated.itemcardHeadline:after,
h3.decorated:after, .h3.decorated:after,
h4.decorated:after, .h4.decorated:after,
h5.decorated:after, .h5.decorated:after,
h6.decorated:after, .h6.decorated:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 3px;
  width: 48px;
  background: var(--main-color-primary);
}

h1, .h1 {
  margin-bottom: clamp(10px, 1em, 30px);
  font-size: 2.4rem;
}
@media (min-width: 768px) {
  h1, .h1 {
    font-size: scale-font-size(2.4rem, 2.7rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: scale-font-size(2.4rem, 2.7rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h1, .h1 {
    font-size: scale-font-size(2.4rem, 2.7rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h1, .h1 {
    font-size: 2.7rem;
  }
}
h1.highlighted, .h1.highlighted {
  font-size: 3.4rem;
}
@media (min-width: 768px) {
  h1.highlighted, .h1.highlighted {
    font-size: scale-font-size(3.4rem, 4.2rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h1.highlighted, .h1.highlighted {
    font-size: scale-font-size(3.4rem, 4.2rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .h1.highlighted {
    font-size: scale-font-size(3.4rem, 4.2rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h1.highlighted, .h1.highlighted {
    font-size: 4.2rem;
  }
}

h2, .h2, .orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1, #userBasket > h1, .itemcardHeadline {
  font-size: 2rem;
}
@media (min-width: 768px) {
  h2, .h2, .orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1, #userBasket > h1, .itemcardHeadline {
    font-size: scale-font-size(2rem, 2.2rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h2, .h2, .orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1, #userBasket > h1, .itemcardHeadline {
    font-size: scale-font-size(2rem, 2.2rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h2, .h2, .orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1, #userBasket > h1, .itemcardHeadline {
    font-size: scale-font-size(2rem, 2.2rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h2, .h2, .orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1, #userBasket > h1, .itemcardHeadline {
    font-size: 2.2rem;
  }
}
h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1.highlighted, #userBasket > h1.highlighted, .highlighted.itemcardHeadline {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1.highlighted, #userBasket > h1.highlighted, .highlighted.itemcardHeadline {
    font-size: scale-font-size(2.2rem, 2.2rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1.highlighted, #userBasket > h1.highlighted, .highlighted.itemcardHeadline {
    font-size: scale-font-size(2.2rem, 2.2rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1.highlighted, #userBasket > h1.highlighted, .highlighted.itemcardHeadline {
    font-size: scale-font-size(2.2rem, 2.2rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline, .headerShopOrder + .mainContent > .container > h1.highlighted, #userBasket > h1.highlighted, .highlighted.itemcardHeadline {
    font-size: 2.2rem;
  }
}

h3, .h3 {
  font-size: 1.9rem;
}
@media (min-width: 768px) {
  h3, .h3 {
    font-size: scale-font-size(1.9rem, 1.8rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h3, .h3 {
    font-size: scale-font-size(1.9rem, 1.8rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h3, .h3 {
    font-size: scale-font-size(1.9rem, 1.8rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h3, .h3 {
    font-size: 1.8rem;
  }
}

h4, .h4 {
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  h4, .h4 {
    font-size: scale-font-size(1.6rem, 1.7rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h4, .h4 {
    font-size: scale-font-size(1.6rem, 1.7rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h4, .h4 {
    font-size: scale-font-size(1.6rem, 1.7rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h4, .h4 {
    font-size: 1.7rem;
  }
}

h5, .h5 {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h5, .h5 {
    font-size: scale-font-size(1.5rem, 1.6rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h5, .h5 {
    font-size: scale-font-size(1.5rem, 1.6rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h5, .h5 {
    font-size: scale-font-size(1.5rem, 1.6rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h5, .h5 {
    font-size: 1.6rem;
  }
}

h6, .h6 {
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  h6, .h6 {
    font-size: scale-font-size(1.4rem, 1.5rem, 0.5);
  }
}
@media (min-width: 1024px) {
  h6, .h6 {
    font-size: scale-font-size(1.4rem, 1.5rem, 0.6);
  }
}
@media (min-width: 1250px) {
  h6, .h6 {
    font-size: scale-font-size(1.4rem, 1.5rem, 0.7);
  }
}
@media (min-width: 1540px) {
  h6, .h6 {
    font-size: 1.5rem;
  }
}

/*
Tables

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


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

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

tr:first-child td, tr:first-child th {
  border-top: none;
}

th {
  font-weight: var(--main-font-weight);
  color: var(--main-color-middle-gray);
}

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

label {
  font-size: var(--main-font-size-base);
}

.link, a {
  color: var(--main-color-primary);
  text-underline-offset: 2px;
}
.link:hover, a:hover {
  color: var(--main-color-secondary);
  text-decoration-color: var(--main-color-secondary);
}

.is-hidden {
  display: none !important;
}

.footerMain {
  border-top: 0;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 1023.98px) {
  .footerMain {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.footerMain > .container {
  max-width: 1840px;
}
@media (max-width: 767.98px) {
  .footerMain .navgroup ul.level_1 {
    padding-left: 30px;
    margin-bottom: 15px;
  }
}
.footerMain .navgroup ul li.hasChildren > a, .footerMain .navgroup ul li.hasChildren > span {
  display: inline-flex;
  flex-direction: row-reverse;
}
@media (max-width: 767.98px) {
  .footerMain .navgroup ul li.hasChildren {
    margin: 0;
    border: none;
  }
}
.footerMain .navgroup ul li:hover a {
  color: var(--main-color-black);
}
.footerMain .navgroup ul li a {
  font-size: 17px;
  position: relative;
  display: inline-flex;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.footerMain .navgroup ul li a:after {
  content: "";
  width: 100%;
  height: 2px;
  transform: scale(0);
  background: var(--main-color-primary);
  position: absolute;
  top: 100%;
  left: 0;
  transition: all 0.2s ease-in-out;
}
.footerMain .navgroup ul li a:hover {
  color: var(--main-color-black);
}
.footerMain .navgroup ul li a:hover:after {
  transform: scale(1);
}
@media (max-width: 1249.98px) {
  .footerMain .navgroup ul li a {
    font-size: 15px;
  }
}
.footerMain .navgroup:not(.footerNavShop) ul li.level_1 > a {
  font-size: 19px;
  margin-bottom: 15px;
}
.footerMain .navgroup.footerNavShop > ul > li > span {
  font-size: 19px;
  letter-spacing: 0.03em;
  position: relative;
}
@media (max-width: 767.98px) {
  .footerMain .navgroup.footerNavShop > ul > li > span:after {
    content: "";
    width: 100%;
    height: 2px;
    transform: scale(0);
    background: var(--main-color-primary);
    position: absolute;
    top: 100%;
    left: 0;
    transition: all 0.2s ease-in-out;
  }
  .footerMain .navgroup.footerNavShop > ul > li > span:hover {
    color: var(--main-color-black);
  }
  .footerMain .navgroup.footerNavShop > ul > li > span:hover:after {
    transform: scale(1);
  }
}
.footerMain .navgroup.footerNavShop > ul > li a {
  font-size: 17px;
  text-transform: none;
}
@media (max-width: 1249.98px) {
  .footerMain .navgroup.footerNavShop > ul > li a {
    font-size: 15px;
  }
}
@media (max-width: 767.98px) {
  .footerMain .navgroup.footerNavShop > ul ul {
    padding-left: 30px;
  }
}
.footerMain .col-xlg-8 {
  max-width: 900px;
  margin: 0 auto;
}

.footerInfo img {
  margin-bottom: 20px;
}
@media (max-width: 1023.98px) {
  .footerInfo img {
    width: 100% !important;
    max-width: 400px;
  }
}
.footerInfo strong {
  display: inline-flex;
  margin-bottom: 3px;
}
.footerInfo .iconList {
  margin-top: 12px;
}
@media (min-width: 1024px) {
  .footerInfo {
    max-width: 400px;
  }
}
@media (max-width: 1023.98px) {
  .footerInfo .textcontent {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--main-color-light-gray);
    margin-bottom: 20px;
  }
  .footerInfo .iconList {
    justify-content: center;
  }
}

.footerBottom {
  border-top: 0;
  background: var(--main-color-light-gray);
  padding: 11.5px 0;
}
.footerBottom .nav a {
  font-weight: var(--main-font-weight-bold);
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.03em;
}
@media (max-width: 767.98px) {
  .footerBottom .nav a {
    display: flex;
    justify-content: center;
  }
}
.footerBottom .nav a:hover {
  color: var(--main-color-secondary);
}
.footerBottom > .container {
  max-width: 1720px;
  gap: 12px;
}
@media (max-width: 1023.98px) {
  .footerBottom > .container {
    flex-direction: column;
    align-items: center;
  }
}
.footerBottom .footerBottomLeft, .footerBottom .footerBottomRight {
  margin: 0;
}

.footerImages > .textcontent {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (max-width: 1249.98px) {
  .footerImages > .textcontent {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
  }
}

.order .footerBottom .container {
  flex-direction: row-reverse;
}
@media (max-width: 1249.98px) {
  .order .footerBottom .container {
    flex-direction: column-reverse;
  }
}

header.header {
  padding-top: 38px;
  padding-bottom: 38px;
  transition: all 0.2s ease-in-out;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--main-color-white);
  border-bottom: 2px solid var(--main-color-gray-base);
}
header.header > .container {
  max-width: 1840px;
  gap: 40px;
  display: flex;
  align-items: center;
}
@media (max-width: 1023.98px) {
  header.header > .container {
    gap: 16px 24px;
    flex-wrap: wrap;
  }
}
header.header .headerLogo {
  margin: 0;
  max-width: 286px;
}
header.header .headerLogo a, header.header .headerLogo img {
  aspect-ratio: unset;
}
@media (max-width: 1536px) {
  header.header .headerLogo {
    max-width: 155px;
  }
}
header.header .headerAccount {
  margin: 0;
}
header.header .headerAccount .iconbarIcon {
  padding-left: 8px;
  padding-right: 8px;
}
header.header .headerAccount .iconbarIcon .icon, header.header .headerAccount .iconbarIcon .orderboxSummary__headline:before, header.header .headerAccount .iconbarIcon .headerShopOrder + .mainContent > .container > h1:before, header.header .headerAccount .iconbarIcon #userBasket > h1:before {
  font-size: 3rem;
}
header.header .headerAccount .iconbarIcon__label {
  position: absolute;
  top: 100%;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}
@media (max-width: 767.98px) {
  header.header .headerAccount .iconbarIcon {
    padding: 0;
  }
}
header.header .headerAccount .iconbarIcon:hover .iconbarIcon__label {
  opacity: 1;
}
header.header .headerAccount .iconbarIcon--account .iconbarIcon__label {
  display: none;
}
header.header .headerMainNavigation {
  margin: 0;
}
@media (max-width: 1249.98px) {
  header.header .headerMainNavigation {
    display: none;
  }
}
header.header .headerSearch {
  flex-grow: 1;
}
@media (max-width: 1023.98px) {
  header.header .headerSearch {
    display: none;
  }
}
header.header .searchBar {
  width: 54.645%;
}
@media (max-width: 1249.98px) {
  header.header .searchBar {
    width: 75%;
  }
}
header.header .headerNavToggler {
  display: none;
}
@media (max-width: 1249.98px) {
  header.header .headerNavToggler {
    display: block;
  }
}
header.header.is-sticky {
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: none;
}
@media (max-width: 1249.98px) {
  header.header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.headerRight {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 1023.98px) {
  .headerRight .headerNavToggler {
    display: none;
  }
}

.headerInformation {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1023.98px) {
  .headerInformation {
    margin-left: auto;
  }
}

.headerMobileRow {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.headerMobileRow .headerNavToggler {
  margin: 0;
}
.headerMobileRow form {
  flex: 1;
}
.headerMobileRow form .searchBar {
  width: 100%;
}
@media (min-width: 1024px) {
  .headerMobileRow {
    display: none;
  }
}

.headerShopOrder {
  background: var(--main-color-white);
}

@media (max-width: 767.98px) {
  .headerTrust {
    font-size: 12px !important;
  }
}

.headerLink--becomeReseller {
  margin-left: 8px;
  font-size: 12px;
}
.headerLink--becomeReseller .icon, .headerLink--becomeReseller .orderboxSummary__headline:before, .headerLink--becomeReseller .headerShopOrder + .mainContent > .container > h1:before, .headerLink--becomeReseller #userBasket > h1:before {
  font-size: 24px;
  margin-left: 0 !important;
}
@media (max-width: 1249.98px) {
  .headerLink--becomeReseller {
    margin-right: 16px;
  }
}
@media (max-width: 1023.98px) {
  .headerLink--becomeReseller {
    margin-right: 0;
  }
}
@media (max-width: 767.98px) {
  .headerLink--becomeReseller {
    display: none;
  }
}

.mainContent {
  background: var(--main-color-gray-base);
}

.mobileMenu__body {
  display: flex;
  flex-direction: column;
}
.mobileMenu__bottom {
  margin-top: auto;
}
.mobileMenu__bottomNavigation {
  padding: 34px 20px 34px 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.mobileMenu__backLink {
  gap: 3px;
}

.newsletterBanner {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  padding-top: 96px;
  padding-bottom: 96px;
  background-size: cover !important;
  background-position: center !important;
}
.newsletterBanner > .container {
  max-width: 1840px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.newsletterBanner > .container .h1 {
  margin-bottom: 8px;
}
@media (max-width: 1023.98px) {
  .newsletterBanner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .newsletterBanner > .container {
    flex-direction: column;
    align-items: flex-start;
  }
}

.pg_newsletter .newsletterBanner {
  display: none;
}

.collection--catalogues {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1249.98px) {
  .collection--catalogues {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .collection--catalogues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.collection--catalogues .catalogueItem {
  padding: 20px;
  background: var(--main-color-white);
  border-radius: 2px;
  text-decoration: none;
}
.collection--catalogues .catalogueItem__image {
  margin-bottom: 13px;
  aspect-ratio: 1.28902;
}
.collection--catalogues .catalogueItem__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.collection--catalogues .catalogueItem__description {
  text-align: center;
  font-weight: var(--main-font-weight-bold);
}
.collection--catalogues .catalogueItem:hover {
  text-decoration: underline;
  text-decoration-color: var(--main-color-primary);
}

.collection--downloads {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.collection--downloads .downloadItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background: var(--main-color-white);
  border-radius: 2px;
}
@media (max-width: 1249.98px) {
  .collection--downloads .downloadItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
.collection--downloads .downloadItem__description {
  display: flex;
  gap: 12px;
  align-items: center;
}
.collection--downloads .downloadItem__description .icon, .collection--downloads .downloadItem__description .orderboxSummary__headline:before, .collection--downloads .downloadItem__description .headerShopOrder + .mainContent > .container > h1:before, .collection--downloads .downloadItem__description #userBasket > h1:before {
  font-size: 24px;
}
.collection--downloads .downloadItem__buttons {
  margin-left: auto;
}
@media (max-width: 1249.98px) {
  .collection--downloads .downloadItem__buttons {
    margin-left: 0;
  }
}
.collection--downloads .downloadItem .filegallery {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.collection--downloads .downloadItem .filegallery .filegalleryFile {
  flex-direction: row-reverse;
  gap: 5px;
  border: 2px solid var(--main-color-black);
  line-height: 1;
  padding: 7px;
  font-weight: var(--main-font-weight-bold);
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
}
.collection--downloads .downloadItem .filegallery .filegalleryFile span {
  text-decoration: none;
}
.collection--downloads .downloadItem .filegallery .filegalleryFile .icon, .collection--downloads .downloadItem .filegallery .filegalleryFile .orderboxSummary__headline:before, .collection--downloads .downloadItem .filegallery .filegalleryFile .headerShopOrder + .mainContent > .container > h1:before, .collection--downloads .downloadItem .filegallery .filegalleryFile #userBasket > h1:before {
  font-size: 1em;
}
.collection--downloads .downloadItem .filegallery .filegalleryFile .icon:before, .collection--downloads .downloadItem .filegallery .filegalleryFile .orderboxSummary__headline:before, .collection--downloads .downloadItem .filegallery .filegalleryFile .headerShopOrder + .mainContent > .container > h1:before, .collection--downloads .downloadItem .filegallery .filegalleryFile #userBasket > h1:before {
  content: var(--base-icon-download);
}
.collection--downloads .downloadItem .filegallery .filegalleryFile:hover {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
}
.collection--downloads .downloadItem .filegallery .filegalleryFile:hover .icon, .collection--downloads .downloadItem .filegallery .filegalleryFile:hover .orderboxSummary__headline:before, .collection--downloads .downloadItem .filegallery .filegalleryFile:hover .headerShopOrder + .mainContent > .container > h1:before, .collection--downloads .downloadItem .filegallery .filegalleryFile:hover #userBasket > h1:before {
  color: var(--main-color-black);
}

.collection--events.isList .collectionArea {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1249.98px) {
  .collection--events.isList .collectionArea {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .collection--events.isList .collectionArea {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.collection--events .eventItem {
  background: var(--main-color-white);
  border-radius: 2px;
  padding: 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.collection--events .eventItem h3 {
  display: inline-flex;
}
.collection--events .eventItem h3:after {
  transition: width 0.2s ease-in-out;
}
.collection--events .eventItem:hover h3:after {
  width: 100%;
}
.collection--events .eventItem:hover .button {
  color: var(--main-color-white);
}
.collection--events .eventItem__content {
  margin-bottom: 48px;
}
@media (max-width: 767.98px) {
  .collection--events .eventItem__content {
    margin-bottom: 24px;
  }
}
.collection--events .eventItem__link {
  margin-top: auto;
}
.collection--events .eventFullview__header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.collection--events .eventFullview__header .linkWithIcon {
  margin-left: auto;
  margin-top: 8px;
}
@media (max-width: 1023.98px) {
  .collection--events .eventFullview__header {
    flex-direction: column-reverse;
  }
}
.collection--events .eventFullview__main, .collection--events .eventFullview__bottom {
  display: flex;
  gap: 96px;
}
@media (max-width: 1249.98px) {
  .collection--events .eventFullview__main, .collection--events .eventFullview__bottom {
    gap: 48px;
  }
}
@media (max-width: 1023.98px) {
  .collection--events .eventFullview__main, .collection--events .eventFullview__bottom {
    flex-direction: column;
  }
}
@media (max-width: 1023.98px) {
  .collection--events .eventFullview__bottom {
    flex-direction: column-reverse;
  }
}
.collection--events .eventFullview__sidebar, .collection--events .eventFullview__details {
  width: 33.3333333333%;
  padding: 40px;
  background: var(--main-color-white);
  border-radius: 2px;
  flex-shrink: 0;
}
@media (max-width: 1249.98px) {
  .collection--events .eventFullview__sidebar, .collection--events .eventFullview__details {
    padding: 20px;
  }
}
@media (max-width: 1023.98px) {
  .collection--events .eventFullview__sidebar, .collection--events .eventFullview__details {
    width: 100%;
  }
}
.collection--events .eventFullview__details {
  width: 100%;
}
.collection--events .eventFullview__detailsWrapper {
  width: 33.3333333333%;
  flex-shrink: 0;
}
@media (max-width: 1023.98px) {
  .collection--events .eventFullview__detailsWrapper {
    width: 100%;
  }
}

.collection--media {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1249.98px) {
  .collection--media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .collection--media {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.collection--media .mediaItem {
  padding: 20px;
  background: var(--main-color-white);
  border-radius: 2px;
}
.collection--media .mediaItem__video {
  margin-bottom: 13px;
}
.collection--media .mediaItem__video .youtubecontent {
  padding-bottom: 0;
  height: auto;
}
.collection--media .mediaItem__video .DCCookie_youtube_container {
  position: relative;
}
.collection--media .mediaItem__video iframe {
  aspect-ratio: 1.77778;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collection--media .mediaItem__description {
  text-align: center;
  font-weight: var(--main-font-weight-bold);
}

.collection--salesperson {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1249.98px) {
  .collection--salesperson {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1023.98px) {
  .collection--salesperson {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .collection--salesperson {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.alert {
  border-radius: 28px;
}
.alert--primary {
  background: #00173f;
  color: colorTextContrast(#00173f);
}
.alert--secondary {
  background: #ff0a19;
  color: colorTextContrast(#ff0a19);
}
.alert--action {
  background: #000000;
  color: colorTextContrast(#000000);
}
.alert--danger {
  background: #ff0a19;
  color: colorTextContrast(#ff0a19);
}
.alert--warning {
  background: #f49425;
  color: colorTextContrast(#f49425);
}
.alert--success {
  background: #53c800;
  color: colorTextContrast(#53c800);
}
.alert--primary {
  color: var(--main-color-white);
}
.alert--secondary {
  color: var(--main-color-white);
}

/*
Breadcrumb

Markup:
<div class="breadcrumbWrapper">
  <div class="breadcrumb">
    <a href="#">Level 1</a>
    <i class="icon icon-angle-right"></i>
    <a href="#">Level 2</a>
    <i class="icon icon-angle-right"></i>
    <span class="current">Current</span>
  </div>
  <a class="breadcrumbBackbutton" href="#"><i class="icon icon-angle-left"></i>Back</a>
</div>

Styleguide Components.Breadcrumb
*/
.breadcrumb a i {
  font-size: 19px;
}
@media (max-width: 1249.98px) {
  .breadcrumb a i {
    font-size: 17px;
  }
}
.breadcrumb .current {
  color: var(--main-color-black);
}
.breadcrumb .current a {
  color: var(--main-color-black);
}

.breadcrumbBackbutton {
  color: var(--main-color-dark-gray);
}
.breadcrumbBackbutton:hover {
  color: var(--main-color-primary);
}

.breadcrumbWrapper {
  font-size: var(--main-font-size-base);
  margin-top: 48px;
  margin-bottom: 24px;
  color: var(--main-color-dark-gray);
}
.breadcrumbWrapper a {
  color: var(--main-color-dark-gray);
}
.breadcrumbWrapper a:hover {
  color: var(--main-color-primary);
}
@media (max-width: 1249.98px) {
  .breadcrumbWrapper {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.contentBox {
  border: none;
  border-radius: 2px;
  background: var(--main-color-white);
}
.contentBox .contentText {
  padding: 20px;
}

/*
Custom Select

Markup:
<div class="customSelect js-customSelect {{modifier_class}}">
  <select>
    <option disabled selected>{{tc.please_choose}}</option>
    <option value="s">S</option>
    <option value="m">M</option>
    <option value="l">L</option>
    <option value="xl" disabled>XL</option>
    <option value="xxl">XXL</option>
  </select>
  <div class="customSelect__selected">Choose</div>
  <div class="customSelect__dropdown">
    <div class="customSelect__dropdownClose">
        <i class="icon icon-close"></i>
    </div>
    <div class="customSelect__dropdownHeader d-block d-sm-none">
        <div class="customSelect__dropdownTitle">
            Title
        </div>
    </div>
    <div class="customSelect__dropdownItem" data-value="s">
      <div class="customSelect__dropdownItemHeadline">S</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="m">
      <div class="customSelect__dropdownItemHeadline">M</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="l">
      <div class="customSelect__dropdownItemHeadline">L</div>
    </div>
    <div class="customSelect__dropdownItem disabled" data-value="xl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
      <div class="customSelect__dropdownItemText">Not available</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="xxl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
    </div>
  </div>
</div>

.is-loading - is loading
.is-success - is success
.is-error - is error
.customSelect--small - Small Custom Select
.customSelect--small.is-loading - Small Custom Select is loading
.customSelect--small.is-success - Small Custom Select is success
.customSelect--small.is-error - Small Custom Select is error

Styleguide Components.Custom Select
*/
.customSelect {
  position: relative;
  width: 100%;
}
.customSelect__selectedCount {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  font-size: 1.4rem;
  vertical-align: middle;
  margin-top: -2px;
  display: none;
}
.customSelect__selectedCount.is-active {
  display: inline-flex;
}
.customSelect__selected {
  padding-right: 40px;
}
.customSelect__hiddenFormField {
  display: none;
}
.customSelect__dropdown {
  z-index: 103;
  background: var(--main-color-white);
  font-size: var(--main-font-size-small);
  overflow: hidden;
  flex-direction: column;
}
@media (max-width: 767px) {
  .customSelect__dropdown {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    padding: 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    translate: 0 110%;
    transition: 0.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
    z-index: 104;
    max-height: 100vh;
    max-height: 100svh;
  }
}
@media (min-width: 768px) {
  .customSelect__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: 300px;
    max-width: 100vw;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--main-color-middle-gray);
    border-radius: 28px;
    margin-top: 5px;
    display: none;
  }
}
.customSelect__dropdownClose {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
@media (min-width: 768px) {
  .customSelect__dropdownClose {
    display: none;
  }
}
.customSelect__dropdownTitle {
  font-weight: var(--main-font-weight-bold);
  padding-right: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.8rem;
}
.customSelect__dropdownTitle:not(:last-child) {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .customSelect__dropdownTitle {
    display: none;
  }
}
.customSelect__dropdownHeader {
  padding: 10px;
  margin-bottom: 10px;
}
.customSelect__dropdownBody {
  overflow: hidden;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .customSelect__dropdownBody {
    max-height: 260px;
  }
}
.customSelect__dropdownFooter {
  margin-top: 10px;
  padding: 10px;
  padding-bottom: 15px;
  border-top: 1px solid var(--main-color-light-gray);
  text-align: center;
}
@media (max-width: 767px) {
  .customSelect__dropdownFooter {
    padding-bottom: 0;
  }
}
.customSelect__dropdownFooter .button {
  width: 100%;
  margin-bottom: 10px;
}
.customSelect__dropdownFooter .linkWithIcon {
  font-size: var(--main-font-size-small);
}
.customSelect__dropdownFooter .linkWithIcon .icon, .customSelect__dropdownFooter .linkWithIcon .orderboxSummary__headline:before, .customSelect__dropdownFooter .linkWithIcon .headerShopOrder + .mainContent > .container > h1:before, .customSelect__dropdownFooter .linkWithIcon #userBasket > h1:before {
  margin: 0;
}
.customSelect__dropdownItemHeadline {
  font-weight: var(--main-font-weight-bold);
}
.customSelect__dropdownItemText {
  font-size: 0.9em;
  color: var(--main-color-dark-gray);
  padding-left: 20px;
}
.customSelect__dropdownItem {
  padding: 10px 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--main-color-black);
  text-decoration: none;
}
.customSelect__dropdownItem:hover {
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
  text-decoration: none;
}
.customSelect__dropdownItem.is-active {
  background: var(--main-color-light-gray);
}
.customSelect__dropdownItem.disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--main-color-middle-gray);
}
.customSelect__dropdownItem.disabled .customSelect__dropdownItemText {
  color: var(--main-color-middle-gray);
}
.customSelect__dropdownItem--radio, .customSelect__dropdownItem--checkbox {
  padding-left: 40px;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--radio:after, .customSelect__dropdownItem--checkbox:before, .customSelect__dropdownItem--checkbox:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--checkbox:before {
  border: 2px solid var(--main-color-middle-gray);
  border-radius: 28px;
  background: var(--main-color-white);
}
.customSelect__dropdownItem--radio:after, .customSelect__dropdownItem--checkbox:after {
  opacity: 0;
}
.customSelect__dropdownItem--radio.is-active:before, .customSelect__dropdownItem--checkbox.is-active:before {
  border-color: var(--main-color-black);
}
.customSelect__dropdownItem--radio.is-active:after, .customSelect__dropdownItem--checkbox.is-active:after {
  opacity: 1;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--radio:after {
  border-radius: 50%;
}
.customSelect__dropdownItem--radio:after {
  background: var(--main-color-black);
  width: 12px;
  height: 12px;
  margin-left: 4px;
  opacity: 0;
}
.customSelect__dropdownItem--checkbox:after {
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 18px;
}
.customSelect__dropdownItem--checkbox.is-active {
  background: transparent;
}
.customSelect__dropdownItem--checkbox.is-active:before {
  border-color: var(--main-color-black);
}
.customSelect__dropdownItem--checkbox.is-active:after {
  opacity: 1;
}
.customSelect select {
  display: none;
}
.customSelect.is-active .customSelect__selected {
  border-color: var(--main-color-primary);
}
.customSelect.is-active .customSelect__selected:after {
  content: var(--base-icon-angle-up);
}
.customSelect.is-active .customSelect__dropdown {
  display: flex;
}
@media (max-width: 767px) {
  .customSelect.is-active .customSelect__dropdown {
    translate: 0 0;
    pointer-events: auto;
    opacity: 1;
  }
}
.customSelect.is-loading .customSelect__selected, .customSelect.is-success .customSelect__selected, .customSelect.is-error .customSelect__selected {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
  padding-right: 40px;
  padding-left: 10px;
  position: relative;
}
.customSelect.is-loading .customSelect__selected .icon, .customSelect.is-loading .customSelect__selected .orderboxSummary__headline:before, .customSelect.is-loading .customSelect__selected .headerShopOrder + .mainContent > .container > h1:before, .customSelect.is-loading .customSelect__selected #userBasket > h1:before, .customSelect.is-success .customSelect__selected .icon, .customSelect.is-success .customSelect__selected .orderboxSummary__headline:before, .customSelect.is-success .customSelect__selected .headerShopOrder + .mainContent > .container > h1:before, .customSelect.is-success .customSelect__selected #userBasket > h1:before, .customSelect.is-error .customSelect__selected .icon, .customSelect.is-error .customSelect__selected .orderboxSummary__headline:before, .customSelect.is-error .customSelect__selected .headerShopOrder + .mainContent > .container > h1:before, .customSelect.is-error .customSelect__selected #userBasket > h1:before {
  opacity: 0;
}
.customSelect.is-loading .customSelect__selected:after, .customSelect.is-success .customSelect__selected:after, .customSelect.is-error .customSelect__selected:after {
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  transform: translateY(0);
  translate: 0 -50%;
  font-size: 24px;
  margin-top: 0;
}
.customSelect.is-loading .customSelect__selected {
  cursor: wait;
  color: var(--main-color-black) !important;
  background: var(--main-color-gray-base) !important;
  border-color: var(--main-color-gray-base) !important;
}
.customSelect.is-loading .customSelect__selected:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.customSelect.is-success .customSelect__selected {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-white) !important;
}
.customSelect.is-success .customSelect__selected:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect.is-error .customSelect__selected {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.customSelect.is-error .customSelect__selected:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect--small {
  width: auto;
  display: inline-flex;
}
.customSelect--small .customSelect__selected {
  padding: 0;
  padding-right: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.customSelect--small .customSelect__selected:after {
  font-size: 1.2rem;
  right: 0;
  top: calc(50% + 1px);
}
.customSelect--small.is-loading .customSelect__selected, .customSelect--small.is-success .customSelect__selected, .customSelect--small.is-error .customSelect__selected {
  padding-right: 20px;
  padding-left: 0;
}
.customSelect--small.is-loading .customSelect__selected:after, .customSelect--small.is-success .customSelect__selected:after, .customSelect--small.is-error .customSelect__selected:after {
  right: 0;
  font-size: 16px;
  top: calc(50% + 1px);
}
.customSelect--small.is-loading .customSelect__selected {
  cursor: wait;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-black) !important;
}
.customSelect--small.is-success .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-success) !important;
}
.customSelect--small.is-error .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-danger) !important;
}
.customSelect--openRight .customSelect__dropdown {
  left: auto;
  right: 0;
}
.customSelect--openTop .customSelect__dropdown {
  top: auto;
  bottom: 35px;
}

.iconbarIcon__count {
  font-weight: var(--main-font-weight-bold);
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
}
@media (min-width: 1250px) {
  .iconbarIcon__count {
    right: 50%;
    transform: translateX(calc(50% + 12px));
  }
}
@media (max-width: 767.98px) {
  .iconbarIcon__count {
    top: -4px;
  }
}
@media (max-width: 767.98px) {
  .iconbarIcon__icon {
    width: 35px;
    height: 35px;
  }
}
.iconbarIcon:hover .iconbarIcon__icon {
  color: var(--main-color-secondary);
}
.iconbarIcon:hover .iconbarIcon__count {
  color: var(--main-color-black);
}

@media (max-width: 767.98px) {
  .iconbarItem--contact, .iconbarItem--solarPro {
    display: none;
  }
}
.iconbarItem--language .iconbarIcon__label {
  text-transform: uppercase;
}
.iconbarItem--becomeReseller .iconbarIcon--becomeReseller {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
  border-radius: 25px;
}
.iconbarItem--becomeReseller .iconbarIcon--becomeReseller:hover, .iconbarItem--becomeReseller .iconbarIcon--becomeReseller:focus {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
.iconbarItem--becomeReseller .iconbarIcon--becomeReseller:hover .iconbarIcon__icon, .iconbarItem--becomeReseller .iconbarIcon--becomeReseller:focus .iconbarIcon__icon {
  color: var(--main-color-white);
}
.iconbarItem--becomeReseller .iconbarIcon--becomeReseller:active {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
.iconbarItem--becomeReseller .iconbarIcon--becomeReseller:active .iconbarIcon__icon {
  color: var(--main-color-white);
}
.iconbarItem--becomeReseller.hoverintent .iconbarIcon--becomeReseller {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}
.iconbarItem--becomeReseller.hoverintent .iconbarIcon__label {
  color: var(--main-color-black);
}
@media (min-width: 768px) {
  .iconbarItem--becomeReseller {
    display: none;
  }
}

.iconbarHover {
  border-radius: 2px;
}

.iconList {
  display: flex;
  gap: 12px;
  margin: 0;
}
.iconList a {
  margin: 0;
  color: var(--main-color-dark-gray);
}

.infieldInputGroup > label {
  margin-top: 0;
}
@media (min-width: 768px) {
  .infieldInputGroup > label {
    top: 50%;
    transform: translate(0, -50%);
  }
}

.inputGroup__addon {
  border: 2px solid var(--main-color-middle-gray);
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 28px;
}
@media (min-width: 768px) {
  .inputGroup__addon {
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.inputGroup__addon:first-child {
  margin-right: 0;
}
.inputGroup__addon:last-child {
  margin-left: 0;
}
.inputGroup__addon .button {
  min-width: 0;
  border-radius: 0;
  margin: -1px;
}
.inputGroup__addon .icon, .inputGroup__addon .orderboxSummary__headline:before, .inputGroup__addon .headerShopOrder + .mainContent > .container > h1:before, .inputGroup__addon #userBasket > h1:before {
  line-height: 1;
  display: block;
  font-size: 20px;
  color: var(--main-color-white);
}
.inputGroup__addon .icon:before, .inputGroup__addon .orderboxSummary__headline:before, .inputGroup__addon .headerShopOrder + .mainContent > .container > h1:before, .inputGroup__addon #userBasket > h1:before {
  content: var(--base-icon-angle-right);
}
@media (min-width: 768px) {
  .inputGroup__addon .icon, .inputGroup__addon .orderboxSummary__headline:before, .inputGroup__addon .headerShopOrder + .mainContent > .container > h1:before, .inputGroup__addon #userBasket > h1:before {
    font-size: 24px;
  }
}
.inputGroup__addon + input,
.inputGroup__addon + select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon--clickable {
  cursor: pointer;
}
.inputGroup__addon--clickable:hover {
  color: var(--main-color-primary);
}
.inputGroup button.inputGroup__addon {
  min-width: 42px;
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
}
@media (min-width: 768px) {
  .inputGroup button.inputGroup__addon {
    min-width: 50px;
  }
}
.inputGroup button.inputGroup__addon:hover, .inputGroup button.inputGroup__addon:focus, .inputGroup button.inputGroup__addon:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-white);
}
.inputGroup.is-focus .inputGroup__addon {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
}
.inputGroup.is-inactive .inputGroup__addon {
  display: none;
}

.orderboxSummary__buttons .js-toggleLinkSlide:hover {
  text-decoration-color: var(--main-color-secondary) !important;
}
.orderboxSummary__buttons .js-toggleLinkSlide:hover * {
  text-decoration-color: var(--main-color-secondary) !important;
}

#coupon_order a {
  text-decoration: underline;
}
#coupon_order a:hover {
  text-decoration-color: var(--main-color-secondary) !important;
}
#coupon_order a:hover * {
  text-decoration-color: var(--main-color-secondary) !important;
}

.linkWithIcon .icon:first-child, .linkWithIcon .orderboxSummary__headline:first-child:before, .linkWithIcon .headerShopOrder + .mainContent > .container > h1:first-child:before, .linkWithIcon #userBasket > h1:first-child:before {
  margin-right: 7px;
}
.linkWithIcon .icon:last-child, .linkWithIcon .orderboxSummary__headline:last-child:before, .linkWithIcon .headerShopOrder + .mainContent > .container > h1:last-child:before, .linkWithIcon #userBasket > h1:last-child:before {
  margin-left: 7px;
}
.linkWithIcon span {
  text-decoration: underline;
}
.linkWithIcon:hover span, .linkWithIcon:focus span, .linkWithIcon:active span {
  color: var(--main-color-black);
  text-decoration-color: var(--main-color-primary);
}

.mainnav a {
  color: var(--main-color-black);
}
.mainnav a:hover {
  color: var(--main-color-black);
}
.mainnav > ul > li.hoverintent > a, .mainnav > ul > li.hoverintent > a.is-active {
  color: var(--main-color-black);
}
.mainnav > ul > li.hoverintent > a:after, .mainnav > ul > li.hoverintent > a.is-active:after {
  transform: scale(1);
}
.mainnav > ul > li a.is-active {
  color: var(--main-color-black);
}
.mainnav > ul > li a.is-active:after {
  transform: scale(1);
  background: var(--main-color-primary);
}
.mainnav > ul > li a.is-active:hover, .mainnav > ul > li a.is-active:focus, .mainnav > ul > li a.is-active:active {
  color: var(--main-color-black);
}
.mainnav > ul > li > ul {
  top: 100%;
  margin-top: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-left: 0;
}
.mainnav > ul > li > ul:before {
  border-width: 0 16px 16px 16px;
}
.mainnav > ul > li > ul > li:not(:last-child) {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--main-color-middle-gray);
}
.mainnav > ul > li > ul > li > a {
  display: inline-flex;
}
.mainnav > ul > li > ul > li:hover a {
  color: var(--main-color-black);
}
.mainnav > ul > li > ul > li.is-active:hover > a {
  color: var(--main-color-black);
}
.mainnav ul {
  margin: 0;
  display: flex;
  gap: 27px;
}
.mainnav ul li {
  padding: 0;
}
.mainnav ul li a {
  font-size: 19px;
  font-weight: var(--main-font-weight-bold);
  position: relative;
  display: block;
  letter-spacing: 0.03em;
}
.mainnav ul li a:after {
  content: "";
  width: 100%;
  height: 2px;
  transform: scale(0);
  background: var(--main-color-primary);
  position: absolute;
  top: 100%;
  left: 0;
  transition: all 0.2s ease-in-out;
}
.mainnav ul li a:hover {
  color: var(--main-color-black);
}
.mainnav ul li a:hover:after {
  transform: scale(1);
}
.mainnav ul li.is-active-tree a:after {
  transform: scale(1);
  background: var(--main-color-secondary);
}
.mainnav ul li.is-active-tree a:hover {
  color: var(--main-color-black);
}
.mainnav ul.nav--content > li > a {
  font-weight: var(--main-font-weight-bold);
}
@media (max-width: 1840px) {
  .mainnav ul {
    gap: 16px;
  }
  .mainnav ul li a {
    font-size: 17px;
  }
}
@media (max-width: 1620px) {
  .mainnav ul {
    gap: 12px;
  }
  .mainnav ul li a {
    font-size: 16px;
  }
}
.mainnav__seperator {
  width: 2px;
  background: var(--main-color-black);
  height: 19px;
}

@media (min-width: 768px) {
  .modal__dialog {
    border-radius: 16px;
  }
}
.modal--xs .modal__dialog {
  max-width: 540px;
}

.emptybox {
  border-radius: 16px;
  padding: 20px;
  background-color: var(--main-color-light-gray);
}
@media (min-width: 1024px) {
  .emptybox {
    padding: 30px;
  }
}

.pagination {
  gap: 10px;
}
.pagination__item {
  margin: 0;
  height: 28px;
  width: 28px;
  border: none;
}
.pagination__item--active {
  color: var(--main-color-white) !important;
}
.pagination .icon, .pagination .orderboxSummary__headline:before, .pagination .headerShopOrder + .mainContent > .container > h1:before, .pagination #userBasket > h1:before {
  font-size: 40px;
  color: var(--main-color-primary);
}

span.pagination__item,
button.pagination__item,
a.pagination__item {
  color: var(--main-color-black);
  cursor: pointer;
}
span.pagination__item:hover, span.pagination__item:focus, span.pagination__item:active,
button.pagination__item:hover,
button.pagination__item:focus,
button.pagination__item:active,
a.pagination__item:hover,
a.pagination__item:focus,
a.pagination__item:active {
  background: var(--main-color-gray-base);
  color: var(--main-color-black);
  text-decoration: none;
}
span.pagination__item--active,
button.pagination__item--active,
a.pagination__item--active {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}
span.pagination__item--active:hover, span.pagination__item--active:focus, span.pagination__item--active:active,
button.pagination__item--active:hover,
button.pagination__item--active:focus,
button.pagination__item--active:active,
a.pagination__item--active:hover,
a.pagination__item--active:focus,
a.pagination__item--active:active {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  text-decoration: none;
  pointer-events: none;
  cursor: initial !important;
}
span.pagination__item--inactive,
button.pagination__item--inactive,
a.pagination__item--inactive {
  pointer-events: none;
}
span.pagination__item--inactive .icon, span.pagination__item--inactive .orderboxSummary__headline:before, span.pagination__item--inactive .headerShopOrder + .mainContent > .container > h1:before, span.pagination__item--inactive #userBasket > h1:before,
button.pagination__item--inactive .icon,
button.pagination__item--inactive .orderboxSummary__headline:before,
button.pagination__item--inactive .headerShopOrder + .mainContent > .container > h1:before,
button.pagination__item--inactive #userBasket > h1:before,
a.pagination__item--inactive .icon,
a.pagination__item--inactive .orderboxSummary__headline:before,
a.pagination__item--inactive .headerShopOrder + .mainContent > .container > h1:before,
a.pagination__item--inactive #userBasket > h1:before {
  opacity: 0.5;
  cursor: not-allowed;
}
span.pagination__item--prev:hover, span.pagination__item--prev:focus, span.pagination__item--prev:active, span.pagination__item--next:hover, span.pagination__item--next:focus, span.pagination__item--next:active,
button.pagination__item--prev:hover,
button.pagination__item--prev:focus,
button.pagination__item--prev:active,
button.pagination__item--next:hover,
button.pagination__item--next:focus,
button.pagination__item--next:active,
a.pagination__item--prev:hover,
a.pagination__item--prev:focus,
a.pagination__item--prev:active,
a.pagination__item--next:hover,
a.pagination__item--next:focus,
a.pagination__item--next:active {
  background: transparent;
}
span.pagination__item--prev:hover .icon, span.pagination__item--prev:hover .orderboxSummary__headline:before, span.pagination__item--prev:hover .headerShopOrder + .mainContent > .container > h1:before, span.pagination__item--prev:hover #userBasket > h1:before, span.pagination__item--prev:focus .icon, span.pagination__item--prev:focus .orderboxSummary__headline:before, span.pagination__item--prev:focus .headerShopOrder + .mainContent > .container > h1:before, span.pagination__item--prev:focus #userBasket > h1:before, span.pagination__item--prev:active .icon, span.pagination__item--prev:active .orderboxSummary__headline:before, span.pagination__item--prev:active .headerShopOrder + .mainContent > .container > h1:before, span.pagination__item--prev:active #userBasket > h1:before, span.pagination__item--next:hover .icon, span.pagination__item--next:hover .orderboxSummary__headline:before, span.pagination__item--next:hover .headerShopOrder + .mainContent > .container > h1:before, span.pagination__item--next:hover #userBasket > h1:before, span.pagination__item--next:focus .icon, span.pagination__item--next:focus .orderboxSummary__headline:before, span.pagination__item--next:focus .headerShopOrder + .mainContent > .container > h1:before, span.pagination__item--next:focus #userBasket > h1:before, span.pagination__item--next:active .icon, span.pagination__item--next:active .orderboxSummary__headline:before, span.pagination__item--next:active .headerShopOrder + .mainContent > .container > h1:before, span.pagination__item--next:active #userBasket > h1:before,
button.pagination__item--prev:hover .icon,
button.pagination__item--prev:hover .orderboxSummary__headline:before,
button.pagination__item--prev:hover .headerShopOrder + .mainContent > .container > h1:before,
button.pagination__item--prev:hover #userBasket > h1:before,
button.pagination__item--prev:focus .icon,
button.pagination__item--prev:focus .orderboxSummary__headline:before,
button.pagination__item--prev:focus .headerShopOrder + .mainContent > .container > h1:before,
button.pagination__item--prev:focus #userBasket > h1:before,
button.pagination__item--prev:active .icon,
button.pagination__item--prev:active .orderboxSummary__headline:before,
button.pagination__item--prev:active .headerShopOrder + .mainContent > .container > h1:before,
button.pagination__item--prev:active #userBasket > h1:before,
button.pagination__item--next:hover .icon,
button.pagination__item--next:hover .orderboxSummary__headline:before,
button.pagination__item--next:hover .headerShopOrder + .mainContent > .container > h1:before,
button.pagination__item--next:hover #userBasket > h1:before,
button.pagination__item--next:focus .icon,
button.pagination__item--next:focus .orderboxSummary__headline:before,
button.pagination__item--next:focus .headerShopOrder + .mainContent > .container > h1:before,
button.pagination__item--next:focus #userBasket > h1:before,
button.pagination__item--next:active .icon,
button.pagination__item--next:active .orderboxSummary__headline:before,
button.pagination__item--next:active .headerShopOrder + .mainContent > .container > h1:before,
button.pagination__item--next:active #userBasket > h1:before,
a.pagination__item--prev:hover .icon,
a.pagination__item--prev:hover .orderboxSummary__headline:before,
a.pagination__item--prev:hover .headerShopOrder + .mainContent > .container > h1:before,
a.pagination__item--prev:hover #userBasket > h1:before,
a.pagination__item--prev:focus .icon,
a.pagination__item--prev:focus .orderboxSummary__headline:before,
a.pagination__item--prev:focus .headerShopOrder + .mainContent > .container > h1:before,
a.pagination__item--prev:focus #userBasket > h1:before,
a.pagination__item--prev:active .icon,
a.pagination__item--prev:active .orderboxSummary__headline:before,
a.pagination__item--prev:active .headerShopOrder + .mainContent > .container > h1:before,
a.pagination__item--prev:active #userBasket > h1:before,
a.pagination__item--next:hover .icon,
a.pagination__item--next:hover .orderboxSummary__headline:before,
a.pagination__item--next:hover .headerShopOrder + .mainContent > .container > h1:before,
a.pagination__item--next:hover #userBasket > h1:before,
a.pagination__item--next:focus .icon,
a.pagination__item--next:focus .orderboxSummary__headline:before,
a.pagination__item--next:focus .headerShopOrder + .mainContent > .container > h1:before,
a.pagination__item--next:focus #userBasket > h1:before,
a.pagination__item--next:active .icon,
a.pagination__item--next:active .orderboxSummary__headline:before,
a.pagination__item--next:active .headerShopOrder + .mainContent > .container > h1:before,
a.pagination__item--next:active #userBasket > h1:before {
  color: var(--main-color-secondary);
}
span.pagination__item--prev .icon-angle-left:before, span.pagination__item--next .icon-angle-left:before,
button.pagination__item--prev .icon-angle-left:before,
button.pagination__item--next .icon-angle-left:before,
a.pagination__item--prev .icon-angle-left:before,
a.pagination__item--next .icon-angle-left:before {
  content: var(--base-icon-arrow-left);
}
span.pagination__item--prev .icon-angle-right:before, span.pagination__item--next .icon-angle-right:before,
button.pagination__item--prev .icon-angle-right:before,
button.pagination__item--next .icon-angle-right:before,
a.pagination__item--prev .icon-angle-right:before,
a.pagination__item--next .icon-angle-right:before {
  content: var(--base-icon-arrow-right);
}

.radioListItem {
  border-radius: 28px;
  border-width: 2px;
}
.radioListItem input + i {
  border-width: 2px;
  height: 24px;
  width: 24px;
}
.radioListItem input + i:after {
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: var(--main-color-black);
}
.radioListItem:has(input:checked) i {
  border-color: var(--main-color-black);
}

.radioList--small .radioListItem {
  margin-bottom: -2px;
}
.radioList--small .radioListItem:first-child {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}
.radioList--small .radioListItem:last-child {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  margin-bottom: 0;
}

.searchBar {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--main-color-black);
}
.searchBar input {
  background: transparent;
  border: none;
  padding-left: 0;
}
.searchBar input::placeholder {
  opacity: 1;
  color: var(--main-color-dark-gray);
}
@media (max-width: 767.98px) {
  .searchBar input {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.searchBar .inputGroup__addon, .searchBar button.inputGroup__addon {
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--main-color-dark-gray);
  padding: 0;
}
.searchBar .inputGroup__addon .icon, .searchBar .inputGroup__addon .orderboxSummary__headline:before, .searchBar .inputGroup__addon .headerShopOrder + .mainContent > .container > h1:before, .searchBar .inputGroup__addon #userBasket > h1:before, .searchBar button.inputGroup__addon .icon {
  font-size: 28px;
}
@media (max-width: 767.98px) {
  .searchBar .inputGroup__addon .icon, .searchBar .inputGroup__addon .orderboxSummary__headline:before, .searchBar .inputGroup__addon .headerShopOrder + .mainContent > .container > h1:before, .searchBar .inputGroup__addon #userBasket > h1:before, .searchBar button.inputGroup__addon .icon {
    font-size: 24px;
  }
}
.searchBar .inputGroup__addon:hover, .searchBar button.inputGroup__addon:hover {
  background: transparent;
  color: var(--main-color-dark-gray);
}
.searchBar.is-focus {
  box-shadow: none;
}
.searchBar.is-focus .inputGroup__addon {
  color: var(--main-color-black);
}
.searchBar.is-focus .inputGroup__addon:hover {
  color: var(--main-color-secondary);
  cursor: pointer;
}

.shareLink {
  border-radius: 28px;
  border-width: 2px;
}

.subnav > ul > li > a:after {
  content: "";
  width: 100%;
  height: 2px;
  transform: scale(0);
  background: var(--main-color-secondary);
  position: absolute;
  top: 100%;
  left: 0;
  transition: all 0.2s ease-in-out;
}
.subnav > ul > li > a:hover, .subnav > ul > li > a.is-active {
  color: var(--main-color-black);
}
.subnav > ul > li > a:hover:after, .subnav > ul > li > a.is-active:after {
  transform: scale(1);
}
.subnav > ul ul a {
  text-decoration: underline;
}
.subnav > ul ul a:before {
  display: none;
}
.subnav > ul ul a:hover, .subnav > ul ul a.is-active {
  text-decoration: underline;
  text-decoration-color: var(--main-color-secondary);
  color: var(--main-color-black);
}

.account .subnav > ul > li > ul > li:last-child {
  display: none;
}

.tag {
  border-radius: 28px;
  gap: 5px;
}
.tag.is-loading:after, .tag.is-success:after, .tag.is-error:after {
  position: relative;
  translate: 0;
  top: auto;
  left: auto;
}

.tags {
  margin: 0;
  gap: 10px;
}
.tags .tag {
  margin: 0;
}
@media (max-width: 1023px) {
  .tags {
    padding: 0;
    margin: 0;
  }
}

.tag {
  background: var(--main-color-light-gray);
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  font-size: var(--main-font-size-small);
  cursor: pointer;
  text-decoration: none;
  color: var(--main-color-black);
  line-height: 1;
  text-align: center;
  border-radius: 28px;
  gap: 5px;
}
.tag:hover, .tag.is-active {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}
.tag:focus, .tag:active {
  background: var(--main-color-primary-dark);
  color: var(--main-color-white);
  text-decoration: none;
}
.tag .icon, .tag .orderboxSummary__headline:before, .tag .headerShopOrder + .mainContent > .container > h1:before, .tag #userBasket > h1:before {
  font-size: 1.4em;
  margin-left: 5px;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.tag.is-loading, .tag.is-success, .tag.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  color: var(--main-color-black) !important;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.tag.is-loading .icon, .tag.is-loading .orderboxSummary__headline:before, .tag.is-loading .headerShopOrder + .mainContent > .container > h1:before, .tag.is-loading #userBasket > h1:before, .tag.is-success .icon, .tag.is-success .orderboxSummary__headline:before, .tag.is-success .headerShopOrder + .mainContent > .container > h1:before, .tag.is-success #userBasket > h1:before, .tag.is-error .icon, .tag.is-error .orderboxSummary__headline:before, .tag.is-error .headerShopOrder + .mainContent > .container > h1:before, .tag.is-error #userBasket > h1:before {
  opacity: 0;
}
.tag.is-loading:after, .tag.is-success:after, .tag.is-error:after {
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 20px;
  position: relative;
  translate: 0;
  top: auto;
  left: auto;
}
.tag.is-loading {
  cursor: wait;
  color: var(--main-color-black) !important;
}
.tag.is-loading:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.tag.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-black) !important;
}
.tag.is-success:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.tag.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.tag.is-error:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  gap: 10px;
}
.tags .tag {
  margin: 0;
}
@media (max-width: 1023px) {
  .tags {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    max-width: 100vw;
    padding: 0;
    margin: 0;
  }
  .tags > * {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

.navToggler {
  width: 30px;
  height: 30px;
}
.navToggler__bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  position: absolute;
  left: 2px;
  width: calc(100% - 4px);
  width: -moz-calc(100% - 4px);
  width: -webkit-calc(100% - 4px);
  width: -o-calc(100% - 4px);
}
.navToggler__bar:first-child {
  top: 7px;
}
.navToggler__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.navToggler__bar:last-child {
  bottom: 7px;
}
@media (max-width: 1023.98px) {
  .navToggler {
    width: 34px;
    height: 32px;
  }
  .navToggler__bar {
    left: 0;
    width: 100%;
  }
  .navToggler__bar:first-child {
    top: 2px;
  }
  .navToggler__bar:last-child {
    bottom: 2px;
  }
}
.navToggler.is-active .navToggler__bar:first-child {
  rotate: 45deg;
  top: 18px;
}
.navToggler.is-active .navToggler__bar:nth-child(2) {
  height: 0;
  width: 0;
  left: 50%;
}
.navToggler.is-active .navToggler__bar:last-child {
  rotate: -45deg;
  bottom: 11px;
}

.trustBar {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  font-size: 1.9rem;
  line-height: 1.3688;
  color: var(--main-color-white);
}
.trustBar .textcontent {
  padding-top: 7px;
  padding-bottom: 7px;
}

.banner .contentText {
  padding: 40px;
  color: var(--main-color-black);
}
.banner .contentText .textcontent {
  max-width: 620px;
  background: var(--main-color-white);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.banner .contentText .textcontent > * {
  margin: 0 !important;
}
.banner .contentText .textcontent:after {
  content: var(--base-icon-angle);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  right: -7px;
  bottom: -15px;
  color: var(--main-color-primary);
  font-size: 85px;
  transition: all 0.2s ease-in-out;
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
  .banner .contentText .textcontent h2 {
    font-size: 18px;
  }
  .banner .contentText .textcontent h3 {
    font-size: 15px;
  }
  .banner .contentText .textcontent:after {
    right: -2px;
    bottom: -8px;
    font-size: 67px;
  }
}
.banner .link .contentText:hover .textcontent .button--primary {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
}
.banner .link .contentText:hover .textcontent .button--secondary {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}
.banner .link .contentText:hover .textcontent:after {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bannerGroup .banner .contentImage:after {
  display: none;
}
.bannerGroup .banner .contentText {
  padding: 40px;
}
@media (max-width: 767.98px) {
  .bannerGroup .banner .contentText {
    padding: 10px;
  }
}

.bannerGroup {
  aspect-ratio: 3.1111;
  grid-template-areas: "banner1 banner2" "banner1 banner3";
  grid-template-columns: 57.917% 1fr;
  grid-template-rows: 1fr 1fr;
}
.bannerGroup > div {
  border-radius: 16px;
  overflow: hidden;
  margin: 0 !important;
}
.bannerGroup > div:first-child .contentImage {
  aspect-ratio: unset;
  max-height: none;
}
.bannerGroup > div:nth-child(2) {
  grid-area: banner2;
}
.bannerGroup > div:nth-child(3) {
  grid-area: banner3;
}
@media (max-width: 1720px) {
  .bannerGroup {
    aspect-ratio: 2.5;
  }
}
@media (max-width: 1440px) {
  .bannerGroup {
    aspect-ratio: unset;
    grid-template-areas: "banner1 banner1" "banner2 banner3";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 2fr 1fr;
  }
  .bannerGroup > div:first-child {
    aspect-ratio: 2.5;
  }
}
@media (max-width: 1249.98px) {
  .bannerGroup {
    grid-template-rows: 1.6fr 1fr;
  }
}
@media (max-width: 1023.98px) {
  .bannerGroup {
    grid-template-areas: "banner1" "banner2" "banner3";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .bannerGroup > div:first-child {
    aspect-ratio: 1.75;
  }
  .bannerGroup > div:not(:first-child) {
    aspect-ratio: 2.75;
  }
}
@media (max-width: 767.98px) {
  .bannerGroup {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bannerGroup > div:first-child {
    aspect-ratio: 1;
  }
  .bannerGroup > div:not(:first-child) {
    aspect-ratio: 1.53846;
  }
}
.bannerGroup .contentImage {
  position: relative;
}
.bannerGroup .contentImage.imageOverlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #20546B 0%, #00173F 100%);
  opacity: 0.7;
}

.dcCookieBar {
  position: fixed;
  left: 0;
  bottom: 0;
  line-height: 1.3;
  width: 100%;
  min-width: 320px;
  box-shadow: 0 0 10px black;
  z-index: 6000;
  padding: 15px;
  padding-left: 90px;
  background-color: var(--main-color-white);
  font-size: var(--main-font-size-base);
  color: var(--main-color-black);
  box-sizing: border-box;
}
.dcCookieBar a {
  color: var(--main-color-black);
  text-decoration: underline;
}
.dcCookieBar a:hover {
  color: var(--main-color-primary);
}
.dcCookieBar__button {
  line-height: 1.6;
  padding: 5px 20px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-width: 40px;
  width: auto;
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-white);
  border: none;
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  border-radius: 28px;
  transition: 0.2s ease-in-out;
}
.dcCookieBar__button:hover {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}
.dcCookieBar__button:active, .dcCookieBar__button:focus {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
@media (max-width: 1024px) {
  .dcCookieBar__button {
    font-size: var(--main-font-size-base);
  }
}
.dcCookieBar__buttonaction {
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
}
.dcCookieBar__buttonaction:hover {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}
.dcCookieBar__buttonaction:active, .dcCookieBar__buttonaction:focus {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-white);
}
.dcCookieBar__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 7.5px;
}
.dcCookieBar__buttons .dcCookieBar__button {
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  flex-basis: 100% !important;
}
.dcCookieBar__main {
  text-align: center;
}
.dcCookieBar__text {
  padding-left: 7.5px;
  padding-right: 7.5px;
  padding-bottom: 15px;
  text-align: left;
}
.dcCookieBar__links {
  text-align: right;
  font-size: var(--main-font-size-small);
}
.dcCookieBar__links a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}
.dcCookieBar__center {
  text-align: center;
  margin-top: 15px;
}
.dcCookieBar__center a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}

.dcCookieModal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(204, 204, 204, 0.7);
  color: var(--main-color-black);
  display: none;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 6001;
  font-size: var(--main-font-size-base);
}
@media (min-width: 441px) {
  .dcCookieModal.dcCookieTopPadding {
    padding-top: 150px;
  }
}
.dcCookieModal__dialog {
  background-color: #ffffff;
  padding: 30px;
  width: 600px;
  max-width: 100%;
  margin: 15px auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  border-radius: 28px;
}
@media (max-width: 767px) {
  .dcCookieModal__dialog {
    padding: 15px;
  }
}
.dcCookieModal a {
  color: var(--main-color-black);
  text-decoration: underline;
  cursor: pointer;
}
.dcCookieModal a:hover {
  color: var(--main-color-primary);
}
.dcCookieModal .dcCookieBar__button {
  color: var(--main-color-white);
  background-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  text-decoration: none;
  cursor: pointer;
}
.dcCookieModal .dcCookieBar__button:hover {
  background-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}
.dcCookieModal .dcCookieBar__button:active, .dcCookieModal .dcCookieBar__button:focus {
  background-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
.dcCookieModal .dcCookieBar__buttonaction {
  border-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
  background-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  cursor: pointer;
}
.dcCookieModal .dcCookieBar__buttonaction:hover {
  background-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}
.dcCookieModal .dcCookieBar__buttonaction:active, .dcCookieModal .dcCookieBar__buttonaction:focus {
  background-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-white);
}
.dcCookieModal .dcCookieBar__links {
  margin-top: 15px;
  text-align: left;
}
.dcCookieModal .dcCookieBar__links a {
  margin-left: 0;
  margin-right: 15px;
}
.dcCookieModal.open {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}

.dcCookieModalBody__headline {
  font-size: 20px;
  margin-bottom: 15px;
}
.dcCookieModalBody__info {
  margin-bottom: 15px;
}

.dcCookieBarSwitch {
  width: 50px;
  position: relative;
  height: 26px;
  display: inline-block;
  cursor: pointer;
  border-radius: 13px;
  margin: 0;
  background-color: var(--main-color-light-gray);
}
.dcCookieBarSwitch span {
  font-style: normal;
  position: absolute;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: var(--main-color-black);
  top: 50%;
  margin-top: -10px;
  display: block;
  pointer-events: none;
  margin-bottom: 0;
  border-radius: 50%;
  transition: 0.1s ease-in-out;
}
.dcCookieBarSwitch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
}
.dcCookieBarSwitch input:checked + span {
  left: 100%;
  margin-left: -23px;
  background-color: var(--main-color-primary);
}
.dcCookieBarSwitch__label {
  color: var(--main-color-black);
  margin-bottom: 0;
  line-height: 26px;
  margin-right: 10px;
}

.dcCookieBarBox {
  padding: 15px;
  border: 2px solid var(--main-color-light-gray);
  margin-top: 15px;
}
.dcCookieBarBox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.dcCookieBarBox__title {
  margin-right: 30px;
  font-size: 16px;
}
.dcCookieBarBox__info {
  margin-bottom: 15px;
}

.dcCookieBarMoreBox {
  margin-top: 15px;
}
.dcCookieBarMoreBox.open {
  display: block;
}

.dcCookieBarTable {
  margin-top: 15px;
}
.dcCookieBarTable__row {
  padding: 8px 0;
  border-bottom: 1px solid var(--main-color-light-gray);
}
.dcCookieBarTable__row:last-child {
  border-bottom: 0;
}
.dcCookieBarTable__cell > a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 90%;
}
.dcCookieBarTable__cell--description {
  font-weight: bold;
  font-size: 1.2em;
}
.dcCookieBarTable__cell--switch {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .dcCookieBarTable__row {
    display: flex;
    align-items: center;
  }
  .dcCookieBarTable__cell {
    flex-grow: 1;
    text-align: left;
  }
  .dcCookieBarTable__cell:first-child {
    padding-right: 10px;
    flex-shrink: 0;
    flex-grow: 0;
    width: 200px;
  }
  .dcCookieBarTable__cell:first-child.dcCookieBarTable__cell--description {
    width: 50%;
  }
  .dcCookieBarTable__cell--switch {
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .dcCookieBarTable__cell:first-child {
    margin-bottom: 4px;
  }
  .dcCookieBarTable__cell:first-child:after {
    content: ":";
  }
}

.dcCookieBarRecurringTable__row {
  padding: 8px 0;
  border-bottom: 1px solid var(--main-color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dcCookieBarRecurringTable__row:last-child {
  border-bottom: 0;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label {
  position: relative;
  padding-left: 20px;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--main-color-black);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  transition: 0.2s ease-in-out;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label.active:before {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  border-color: transparent transparent transparent var(--main-color-primary);
}
.dcCookieBarRecurringTable__row--child {
  padding-left: 20px;
}
.dcCookieBarRecurringTable__label {
  font-weight: bold;
}

.dcCookieBarHistoryTable {
  font-size: 1.1rem;
}
.dcCookieBarHistoryTable__row {
  padding: 8px 0;
  border-bottom: 1px solid var(--main-color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dcCookieBarHistoryTable__row:last-child {
  border-bottom: 0;
}
.dcCookieBarHistoryTable__label {
  flex-grow: 1;
  margin-right: 8px;
}
.dcCookieBarHistoryTable__badge {
  width: 12px;
  height: 12px;
  background-color: red;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 8px;
  margin-top: 1px;
}
.dcCookieBarHistoryTable__badge.active {
  background-color: green;
}
.dcCookieBarHistoryTable__active {
  margin-left: 8px;
  flex-shrink: 0;
  width: 60px;
  text-align: right;
}

.dcCookieBarRecurring {
  z-index: 6001;
  position: fixed;
  left: 20px;
  bottom: 20px;
  box-sizing: border-box;
}

.dcCookieBarRecurringBox {
  position: fixed;
  z-index: 6001;
  left: 20px;
  bottom: 80px;
  background-color: var(--main-color-white);
  box-shadow: 0 0 20px black;
  width: 400px;
  font-size: var(--main-font-size-base);
}
.dcCookieBarRecurringBox__close {
  height: 14px;
  width: 14px;
  cursor: pointer;
}
.dcCookieBarRecurringBox__close svg path {
  fill: #000000;
}
.dcCookieBarRecurringBox__close:hover svg path {
  fill: var(--main-color-primary);
}
.dcCookieBarRecurringBox__head {
  padding: 15px;
  border-bottom: 1px solid var(--main-color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dcCookieBarRecurringBox__title {
  margin-right: 15px;
}
.dcCookieBarRecurringBox__footer .dcCookieBar__button {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 440px) {
  .dcCookieBarRecurringBox {
    max-width: 100%;
    left: 0;
    bottom: 0;
    max-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
  }
}

.dcCookieBarRecurringButton {
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px black;
}
.dcCookieBarRecurringButton:hover, .dcCookieBarRecurringButton:focus {
  background-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
}
.dcCookieBarRecurringButton svg path {
  fill: #000000;
}
.dcCookieBarRecurringButton .closelabel {
  display: none;
  position: relative;
  top: 3px;
}
.dcCookieBarRecurringButton .openlabel {
  position: relative;
  top: 6px;
}
.dcCookieBarRecurringButton.open .openlabel {
  display: none;
}
.dcCookieBarRecurringButton.open .closelabel {
  display: block;
}

.dcCookieBarTab {
  text-align: center;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
}
.dcCookieBarTab:not(.active) {
  background-color: var(--main-color-light-gray);
}
.dcCookieBarTab:hover {
  background-color: var(--main-color-white);
}

.dcCookieBarTabContent {
  padding: 15px;
  display: none;
  height: 240px;
  max-height: 50vh;
  overflow: hidden;
  overflow-y: auto;
}
.dcCookieBarTabContent.active {
  display: block;
}

.dcCookieBarTabs__header {
  display: flex;
}
.dcCookieBarTabs__header .dcCookieBarTab {
  flex-grow: 1;
  width: 50%;
}

.dcCookieExternal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dcCookieExternal__info {
  padding: 30px;
  border: 1px solid var(--main-color-gray-base);
  background-color: #ffffff;
}
.dcCookieExternal__headline {
  padding-bottom: 20px;
}
.dcCookieExternal__button {
  line-height: 1.6;
  padding: 5px 20px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-width: 40px;
  width: auto;
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-white);
  border: 1px solid var(--main-color-gray-base);
  background-color: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  transition: 0.2s ease-in-out;
}
.dcCookieExternal__button:hover {
  background-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}
.dcCookieExternal__button:active, .dcCookieExternal__button:focus {
  background-color: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}

.hidden {
  display: none !important;
}

.filegallery {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filegalleryFile {
  margin-bottom: 0;
  color: var(--main-color-black);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  text-decoration: none;
}
.filegalleryFile .icon, .filegalleryFile .orderboxSummary__headline:before, .filegalleryFile .headerShopOrder + .mainContent > .container > h1:before, .filegalleryFile #userBasket > h1:before {
  margin: 2px 0 0;
  font-size: 1.4em;
  line-height: 1;
}
.filegalleryFile span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filegalleryFile:hover {
  color: var(--main-color-black);
}
.filegalleryFile:hover span {
  text-decoration-color: var(--main-color-secondary);
}
.filegalleryFile:hover .icon, .filegalleryFile:hover .orderboxSummary__headline:before, .filegalleryFile:hover .headerShopOrder + .mainContent > .container > h1:before, .filegalleryFile:hover #userBasket > h1:before {
  color: var(--main-color-secondary);
}

.scrollbar .swiper-wrapper {
  align-items: center;
}
.scrollbar__img img {
  height: 100% !important;
  width: auto;
  filter: grayscale(1);
  transition: filter 0.1s;
}
.scrollbar__img:hover img {
  filter: grayscale(0);
}

.container .scrollbar {
  padding-left: 20px;
  padding-right: 20px;
}

.teaserBox:not(:has(.link)), .teaserBox > .link {
  background: var(--main-color-white);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-decoration: none;
}
.teaserBox:not(:has(.link)) .textcontent, .teaserBox > .link .textcontent {
  height: 100%;
}
.teaserBox:not(:has(.link)) .contentImage img, .teaserBox > .link .contentImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.teaserBox:not(:has(.link)) .contentText, .teaserBox > .link .contentText {
  position: relative;
  padding: 40px;
  grid-column: span 2;
}
.teaserBox:not(:has(.link)) .contentText h2, .teaserBox > .link .contentText h2 {
  font-size: 2.2rem;
  margin-bottom: 14px;
  display: block;
}
@media (max-width: 1249.98px) {
  .teaserBox:not(:has(.link)) .contentText h2, .teaserBox > .link .contentText h2 {
    font-size: 18px;
  }
}
.teaserBox:not(:has(.link)) .contentText .textcontent:after, .teaserBox > .link .contentText .textcontent:after {
  content: var(--base-icon-angle);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  font-size: 85px;
  right: 12px;
  bottom: 5px;
  color: var(--main-color-primary);
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 767.98px) {
  .teaserBox:not(:has(.link)) .contentText, .teaserBox > .link .contentText {
    padding: 20px;
  }
  .teaserBox:not(:has(.link)) .contentText .textcontent:after, .teaserBox > .link .contentText .textcontent:after {
    font-size: 55px;
    right: 3px;
    bottom: -2px;
  }
}

.teaserBox > .link {
  width: 100%;
  height: 100%;
}
.teaserBox > .link:hover .textcontent a {
  color: var(--main-color-secondary);
  text-decoration-color: var(--main-color-secondary);
}
.teaserBox > .link:hover .textcontent:after {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.accountBox {
  border-radius: 28px;
  padding: 20px;
  background: var(--main-color-white);
  border-color: var(--main-color-white);
}
.accountBox__footer a, .accountBox__footer button {
  padding: 5px 8px;
}

.dashboard .h1 {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dashboard .h1:before {
  content: var(--base-icon-wave);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 28px;
  display: flex;
  font-weight: var(--main-font-weight);
}
.dashboard .accountBox:not(.salesPersonBox) {
  padding: 0;
}
.dashboard .accountBox:not(.salesPersonBox) > div {
  display: flex;
  flex-grow: 1;
  padding: 20px;
}
.dashboard .accountBox:not(.salesPersonBox) > div > div:not(.textcontent) {
  display: flex;
  flex-grow: 1;
}
.dashboard .accountBox:not(.salesPersonBox) > div .textcontent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.dashboard .accountBox:not(.salesPersonBox) > div .textcontent > div:last-child {
  margin-top: auto;
}
.dashboard .accountBox:not(.salesPersonBox) > div:after {
  content: var(--base-icon-angle);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: relative;
  right: 0;
  bottom: 0;
  color: var(--main-color-primary);
  font-size: 20px;
  transition: all 0.2s ease-in-out;
  align-self: flex-end;
}
.dashboard .accountBox:not(.salesPersonBox) .h3 {
  text-transform: inherit;
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
  letter-spacing: unset;
  white-space: unset;
  margin-bottom: 0;
}
.dashboard .accountBox:not(.salesPersonBox) .h3 .icon, .dashboard .accountBox:not(.salesPersonBox) .h3 .orderboxSummary__headline:before, .dashboard .accountBox:not(.salesPersonBox) .h3 .headerShopOrder + .mainContent > .container > h1:before, .dashboard .accountBox:not(.salesPersonBox) .h3 #userBasket > h1:before {
  font-size: 1.6em;
}
.dashboard .accountBox:not(.salesPersonBox) .link:hover > div .textcontent .link {
  text-decoration-color: var(--main-color-primary);
}
.dashboard .accountBox:not(.salesPersonBox) .link:hover:after {
  color: var(--main-color-secondary);
}
@media (min-width: 768px) {
  .dashboard .accountBox.salesPersonBox {
    max-width: 300px;
    margin-left: auto;
  }
}

.amountLine__label {
  display: flex;
  align-items: center;
}

.checkoutButton {
  border-radius: 0;
}
.checkoutButton:first-child {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}
.checkoutButton:last-child {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

.transportInformationNotice {
  margin-top: 4px;
}
.transportInformationNotice > a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--main-color-black);
}
.transportInformationNotice > a .icon, .transportInformationNotice > a .orderboxSummary__headline:before, .transportInformationNotice > a .headerShopOrder + .mainContent > .container > h1:before, .transportInformationNotice > a #userBasket > h1:before {
  color: var(--main-color-warning);
  font-size: 20px;
}
.transportInformationNotice > a:hover span {
  text-decoration: underline;
}

.filterBox__filter .customSelect__selected {
  font-weight: var(--main-font-weight-bold);
  background: transparent;
}

.filterSortLine > div {
  align-items: center;
}

.orderButtonWrapper {
  justify-content: space-between;
}
.orderButtonWrapper .orderButton {
  flex-grow: 0;
  padding: 10px 14px;
}
.orderButtonWrapper .orderButton span {
  display: none;
}
.orderButtonWrapper .orderButton .icon, .orderButtonWrapper .orderButton .orderboxSummary__headline:before, .orderButtonWrapper .orderButton .headerShopOrder + .mainContent > .container > h1:before, .orderButtonWrapper .orderButton #userBasket > h1:before {
  position: static;
  transform: none;
  translate: inherit !important;
  margin: 0;
}
.orderButtonWrapper .orderButton .icon:before, .orderButtonWrapper .orderButton .orderboxSummary__headline:before, .orderButtonWrapper .orderButton .headerShopOrder + .mainContent > .container > h1:before, .orderButtonWrapper .orderButton #userBasket > h1:before {
  content: var(--base-icon-cart-plus);
}
.orderButtonWrapper.inactive .quantity--inactive {
  background: var(--main-color-light-gray);
}

.promotion {
  font-weight: var(--main-font-weight-bold);
  letter-spacing: 0.03em;
  border-radius: 0;
  position: relative;
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  font-size: var(--main-font-size-small);
  padding: 4px 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--main-color-white);
  text-transform: none;
  border-radius: 28px;
}
@media (min-width: 1250px) {
  .promotion {
    font-size: 18px;
  }
}
.promotion i {
  font-size: 18px;
}
@media (min-width: 1250px) {
  .promotion i {
    font-size: 22px;
  }
}
.promotion.promotion--1 {
  background: linear-gradient(90deg, #FF470D 0%, #FF0A19 100%);
  color: var(--main-color-white);
}
.promotion.promotion--2 {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}
.promotion.promotion--2 .icon:before, .promotion.promotion--2 .orderboxSummary__headline:before, .promotion.promotion--2 .headerShopOrder + .mainContent > .container > h1:before, .promotion.promotion--2 #userBasket > h1:before {
  content: var(--base-icon-marketing);
}
.promotion.promotion--3 {
  background: linear-gradient(90deg, #00235E 1%, #00173F 100%);
  color: var(--main-color-white);
}

.quantity {
  background: var(--main-color-gray-base);
  padding: 8px 6px;
  border-radius: 2px;
}
.quantity input {
  margin-right: 6px;
  border: none;
  text-align: center;
  padding: 7px;
  border-radius: 2px;
  width: 48px;
}
.quantity__spinnerItem {
  border-radius: 2px;
  background: var(--main-color-gray-base);
}
.quantity__spinnerItem:hover {
  background: var(--main-color-primary);
  color: var(--main-color-white);
}
.quantity__spinnerItem--up {
  border: 0;
}
.quantity--small {
  display: inline-flex;
  width: auto;
}
.quantity--small input {
  margin: 0 0 0 36px;
  padding-top: 5.5px;
  padding-bottom: 5.5px;
  line-height: 1;
}
.quantity--small .quantity__spinner {
  width: 36px;
}
.quantity--small .quantity__spinnerItem {
  width: 36px;
}
.quantity--small .quantity__spinnerItem .icon, .quantity--small .quantity__spinnerItem .orderboxSummary__headline:before, .quantity--small .quantity__spinnerItem .headerShopOrder + .mainContent > .container > h1:before, .quantity--small .quantity__spinnerItem #userBasket > h1:before {
  font-size: 2.2rem;
}
.quantity--small .quantity__spinnerItem--down {
  padding-left: 6px;
}
.quantity--small .quantity__spinnerItem--up {
  padding-right: 6px;
}

.sortingSelect .customSelect__selected {
  font-weight: var(--main-font-weight);
  text-underline-offset: 2px;
}
.sortingSelect .customSelect__selected:hover {
  text-decoration-color: var(--main-color-primary);
}
.sortingSelect .customSelect__selected:hover:after {
  color: var(--main-color-primary);
}

.categoryPicture {
  margin-bottom: 0;
  aspect-ratio: 4/3;
}
.categoryPicture img {
  object-fit: cover;
  aspect-ratio: 4/3;
  width: 100%;
  max-width: none !important;
}

@media (min-width: 768px) {
  .categoryPicture {
    aspect-ratio: 2;
  }
  .categoryPicture img {
    aspect-ratio: 2;
  }
}
@media (min-width: 1250px) {
  .categoryPicture {
    aspect-ratio: 4.3;
  }
  .categoryPicture img {
    aspect-ratio: 4.3;
  }
}
.categoryInfoPicture__wrapper {
  position: relative;
  margin-bottom: 30px;
  display: none;
}

.categoryInfoPicture__wrapper:has(img) {
  display: block;
}

.categoryInfoName {
  position: absolute;
  bottom: 40px;
  left: 40px;
  padding: 15px 20px;
  background: var(--main-color-white);
  z-index: 1;
  line-height: 1;
  margin: 0;
  border-radius: 28px;
  max-width: calc(100vw - 180px);
}
@media (min-width: 1024px) {
  .categoryInfoName {
    max-width: none;
  }
}

.categoryMain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .categoryMain {
    grid-template-columns: 20% minmax(0, 1fr);
  }
}
@media (min-width: 1250px) {
  .categoryMain {
    grid-template-columns: 16.6666666667% minmax(0, 1fr);
  }
}

.categoryNav {
  width: 100% !important;
}
@media (min-width: 1024px) {
  .categoryNav {
    top: 120px;
  }
}
@media (min-width: 1250px) {
  .categoryNav {
    top: 170px;
  }
}

.categoryItem {
  justify-content: space-between;
  border-radius: 16px;
}
.categoryItem__content {
  position: static;
  width: 100%;
  background: var(--main-color-white);
  padding: 30px 15px 15px 15px;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  flex-grow: 1;
}
.categoryItem__content i {
  color: var(--main-color-black);
  width: 20px;
  height: 20px;
  font-size: 38px;
  line-height: 20px;
  rotate: 0deg;
  transition: 0.2s ease-in-out;
}
.categoryItem__content i:before {
  top: -3px;
  left: -8px;
  position: relative;
}
@media (min-width: 768px) {
  .categoryItem__content {
    padding: 30px 20px 20px 20px;
  }
}
.categoryItem__headline {
  color: var(--main-color-black);
  font-size: 1.7rem;
  font-weight: var(--main-font-weight-bold);
}
.categoryItem:hover, .categoryItem:focus {
  text-decoration: none;
}
.categoryItem:hover i, .categoryItem:focus i {
  rotate: -45deg;
}

.categoryItem__image img {
  aspect-ratio: 1.5/2;
}
@media (min-width: 768px) {
  .categoryItem__image img {
    aspect-ratio: 4/3;
  }
}

.categoryDescription {
  max-width: 920px;
  margin-bottom: 40px;
}

.itemcardHeadline:last-child {
  margin-bottom: 0;
}
.itemcardHeadline + .itemcardRating {
  margin-top: -20px;
}

.itemcardImagesMain {
  background: var(--main-color-white);
}
.itemcardImagesMain .swiper-wrapper {
  background: var(--main-color-white);
}
.itemcardImagesMain .itemcardImages__img {
  aspect-ratio: 1;
}
.itemcardImagesMain .itemcardImages__img img {
  aspect-ratio: 1;
}

h2 {
  display: flex;
  align-items: start;
  gap: 5px;
}
h2 .icon, h2 .orderboxSummary__headline:before, h2 .headerShopOrder + .mainContent > .container > h1:before, h2 #userBasket > h1:before {
  font-size: 3rem;
  line-height: 1;
}

.itemcardBadges {
  left: auto;
  right: 20px;
  top: 20px;
}

.itemcardActions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.itemcardActions .actionIcon:hover {
  color: var(--main-color-secondary);
}

.itemcardLoginButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 1249.98px) {
  .itemcardLoginButtons {
    gap: 8px;
  }
}
@media (max-width: 767.98px) {
  .itemcardLoginButtons {
    margin-top: 12px;
  }
  .itemcardLoginButtons button {
    width: 100%;
  }
}

.itemcardBrand .image {
  max-width: 80px;
}
.itemcardBrand .image img {
  aspect-ratio: 4/3;
  object-position: left center;
}

.itemcardAttributesTable {
  max-width: 600px;
}
.itemcardAttributesTable td {
  padding: 5px 0;
}
@media (min-width: 768px) {
  .itemcardAttributesTable td {
    padding: 10px 0;
  }
}
.itemcardAttributesTable td:first-child {
  font-weight: var(--main-font-weight-bold);
  padding-right: 0;
}

.itemcardBuybox {
  padding: 20px;
  padding: 20px;
  border-radius: 16px;
}
.itemcardBuybox .orderButtonWrapper {
  margin-top: 10px;
}
.itemcardBuybox__head {
  padding: 0;
}
.itemcardBuybox__main {
  padding: 0;
  padding-bottom: 0;
}

.itemcardSide {
  container-type: inline-size;
}

@media (min-width: 1024px) {
  .itemcardMain {
    grid-template-columns: 1fr 520px;
    grid-column-gap: 40px;
    grid-template-areas: unset !important;
  }
}
@media (min-width: 1250px) {
  .itemcardMain {
    grid-template-columns: 1fr 640px;
    grid-column-gap: 80px;
    grid-template-areas: unset !important;
  }
}
@media (min-width: 1540px) {
  .itemcardMain {
    grid-template-columns: 1fr 830px;
    grid-column-gap: 120px;
  }
}
.itemcardMain > div {
  grid-area: unset !important;
}
.itemcardMain .itemcardMedia {
  display: flex;
  align-items: stretch;
  margin-bottom: 0;
}
@media (min-width: 1250px) {
  .itemcardMain .itemcardMedia {
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .itemcardDescriptionsWrapper {
    display: grid;
    grid-template-columns: 1fr 547px;
    gap: 80px;
  }
}
.itemcardDescriptionsWrapper > * {
  grid-area: unset !important;
}
.itemcardDescriptionsWrapper .itemcardMainDescription:not(:first-child) h2 i {
  display: none;
}

.itemcardAttributes table tr:first-child td {
  padding-top: 0;
}
.itemcardAttributes table tr td:first-child {
  font-weight: var(--main-font-weight);
}
.itemcardAttributes table tr:last-child td {
  border-bottom: 0;
}

.itemcardItemNo {
  color: var(--main-color-middle-gray);
  margin-bottom: 10px;
}

.itemcardHeadline {
  text-transform: none;
  letter-spacing: 0;
}

.itemcardAttributesInHeader {
  margin-bottom: 10px;
}
.itemcardAttributesInHeader > div {
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-block: 2px;
}
.itemcardAttributesInHeader > div:last-child {
  border-bottom: none;
}

.itemcardImagesAttributes {
  right: auto;
  left: 10px;
  top: 10px;
}

.itemcardImagesThumbs .swiper-slide {
  background: var(--main-color-white);
}
@media (max-width: 767.98px) {
  .itemcardImagesThumbs {
    margin-top: 12px !important;
    margin-bottom: 24px;
  }
}

.itemcardBuybox__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itemcardBuybox .itemcardBrandAndActionsWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.itemcardBuybox .itemcardActions {
  margin-left: auto;
}

.itemcardBuybox .orderButtonWrapper .orderButton span {
  display: block;
}

.bg--white .itembox {
  border-color: var(--main-color-light-gray);
}

.itemboxList.swiper {
  margin: 0;
  padding: 0;
  max-width: none;
}
.itemboxList.swiper .swiper-wrapper > * {
  padding: 0;
}

.itemcardBuybox__main .priceNotice {
  color: var(--main-color-middle-gray);
}
.itemcardBuybox__main .orderButtonInventoryWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.itemcardBuybox__main .inventoryWrapper {
  margin: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--main-color-light-gray);
  padding-inline: 10px;
  padding-block: 10px;
}
.itemcardBuybox__main .inventoryWrapper .inventory {
  padding-left: 20px;
}
.itemcardBuybox__main .inventoryWrapper .inventory p {
  font-size: var(--main-font-size-base);
}
.itemcardBuybox__main .orderButtonWrapper {
  margin: 0;
  width: auto;
  gap: 20px;
}
@container (inline-size > 660px) {
  .itemcardBuybox__main .orderButtonInventoryWrapper {
    flex-direction: row;
    gap: 20px;
  }
  .itemcardBuybox__main .orderButtonWrapper {
    gap: 40px;
  }
}

.filegallery:has(.js-itemCardImageDownload) {
  padding-top: 6px;
}

.js-itemCardImageDownload:active, .js-itemCardImageDownload:focus {
  text-decoration: none;
}
.js-itemCardImageDownload:active i, .js-itemCardImageDownload:focus i {
  text-decoration: none !important;
}
.js-itemCardImageDownload.is-loading, .js-itemCardImageDownload.is-success, .js-itemCardImageDownload.is-error {
  color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.js-itemCardImageDownload.is-error {
  color: var(--main-color-danger) !important;
}
.js-itemCardImageDownload.is-error .icon:before, .js-itemCardImageDownload.is-error .orderboxSummary__headline:before, .js-itemCardImageDownload.is-error .headerShopOrder + .mainContent > .container > h1:before, .js-itemCardImageDownload.is-error #userBasket > h1:before {
  content: var(--base-icon-close);
}
.js-itemCardImageDownload .icon:before, .js-itemCardImageDownload .orderboxSummary__headline:before, .js-itemCardImageDownload .headerShopOrder + .mainContent > .container > h1:before, .js-itemCardImageDownload #userBasket > h1:before {
  transform: rotate(0);
}
.js-itemCardImageDownload.is-loading {
  cursor: wait;
  color: var(--main-color-middle-gray) !important;
}
.js-itemCardImageDownload.is-loading .icon:before, .js-itemCardImageDownload.is-loading .orderboxSummary__headline:before, .js-itemCardImageDownload.is-loading .headerShopOrder + .mainContent > .container > h1:before, .js-itemCardImageDownload.is-loading #userBasket > h1:before {
  content: var(--base-icon-loading);
  display: block;
  animation: rotation 1s infinite ease-in-out;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@media (min-width: 768px) {
  .itemcardImages.thumbsLeft .itemcardImagesMain {
    order: 1;
    flex-grow: 1;
  }
  .itemcardImages.thumbsLeft .itemcardImagesThumbs {
    order: 2;
    margin-right: 0;
    margin-left: 20px;
  }
}
@media (min-width: 768px) and (min-width: 1250px) {
  .itemcardImages.thumbsLeft .itemcardImagesThumbs {
    margin-right: 0;
    margin-left: 30px;
  }
}

.itemBasketList {
  background: var(--main-color-white);
  padding: 5px 10px;
  border-radius: 16px;
}

.itemBasketBox {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--main-color-gray-base);
  color: var(--main-color-black);
  text-decoration: none;
}
.itemBasketBox .maxQuantityNotice {
  grid-area: maxQuantityNotice;
  background: var(--main-color-light-gray);
  padding: 5px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.itemBasketBox .maxQuantityNotice .icon, .itemBasketBox .maxQuantityNotice .orderboxSummary__headline:before, .itemBasketBox .maxQuantityNotice .headerShopOrder + .mainContent > .container > h1:before, .itemBasketBox .maxQuantityNotice #userBasket > h1:before {
  color: var(--main-color-danger);
  font-size: 16px;
}
.itemBasketBox:last-child {
  border-bottom: none;
}
.itemBasketBox a {
  color: var(--main-color-black);
  text-decoration: none;
}
.itemBasketBox a:hover, .itemBasketBox a:focus, .itemBasketBox a:active {
  text-decoration: none;
  color: var(--main-color-primary);
}
.itemBasketBox .actionIcon a {
  color: var(--main-color-middle-gray);
}
.itemBasketBox__img {
  flex-shrink: 0;
  grid-area: itemBasketBoxImg;
}
.itemBasketBox__img .image img {
  aspect-ratio: 4/3;
}
.itemBasketBox__itemNo {
  grid-area: itemBasketBoxItemNo;
  color: var(--main-color-middle-gray);
}
.itemBasketBox__description {
  font-weight: var(--main-font-weight-bold);
  display: block;
}
.itemBasketBox__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.itemBasketBox__info {
  grid-area: itemBasketBoxInfo;
}
.itemBasketBox__inventory {
  grid-area: itemBasketBoxInventory;
  display: flex;
}
.itemBasketBox__inventory .inventoryWrapper {
  min-height: 44px;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid var(--main-color-middle-gray);
}
.itemBasketBox__price .basePrice, .itemBasketBox__sumPrice .basePrice {
  font-weight: var(--main-font-weight);
}
.itemBasketBox__price {
  grid-area: itemBasketBoxPrice;
  display: flex;
  text-align: right;
  justify-content: flex-end;
}
.itemBasketBox__price .price {
  padding: 4px 8px;
  border: 1px solid var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
  display: flex;
  flex-direction: column;
}
.itemBasketBox__price .price label {
  color: var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
}
.itemBasketBox__price .price span {
  font-weight: var(--main-font-weight-bold);
}
.itemBasketBox__sumPrice {
  grid-area: itemBasketBoxSumPrice;
  font-weight: var(--main-font-weight-bold);
}
.itemBasketBox__actions {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  grid-area: itemBasketBoxActions;
}
.itemBasketBox__quantityWrapper {
  display: flex;
}
.itemBasketBox__quantity {
  grid-area: itemBasketBoxQuantity;
  min-width: 130px;
}
.itemBasketBox__addon {
  grid-area: itemBasketBoxAddon;
}
.itemBasketBox__discount {
  grid-area: itemBasketBoxDiscount;
}
.itemBasketBox__discount input {
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
}
.itemBasketBox__label {
  color: var(--main-color-middle-gray);
  font-size: 1.3rem;
  margin-bottom: 5px;
}
.itemBasketBox .inventoryShippingInfo {
  display: none;
}
.itemBasketBox--header {
  color: var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
}
.itemBasketBox--header .itemBasketBox__inventory {
  border: none;
}

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

.itemBasketBox {
  display: grid;
  align-items: center;
  grid-gap: 10px;
  grid-template-columns: auto 1fr 1fr auto;
  grid-template-areas: "maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice" "itemBasketBoxImg itemBasketBoxItemNo itemBasketBoxItemNo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInfo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInventory itemBasketBoxPrice itemBasketBoxPrice" "itemBasketBoxImg itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxSumPrice";
}
.itemBasketBox--header {
  display: none;
}
.itemBasketBox--header > div {
  align-self: center !important;
}
.itemBasketBox__img {
  align-self: flex-start;
  width: 60px;
}
@container containerBasketList (min-width: 650px) {
  .itemBasketBox__img {
    width: 80px;
  }
}
.itemBasketBox__addon {
  align-self: flex-start;
  width: 36px;
}
.itemBasketBox__quantity {
  align-self: center;
  width: 90px;
}
.itemBasketBox__sumPrice {
  text-align: right;
}
.itemBasketBox__discount {
  display: none;
  width: 50px;
}
@container containerBasketList (min-width: 500px) {
  .itemBasketBox {
    grid-template-columns: auto 1fr repeat(3, auto);
    align-items: center;
    grid-template-areas: "maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice" "itemBasketBoxImg itemBasketBoxItemNo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInventory itemBasketBoxPrice itemBasketBoxPrice";
  }
  .itemBasketBox__addon {
    align-self: center;
  }
  .itemBasketBox__sumPrice {
    width: 130px;
  }
}
@container containerBasketList (min-width: 650px) {
  .itemBasketBox {
    grid-template-columns: auto 1fr repeat(4, auto);
    grid-template-areas: "maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice" "itemBasketBoxImg itemBasketBoxItemNo itemBasketBoxItemNo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInfo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxPrice itemBasketBoxPrice";
  }
  .itemBasketBox__sumPrice {
    text-align: right;
  }
}
@container containerBasketList (min-width: 760px) {
  .itemBasketBox {
    grid-template-columns: auto 1fr repeat(4, auto);
    grid-template-areas: "maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice" "itemBasketBoxImg itemBasketBoxItemNo itemBasketBoxItemNo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInfo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxPrice itemBasketBoxPrice";
  }
  .itemBasketBox__sumPrice {
    text-align: right;
  }
}
@container containerBasketList (min-width: 1060px) {
  .itemBasketBox {
    grid-template-columns: 82px auto 380px repeat(5, auto);
    grid-template-areas: "maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice maxQuantityNotice" "itemBasketBoxImg itemBasketBoxItemNo itemBasketBoxInfo itemBasketBoxInventory itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
  .itemBasketBox__inventory {
    width: 130px;
  }
  .itemBasketBox__info {
    padding-right: 80px;
  }
  .itemBasketBox__quantity {
    justify-self: end;
  }
  .itemBasketBox--header {
    display: grid;
  }
  .itemBasketBox--header .itemBasketBox__inventory {
    display: block;
  }
}

.itemBasketList {
  container: containerBasketList/inline-size;
}

.basketView .row:has(.itemBasketList),
#form_user_order > .row {
  margin: 0;
}
.basketView .row:has(.itemBasketList) > *,
#form_user_order > .row > * {
  width: 100%;
  padding: 0;
}
@media (min-width: 1024px) {
  .basketView .row:has(.itemBasketList),
  #form_user_order > .row {
    display: grid;
    grid-template-columns: 1fr 405px;
    gap: 20px;
  }
}

#userBasket > h1 {
  display: flex;
  gap: 5px;
}
#userBasket > h1:before {
  content: var(--base-icon-shopping-basket);
  font-size: 2.7rem;
  line-height: 1;
}

.headerShopOrder + .mainContent > .container > h1 {
  display: flex;
  gap: 5px;
}
.headerShopOrder + .mainContent > .container > h1:before {
  content: var(--base-icon-box);
  font-size: 2.7rem;
  line-height: 1;
}

.orderboxSummary {
  margin-top: 80px;
  background: var(--main-color-white);
  box-shadow: none;
  border-radius: 16px;
  padding: 20px;
  position: relative;
}
@media (min-width: 1024px) {
  .orderboxSummary {
    margin-top: 0;
  }
}
.orderboxSummary .color--dark-gray {
  color: var(--main-color-middle-gray);
}
.orderboxSummary .color--dark-gray a:not(:hover):not(:focus):not(:active) {
  color: var(--main-color-middle-gray);
}
.orderboxSummary div:has(> .color--dark-gray) {
  line-height: 1.1;
}
.orderboxSummary__head {
  position: absolute;
  top: -52px;
  left: -6px;
  display: block;
}
.orderboxSummary__main {
  padding-top: 0;
}
.orderboxSummary__headline {
  display: flex;
  gap: 5px;
}
.orderboxSummary__headline:before {
  content: var(--base-icon-clipboard-list-check);
  font-size: 2.7rem;
  line-height: 1;
}

.orderBoxContainer {
  margin-left: 0;
}

.orderItemlist {
  padding-inline: 20px;
  background: var(--main-color-white);
  border-radius: 16px;
}

.orderItem {
  position: relative;
  padding: 0;
  padding-block: 20px;
  border-bottom: 1px solid var(--main-color-light-gray);
  grid-gap: 10px;
  color: var(--main-color-black);
  text-decoration: none;
  grid-template-columns: 70px 1fr 1fr;
  display: grid;
  grid-template-areas: "orderItemImg orderItemNo orderItemNo" "orderItemImg orderItemInfo orderItemInfo" "orderItemImg orderItemInventory orderItemSumPrice";
}
.orderItem:last-child {
  border-bottom: none;
}
@container containerOrderList (min-width:600px) {
  .orderItem {
    grid-gap: 10px;
    align-items: center;
    grid-template-columns: 90px 1fr auto auto auto;
    grid-template-areas: "orderItemImg orderItemInfo orderItemPrice orderItemQuantity orderItemSumPrice" "orderItemImg orderItemInventory orderItemPrice orderItemQuantity orderItemSumPrice";
  }
}
@container containerOrderList (min-width:800px) {
  .orderItem {
    align-items: center;
    grid-template-columns: 90px 1fr auto auto auto auto;
    grid-template-areas: "orderItemImg orderItemInfo orderItemInventory orderItemPrice orderItemQuantity orderItemSumPrice";
  }
}
.orderItem a {
  color: var(--main-color-black);
  text-decoration: none;
}
.orderItem a:hover, .orderItem a:focus, .orderItem a:active {
  text-decoration: none;
  color: var(--main-color-primary);
}
.orderItem__img {
  flex-shrink: 0;
  grid-area: orderItemImg;
  padding-right: 10px;
}
.orderItem__itemNo {
  grid-area: orderItemNo;
  color: var(--main-color-middle-gray);
}
.orderItem__description {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.orderItem__description:last-child {
  margin-bottom: 0;
}
.orderItem__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.orderItem__info {
  grid-area: orderItemInfo;
}
.orderItem__inventory {
  grid-area: orderItemInventory;
  display: flex;
}
.orderItem__inventory .inventoryWrapper {
  min-height: 44px;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid var(--main-color-middle-gray);
}
.orderItem__inventory .inventoryShippingInfo {
  display: none;
}
.orderItem__actions {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  grid-area: orderItemActions;
}
.orderItem__quantityWrapper {
  display: flex;
}
.orderItem__quantity {
  grid-area: orderItemQuantity;
  display: flex;
  justify-content: flex-end;
  width: 70px !important;
  text-align: right !important;
}
.orderItem__quantity .orderQuantity {
  padding: 4px 8px;
  border: 1px solid var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
  display: flex;
  flex-direction: column;
  min-height: 44px;
}
.orderItem__quantity .orderQuantity label {
  color: var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
}
.orderItem__quantity .orderQuantity span {
  font-weight: var(--main-font-weight-bold);
}
.orderItem__price .basePrice, .orderItem__sumPrice .basePrice {
  font-weight: var(--main-font-weight-bold);
}
.orderItem__discount {
  grid-area: orderItemDiscount;
}
.orderItem__price {
  grid-area: orderItemPrice;
  display: flex;
  text-align: right;
  justify-content: flex-end;
}
.orderItem__price .price {
  padding: 4px 8px;
  border: 1px solid var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
  display: flex;
  flex-direction: column;
  min-height: 44px;
}
.orderItem__price .price label {
  color: var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
}
.orderItem__price .price span {
  font-weight: var(--main-font-weight-bold);
}
.orderItem__sumPrice {
  grid-area: orderItemSumPrice;
}
.orderItem__label {
  color: var(--main-color-middle-gray);
  font-size: 1.3rem;
  margin-bottom: 5px;
}
.orderItem--header {
  color: var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
}

.orderItem {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-areas: "orderItemImg orderItemNo orderItemNo" "orderItemImg orderItemInfo orderItemInfo" "orderItemImg orderItemInventory orderItemSumPrice";
}
.orderItem__img {
  width: 70px;
}
.orderItem__inventory {
  width: 110px;
  align-self: center;
}
.orderItem__quantity {
  display: none;
}
.orderItem__price {
  display: none;
}
.orderItem__sumPrice {
  text-align: right;
}
.orderItem__discount {
  display: none;
}
.orderItem__label {
  display: none;
}
.orderItem--header {
  display: none;
}
@container containerOrderList (min-width:600px) {
  .orderItem {
    grid-gap: 10px;
    align-items: center;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "orderItemImg orderItemNo orderItemInfo orderItemInfo orderItemInfo" "orderItemImg orderItemQuantity orderItemInventory orderItemPrice  orderItemSumPrice";
  }
  .orderItem__img {
    width: 90px;
  }
  .orderItem__price {
    display: flex;
    text-align: right;
  }
  .orderItem__quantityMobile {
    display: none;
  }
  .orderItem__quantity {
    display: block;
    text-align: center;
    width: 30px;
  }
  .orderItem__sumPrice {
    width: 100px;
  }
}
@container containerOrderList (min-width:800px) {
  .orderItem {
    align-items: center;
    grid-template-columns: auto auto 1fr repeat(4, auto);
    grid-template-areas: "orderItemImg orderItemNo orderItemInfo orderItemInventory orderItemQuantity orderItemPrice  orderItemSumPrice";
  }
  .orderItem__sumPrice {
    width: 130px;
  }
  .orderItem--header {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto 1fr repeat(4, auto);
    grid-template-areas: "orderItemImg orderItemNo orderItemInfo orderItemInventory orderItemQuantity orderItemPrice  orderItemSumPrice";
  }
}

.orderItemlist {
  container: containerOrderList/inline-size;
}

/*
Selected Salesperson Box

Markup:
<div class="accountBox salesPersonBox">
    <div class="salesPersonBox__content">
        <div class="h3">Ihr Ansprechpartner</div>
            <div class="salesPersonBox__img image">
                <img src="/userdata/dcshop/salesperson_images/alex-streng.jpg" alt="Alexander Streng" width="200px" height="200px" loading="lazy">
            </div>
            <div class="salesPersonBox__name">Alexander Streng</div>
            <div class="salesPersonBox__position">Vertrieb</div>
        <div class="salesPersonBox__contact">
                <a class="linkWithIcon" href="mailto:as@dc.ag"><i class="icon icon-mail"></i><span>as@dc.ag</span></a>
                <br><a class="linkWithIcon" href="tel:+49 9221 9652-0"><i class="icon icon-phone"></i><span>+49 9221 9652-0</span></a>
        </div>
    </div>
</div>

Styleguide Shop.Selected Salesperson Box
*/
@media (min-width: 768px) {
  .salesPersonBox__img {
    margin-bottom: 40px;
    width: 110px;
  }
}
@media (min-width: 768px) {
  .salesPersonBox__img img {
    height: 110px !important;
  }
}
.salesPersonBox__position {
  flex-grow: 1;
  font-size: var(--main-font-size-base);
  margin-bottom: 0;
}
.salesPersonBox h3, .salesPersonBox .h3 {
  margin-bottom: 20px;
}
.salesPersonBox__name {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-base);
}
.salesPersonBox__contact {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}
.salesPersonBox__contact a {
  margin-bottom: 0;
  hyphens: auto;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--main-color-light-gray);
  border-radius: 2px;
  padding: 7px 0;
  transition: 0.2s ease-in-out all;
}
.salesPersonBox__contact a .icon, .salesPersonBox__contact a #userBasket > h1:before, .salesPersonBox__contact a .headerShopOrder + .mainContent > .container > h1:before, .salesPersonBox__contact a .orderboxSummary__headline:before {
  position: relative;
  top: 0;
  margin: 0 !important;
  font-size: 24px;
}
.salesPersonBox__contact a span {
  display: none;
}
.salesPersonBox__contact a:hover {
  border-color: var(--main-color-primary);
  background: var(--main-color-primary);
  color: var(--main-color-white);
}
.salesPersonBox__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .col-6 > .salesPersonBox {
    padding: 10px 5px;
  }
}
.accountBox .salesPersonBox {
  padding: 0;
  padding-bottom: 20px;
}
.accountBox .salesPersonBox:last-child {
  padding-bottom: 0;
}
.accountBox:has(.salesPersonBox) > .h4 {
  align-self: center;
  margin-bottom: 40px;
}

.mailchimpWrapper {
  position: absolute;
  top: -8px;
  left: -1px;
  width: calc(100% + 1px);
  height: calc(100% + 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--main-color-white);
  z-index: 1;
  border-radius: 2px;
}
.mailchimpWrapper .closeIcon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  font-size: 20px;
}
.mailchimpWrapper .closeIcon:hover {
  color: var(--main-color-danger);
  cursor: pointer;
}
.mailchimpWrapper .statusIcon {
  font-size: 40px;
}
.mailchimpWrapper.is-error .statusIcon {
  color: var(--main-color-danger);
}
.mailchimpWrapper.is-success .statusIcon {
  color: var(--main-color-success);
}

.newsletterForm {
  position: relative;
}

.itembox {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--main-color-white);
  transition: 0.2s ease-in-out;
  border: 2px solid var(--main-color-white);
  border-radius: 16px;
  font-size: var(--main-font-size-base);
}
.itembox:hover, .itembox:focus, .itembox:active {
  border-color: var(--main-color-secondary);
}
.itembox__itemno {
  color: var(--main-color-middle-gray);
  margin-bottom: 5px;
}
.itembox__badges {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
}
.itembox__actions {
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 5px;
}
@media (min-width: 768px) {
  .itembox__actions {
    right: 10px;
    top: 10px;
  }
}
.itembox__actions span:hover {
  color: var(--main-color-secondary);
}
.itembox__name {
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .itembox__name {
    font-size: 1.9rem;
  }
}
.itembox__pricesInventory {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}
@container (inline-size > 300px) {
  .itembox__pricesInventory {
    gap: 16px;
    flex-direction: row;
  }
}
.itembox__pricesExtension {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 13px;
  color: var(--main-color-dark-gray);
}
.itembox__pricesExtension .priceListGraduated__link {
  margin: 0;
}
.itembox__pricesExtension:has(*) {
  margin-top: 5px;
}
.itembox__pricesExtension:has(.itembox__euroPerWatt) .priceListGraduated .inner {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid var(--main-color-dark-gray);
}
@media (max-width: 767.98px) {
  .itembox__pricesExtension {
    justify-content: flex-start;
  }
}
.itembox__inventory {
  display: flex;
  align-items: center;
  border: 1px solid var(--main-color-light-gray);
  min-height: 46px;
}
.itembox__inventory .inventoryWrapper {
  padding-inline: 10px;
}
.itembox__inventory .inventory p {
  font-size: var(--main-font-size-small);
}
.itembox__prices {
  margin-top: 0;
}
.itembox__prices .pricesList {
  font-size: 1.4rem;
  margin-left: 0;
  margin-right: 0;
  gap: 8px;
}
.itembox__prices .pricesList label {
  font-size: 0.8em;
}
.itembox__prices .pricesList .price {
  padding: 5px 10px;
  min-width: 0;
  border: 1px solid var(--main-color-light-gray);
  width: auto;
}
.itembox__prices .pricesList .price label {
  white-space: nowrap;
  font-size: var(--main-font-size-small);
}
.itembox__prices .pricesList .price span {
  font-weight: var(--main-font-weight-bold);
}
.itembox__prices .pricesList .price--rrpPrice {
  display: none !important;
}
.itembox__prices .pricesList .price:after {
  display: none;
}
.itembox__prices .priceListGraduated {
  margin-top: 10px;
}
@media (max-width: 767px) {
  .itembox__prices .priceListGraduated {
    display: none;
  }
}
.itembox__prices .priceListGraduated__link {
  justify-content: flex-start;
}
.itembox__image {
  max-width: 280px;
  margin-inline: auto;
  padding-top: 20px;
}
.itembox__image img {
  aspect-ratio: 1;
  width: 100%;
  display: block;
  transition: all 0.25s ease;
  transform: scale(1);
}
.itembox:hover img {
  transform: scale(1.1);
}
.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;
  container-type: inline-size;
}
@media (min-width: 768px) {
  .itembox__content {
    padding: 10px 20px 20px 20px;
  }
}
.itembox__info {
  flex-grow: 1;
}
.itembox__info > div {
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-block: 2px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.itembox__info > div > span:last-child {
  text-align: right;
}
.itembox__info > div:last-child {
  border-bottom: none;
}
.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__itemOnDemand {
  padding: 0 10px 10px 10px;
}
@media (min-width: 768px) {
  .itembox__itemOnDemand {
    padding: 0 20px 20px 20px;
  }
}
.itembox__itemOnDemand a {
  display: flex;
}
.itembox .inventoryWrapper {
  font-size: 1.1rem;
  justify-content: center;
}
.itembox .orderButtonWrapper + .inventoryWrapper {
  display: none;
}
@media (max-width: 767px) {
  .itembox .orderButtonWrapper .orderButton span {
    display: none;
  }
  .itembox .orderButtonWrapper .orderButton i {
    right: 50%;
    translate: 50% 0;
  }
}
@media (max-width: 767px) {
  .itembox .orderButtonWrapper .quantity {
    flex-shrink: 1;
  }
}

.itemboxList {
  display: grid;
  max-width: 1240px;
  grid-column-gap: 20px;
  grid-row-gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
@media (min-width: 768px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (min-width: 1024px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (min-width: 1250px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
@media (min-width: 1540px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}
.itemboxList .swiper-pagination {
  display: none;
}

.itembox__pricesInventory {
  position: relative;
  z-index: 1;
}
@container (inline-size > 300px) {
  .itembox__pricesInventory:has(.priceListGraduated) {
    margin-top: 32px;
  }
}
@container (inline-size > 300px) {
  .itembox__pricesInventory .priceListGraduated {
    position: absolute;
    top: -36px;
    right: 0;
    z-index: 2;
  }
}
.itembox__pricesInventory .priceListGraduated__list {
  top: 21px;
  border-radius: 28px;
  right: 0;
  left: auto;
}

.itemboxList.swiper {
  padding-bottom: 50px;
  margin-bottom: 10px;
}
@media (max-width: 540px) {
  .itemboxList.swiper {
    margin-right: -20px;
  }
}
.itemboxList.swiper .swiper-button-next,
.itemboxList.swiper .swiper-button-prev {
  display: block;
  top: auto;
  bottom: 0;
  right: auto;
}
.itemboxList.swiper .swiper-button-prev {
  left: calc(50% - 45px);
}
.itemboxList.swiper .swiper-button-next {
  left: calc(50% + 13px);
}
@media (min-width: 1860px) {
  .itemboxList.swiper {
    margin-left: -50px;
    margin-right: -50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .itemboxList.swiper .swiper-button-next,
  .itemboxList.swiper .swiper-button-prev {
    top: 50%;
    bottom: auto;
  }
  .itemboxList.swiper .swiper-button-prev {
    left: 0;
  }
  .itemboxList.swiper .swiper-button-next {
    left: auto;
    right: 0;
  }
}

/*
Inventory

Markup:
<div class="inventoryWrapper">
    <div class="inventory {{modifier_class}}">
      <span itemprop="availability" content="http://schema.org/InStock"></span>
      <p>+99 available</p>
    </div>
</div>

.available - Available
.low_availability - Low availability
.not_available - Not Available
.not_available_orderable - Not Available Orderable
.not_available_orderable_number - Not Available Orderable Number

Styleguide Shop.Inventory
*/
.inventory {
  position: relative;
  padding-left: 15px;
  display: inline-flex;
  align-items: center;
}
.inventory:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  translate: 0 -50%;
  background: var(--main-color-success);
  border-radius: 50%;
}
.inventory.low_availability:before {
  background: var(--main-color-warning);
}
.inventory.not_available:before {
  background: var(--main-color-danger);
}
.inventory.not_available_orderable:before {
  background: var(--main-color-danger);
}
.inventory p {
  margin: 0;
}

.inventoryShippingInfo {
  border-left: 1px solid var(--main-color-black);
  padding-left: 5px;
  margin-left: 5px;
}

.inventoryWrapper {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  font-size: var(--main-font-size-small);
  line-height: 1;
}

.modal--language .languageSwitchList li:nth-child(2) {
  order: 1;
  border-bottom: none;
}
.modal--language .languageSwitchList li:last-child {
  border-bottom: 1px solid var(--main-color-middle-gray);
}

@media (min-width: 768px) {
  #register_modal div:has(> div > .specialradiobox) {
    display: flex;
    align-items: center;
    gap: 32px;
  }
}

form:has(.registrationNotice) {
  position: relative;
  overflow: hidden;
  padding-top: 5px;
}

.registrationNotice {
  position: absolute;
  transition: all 0.2s ease-in-out;
  background: var(--main-color-white);
  padding: 20px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.registrationNotice > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.registrationNotice .icon, .registrationNotice #userBasket > h1:before, .registrationNotice .headerShopOrder + .mainContent > .container > h1:before, .registrationNotice .orderboxSummary__headline:before {
  font-size: 30px;
}

body {
  font-family: "Montserrat", sans-serif;
}
/*# sourceMappingURL=child.css.map */