@charset "UTF-8";
/*
Icons

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

<div class="kss-icons">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</div>

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

:root {
  --base-icon-360: "";
  --base-icon-academy: "";
  --base-icon-address: "";
  --base-icon-addressbook: "";
  --base-icon-angle-down: "";
  --base-icon-angle-left: "";
  --base-icon-angle-right: "";
  --base-icon-angle-up: "";
  --base-icon-arrow-down: "";
  --base-icon-arrow-left: "";
  --base-icon-arrow-right: "";
  --base-icon-arrow-up: "";
  --base-icon-basket: "";
  --base-icon-bike: "";
  --base-icon-blanket: "";
  --base-icon-chart: "";
  --base-icon-chat: "";
  --base-icon-check-circle: "";
  --base-icon-check: "";
  --base-icon-clock: "";
  --base-icon-close: "";
  --base-icon-columns: "";
  --base-icon-copy: "";
  --base-icon-date: "";
  --base-icon-document-archive: "";
  --base-icon-download: "";
  --base-icon-drag-drop: "";
  --base-icon-edit: "";
  --base-icon-exclamation-circle: "";
  --base-icon-exclamation: "";
  --base-icon-facebook: "";
  --base-icon-file-doc: "";
  --base-icon-file-document: "";
  --base-icon-file-image: "";
  --base-icon-file-pdf: "";
  --base-icon-file-powerpoint: "";
  --base-icon-file-video: "";
  --base-icon-file-xls: "";
  --base-icon-filter: "";
  --base-icon-gift: "";
  --base-icon-heart-filled: "";
  --base-icon-heart: "";
  --base-icon-home: "";
  --base-icon-info: "";
  --base-icon-instagram: "";
  --base-icon-invoice: "";
  --base-icon-language: "";
  --base-icon-linkedin: "";
  --base-icon-list: "";
  --base-icon-loading: "";
  --base-icon-lock: "";
  --base-icon-logged: "";
  --base-icon-login: "";
  --base-icon-logout: "";
  --base-icon-mail: "";
  --base-icon-map-pin: "";
  --base-icon-marketing: "";
  --base-icon-minus: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment: "";
  --base-icon-pen-to-square: "";
  --base-icon-phone: "";
  --base-icon-pinterest: "";
  --base-icon-play: "";
  --base-icon-plus: "";
  --base-icon-print: "";
  --base-icon-question: "";
  --base-icon-quickorder: "";
  --base-icon-register: "";
  --base-icon-reload: "";
  --base-icon-retoure: "";
  --base-icon-rma: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-settings: "";
  --base-icon-share: "";
  --base-icon-shipping: "";
  --base-icon-sort: "";
  --base-icon-sorting: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star: "";
  --base-icon-subscriptions: "";
  --base-icon-tiktok: "";
  --base-icon-trash: "";
  --base-icon-twitter: "";
  --base-icon-upload: "";
  --base-icon-user: "";
  --base-icon-users: "";
  --base-icon-whatsapp: "";
  --base-icon-xing: "";
  --base-icon-youtube: "";
  --base-icon-zoom: "";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-users'></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: #282828;
  --main-color-gray-base: #575656;
  --main-color-middle-gray: #878786;
  --main-color-dark-gray: #575656;
  --main-color-light-gray: #B1B2B3;
  --main-color-extra-light-gray: #E5E5E5;
  --main-color-primary: #BF1D1C;
  --main-color-primary-dark: #a91a19;
  --main-color-primary-darken: #931615;
  --main-color-secondary: #e02f2e;
  --main-color-action: #282828;
  --main-color-danger: #D32D2D;
  --main-color-danger-dark: #bf2828;
  --main-color-danger-darken: #a92424;
  --main-color-warning: #FF9903;
  --main-color-warning-dark: #e98a00;
  --main-color-warning-darken: #cf7b00;
  --main-color-success: #47824a;
  --main-color-success-dark: #a91a19;
  --main-color-success-darken: #931615;
  --main-color-info: #B1B2B3;
  --main-color-primary-contrast: colorTextContrast(#BF1D1C);
  --main-color-primary-dark-contrast: colorTextContrast(#a91a19);
  --main-color-primary-darken-contrast: colorTextContrast(#931615);
  --main-color-secondary-contrast: colorTextContrast(#e02f2e);
  --main-color-action-contrast: colorTextContrast(#282828);
  --main-color-danger-contrast: colorTextContrast(#D32D2D);
  --main-color-danger-dark-contrast: colorTextContrast(#bf2828);
  --main-color-danger-darken-contrast: colorTextContrast(#a92424);
  --main-color-warning-contrast: colorTextContrast(#FF9903);
  --main-color-warning-dark-contrast: colorTextContrast(#e98a00);
  --main-color-warning-darken-contrast: colorTextContrast(#cf7b00);
  --main-color-success-contrast: colorTextContrast(#47824a);
  --main-color-success-dark-contrast: colorTextContrast(#a91a19);
  --main-color-success-darken-contrast: colorTextContrast(#931615);
  --main-color-info-contrast: colorTextContrast(#B1B2B3);
  --main-font-family: Public Sans,Helvetica, Arial, sans-serif;
  --main-font-weight: 400;
  --main-font-weight-bold: 600;
  --main-font-size-base: 1.4rem;
  --main-font-size-small: 1.2rem;
  --main-font-size-big: 1.7rem;
  --main-line-height: 1.2;
  --main-link-color: #BF1D1C;
  --main-link-color-hover: #a91a19;
  --main-link-color-contrast: #ffffff;
  --main-link-color-active: #282828;
  --main-link-color-active-contrast: #931615;
  --ai-aura-color-1: #BF1D1C;
  --ai-aura-color-2: #4bbecf;
  --ai-aura-background-color: #B1B2B3;
}

/*
Button

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

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

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-black);
  border-color: var(--main-color-black);
  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: 0;
  border-radius: 0;
  color: var(--main-color-black);
  cursor: pointer;
  background: var(--main-color-extra-light-gray);
  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;
  text-transform: uppercase;
  font-weight: bold;
}
@media (min-width: 768px) {
  button.disabled,
  .button_disabled,
  .btn-disabled,
  .button[disabled],
  button,
  .button {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 14px 20px 14px 20px;
  }
}
.button_disabled .icon,
.btn-disabled .icon,
button .icon,
.button .icon {
  font-size: 1.4em;
  line-height: 1;
  position: relative;
  margin-top: -1px;
}
.button_disabled .icon:first-child,
.btn-disabled .icon:first-child,
button .icon:first-child,
.button .icon:first-child {
  margin-left: -5px;
}
.button_disabled .icon:last-child,
.btn-disabled .icon:last-child,
button .icon:last-child,
.button .icon:last-child {
  margin-right: -5px;
}
.button_disabled:active,
.btn-disabled:active,
button:active,
.button:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
  text-decoration: none;
}
button--primary,
.button--primary {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-color: var(--main-color-primary);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
button--primary:active,
.button--primary:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-white);
}
button--action,
.button--action {
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
button--action:active,
.button--action:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-contrast);
}
button--bordered,
.button--bordered {
  background: transparent;
  color: var(--main-color-primary);
  border: 2px solid var(--main-color-primary);
}
button--bordered:hover,
button--bordered:focus,
.button--bordered:hover,
.button--bordered:focus {
  background: var(--main-color-primary);
  color: var(--main-color-white);
}
button--bordered:active,
.button--bordered:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
button--danger,
.button--danger {
  background: var(--main-color-danger);
  color: var(--main-color-white);
  border-color: var(--main-color-danger);
}
button--danger:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
  background: var(--main-color-danger-dark);
  border-color: var(--main-color-danger-dark);
  color: var(--main-color-white);
}
button--danger:active,
.button--danger:active {
  background: var(--main-color-danger-darken);
  border-color: var(--main-color-danger-darken);
  color: var(--main-color-white);
}
button--sm,
.button--sm {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  line-height: 18px;
  font-size: var(--main-font-size-small);
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 18px;
    padding-right: 30px;
    padding-bottom: 18px;
    padding-left: 30px;
    line-height: 22px;
    font-size: var(--main-font-size-big);
  }
}
.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.btn-disabled .icon,
.is-success.button_disabled .icon,
.is-success.btn-disabled .icon,
.is-error.button_disabled .icon,
.is-error.btn-disabled .icon,
button.is-loading .icon,
button.is-success .icon,
button.is-error .icon,
.button.is-loading .icon,
.button.is-success .icon,
.button.is-error .icon {
  opacity: 0;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-loading:after,
button.is-success:after,
button.is-error:after,
.button.is-loading:after,
.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-white) !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-white) !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;
}
.linkWithIcon.button_disabled:active,
.linkWithIcon.btn-disabled:active,
.linkWithIcon.button_disabled:focus,
.linkWithIcon.btn-disabled:focus,
.linkWithIcon.button_disabled:hover,
.linkWithIcon.btn-disabled:hover,
button.linkWithIcon:active,
button.linkWithIcon:focus,
button.linkWithIcon:hover,
.button.linkWithIcon:active,
.button.linkWithIcon:focus,
.button.linkWithIcon:hover {
  background: none;
}

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

@keyframes scaleRequestIconBtn {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.specialcheckboxSwitch i {
  background: #B1B2B3;
}
.specialcheckboxSwitch i:after {
  background: var(--main-color-white);
}

.specialcheckbox i {
  border-radius: 0;
}

/*
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: #282828;
  color: colorTextContrast(#282828);
}
.bg--black a:not(.button), .bg--black .link {
  color: colorTextContrast(#282828);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.border--primary-dark {
  border-color: #a91a19;
}

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

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

.border--primary-darken {
  border-color: #931615;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.border--success {
  border-color: #47824a;
}

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

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

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

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

.bg--black .button--action {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.bg--black .button--action:hover {
  background: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
.bg--black a:not(.button):hover, .bg--black .link:hover {
  color: var(--main-color-light-gray);
}

.bg--action a:not(.button), .bg--action .link {
  color: var(--main-color-white);
}
.bg--action a:not(.button):hover, .bg--action .link:hover {
  color: var(--main-color-light-gray);
}
.bg--action .button--action {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.bg--action .button--action:hover {
  background: var(--main-color-primary-dark);
  color: var(--main-color-white);
}

.bg--primary .button:hover {
  background: #a91a19;
}
.bg--primary .button--primary {
  background: var(--main-color-white);
  color: var(--main-color-black);
}

.bg--gray-base {
  color: var(--main-color-white);
}
.bg--gray-base a:not(.button), .bg--gray-base .link {
  color: var(--main-color-white);
}
.bg--gray-base a:not(.button):hover, .bg--gray-base .link:hover {
  color: var(--main-color-light-gray);
}

.bg--light-gray .button:not(.button--primary, .button--action) {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.bg--light-gray .button:not(.button--primary, .button--action):hover {
  background: var(--main-color-primary-dark);
  color: var(--main-color-white);
}

.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 {
  color: var(--main-color-light-gray);
}
.bg--primary .button:hover {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.bg--primary .button--primary:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.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 {
  color: var(--main-color-black);
}
.bg--secondary .button:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.bg--secondary .button--primary {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.bg--secondary .button--primary:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.bg--secondary .button--action:hover {
  background: var(--main-color-white);
  color: var(--main-color-black);
}

/*
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__row--header {
  font-weight: bold;
  text-transform: uppercase;
  color: var(--main-color-primary);
}

.fileBody input + span {
  border-radius: 0;
}
@media (max-width: 1023.98px) {
  .fileBody input + span {
    font-size: 12px;
  }
}

/*
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,
select,
textarea {
  border-radius: 0;
}

.selectBody:focus-visible, .customSelect__selected:focus-visible, select:focus-visible {
  outline: 0;
}

input::-webkit-date-and-time-value {
  text-align: left !important;
}

/* public-sans-regular - latin */
@font-face {
  font-family: Interstate;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Font-Bureau-Interstate-Black.woff2") format("woff2"), url("../fonts/Font-Bureau-Interstate-Black.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: Interstate;
  font-style: normal;
  font-display: swap;
  font-weight: bold;
  src: url("../fonts/Font-Bureau-Interstate-Bold.woff2") format("woff2"), url("../fonts/Font-Bureau-Interstate-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: Interstate;
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url("../fonts/Font-Bureau-Interstate-Light.woff2") format("woff2"), url("../fonts/Font-Bureau-Interstate-Light.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: Interstate;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/Font-Bureau-Interstate-Regular.woff2") format("woff2"), url("../fonts/Font-Bureau-Interstate-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*
Headlines

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

Styleguide Typo.Headlines
*/
h1.highlighted, .h1.highlighted,
h2.highlighted, .h2.highlighted,
h3.highlighted, .h3.highlighted,
h4.highlighted, .h4.highlighted,
h5.highlighted, .h5.highlighted,
h6.highlighted, .h6.highlighted {
  text-transform: uppercase;
  font-weight: 300;
}

/*
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
*/
tr:first-child td, tr:first-child th {
  color: var(--main-color-primary);
  font-weight: bold;
  text-transform: uppercase;
}

/*
Alerts

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

.alert--danger - Danger
.alert--success - Success
.alert--warning - Warning
.alert--primary - Primary
.alert--secondary - Secondary

Styleguide Components.Alerts
*/
.alert {
  border-radius: 0;
}
.alert--primary {
  background: #BF1D1C;
  color: colorTextContrast(#BF1D1C);
}
.alert--secondary {
  background: #e02f2e;
  color: colorTextContrast(#e02f2e);
}
.alert--action {
  background: #282828;
  color: colorTextContrast(#282828);
}
.alert--danger {
  background: #D32D2D;
  color: colorTextContrast(#D32D2D);
}
.alert--warning {
  background: #FF9903;
  color: colorTextContrast(#FF9903);
}
.alert--success {
  background: #47824a;
  color: colorTextContrast(#47824a);
}
.alert--success {
  color: var(--main-color-white);
}
.alert--primary {
  color: var(--main-color-white);
}
.alert--secondary {
  color: var(--main-color-white);
}

.contentBox {
  border-radius: 0;
}

/*
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.is-success .customSelect__selected {
  color: var(--main-color-white) !important;
}
.customSelect--small.is-success .customSelect__selected {
  color: var(--main-color-success) !important;
}

.iconbarIcon__count {
  color: var(--main-color-white);
}
.iconbarIcon:hover, .iconbarIcon:focus {
  color: var(--main-color-primary-dark);
}
.iconbarIcon:hover .iconbarIcon__count, .iconbarIcon:focus .iconbarIcon__count {
  color: var(--main-color-white);
}
.iconbarIcon__icon {
  color: var(--main-color-primary);
}

.inputGroup input:not(.pseudo-class-last-child):focus-visible {
  outline: var(--main-color-primary);
}

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

.infieldInputGroup.always-filled > label {
  top: 0;
  transform: translate(-5px, -50%);
  color: var(--main-color-dark-gray);
  font-size: 0.7em;
  background: var(--main-color-white);
  line-height: 1;
  padding-left: 5px;
  padding-right: 5px;
  max-width: 100%;
}

/*
Lists

Markup:
<ul class="{{modifier_class}}">
<li>List</li>
<li>List</li>
<li>List</li>
</ul>

.checkList - Checklist

Styleguide Base.Lists
*/
ul li::marker,
ol li::marker {
  color: var(--main-color-primary);
}

ul.checkList li:before {
  color: var(--main-color-primary);
}

.mainnav .nav--content {
  margin-left: 30px;
}
.mainnav .nav--content > li > a {
  font-weight: var(--main-font-weight-bold) !important;
}

.modal {
  position: fixed;
  inset: 0;
  height: 100dvh;
}
.modal__close:hover, .modal__close:focus {
  background: var(--main-color-extra-light-gray);
}

.emptybox {
  background: var(--main-color-extra-light-gray);
}

/*
Pagination

Markup:
<nav role="navigation" aria-label="Pagination">
  <ul class="pagination">
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking" aria-label="Previous Page">
            <i class="icon icon-angle-left" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="pagination__item " href="?page=1&amp;sort_by=ranking" aria-label="Goto Page 1">1</a>
      </li>
      <li>
        <a class="pagination__item " href="?page=2&amp;sort_by=ranking" aria-label="Goto Page 2">2</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking" aria-current="true" aria-label="Goto Page 3">3</a>
      </li>
      <span class="pagination__item pagination__item--seperator">...</span>
      <li>
        <a class="pagination__item " href="?page=5&amp;sort_by=ranking" aria-label="Goto Page 5">5</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking" aria-label="Next Page">
            <i class="icon icon-angle-right" aria-hidden="true"></i>
        </a>
      </li>
  </ul>
</nav>

Styleguide Components.Pagination
*/
a.pagination__item--active {
  background: var(--main-color-primary);
}
a.pagination__item:hover {
  background: var(--main-color-dark-gray);
  color: var(--main-color-white);
}

.radioList {
  margin: 0;
}
.radioListItem {
  border-radius: 0;
}

@media screen and (min-width: 768px) {
  .searchBar {
    max-width: 350px;
  }
}
.searchBar.is-focus #searchBar {
  color: var(--main-color-primary);
}
.searchBar input {
  background: none;
  border-color: var(--main-color-primary);
}
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
  border-radius: 0;
}
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
  background: var(--main-color-black);
  border-color: var(--main-color-black);
  color: var(--main-color-white);
}

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

.tag {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  font-size: var(--main-font-size-small);
  cursor: pointer;
  text-decoration: none;
}
.tag:hover {
  background: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
.tag:focus, .tag:active {
  color: var(--main-color-white);
}

.navToggler__bar {
  background: var(--main-color-primary);
}

.accountBox {
  border-radius: 0;
}
.accountBox__actions a:hover {
  color: var(--main-color-primary);
}
.accountBox .h3 .icon {
  color: var(--main-color-primary);
}
.accountBox__headline .icon {
  color: var(--main-color-primary);
}
.accountBox__footer button:hover {
  background: none;
  color: var(--main-color-primary-dark);
}

#basketTotal .amountLine__value {
  min-width: 150px;
  text-align: right;
}

.orderboxSummary__main .amountLines {
  min-height: 85px;
}

.categoryBox:hover, .categoryBox:focus, .categoryBox:active {
  color: var(--main-color-white);
}
@media (min-width: 768px) {
  .categoryBox__headline {
    font-size: 2rem !important;
  }
}

@media screen and (min-width: 1024px) {
  .directOrderItemlistItem__price {
    width: 200px;
  }
}
.directOrderDepositCosts {
  display: block;
}

@media screen and (max-width: 768px) {
  .sortSelectColumn .customSelect__selected {
    border-radius: 0;
  }
}

.customSelect__selected {
  white-space: wrap;
  border-radius: 0;
}

.inventory.loadSkeleton {
  width: 80px;
  height: 24px;
  display: block;
}
.inventory.loadSkeleton:before {
  display: none;
}

.itemboxList.itemboxList--5 .itembox {
  border-radius: 0;
}
.itemboxList.itemboxList--5 button.orderButton {
  flex-grow: 0;
  padding: 14px 20px;
}
.itemboxList.itemboxList--5 button.orderButton span {
  display: none;
}
.itemboxList.itemboxList--5 button.orderButton .icon {
  margin: 0;
  position: static;
  transform: none;
}
@media screen and (max-width: 768px) {
  .itemboxList.itemboxList--5 button.orderButton .icon {
    translate: 0 0;
  }
}
.itemboxList.itemboxList--5 .inventoryWrapper {
  justify-content: start;
  margin-top: 10px;
}
.itemboxList.itemboxList--5 .pricesList {
  min-height: 55px;
  align-items: flex-start;
}
.itemboxList.itemboxList--5 .pricesList .price {
  width: 100%;
}
.itemboxList.itemboxList--5 .pricesList .itemDepositCost {
  font-size: 11px;
  margin-top: 10px;
}

.itemcardBuybox .icon[class*=icon-favorites] {
  color: var(--main-color-primary);
}
.itemcardSummary {
  color: var(--main-color-primary);
}
.itemcardImagesThumbs .swiper-slide:has(.itemcardImages__item[data-original=""]) {
  display: none;
}

.itemlistElement {
  border-radius: 0;
}
@media screen and (max-width: 1024px) {
  .itemlistElement__prices .price {
    width: 100%;
  }
}
.itemlistElement__actions {
  margin-left: auto;
}
.itemlistElement__actions .icon-favorites-filled {
  color: var(--main-color-primary);
}

.itembox__actions .actionIcon {
  color: var(--main-color-primary);
}
.itembox .inventoryShippingInfo {
  padding-left: 10px;
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .itembox .inventoryShippingInfo {
    border-left: 0;
  }
}
.itemboxList.swiper {
  padding-left: 0;
  padding-right: 0;
  margin: 0 -10px;
}

.itemlistStickyOrderBar {
  position: static;
  box-shadow: none;
}

.loadSkeleton {
  background: var(--main-color-light-gray) !important;
  animation: pulse 1s infinite ease-in-out;
  color: transparent !important;
}

.refItemno.loadSkeleton {
  display: block;
  width: 180px;
  height: 18px;
}

.orderButtonWrapper .orderButton .icon {
  margin-right: 0;
}

@media screen and (min-width: 800px) {
  .orderItem__price {
    width: 200px;
  }
}
.orderItem__price .orderDepositCosts {
  display: block;
}

@media screen and (min-width: 768px) {
  .pricesList .price {
    width: 200px;
  }
}

.promotion.promotion--1, .promotion.promotion--2, .promotion.promotion--3 {
  color: var(--main-color-white);
}
.promotion.promotion--clickable:hover {
  color: var(--main-color-white);
}

.quantity__spinnerItem {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-radius: 0;
}
.quantity--inactive .quantity__spinnerItem {
  color: var(--main-color-black);
}

@media screen and (min-width: 650px) {
  .itemBasketBox__price {
    width: 200px;
  }
}
.itemBasketBox__price .basketDepositCosts {
  display: block;
}

.orderHistoryListItemSumPrice.loadSkeleton {
  width: 100%;
  height: 17px;
  display: block;
}

.salesPersonBox__contact a .icon {
  top: 3px;
}

.teamList > .container {
  padding: 0;
}

.banner .contentImage:after {
  display: none !important;
  opacity: 0;
}

.dcCookieModal .dcCookieBar__button:hover {
  color: var(--main-color-white);
}
.dcCookieModal .dcCookieBar__buttonaction {
  color: var(--main-color-white);
}
.dcCookieModal .dcCookieBar__buttonaction:hover {
  color: var(--main-color-white);
}

.dcCookieBarSwitch:has(input:checked) {
  background: var(--main-color-primary);
  color: var(--main-color-black);
}
.dcCookieBarSwitch:has(input:checked) span {
  background: var(--main-color-white);
}

#newUserModal label[for=input_right_price],
#newUserModal #input_right_price {
  display: none;
}

#editUserModal label[for=input_right_price],
#editUserModal #input_right_price {
  display: none;
}

.footer {
  margin-bottom: 0 !important;
}
.footerBottom {
  border: 0;
  background: var(--main-color-primary);
  color: var(--main-color-white);
}
@media screen and (max-width: 767px) {
  .footerBottom .container {
    justify-content: center;
    flex-direction: column-reverse;
  }
}
.footerBottom a {
  color: var(--main-color-white);
}
.footerBottom .footerBottomLeft {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .footerBottom .footerBottomRight {
    margin-bottom: 10px;
  }
}
.footer .nav a {
  color: var(--main-color-white);
}
.footer .nav a:hover {
  text-decoration: underline;
  color: var(--main-color-white);
}
@media screen and (max-width: 767px) {
  .footer .nav ul {
    flex-direction: row;
    gap: 15px;
  }
  .footer .nav ul > li {
    padding: 0;
  }
}
.footer .nav li:hover a {
  color: var(--main-color-white);
  text-decoration: underline;
}
.footerMain {
  padding: 30px 0;
  border-top: 0;
  background: var(--main-color-extra-light-gray);
}
.footerInfo {
  display: grid;
  grid-template-columns: 100px auto;
  gap: 10px;
  justify-content: center;
}
.footerLogin .nav a {
  color: var(--main-color-black);
}
.footerLogin .nav a:hover {
  color: var(--main-color-primary);
}
.footerLogin .nav li:hover a {
  color: var(--main-color-primary);
}

.headerTop {
  background: var(--main-color-extra-light-gray);
}

.headerLogo img {
  aspect-ratio: unset;
}

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

.headerMain .headerMainNavigation {
  margin: 0;
  flex-grow: 1;
}
@media screen and (min-width: 1024px) {
  .headerMain .headerSearch {
    flex-grow: unset;
  }
}

.headerShopOrderLogo {
  text-align: center;
}
.headerShopOrderLogo img {
  aspect-ratio: unset;
}

.mobileMenu__close {
  color: var(--main-color-primary);
}

.warrantiesTable {
  display: table;
  width: 100%;
}
.warrantiesRow {
  display: table-row;
}
.warrantiesRow:nth-child(even) {
  background: #fff7f7;
}
.warrantiesCell {
  display: table-cell;
  padding: 10px;
}
.warrantiesCell:last-child {
  text-align: right;
}
.warrantiesHeader {
  font-weight: 600;
  background: var(--main-color-extra-light-gray);
}

.warrantyColumnWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
}
.warrantyPagination {
  margin-top: 40px;
}

#saveWarranty {
  margin-left: auto;
  display: block;
  margin-top: 20px;
}

#actionFeedback {
  margin-top: 10px;
  text-align: right;
  color: var(--main-color-primary);
}

#newWarranty {
  margin-bottom: 20px;
  display: block;
}
#newWarranty + .alert {
  margin-bottom: 20px;
}

#invoiceFiles:has(div),
#purchaseFiles:has(div),
#imageFiles:has(div),
#warrantyFiles:has(div),
#reportFiles:has(div) {
  margin-bottom: 20px;
}

@media (max-width: 1023.98px) {
  .warrantyColumnWrap {
    grid-template-columns: 1fr;
    grid-gap: 16px;
  }
  .warranty .infieldInputGroup {
    margin-bottom: 10px;
  }
  #warrantyDetail input, #warrantyDetail select {
    font-size: 12px;
  }
  .warrantiesTable {
    display: block;
  }
  .warrantiesHeader {
    display: none !important;
  }
  .warrantiesRow {
    display: block;
    background: #fff;
    border: 1px solid var(--main-color-extra-light-gray);
    padding: 8px 12px;
  }
  .warrantiesRow + .warrantiesRow {
    margin-top: 10px;
  }
  .warrantiesCell {
    display: block;
    min-width: 0;
    padding: 6px 0;
    text-align: left;
    min-height: 30px;
    position: relative;
    padding-left: 140px;
  }
  .warrantiesCell::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 6px;
    width: 130px;
    color: var(--main-color-dark-gray);
    font-weight: 600;
    white-space: nowrap;
  }
  .warrantiesCell:last-child {
    padding-left: 0;
    text-align: left;
  }
  .warrantiesCell:last-child::before {
    content: "";
  }
}
.btLoading {
  animation: rotation 1s infinite linear;
  display: inline-flex;
  font-size: 35px;
  width: 35px;
  height: 35px;
  align-items: center;
  justify-content: center;
  color: var(--main-color-primary);
}

#loadingList {
  text-align: center;
  margin: 150px 0;
}
/*# sourceMappingURL=child.css.map */