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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
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-addressbook'></i> <span>icon icon-addressbook</span>

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

<i class='icon icon-adressbook'></i> <span>icon icon-adressbook</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-badge-check'></i> <span>icon icon-badge-check</span>

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

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

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

<i class='icon icon-basket-light'></i> <span>icon icon-basket-light</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-box'></i> <span>icon icon-box</span>

<i class='icon icon-burger-soda'></i> <span>icon icon-burger-soda</span>

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

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

<i class='icon icon-chart-simple'></i> <span>icon icon-chart-simple</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-light'></i> <span>icon icon-check-light</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-corn'></i> <span>icon icon-corn</span>

<i class='icon icon-cutlery'></i> <span>icon icon-cutlery</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-doppelwandig'></i> <span>icon icon-doppelwandig</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-folder-light'></i> <span>icon icon-folder-light</span>

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

<i class='icon icon-globe-light'></i> <span>icon icon-globe-light</span>

<i class='icon icon-graduation-cap'></i> <span>icon icon-graduation-cap</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-houses'></i> <span>icon icon-houses</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-laptop-mobile'></i> <span>icon icon-laptop-mobile</span>

<i class='icon icon-lightbulb-on'></i> <span>icon icon-lightbulb-on</span>

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

<i class='icon icon-list-light'></i> <span>icon icon-list-light</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-map'></i> <span>icon icon-map</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-money-bill-1-wave'></i> <span>icon icon-money-bill-1-wave</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-light'></i> <span>icon icon-pen-light</span>

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

<i class='icon icon-people-line'></i> <span>icon icon-people-line</span>

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

<i class='icon icon-pintereset'></i> <span>icon icon-pintereset</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-quality'></i> <span>icon icon-quality</span>

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

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

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

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

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

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

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

<i class='icon icon-rocket-launch'></i> <span>icon icon-rocket-launch</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-fast'></i> <span>icon icon-shipping-fast</span>

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

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

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

<i class='icon icon-square-list-light'></i> <span>icon icon-square-list-light</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-light'></i> <span>icon icon-star-light</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-sugar-cane'></i> <span>icon icon-sugar-cane</span>

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

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

<i class='icon icon-togo-cup'></i> <span>icon icon-togo-cup</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-umbrella-beach'></i> <span>icon icon-umbrella-beach</span>

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

<i class='icon icon-user-light'></i> <span>icon icon-user-light</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-x'></i> <span>icon icon-x</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-addressbook: "";
  --base-icon-adress: "";
  --base-icon-adressbook: "";
  --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-badge-check: "";
  --base-icon-bars: "";
  --base-icon-basket-02-light: "";
  --base-icon-basket-02: "";
  --base-icon-basket-light: "";
  --base-icon-basket: "";
  --base-icon-bike: "";
  --base-icon-box: "";
  --base-icon-burger-soda: "";
  --base-icon-certificates: "";
  --base-icon-chart-light: "";
  --base-icon-chart-simple: "";
  --base-icon-chart: "";
  --base-icon-chat: "";
  --base-icon-check-circle: "";
  --base-icon-check-light: "";
  --base-icon-check: "";
  --base-icon-clock: "";
  --base-icon-close: "";
  --base-icon-columns: "";
  --base-icon-copy: "";
  --base-icon-corn: "";
  --base-icon-cutlery: "";
  --base-icon-date: "";
  --base-icon-document-archive: "";
  --base-icon-doppelwandig: "";
  --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-folder-light: "";
  --base-icon-gift: "";
  --base-icon-globe-light: "";
  --base-icon-graduation-cap: "";
  --base-icon-heart-filled: "";
  --base-icon-heart: "";
  --base-icon-home: "";
  --base-icon-houses: "";
  --base-icon-info: "";
  --base-icon-instagram: "";
  --base-icon-invoice: "";
  --base-icon-language: "";
  --base-icon-laptop-mobile: "";
  --base-icon-lightbulb-on: "";
  --base-icon-linkedin: "";
  --base-icon-list-light: "";
  --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-map: "";
  --base-icon-marketing: "";
  --base-icon-minus: "";
  --base-icon-money-bill-1-wave: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment: "";
  --base-icon-pen-light: "";
  --base-icon-pen-to-square: "";
  --base-icon-people-line: "";
  --base-icon-phone: "";
  --base-icon-pintereset: "";
  --base-icon-play: "";
  --base-icon-plus: "";
  --base-icon-print: "";
  --base-icon-quality: "";
  --base-icon-question: "";
  --base-icon-quickorder-light: "";
  --base-icon-quickorder: "";
  --base-icon-register: "";
  --base-icon-reload: "";
  --base-icon-retoure: "";
  --base-icon-rma: "";
  --base-icon-rocket-launch: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-settings: "";
  --base-icon-share: "";
  --base-icon-shipping-fast: "";
  --base-icon-shipping: "";
  --base-icon-sorting: "";
  --base-icon-spray: "";
  --base-icon-square-list-light: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star-light: "";
  --base-icon-star: "";
  --base-icon-subscriptions: "";
  --base-icon-sugar-cane: "";
  --base-icon-tag: "";
  --base-icon-tiktok: "";
  --base-icon-togo-cup: "";
  --base-icon-trash: "";
  --base-icon-twitter: "";
  --base-icon-umbrella-beach: "";
  --base-icon-upload: "";
  --base-icon-user-light: "";
  --base-icon-user: "";
  --base-icon-users: "";
  --base-icon-whatsapp: "";
  --base-icon-x: "";
  --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-addressbook:before {
  content: var(--base-icon-addressbook);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-addressbook'></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-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-badge-check'></i>

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

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

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

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

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

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

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

<i class='icon icon-burger-soda'></i>

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

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

<i class='icon icon-chart-simple'></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-light'></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-corn'></i>

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

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

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

<i class='icon icon-doppelwandig'></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-folder-light'></i>

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

<i class='icon icon-globe-light'></i>

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

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

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

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

<i class='icon icon-houses'></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-laptop-mobile'></i>

<i class='icon icon-lightbulb-on'></i>

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

<i class='icon icon-list-light'></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-map'></i>

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

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

<i class='icon icon-money-bill-1-wave'></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-light'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-sugar-cane'></i>

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

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

<i class='icon icon-togo-cup'></i>

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

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

<i class='icon icon-umbrella-beach'></i>

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

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

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

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

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

<i class='icon icon-x'></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: #2B2B2C;
  --main-color-gray-base: #919191;
  --main-color-middle-gray: #d9dddd;
  --main-color-dark-gray: #919191;
  --main-color-light-gray: #f1f1f1;
  --main-color-primary: #bccf00;
  --main-color-primary-dark: rgb(164.8405797101, 181.5, 0);
  --main-color-primary-darken: rgb(141.6811594203, 156, 0);
  --main-color-secondary: rgb(231.8695652174, 255, 3);
  --main-color-action: #2B2B2C;
  --main-color-danger: #D32D2D;
  --main-color-danger-dark: rgb(190.5708661417, 39.9291338583, 39.9291338583);
  --main-color-danger-darken: rgb(169.4881889764, 35.5118110236, 35.5118110236);
  --main-color-warning: #FF9903;
  --main-color-warning-dark: rgb(232.5, 138.3928571429, 0);
  --main-color-warning-darken: rgb(207, 123.2142857143, 0);
  --main-color-success: #bccf00;
  --main-color-success-dark: rgb(164.8405797101, 181.5, 0);
  --main-color-success-darken: rgb(141.6811594203, 156, 0);
  --main-color-info: #f1f1f1;
  --main-color-primary-contrast: #2B2B2C;
  --main-color-primary-dark-contrast: #2B2B2C;
  --main-color-primary-darken-contrast: #2B2B2C;
  --main-color-secondary-contrast: #2B2B2C;
  --main-color-action-contrast: #ffffff;
  --main-color-danger-contrast: #ffffff;
  --main-color-danger-dark-contrast: #ffffff;
  --main-color-danger-darken-contrast: #ffffff;
  --main-color-warning-contrast: #2B2B2C;
  --main-color-warning-dark-contrast: #2B2B2C;
  --main-color-warning-darken-contrast: #2B2B2C;
  --main-color-success-contrast: #2B2B2C;
  --main-color-success-dark-contrast: #2B2B2C;
  --main-color-success-darken-contrast: #2B2B2C;
  --main-color-info-contrast: #2B2B2C;
  --main-font-family: Public 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.3rem;
  --main-font-size-big: 1.8rem;
  --main-line-height: 1.4;
  --main-link-color: #2B2B2C;
  --main-link-color-hover: rgb(164.8405797101, 181.5, 0);
  --main-link-color-contrast: #ffffff;
  --main-link-color-active: #2B2B2C;
  --main-link-color-active-contrast: rgb(141.6811594203, 156, 0);
  --ai-aura-color-1: #bccf00;
  --ai-aura-color-2: #4bbecf;
  --ai-aura-background-color: #f1f1f1;
}

:root {
  --main-color-white: #ffffff;
  --main-color-black: #212522;
  --main-color-gray-base: #ece7de;
  --main-color-middle-gray: #ece7de;
  --main-color-dark-gray: #5f5f5f;
  --main-color-light-gray: #f8f6f2;
  --main-color-primary: #3e7d30;
  --main-color-primary-dark: rgb(52.8612716763, 106.5751445087, 40.9248554913);
  --main-color-primary-darken: rgb(43.7225433526, 88.1502890173, 33.8497109827);
  --main-color-secondary: #FF6619;
  --main-color-secondary-dark: rgb(254.5, 85.202173913, 0);
  --main-color-secondary-darken: rgb(229, 76.6652173913, 0);
  --main-color-action: #FF6619;
  --main-color-danger: #c92522;
  --main-color-danger-dark: rgb(179.1893617021, 32.985106383, 30.3106382979);
  --main-color-danger-darken: rgb(157.3787234043, 28.970212766, 26.6212765957);
  --main-color-warning: #B7582C;
  --main-color-warning-dark: rgb(162.4427312775, 78.1145374449, 39.0572687225);
  --main-color-warning-darken: rgb(141.8854625551, 68.2290748899, 34.1145374449);
  --main-color-success: #81B532;
  --main-color-success-dark: rgb(52.8612716763, 106.5751445087, 40.9248554913);
  --main-color-success-darken: rgb(43.7225433526, 88.1502890173, 33.8497109827);
  --main-color-info: #f8f6f2;
  --main-color-primary-contrast: #ffffff;
  --main-color-primary-dark-contrast: #ffffff;
  --main-color-primary-darken-contrast: #ffffff;
  --main-color-secondary-contrast: #212522;
  --main-color-secondary-dark-contrast: #212522;
  --main-color-secondary-darken-contrast: #212522;
  --main-color-action-contrast: #212522;
  --main-color-danger-contrast: #ffffff;
  --main-color-danger-dark-contrast: #ffffff;
  --main-color-danger-darken-contrast: #ffffff;
  --main-color-warning-contrast: #ffffff;
  --main-color-warning-dark-contrast: #ffffff;
  --main-color-warning-darken-contrast: #ffffff;
  --main-color-success-contrast: #212522;
  --main-color-success-dark-contrast: #ffffff;
  --main-color-success-darken-contrast: #ffffff;
  --main-color-info-contrast: #212522;
  --main-font-family: Mulish ,Helvetica, Arial, sans-serif;
  --main-font-weight: 500;
  --main-font-weight-semibold: 600;
  --main-font-weight-bold: 700;
  --main-font-weight-black: 900;
  --main-font-size-base: 1.8rem;
  --main-font-size-small: 1.6rem;
  --main-font-size-big: 2rem;
  --main-line-height: 1.44;
  --main-link-color: #212522;
  --main-link-color-hover: rgb(52.8612716763, 106.5751445087, 40.9248554913);
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

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

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

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

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

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

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

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

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

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

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

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

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

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.order-first {
  order: -1;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-last {
  order: 6;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes scaleRequestIcon {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes scaleRequestIconBigger {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.6;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/*
Text

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

.leadtext - Bigger Text
.smalltext - Smaller Text

Styleguide Typo.Text
*/
/*
Links

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

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

Styleguide Typo.Links
*/
html {
  font-size: 10px;
}

body {
  background-color: var(--main-color-white);
  font-weight: var(--main-font-weight);
  line-height: var(--main-line-height);
  font-family: var(--main-font-family);
  color: var(--main-color-black);
  min-width: 320px;
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  body {
    font-size: var(--main-font-size-base);
  }
}

.leadtext {
  font-size: 1.6rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .leadtext {
    font-size: var(--main-font-size-big);
  }
}

.smalltext {
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  .smalltext {
    font-size: var(--main-font-size-small);
  }
}

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

a, .link {
  color: var(--main-link-color);
  text-decoration: underline;
  cursor: pointer;
}
*:focus {
  outline: 0;
}

a:focus {
  outline: 0;
}

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

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

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

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

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

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

semibold, .semibold {
  font-weight: var(--main-font-weight-semibold);
}

black, .black {
  font-weight: var(--main-font-weight-black);
}

/* mulish-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: normal;
  font-weight: 500;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-500.woff2") format("woff2");
}
/* mulish-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: italic;
  font-weight: 500;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-500italic.woff2") format("woff2");
}
/* mulish-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: normal;
  font-weight: 600;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-600.woff2") format("woff2");
}
/* mulish-600italic - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: italic;
  font-weight: 600;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-600italic.woff2") format("woff2");
}
/* mulish-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: normal;
  font-weight: 700;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-700.woff2") format("woff2");
}
/* mulish-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: italic;
  font-weight: 700;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-700italic.woff2") format("woff2");
}
/* mulish-900 - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: normal;
  font-weight: 900;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-900.woff2") format("woff2");
}
/* mulish-900italic - latin */
@font-face {
  font-display: swap;
  font-family: "Mulish";
  font-style: italic;
  font-weight: 900;
  src: url("../../../ragaller_global/fonts/mulish-v13-latin-900italic.woff2") format("woff2");
}
/* amatic-sc-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Amatic SC";
  font-style: normal;
  font-weight: 400;
  src: url("../../../ragaller_global/fonts/amatic-sc-v27-latin-regular.woff2") format("woff2");
}
/* amatic-sc-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Amatic SC";
  font-style: normal;
  font-weight: 700;
  src: url("../../../ragaller_global/fonts/amatic-sc-v27-latin-700.woff2") format("woff2");
}
/*
Headlines

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

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

h1, .h1 {
  margin-bottom: clamp(10px, 1em, 30px);
  font-weight: var(--main-font-weight-black);
  font-size: 2.4rem;
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 4.2rem;
  }
}
h1.highlighted, .h1.highlighted {
  font-size: 4.5rem;
}
@media (min-width: 768px) {
  h1.highlighted, .h1.highlighted {
    font-size: 5.75rem;
  }
}
@media (min-width: 1024px) {
  h1.highlighted, .h1.highlighted {
    font-size: 6rem;
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .h1.highlighted {
    font-size: 6.25rem;
  }
}
@media (min-width: 1540px) {
  h1.highlighted, .h1.highlighted {
    font-size: 7rem;
  }
}

h2, .h2, .orderboxSummary__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: 2rem;
}
@media (min-width: 1024px) {
  h2, .h2, .orderboxSummary__headline {
    font-size: 3.2rem;
  }
}
h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline {
  font-size: 4.5rem;
}
@media (min-width: 768px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline {
    font-size: 5.75rem;
  }
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline {
    font-size: 6rem;
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline {
    font-size: 6.25rem;
  }
}
@media (min-width: 1540px) {
  h2.highlighted, .h2.highlighted, .highlighted.orderboxSummary__headline {
    font-size: 7rem;
  }
}

h3, .h3, .historyItem__heading {
  font-weight: var(--main-font-weight-bold);
  font-size: 2rem;
}
@media (min-width: 768px) {
  h3, .h3, .historyItem__heading {
    font-size: 2.8rem;
  }
}
@media (min-width: 1024px) {
  h3, .h3, .historyItem__heading {
    font-size: 2.96rem;
  }
}
@media (min-width: 1250px) {
  h3, .h3, .historyItem__heading {
    font-size: 3.12rem;
  }
}
@media (min-width: 1540px) {
  h3, .h3, .historyItem__heading {
    font-size: 3.6rem;
  }
}

h4, .h4 {
  font-size: 2rem;
}
@media (min-width: 768px) {
  h4, .h4 {
    font-size: 2.5rem;
  }
}
@media (min-width: 1024px) {
  h4, .h4 {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  h4, .h4 {
    font-size: 2.7rem;
  }
}
@media (min-width: 1540px) {
  h4, .h4 {
    font-size: 3rem;
  }
}

h5, .h5 {
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  h5, .h5 {
    font-size: 2.2rem;
  }
}
@media (min-width: 1024px) {
  h5, .h5 {
    font-size: 2.28rem;
  }
}
@media (min-width: 1250px) {
  h5, .h5 {
    font-size: 2.36rem;
  }
}
@media (min-width: 1540px) {
  h5, .h5 {
    font-size: 2.6rem;
  }
}

h6, .h6 {
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  h6, .h6 {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  h6, .h6 {
    font-size: 2.08rem;
  }
}
@media (min-width: 1250px) {
  h6, .h6 {
    font-size: 2.16rem;
  }
}
@media (min-width: 1540px) {
  h6, .h6 {
    font-size: 2.4rem;
  }
}

h1, .h1 {
  text-transform: uppercase;
  color: var(--main-color-primary);
  font-size: 3rem;
}
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3.8rem;
  }
}
@media (min-width: 1250px) {
  h1, .h1 {
    font-size: 5rem;
  }
}

h2, .h2, .orderboxSummary__headline {
  font-size: 2.6rem;
}
@media (min-width: 768px) {
  h2, .h2, .orderboxSummary__headline {
    font-size: 3.2rem;
  }
}
@media (min-width: 1250px) {
  h2, .h2, .orderboxSummary__headline {
    font-size: 4.2rem;
  }
}

h1.decorated, .h1.decorated, h2.decorated, .h2.decorated, .decorated.orderboxSummary__headline, h3.decorated, .h3.decorated, .decorated.historyItem__heading, h4.decorated, .h4.decorated, h5.decorated, .h5.decorated, h6.decorated, .h6.decorated {
  font-family: "Amatic SC";
  font-weight: 400;
  color: var(--main-color-primary);
  font-size: 45px;
  line-height: 1;
}
h1.decorated--bold, .h1.decorated--bold, h2.decorated--bold, .h2.decorated--bold, .decorated--bold.orderboxSummary__headline, h3.decorated--bold, .h3.decorated--bold, .decorated--bold.historyItem__heading, h4.decorated--bold, .h4.decorated--bold, h5.decorated--bold, .h5.decorated--bold, h6.decorated--bold, .h6.decorated--bold {
  font-weight: 700;
}
@media (min-width: 1024px) {
  h1.decorated, .h1.decorated, h2.decorated, .h2.decorated, .decorated.orderboxSummary__headline, h3.decorated, .h3.decorated, .decorated.historyItem__heading, h4.decorated, .h4.decorated, h5.decorated, .h5.decorated, h6.decorated, .h6.decorated {
    font-size: 60px;
  }
}
@media (max-width: 767.98px) {
  h1, .h1, h2, .h2, .orderboxSummary__headline, h3, .h3, .historyItem__heading, h4, .h4, h5, .h5, h6, .h6 {
    hyphens: auto;
  }
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

Markup:
<div class="kssColorBoxes">
  <div class="kssColorBox bg--white">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--primary"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--action"><span>Button</span><i class="icon icon-arrow-right"></i></a>
  </div>
  <div class="kssColorBox bg--black">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--primary"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--action"><span>Button</span><i class="icon icon-arrow-right"></i></a>
  </div>
  <div class="kssColorBox bg--gray-base">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--primary"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--action"><span>Button</span><i class="icon icon-arrow-right"></i></a>
  </div>
  <div class="kssColorBox bg--light-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--primary"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--action"><span>Button</span><i class="icon icon-arrow-right"></i></a>
  </div>
  <div class="kssColorBox bg--primary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--primary"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--action"><span>Button</span><i class="icon icon-arrow-right"></i></a>
  </div>
  <div class="kssColorBox bg--action">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--primary"><span>Button</span><i class="icon icon-arrow-right"></i></a><br/><br/>
    <a href="#" class="button button--action"><span>Button</span><i class="icon icon-arrow-right"></i></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--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: #212522;
  color: #ffffff;
}
.bg--black a:not(.button), .bg--black .link {
  color: #ffffff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg--primary {
  background-color: #3e7d30;
  color: #ffffff;
}
.bg--primary a:not(.button), .bg--primary .link {
  color: #ffffff;
}

.border--primary {
  border-color: #3e7d30;
}

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

.bg--primary-dark {
  background-color: rgb(52.8612716763, 106.5751445087, 40.9248554913);
  color: #ffffff;
}
.bg--primary-dark a:not(.button), .bg--primary-dark .link {
  color: #ffffff;
}

.border--primary-dark {
  border-color: rgb(52.8612716763, 106.5751445087, 40.9248554913);
}

.color--primary-dark {
  color: rgb(52.8612716763, 106.5751445087, 40.9248554913);
}
.color--primary-dark a:not(:hover):not(:focus):not(:active), .color--primary-dark .link:not(:hover):not(:focus):not(:active) {
  color: rgb(52.8612716763, 106.5751445087, 40.9248554913);
}

.bg--primary-darken {
  background-color: rgb(43.7225433526, 88.1502890173, 33.8497109827);
  color: #ffffff;
}
.bg--primary-darken a:not(.button), .bg--primary-darken .link {
  color: #ffffff;
}

.border--primary-darken {
  border-color: rgb(43.7225433526, 88.1502890173, 33.8497109827);
}

.color--primary-darken {
  color: rgb(43.7225433526, 88.1502890173, 33.8497109827);
}
.color--primary-darken a:not(:hover):not(:focus):not(:active), .color--primary-darken .link:not(:hover):not(:focus):not(:active) {
  color: rgb(43.7225433526, 88.1502890173, 33.8497109827);
}

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

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

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

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

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

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

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

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

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

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

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

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

.bg--success {
  background-color: #81B532;
  color: #212522;
}
.bg--success a:not(.button), .bg--success .link {
  color: #212522;
}

.border--success {
  border-color: #81B532;
}

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

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

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

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

.bg--black a:hover, .bg--black a:focus, .bg--black a:active {
  color: var(--main-color-primary);
}
.bg--black button:hover, .bg--black button:focus, .bg--black button:active, .bg--black .button:hover, .bg--black .button:focus, .bg--black .button:active {
  color: var(--main-color-gray-base);
}

.bg--gray-base a:hover, .bg--gray-base a:focus, .bg--gray-base a:active, .bg--light-gray a:hover, .bg--light-gray a:focus, .bg--light-gray a:active {
  color: var(--main-color-primary);
}
.bg--gray-base button, .bg--gray-base .button, .bg--light-gray button, .bg--light-gray .button {
  border-color: var(--main-color-black);
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.bg--gray-base button:hover, .bg--gray-base button:focus, .bg--gray-base button:active, .bg--gray-base .button:hover, .bg--gray-base .button:focus, .bg--gray-base .button:active, .bg--light-gray button:hover, .bg--light-gray button:focus, .bg--light-gray button:active, .bg--light-gray .button:hover, .bg--light-gray .button:focus, .bg--light-gray .button:active {
  color: var(--main-color-black);
  background: transparent;
}
.bg--gray-base button:hover .icon, .bg--gray-base button:focus .icon, .bg--gray-base button:active .icon, .bg--gray-base .button:hover .icon, .bg--gray-base .button:focus .icon, .bg--gray-base .button:active .icon, .bg--light-gray button:hover .icon, .bg--light-gray button:focus .icon, .bg--light-gray button:active .icon, .bg--light-gray .button:hover .icon, .bg--light-gray .button:focus .icon, .bg--light-gray .button:active .icon {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.bg--gray-base .button--primary, .bg--light-gray .button--primary {
  border-color: var(--main-color-primary);
  background: var(--main-color-primary);
}
.bg--gray-base .button--primary:hover, .bg--gray-base .button--primary:focus, .bg--gray-base .button--primary:active, .bg--light-gray .button--primary:hover, .bg--light-gray .button--primary:focus, .bg--light-gray .button--primary:active {
  color: var(--main-color-primary);
}
.bg--gray-base .button--primary:hover .icon, .bg--gray-base .button--primary:focus .icon, .bg--gray-base .button--primary:active .icon, .bg--light-gray .button--primary:hover .icon, .bg--light-gray .button--primary:focus .icon, .bg--light-gray .button--primary:active .icon {
  background: var(--main-color-primary);
}
.bg--gray-base .button--action, .bg--gray-base .button--secondary, .bg--light-gray .button--action, .bg--light-gray .button--secondary {
  border-color: var(--main-color-action);
  background: var(--main-color-action);
}
.bg--gray-base .button--action:hover, .bg--gray-base .button--action:focus, .bg--gray-base .button--action:active, .bg--gray-base .button--secondary:hover, .bg--gray-base .button--secondary:focus, .bg--gray-base .button--secondary:active, .bg--light-gray .button--action:hover, .bg--light-gray .button--action:focus, .bg--light-gray .button--action:active, .bg--light-gray .button--secondary:hover, .bg--light-gray .button--secondary:focus, .bg--light-gray .button--secondary:active {
  color: var(--main-color-action);
}
.bg--gray-base .button--action:hover .icon, .bg--gray-base .button--action:focus .icon, .bg--gray-base .button--action:active .icon, .bg--gray-base .button--secondary:hover .icon, .bg--gray-base .button--secondary:focus .icon, .bg--gray-base .button--secondary:active .icon, .bg--light-gray .button--action:hover .icon, .bg--light-gray .button--action:focus .icon, .bg--light-gray .button--action:active .icon, .bg--light-gray .button--secondary:hover .icon, .bg--light-gray .button--secondary:focus .icon, .bg--light-gray .button--secondary:active .icon {
  background: var(--main-color-action);
}

.bg--primary a:hover, .bg--primary a:focus, .bg--primary a:active {
  color: var(--main-color-action);
}
.bg--primary button:hover, .bg--primary button:focus, .bg--primary button:active, .bg--primary .button:hover, .bg--primary .button:focus, .bg--primary .button:active {
  color: var(--main-color-gray-base);
}
.bg--primary .button--primary {
  border-color: var(--main-color-primary-darken);
  background: var(--main-color-primary-darken);
}
.bg--primary .button--primary .icon {
  color: var(--main-color-primary-darken);
}
.bg--primary .button--primary:hover, .bg--primary .button--primary:focus, .bg--primary .button--primary:active {
  color: var(--main-color-white);
  background: transparent;
}
.bg--primary .button--primary:hover .icon, .bg--primary .button--primary:focus .icon, .bg--primary .button--primary:active .icon {
  color: var(--main-color-white);
  background: var(--main-color-primary-darken);
}

.bg--action a:hover, .bg--action a:focus, .bg--action a:active, .bg--secondary a:hover, .bg--secondary a:focus, .bg--secondary a:active {
  color: var(--main-color-primary);
}
.bg--action button:hover, .bg--action button:focus, .bg--action button:active, .bg--action .button:hover, .bg--action .button:focus, .bg--action .button:active, .bg--secondary button:hover, .bg--secondary button:focus, .bg--secondary button:active, .bg--secondary .button:hover, .bg--secondary .button:focus, .bg--secondary .button:active {
  color: var(--main-color-gray-base);
}
.bg--action .button--secondary, .bg--action .button--action, .bg--secondary .button--secondary, .bg--secondary .button--action {
  border-color: var(--main-color-secondary-darken);
  background: var(--main-color-secondary-darken);
}
.bg--action .button--secondary .icon, .bg--action .button--action .icon, .bg--secondary .button--secondary .icon, .bg--secondary .button--action .icon {
  color: var(--main-color-secondary-darken);
}
.bg--action .button--secondary:hover, .bg--action .button--secondary:focus, .bg--action .button--secondary:active, .bg--action .button--action:hover, .bg--action .button--action:focus, .bg--action .button--action:active, .bg--secondary .button--secondary:hover, .bg--secondary .button--secondary:focus, .bg--secondary .button--secondary:active, .bg--secondary .button--action:hover, .bg--secondary .button--action:focus, .bg--secondary .button--action:active {
  color: var(--main-color-white);
  background: transparent;
}
.bg--action .button--secondary:hover .icon, .bg--action .button--secondary:focus .icon, .bg--action .button--secondary:active .icon, .bg--action .button--action:hover .icon, .bg--action .button--action:focus .icon, .bg--action .button--action:active .icon, .bg--secondary .button--secondary:hover .icon, .bg--secondary .button--secondary:focus .icon, .bg--secondary .button--secondary:active .icon, .bg--secondary .button--action:hover .icon, .bg--secondary .button--action:focus .icon, .bg--secondary .button--action:active .icon {
  color: var(--main-color-white);
  background: var(--main-color-secondary-darken);
}

/*
Button

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

.button--primary - Primary
.button--secondary / .button--action - Secondary / Action
.button--danger - Danger
.button--bordered - Bordered
.disabled - Disabled

Styleguide Base.Buttons
*/
a.banner3:hover .contentText__button, a.banner3:focus .contentText__button, .banner3 > .link:hover .button, .banner3 > .link:focus .button, a.banner2:hover .contentText__button, a.banner2:focus .contentText__button, .banner2 > .link:hover .button, .banner2 > .link:focus .button, 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-white);
  border-color: var(--main-color-gray-base);
  color: var(--main-color-black);
  text-decoration: none;
}
a.banner3:hover .contentText__button .icon, a.banner3:focus .contentText__button .icon, .banner3 > .link:hover .button .icon, .banner3 > .link:focus .button .icon, a.banner2:hover .contentText__button .icon, a.banner2:focus .contentText__button .icon, .banner2 > .link:hover .button .icon, .banner2 > .link:focus .button .icon,
.button_disabled:hover .icon,
.btn-disabled:hover .icon,
.button_disabled:focus .icon,
.btn-disabled:focus .icon,
button:hover .icon,
button:focus .icon,
.button:hover .icon,
.button:focus .icon {
  background: var(--main-color-gray-base);
}

button.disabled,
.button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--main-color-gray-base);
  border-radius: 25px;
  color: var(--main-color-black);
  cursor: pointer;
  background: var(--main-color-gray-base);
  text-decoration: none;
  line-height: 18px;
  font-size: 16px;
  padding: 4.5px 15px 4.5px 15px;
  transition: ease-in-out 0.1s;
  position: relative;
  gap: 8px;
  min-height: 38px;
}
@media (min-width: 1250px) {
  button.disabled,
  .button.disabled,
  .button_disabled,
  .btn-disabled,
  .button[disabled],
  button,
  .button {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 4.5px 20px 4.5px 20px;
    min-height: 50px;
  }
}
.button_disabled .icon,
.btn-disabled .icon,
button .icon,
.button .icon {
  font-size: 1.3em;
  line-height: 0;
  position: relative;
  margin-top: -1px;
  width: 25px;
  height: 25px;
  background: var(--main-color-white);
  border-radius: 50%;
  color: var(--main-color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.1s;
}
.button_disabled .icon:first-child,
.btn-disabled .icon:first-child,
button .icon:first-child,
.button .icon:first-child {
  margin-left: -8px;
}
.button_disabled .icon:last-child,
.btn-disabled .icon:last-child,
button .icon:last-child,
.button .icon:last-child {
  margin-right: -8px;
}
@media (min-width: 1250px) {
  .button_disabled .icon,
  .btn-disabled .icon,
  button .icon,
  .button .icon {
    font-size: 1.2em;
    width: 35px;
    height: 35px;
  }
  .button_disabled .icon:first-child,
  .btn-disabled .icon:first-child,
  button .icon:first-child,
  .button .icon:first-child {
    margin-left: -11px;
  }
}
@media (min-width: 1250px) and (max-width: 1249.98px) {
  .button_disabled .icon:first-child,
  .btn-disabled .icon:first-child,
  button .icon:first-child,
  .button .icon:first-child {
    margin-left: -7px;
  }
}
@media (min-width: 1250px) {
  .button_disabled .icon:last-child,
  .btn-disabled .icon:last-child,
  button .icon:last-child,
  .button .icon:last-child {
    margin-right: -11px;
  }
}
@media (min-width: 1250px) and (max-width: 1249.98px) {
  .button_disabled .icon:last-child,
  .btn-disabled .icon:last-child,
  button .icon:last-child,
  .button .icon:last-child {
    margin-right: -7px;
  }
}
.button_disabled:active,
.btn-disabled:active,
button:active,
.button:active {
  background: transparent;
  border-color: var(--main-color-gray-base);
  color: var(--main-color-black);
  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 .icon,
.button--primary .icon {
  color: var(--main-color-primary);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: var(--main-color-white);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
button--primary:hover .icon,
button--primary:focus .icon,
.button--primary:hover .icon,
.button--primary:focus .icon {
  color: var(--main-color-white);
  background: var(--main-color-primary);
}
button--primary:active,
.button--primary:active {
  background: var(--main-color-white);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
button--primary:active .icon,
.button--primary:active .icon {
  color: var(--main-color-white);
  background: var(--main-color-primary);
}
button--action,
button--secondary,
.button--action,
.button--secondary {
  background: #FF6619;
  color: var(--main-color-white);
  border-color: #FF6619;
}
button--action .icon,
button--secondary .icon,
.button--action .icon,
.button--secondary .icon {
  color: #FF6619;
}
button--action:hover,
button--action:focus,
button--secondary:hover,
button--secondary:focus,
.button--action:hover,
.button--action:focus,
.button--secondary:hover,
.button--secondary:focus {
  background: transparent;
  border-color: #FF6619;
  color: #FF6619;
}
button--action:hover .icon,
button--action:focus .icon,
button--secondary:hover .icon,
button--secondary:focus .icon,
.button--action:hover .icon,
.button--action:focus .icon,
.button--secondary:hover .icon,
.button--secondary:focus .icon {
  color: var(--main-color-white);
  background: #FF6619;
}
button--action:active,
button--secondary:active,
.button--action:active,
.button--secondary:active {
  background: transparent;
  border-color: #FF6619;
  color: #FF6619;
}
button--action:active .icon,
button--secondary:active .icon,
.button--action:active .icon,
.button--secondary:active .icon {
  color: var(--main-color-white);
  background: #FF6619;
}
button--bordered,
.button--bordered {
  background: transparent;
  color: var(--main-color-primary);
  border-color: var(--main-color-primary);
}
button--bordered .icon,
.button--bordered .icon {
  color: var(--main-color-white);
  background: var(--main-color-primary);
}
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:hover .icon,
button--bordered:focus .icon,
.button--bordered:hover .icon,
.button--bordered:focus .icon {
  color: var(--main-color-primary);
  background: 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--bordered:active .icon,
.button--bordered:active .icon {
  color: var(--main-color-primary);
  background: var(--main-color-white);
}
button--danger,
.button--danger {
  background: var(--main-color-danger);
  color: var(--main-color-white);
  border-color: var(--main-color-danger);
}
button--danger .icon,
.button--danger .icon {
  color: var(--main-color-danger);
}
button--danger:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
  background: transparent;
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
button--danger:hover .icon,
button--danger:focus .icon,
.button--danger:hover .icon,
.button--danger:focus .icon {
  color: var(--main-color-white);
  background: var(--main-color-danger);
}
button--danger:active,
.button--danger:active {
  background: transparent;
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
button--sm,
.button--sm {
  padding-right: 15px;
  padding-left: 15px;
  line-height: 18px;
  font-size: 16px;
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    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;
}
.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-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,
.button_disabled,
.btn-disabled,
.button[disabled] {
  background: var(--main-color-dark-gray);
  color: var(--main-color-white);
  border-color: var(--main-color-dark-gray);
  cursor: not-allowed;
}
button.disabled .icon,
.button.disabled .icon,
.button_disabled .icon,
.btn-disabled .icon,
.button[disabled] .icon {
  color: var(--main-color-dark-gray);
}
button.disabled:hover, button.disabled:focus, button.disabled:active,
.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-dark-gray);
  border-color: var(--main-color-dark-gray);
  color: var(--main-color-white);
}
button.disabled:hover .icon, button.disabled:focus .icon, button.disabled:active .icon,
.button.disabled:hover .icon,
.button.disabled:focus .icon,
.button.disabled:active .icon,
.button_disabled:hover .icon,
.button_disabled:focus .icon,
.button_disabled:active .icon,
.btn-disabled:hover .icon,
.btn-disabled:focus .icon,
.btn-disabled:active .icon,
.button[disabled]:hover .icon,
.button[disabled]:focus .icon,
.button[disabled]:active .icon {
  background: var(--main-color-white);
}

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

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

Styleguide Base.Button Link
*/
a.banner3:hover .buttonLink, a.banner3:focus .buttonLink, .banner3 > .link:hover .buttonLink, .banner3 > .link:focus .buttonLink, a.banner2:hover .buttonLink, a.banner2:focus .buttonLink, .banner2 > .link:hover .buttonLink, .banner2 > .link:focus .buttonLink, a.banner:hover .buttonLink, a.banner:focus .buttonLink, .banner > .link:hover .buttonLink, .banner > .link:focus .buttonLink, .contentBox > .link:hover .buttonLink, .contentBox > .link:focus .buttonLink, .contentBox > .link:active .buttonLink, .buttonLink:hover, .buttonLink:focus, .buttonLink:active {
  background: transparent;
  text-decoration: none;
}
a.banner3:hover .buttonLink:after, a.banner3:focus .buttonLink:after, .banner3 > .link:hover .buttonLink:after, .banner3 > .link:focus .buttonLink:after, a.banner2:hover .buttonLink:after, a.banner2:focus .buttonLink:after, .banner2 > .link:hover .buttonLink:after, .banner2 > .link:focus .buttonLink:after, a.banner:hover .buttonLink:after, a.banner:focus .buttonLink:after, .banner > .link:hover .buttonLink:after, .banner > .link:focus .buttonLink:after, .contentBox > .link:hover .buttonLink:after, .contentBox > .link:focus .buttonLink:after, .contentBox > .link:active .buttonLink:after, .buttonLink:hover:after, .buttonLink:focus:after, .buttonLink:active:after {
  width: 100%;
}

.buttonLink {
  display: inline-block;
  color: var(--main-color-black);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  padding: 5px 0 3px 0;
  border: 0;
  text-decoration: none;
}
.buttonLink:after {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--main-color-black);
  height: 2px;
  transition: width 0.2s ease-in;
}
/*
Inputs

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

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

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

input,
select,
textarea,
.filterReset,
.customSelect__selected,
.selectBody__fakeOption {
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 1.5px solid var(--main-color-middle-gray);
  border-radius: 15px;
  box-shadow: none;
  display: block;
  width: 100%;
  line-height: 18px;
  font-size: 16px;
  padding: 9px 15px 9px 15px;
}
@media (min-width: 768px) {
  input,
  select,
  textarea,
  .filterReset,
  .customSelect__selected,
  .selectBody__fakeOption {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 9px 20px 9px 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,
.filterReset:not(:disabled):active,
.customSelect__selected:not(:disabled):active,
.selectBody__fakeOption:not(:disabled):active,
.filterReset:not(:disabled):focus,
.customSelect__selected:not(:disabled):focus,
.selectBody__fakeOption:not(:disabled):focus {
  outline: 0;
  border-color: var(--main-color-primary);
}
input.error,
select.error,
textarea.error,
.error.filterReset,
.error.customSelect__selected,
.error.selectBody__fakeOption {
  border-color: var(--main-color-danger);
}
input:disabled,
select:disabled,
textarea:disabled,
.filterReset:disabled,
.customSelect__selected:disabled,
.selectBody__fakeOption:disabled {
  background-color: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}

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

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

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

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

textarea {
  resize: vertical;
  field-sizing: content;
}

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

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

/*
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: 1.5px solid var(--main-color-middle-gray);
  border-radius: 15px;
  box-shadow: none;
  width: 100%;
  line-height: 18px;
  font-size: 16px;
  padding: 9px 15px 9px 15px;
  min-height: 39px;
  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: 9px 20px 9px 20px;
    min-height: 41px;
  }
}
.fileBody input:not(:disabled):active + span, .fileBody input:not(:disabled):focus + span {
  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 {
  font-size: 2rem;
  width: 39px;
  min-height: 39px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}
@media (min-width: 768px) {
  .fileBody .icon {
    min-height: 41px;
    width: 41px;
  }
}

/*
Radioboxes

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

Styleguide Form.Radioboxes
*/
/*
Radioboxes Switch

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

Styleguide Form.Radioboxes Switch
*/
/*
Checkboxes

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

Styleguide Form.Checkboxes
*/
/*
Checkboxes Switch

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

Styleguide Form.Checkboxes Switch
*/
.specialradiobox,
.specialcheckbox,
.specialcheckboxSwitch {
  position: relative;
  line-height: 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: 1.5px solid var(--main-color-middle-gray);
  border-radius: 50%;
  top: -2px;
  display: block;
  pointer-events: none;
  margin-bottom: 0;
  font-family: var(--main-font-family);
}
.specialradiobox i:after,
.specialcheckbox i:after,
.specialcheckboxSwitch i:after {
  content: " ";
  pointer-events: none;
  position: absolute;
  width: 14px;
  height: 14px;
  left: 4px;
  top: 4px;
  opacity: 0;
  transition: opacity 0.1s ease-in;
  background-color: var(--main-color-primary);
  border-radius: 50%;
  display: block;
}
.specialradiobox:has(input:checked) i:after,
.specialcheckbox:has(input:checked) i:after,
.specialcheckboxSwitch:has(input:checked) i:after {
  opacity: 1;
}
.specialradiobox:has(input:disabled) i,
.specialcheckbox:has(input:disabled) i,
.specialcheckboxSwitch:has(input:disabled) i {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.specialradiobox:has(input:disabled) i:after,
.specialcheckbox:has(input:disabled) i:after,
.specialcheckboxSwitch:has(input:disabled) i:after {
  color: var(--main-color-gray-base);
}
.specialradiobox:has(input:focus) input + i,
.specialcheckbox:has(input:focus) input + i,
.specialcheckboxSwitch:has(input:focus) input + i {
  border-color: var(--main-color-primary);
}
.specialradiobox input,
.specialcheckbox input,
.specialcheckboxSwitch input {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  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: 15px;
}
.specialcheckbox i:after {
  left: -1px;
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  color: var(--main-color-primary);
  top: -1px;
  opacity: 0;
  line-height: 24px;
  transition: opacity 0.1s ease-in;
  font-size: 24px;
  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: 3px;
  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);
}

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

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

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

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

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

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

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

/*
Tables

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


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

td,
th {
  padding: 10px 5px;
  border-bottom: 0;
  border-bottom: 1px solid var(--main-color-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: 1px solid 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);
  }
}

/*
Fake Tables

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


Styleguide Base.Fake Tables
*/
.table {
  width: 100%;
}
@media (min-width: 1024px) {
  .table {
    display: table;
  }
}
.table__row {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--main-color-light-gray);
}
@media (min-width: 1024px) {
  .table__row {
    display: table-row;
  }
}
@media (min-width: 1024px) {
  .table__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 5px;
    border-bottom: 0;
    border-bottom: 1px solid var(--main-color-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;
  }
}

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

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

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

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

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

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

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

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

/*
Embeds

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

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

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

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

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

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

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

/*
Paddings

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

--small - Small Padding
--middle - Middle Padding
--large - Large Padding
--xlarge - xLarge Padding


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

.p--base {
  margin: 10px;
}

.pt--base {
  margin-top: 10px;
}

.pr--base {
  margin-right: 10px;
}

.pb--base {
  margin-bottom: 10px;
}

.pl--base {
  margin-left: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

--small - Small Margin
--middle - Middle Margin
--large - Large Margin
--xlarge - xLarge Margin


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767.98px) {
  .m--large {
    margin: 20px;
  }
  .mt--large {
    margin-top: 20px;
  }
  .mr--large {
    margin-right: 20px;
  }
  .mb--large {
    margin-bottom: 20px;
  }
  .ml--large {
    margin-left: 20px;
  }
  .margin--large {
    margin: 20px;
  }
  .marginTop--large {
    margin-top: 20px;
  }
  .marginRight--large {
    margin-right: 20px;
  }
  .marginBottom--large {
    margin-bottom: 20px;
  }
  .marginLeft--large {
    margin-left: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .m--large {
    margin: 40px;
  }
  .mt--large {
    margin-top: 40px;
  }
  .mr--large {
    margin-right: 40px;
  }
  .mb--large {
    margin-bottom: 40px;
  }
  .ml--large {
    margin-left: 40px;
  }
  .margin--large {
    margin: 40px;
  }
  .marginTop--large {
    margin-top: 40px;
  }
  .marginRight--large {
    margin-right: 40px;
  }
  .marginBottom--large {
    margin-bottom: 40px;
  }
  .marginLeft--large {
    margin-left: 40px;
  }
}
@media (max-width: 767.98px) {
  .m--xlarge {
    margin: 30px;
  }
  .mt--xlarge {
    margin-top: 30px;
  }
  .mr--xlarge {
    margin-right: 30px;
  }
  .mb--xlarge {
    margin-bottom: 30px;
  }
  .ml--xlarge {
    margin-left: 30px;
  }
  .margin--xlarge {
    margin: 30px;
  }
  .marginTop--xlarge {
    margin-top: 30px;
  }
  .marginRight--xlarge {
    margin-right: 30px;
  }
  .marginBottom--xlarge {
    margin-bottom: 30px;
  }
  .marginLeft--xlarge {
    margin-left: 30px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .m--xlarge {
    margin: 80px;
  }
  .mt--xlarge {
    margin-top: 80px;
  }
  .mr--xlarge {
    margin-right: 80px;
  }
  .mb--xlarge {
    margin-bottom: 80px;
  }
  .ml--xlarge {
    margin-left: 80px;
  }
  .margin--xlarge {
    margin: 80px;
  }
  .marginTop--xlarge {
    margin-top: 80px;
  }
  .marginRight--xlarge {
    margin-right: 80px;
  }
  .marginBottom--xlarge {
    margin-bottom: 80px;
  }
  .marginLeft--xlarge {
    margin-left: 80px;
  }
}
@media (max-width: 767.98px) {
  .xs-margin {
    margin-bottom: 40px;
  }
  .xs-margin-base {
    margin-bottom: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sm-margin {
    margin-bottom: 40px;
  }
  .sm-margin-base {
    margin-bottom: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .md-margin {
    margin-bottom: 40px;
  }
  .md-margin-base {
    margin-bottom: 10px;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .lg-margin {
    margin-bottom: 40px;
  }
  .lg-margin-base {
    margin-bottom: 10px;
  }
}
@media (min-width: 1540px) {
  .xlg-margin {
    margin-bottom: 40px;
  }
  .xlg-margin-base {
    margin-bottom: 10px;
  }
}
/*
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: 1620px;
}

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

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

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

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

/*
Grid

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

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

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


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

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

.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 768px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1024px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1250px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1540px) {
  .col-xlg {
    flex: 1 0 0%;
  }
  .col-xlg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xlg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xlg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xlg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xlg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xlg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xlg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xlg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xlg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xlg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xlg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xlg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xlg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xlg-0 {
    margin-left: 0;
  }
  .offset-xlg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xlg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xlg-3 {
    margin-left: 25%;
  }
  .offset-xlg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xlg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xlg-6 {
    margin-left: 50%;
  }
  .offset-xlg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xlg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xlg-9 {
    margin-left: 75%;
  }
  .offset-xlg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xlg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1250px) {
  .col-lg-1-5 {
    width: 20%;
  }
  .col-lg-2-5 {
    width: 40%;
  }
  .col-lg-3-5 {
    width: 60%;
  }
  .col-lg-4-5 {
    width: 80%;
  }
  .col-lg-5-5 {
    width: 100%;
  }
}
@media (min-width: 1540px) {
  .col-xlg-1-5 {
    width: 20%;
  }
  .col-xlg-2-5 {
    width: 40%;
  }
  .col-xlg-3-5 {
    width: 60%;
  }
  .col-xlg-4-5 {
    width: 80%;
  }
  .col-xlg-5-5 {
    width: 100%;
  }
}
.row.gridGap--noGap {
  margin-left: 0;
  margin-right: 0;
}
.row.gridGap--noGap > * {
  padding-left: 0;
  padding-right: 0;
}
.row.gridGap--noGap > *.marginBottom, .row.gridGap--noGap > .algoliaSearchLayout {
  margin-bottom: 0;
}

.row.gridGap--small {
  margin-left: -10px;
  margin-right: -10px;
}
.row.gridGap--small > * {
  padding-left: 10px;
  padding-right: 10px;
}
.row.gridGap--small > *.marginBottom, .row.gridGap--small > .algoliaSearchLayout {
  margin-bottom: 20px;
}

@media (min-width: 1820px) {
  .row.gridGap--large {
    margin-left: -40px;
    margin-right: -40px;
  }
  .row.gridGap--large > * {
    padding-left: 40px;
    padding-right: 40px;
  }
  .row.gridGap--large > *.marginBottom, .row.gridGap--large > .algoliaSearchLayout {
    margin-bottom: 80px;
  }
}

.row.gridGap--xlarge {
  margin-left: -40px;
  margin-right: -40px;
}
.row.gridGap--xlarge > * {
  padding-left: 40px;
  padding-right: 40px;
}
@media (min-width: 1860px) {
  .row.gridGap--xlarge {
    margin-left: -60px;
    margin-right: -60px;
  }
  .row.gridGap--xlarge > * {
    padding-left: 60px;
    padding-right: 60px;
  }
  .row.gridGap--xlarge > *.marginBottom, .row.gridGap--xlarge > .algoliaSearchLayout {
    margin-bottom: 80px;
  }
}

@media (min-width: 1524px) {
  .container--small > .row.gridGap--large {
    margin-left: -40px;
    margin-right: -40px;
  }
  .container--small > .row.gridGap--large > * {
    padding-left: 40px;
    padding-right: 40px;
  }
  .container--small > .row.gridGap--large > *.marginBottom, .container--small > .row.gridGap--large > .algoliaSearchLayout {
    margin-bottom: 80px;
  }
}

@media (min-width: 1226px) {
  .container--xsmall > .row.gridGap--large {
    margin-left: -40px;
    margin-right: -40px;
  }
  .container--xsmall > .row.gridGap--large > * {
    padding-left: 40px;
    padding-right: 40px;
  }
  .container--xsmall > .row.gridGap--large > *.marginBottom, .container--xsmall > .row.gridGap--large > .algoliaSearchLayout {
    margin-bottom: 80px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .row.scrollSnapTablet {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 12px;
  }
  .row.scrollSnapTablet > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    padding-left: 8px;
    padding-right: 8px;
    width: calc(100% - 40px / 2);
    width: -moz-calc(100% - 40px / 2);
    width: -webkit-calc(100% - 40px / 2);
    width: -o-calc(100% - 40px / 2);
  }
  .row.scrollSnapTablet > *.col-sm-6 {
    width: calc(50% - 40px / 2);
    width: -moz-calc(50% - 40px / 2);
    width: -webkit-calc(50% - 40px / 2);
    width: -o-calc(50% - 40px / 2);
  }
  .row.scrollSnapTablet > *.col-sm-4 {
    width: calc(33% - 40px / 2);
    width: -moz-calc(33% - 40px / 2);
    width: -webkit-calc(33% - 40px / 2);
    width: -o-calc(33% - 40px / 2);
  }
  .row.scrollSnapTablet > *.col-sm-8 {
    width: calc(67% - 40px / 2);
    width: -moz-calc(67% - 40px / 2);
    width: -webkit-calc(67% - 40px / 2);
    width: -o-calc(67% - 40px / 2);
  }
}

@media (max-width: 767px) {
  .row.scrollSnapMobile {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 12px;
  }
  .row.scrollSnapMobile > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    padding-left: 8px;
    padding-right: 8px;
    width: calc(100% - 40px / 2);
    width: -moz-calc(100% - 40px / 2);
    width: -webkit-calc(100% - 40px / 2);
    width: -o-calc(100% - 40px / 2);
  }
  .row.scrollSnapMobile > *.col-6 {
    width: calc(50% - 40px / 2);
    width: -moz-calc(50% - 40px / 2);
    width: -webkit-calc(50% - 40px / 2);
    width: -o-calc(50% - 40px / 2);
  }
  .row.scrollSnapMobile > *.col-4 {
    width: calc(33% - 40px / 2);
    width: -moz-calc(33% - 40px / 2);
    width: -webkit-calc(33% - 40px / 2);
    width: -o-calc(33% - 40px / 2);
  }
  .row.scrollSnapMobile > *.col-8 {
    width: calc(67% - 40px / 2);
    width: -moz-calc(67% - 40px / 2);
    width: -webkit-calc(67% - 40px / 2);
    width: -o-calc(67% - 40px / 2);
  }
}

@media (min-width: 768px) {
  .order-sm-1 {
    order: 1;
  }
}

@media (min-width: 1024px) {
  .order-md-1 {
    order: 1;
  }
}

@media (min-width: 1250px) {
  .order-lg-1 {
    order: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767.98px) {
  .align-items-xs-start {
    align-items: flex-start;
  }
  .align-items-xs-end {
    align-items: flex-end;
  }
  .align-items-xs-center {
    align-items: center;
  }
  .align-items-xs-baseline {
    align-items: baseline;
  }
  .align-items-xs-stretch {
    align-items: stretch;
  }
  .align-self-xs-start {
    align-self: flex-start;
  }
  .align-self-xs-end {
    align-self: flex-end;
  }
  .align-self-xs-center {
    align-self: center;
  }
  .align-self-xs-baseline {
    align-self: baseline;
  }
  .align-self-xs-stretch {
    align-self: stretch;
  }
  .justify-content-xs-start {
    justify-content: flex-start;
  }
  .justify-content-xs-end {
    justify-content: flex-end;
  }
  .justify-content-xs-center {
    justify-content: center;
  }
  .justify-content-xs-between {
    justify-content: space-between;
  }
  .justify-content-xs-around {
    justify-content: around;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .align-items-sm-start {
    align-items: flex-start;
  }
  .align-items-sm-end {
    align-items: flex-end;
  }
  .align-items-sm-center {
    align-items: center;
  }
  .align-items-sm-baseline {
    align-items: baseline;
  }
  .align-items-sm-stretch {
    align-items: stretch;
  }
  .align-self-sm-start {
    align-self: flex-start;
  }
  .align-self-sm-end {
    align-self: flex-end;
  }
  .align-self-sm-center {
    align-self: center;
  }
  .align-self-sm-baseline {
    align-self: baseline;
  }
  .align-self-sm-stretch {
    align-self: stretch;
  }
  .justify-content-sm-start {
    justify-content: flex-start;
  }
  .justify-content-sm-end {
    justify-content: flex-end;
  }
  .justify-content-sm-center {
    justify-content: center;
  }
  .justify-content-sm-between {
    justify-content: space-between;
  }
  .justify-content-sm-around {
    justify-content: around;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .align-items-md-start {
    align-items: flex-start;
  }
  .align-items-md-end {
    align-items: flex-end;
  }
  .align-items-md-center {
    align-items: center;
  }
  .align-items-md-baseline {
    align-items: baseline;
  }
  .align-items-md-stretch {
    align-items: stretch;
  }
  .align-self-md-start {
    align-self: flex-start;
  }
  .align-self-md-end {
    align-self: flex-end;
  }
  .align-self-md-center {
    align-self: center;
  }
  .align-self-md-baseline {
    align-self: baseline;
  }
  .align-self-md-stretch {
    align-self: stretch;
  }
  .justify-content-md-start {
    justify-content: flex-start;
  }
  .justify-content-md-end {
    justify-content: flex-end;
  }
  .justify-content-md-center {
    justify-content: center;
  }
  .justify-content-md-between {
    justify-content: space-between;
  }
  .justify-content-md-around {
    justify-content: around;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .align-items-lg-start {
    align-items: flex-start;
  }
  .align-items-lg-end {
    align-items: flex-end;
  }
  .align-items-lg-center {
    align-items: center;
  }
  .align-items-lg-baseline {
    align-items: baseline;
  }
  .align-items-lg-stretch {
    align-items: stretch;
  }
  .align-self-lg-start {
    align-self: flex-start;
  }
  .align-self-lg-end {
    align-self: flex-end;
  }
  .align-self-lg-center {
    align-self: center;
  }
  .align-self-lg-baseline {
    align-self: baseline;
  }
  .align-self-lg-stretch {
    align-self: stretch;
  }
  .justify-content-lg-start {
    justify-content: flex-start;
  }
  .justify-content-lg-end {
    justify-content: flex-end;
  }
  .justify-content-lg-center {
    justify-content: center;
  }
  .justify-content-lg-between {
    justify-content: space-between;
  }
  .justify-content-lg-around {
    justify-content: around;
  }
}
@media (min-width: 1540px) {
  .align-items-xlg-start {
    align-items: flex-start;
  }
  .align-items-xlg-end {
    align-items: flex-end;
  }
  .align-items-xlg-center {
    align-items: center;
  }
  .align-items-xlg-baseline {
    align-items: baseline;
  }
  .align-items-xlg-stretch {
    align-items: stretch;
  }
  .align-self-xlg-start {
    align-self: flex-start;
  }
  .align-self-xlg-end {
    align-self: flex-end;
  }
  .align-self-xlg-center {
    align-self: center;
  }
  .align-self-xlg-baseline {
    align-self: baseline;
  }
  .align-self-xlg-stretch {
    align-self: stretch;
  }
  .justify-content-xlg-start {
    justify-content: flex-start;
  }
  .justify-content-xlg-end {
    justify-content: flex-end;
  }
  .justify-content-xlg-center {
    justify-content: center;
  }
  .justify-content-xlg-between {
    justify-content: space-between;
  }
  .justify-content-xlg-around {
    justify-content: around;
  }
}
.row--flexsub > *:not(script):not(style) {
  display: flex;
}

.fullwidth {
  width: 100%;
}

#container {
  background-color: var(--main-color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#container .header,
#container .footer {
  flex-shrink: 0;
}
#container .mainContent {
  flex-grow: 1;
}

.bg-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/*
Hardcoded Hint

Markup:
<span class="hardcodedHint" title="Title">Text</span>

Styleguide Base.Helper
*/
.hardcodedHint {
  outline: 2px dotted red;
  position: relative;
}
.hardcodedHint:before {
  content: "! Hardcoded !";
  position: absolute;
  left: -2px;
  bottom: 100%;
  background: red;
  color: white;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1;
  display: none;
}
.hardcodedHint:hover:before {
  display: block;
}

[role=tooltip] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.content--imageRounded img {
  border-radius: 10px;
}

@media (max-width: 1023.98px) {
  .marginBottom--xsOnly {
    margin-bottom: 30px;
  }
}

.pullBeneathHeaderRadius {
  margin-top: -15px;
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.open, .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}

.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}

.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}

.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}

.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}

.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}

.flatpickr-calendar:focus {
  outline: 0;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}

.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /*
/*rtl:begin:ignore*/
  left: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /*
/*rtl:begin:ignore*/
  right: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}

.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input, .numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}

.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}

.numInputWrapper span.arrowDown {
  top: 50%;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}

.numInputWrapper span svg {
  width: inherit;
  height: auto;
}

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0 ;
  display: inline-block;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}

.dayContainer, .flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}

.flatpickr-day.today {
  border-color: #959ea9;
}

.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7;
}

.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}

.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.flatpickr-calendar {
  border-radius: 0;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--main-color-primary);
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: normal;
}
.flatpickr-current-month .numInputWrapper input {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
  display: none;
}

.flatpickr-day {
  line-height: 37px;
  color: var(--main-color-black);
  font-weight: normal;
  border-radius: 0 !important;
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background-color: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.flatpickr-day.today {
  border-color: var(--main-color-dark-gray);
}
.flatpickr-day.today.hover, .flatpickr-day.today:focus {
  border-color: var(--main-color-primary);
  background-color: var(--main-color-primary);
}
.flatpickr-day.flatpickr-disabled {
  color: var(--main-color-light-gray);
}
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--main-color-light-gray);
}
.flatpickr-day.inRange {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  box-shadow: -5px 0 0 var(--main-color-light-gray), 5px 0 0 var(--main-color-light-gray);
}
.flatpickr-day.endRange, .flatpickr-day.selected, .flatpickr-day.startRange {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
.flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
.flatpickr-day.endRange:hover, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover {
  background-color: var(--main-color-gray-base);
  color: var(--main-color-white);
  border-color: var(--main-color-gray-base);
}
.flatpickr-day.endRange:focus, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus {
  background-color: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}

.flatpickr-time .flatpickr-am-pm:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time input:hover {
  background-color: var(--main-color-light-gray);
}

.js-dateRangeInline {
  display: none !important;
}

.filterDropdown .flatpickr-calendar {
  width: 100%;
  border: 0;
  box-shadow: none;
}

.googlemaps_content {
  max-width: 100%;
}
.googlemaps_content img {
  max-width: none !important;
}

.custom-clustericon {
  border-radius: 50%;
  background: var(--main-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color-white);
}
.custom-clustericon:before {
  content: "";
  display: block;
  width: 80%;
  height: 80%;
  background: var(--main-color-primary-dark);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.grecaptcha-badge {
  visibility: hidden !important;
}

/**
 * Swiper 11.2.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 19, 2025
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color:#fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color:#000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size:44px;
}

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}

.swiper-button-next svg, .swiper-button-prev svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
  transform: rotate(180deg);
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-lock {
  display: none;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  display: none;
}

.swiper-slide {
  height: auto;
}

.swiper-button-next, .swiper-button-prev {
  cursor: pointer;
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
}
@media (min-width: 1540px) {
  .swiper-button-next, .swiper-button-prev {
    width: 50px;
    height: 50px;
    font-size: 32px;
  }
}
.swiper-button-next .icon, .swiper-button-prev .icon {
  display: block;
  line-height: 1;
}
.swiper-button-next:hover, .swiper-button-next:focus, .swiper-button-next:active, .swiper-button-prev:hover, .swiper-button-prev:focus, .swiper-button-prev:active {
  background: var(--main-color-secondary-dark);
  color: var(--main-color-white);
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--main-color-black);
}
@media (min-width: 768px) {
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
  }
}
.swiper-pagination-bullet-active {
  background: var(--main-color-black);
}

.swiper-pagination {
  position: static;
  transform: none;
}
.swiper-pagination.swiper-pagination-horizontal {
  margin-top: 20px;
  top: auto;
  bottom: 0;
}
.swiper-pagination.swiper-pagination-vertical {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.swiper-pagination.swiper-pagination-vertical .swiper-pagination-bullet {
  margin: 0;
}

.swiper-wrapper {
  height: auto;
}

.swiper-scrollbar {
  display: none;
}

.lottieContainer {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.iti {
  position: relative;
  display: inline-block;
}

.iti * {
  box-sizing: border-box;
}

.iti__hide {
  display: none;
}

.iti__v-hide {
  visibility: hidden;
}

.iti input.iti__tel-input, .iti input.iti__tel-input[type=tel], .iti input.iti__tel-input[type=text] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: 36px;
  margin-right: 0;
}

.iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}

.iti__selected-flag {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px 0 8px;
}

.iti__arrow {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
}

[dir=rtl] .iti__arrow {
  margin-right: 6px;
  margin-left: 0;
}

.iti__arrow--up {
  border-top: none;
  border-bottom: 4px solid #555;
}

.iti__dropdown-content {
  position: absolute;
  z-index: 2;
  margin-left: -1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.iti__dropdown-content--dropup {
  bottom: 100%;
  margin-bottom: -1px;
}

.iti__search-input {
  width: 100%;
  border-width: 0;
}

.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
}

@media (max-width: 500px) {
  .iti--flexible-dropdown-width .iti__country-list {
    white-space: normal;
  }
}
.iti__flag-box {
  display: inline-block;
  width: 20px;
}

.iti__divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.iti__country {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  outline: 0;
}

.iti__dial-code {
  color: #999;
}

.iti__country.iti__highlight {
  background-color: rgba(0, 0, 0, 0.05);
}

.iti__country-name, .iti__flag-box {
  margin-right: 6px;
}

[dir=rtl] .iti__country-name, [dir=rtl] .iti__flag-box {
  margin-right: 0;
  margin-left: 6px;
}

.iti--allow-dropdown input.iti__tel-input, .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--allow-dropdown input.iti__tel-input[type=text], .iti--separate-dial-code input.iti__tel-input, .iti--separate-dial-code input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input[type=text] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}

[dir=rtl] .iti--allow-dropdown input.iti__tel-input, [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text], [dir=rtl] .iti--separate-dial-code input.iti__tel-input, [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text] {
  padding-right: 52px;
  padding-left: 6px;
  margin-right: 0;
}

.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
  right: auto;
  left: 0;
}

[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
  right: 0;
  left: auto;
}

.iti--allow-dropdown .iti__flag-container:hover {
  cursor: pointer;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}

.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover, .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
  cursor: default;
}

.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag, .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
  background-color: transparent;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}

.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 6px;
}

[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 0;
  margin-right: 6px;
}

.iti--container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}

.iti--container:hover {
  cursor: pointer;
}

.iti--fullscreen-popup.iti--container {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.iti--fullscreen-popup .iti__dropdown-content {
  max-height: 100%;
  position: relative;
}

.iti--fullscreen-popup .iti__country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti__flag {
  width: 20px;
}

.iti__flag.iti__be {
  width: 18px;
}

.iti__flag.iti__ch {
  width: 15px;
}

.iti__flag.iti__mc {
  width: 19px;
}

.iti__flag.iti__ne {
  width: 18px;
}

.iti__flag.iti__np {
  width: 13px;
}

.iti__flag.iti__va {
  width: 15px;
}

@media (min-resolution: 2x) {
  .iti__flag {
    background-size: 5762px 15px;
  }
}
.iti__flag.iti__ac {
  height: 10px;
  background-position: 0 0;
}

.iti__flag.iti__ad {
  height: 14px;
  background-position: -22px 0;
}

.iti__flag.iti__ae {
  height: 10px;
  background-position: -44px 0;
}

.iti__flag.iti__af {
  height: 14px;
  background-position: -66px 0;
}

.iti__flag.iti__ag {
  height: 14px;
  background-position: -88px 0;
}

.iti__flag.iti__ai {
  height: 10px;
  background-position: -110px 0;
}

.iti__flag.iti__al {
  height: 15px;
  background-position: -132px 0;
}

.iti__flag.iti__am {
  height: 10px;
  background-position: -154px 0;
}

.iti__flag.iti__ao {
  height: 14px;
  background-position: -176px 0;
}

.iti__flag.iti__aq {
  height: 14px;
  background-position: -198px 0;
}

.iti__flag.iti__ar {
  height: 13px;
  background-position: -220px 0;
}

.iti__flag.iti__as {
  height: 10px;
  background-position: -242px 0;
}

.iti__flag.iti__at {
  height: 14px;
  background-position: -264px 0;
}

.iti__flag.iti__au {
  height: 10px;
  background-position: -286px 0;
}

.iti__flag.iti__aw {
  height: 14px;
  background-position: -308px 0;
}

.iti__flag.iti__ax {
  height: 13px;
  background-position: -330px 0;
}

.iti__flag.iti__az {
  height: 10px;
  background-position: -352px 0;
}

.iti__flag.iti__ba {
  height: 10px;
  background-position: -374px 0;
}

.iti__flag.iti__bb {
  height: 14px;
  background-position: -396px 0;
}

.iti__flag.iti__bd {
  height: 12px;
  background-position: -418px 0;
}

.iti__flag.iti__be {
  height: 15px;
  background-position: -440px 0;
}

.iti__flag.iti__bf {
  height: 14px;
  background-position: -460px 0;
}

.iti__flag.iti__bg {
  height: 12px;
  background-position: -482px 0;
}

.iti__flag.iti__bh {
  height: 12px;
  background-position: -504px 0;
}

.iti__flag.iti__bi {
  height: 12px;
  background-position: -526px 0;
}

.iti__flag.iti__bj {
  height: 14px;
  background-position: -548px 0;
}

.iti__flag.iti__bl {
  height: 14px;
  background-position: -570px 0;
}

.iti__flag.iti__bm {
  height: 10px;
  background-position: -592px 0;
}

.iti__flag.iti__bn {
  height: 10px;
  background-position: -614px 0;
}

.iti__flag.iti__bo {
  height: 14px;
  background-position: -636px 0;
}

.iti__flag.iti__bq {
  height: 14px;
  background-position: -658px 0;
}

.iti__flag.iti__br {
  height: 14px;
  background-position: -680px 0;
}

.iti__flag.iti__bs {
  height: 10px;
  background-position: -702px 0;
}

.iti__flag.iti__bt {
  height: 14px;
  background-position: -724px 0;
}

.iti__flag.iti__bv {
  height: 15px;
  background-position: -746px 0;
}

.iti__flag.iti__bw {
  height: 14px;
  background-position: -768px 0;
}

.iti__flag.iti__by {
  height: 10px;
  background-position: -790px 0;
}

.iti__flag.iti__bz {
  height: 12px;
  background-position: -812px 0;
}

.iti__flag.iti__ca {
  height: 10px;
  background-position: -834px 0;
}

.iti__flag.iti__cc {
  height: 10px;
  background-position: -856px 0;
}

.iti__flag.iti__cd {
  height: 15px;
  background-position: -878px 0;
}

.iti__flag.iti__cf {
  height: 14px;
  background-position: -900px 0;
}

.iti__flag.iti__cg {
  height: 14px;
  background-position: -922px 0;
}

.iti__flag.iti__ch {
  height: 15px;
  background-position: -944px 0;
}

.iti__flag.iti__ci {
  height: 14px;
  background-position: -961px 0;
}

.iti__flag.iti__ck {
  height: 10px;
  background-position: -983px 0;
}

.iti__flag.iti__cl {
  height: 14px;
  background-position: -1005px 0;
}

.iti__flag.iti__cm {
  height: 14px;
  background-position: -1027px 0;
}

.iti__flag.iti__cn {
  height: 14px;
  background-position: -1049px 0;
}

.iti__flag.iti__co {
  height: 14px;
  background-position: -1071px 0;
}

.iti__flag.iti__cp {
  height: 14px;
  background-position: -1093px 0;
}

.iti__flag.iti__cq {
  height: 12px;
  background-position: -1115px 0;
}

.iti__flag.iti__cr {
  height: 12px;
  background-position: -1137px 0;
}

.iti__flag.iti__cu {
  height: 10px;
  background-position: -1159px 0;
}

.iti__flag.iti__cv {
  height: 12px;
  background-position: -1181px 0;
}

.iti__flag.iti__cw {
  height: 14px;
  background-position: -1203px 0;
}

.iti__flag.iti__cx {
  height: 10px;
  background-position: -1225px 0;
}

.iti__flag.iti__cy {
  height: 14px;
  background-position: -1247px 0;
}

.iti__flag.iti__cz {
  height: 14px;
  background-position: -1269px 0;
}

.iti__flag.iti__de {
  height: 12px;
  background-position: -1291px 0;
}

.iti__flag.iti__dg {
  height: 10px;
  background-position: -1313px 0;
}

.iti__flag.iti__dj {
  height: 14px;
  background-position: -1335px 0;
}

.iti__flag.iti__dk {
  height: 15px;
  background-position: -1357px 0;
}

.iti__flag.iti__dm {
  height: 10px;
  background-position: -1379px 0;
}

.iti__flag.iti__do {
  height: 14px;
  background-position: -1401px 0;
}

.iti__flag.iti__dz {
  height: 14px;
  background-position: -1423px 0;
}

.iti__flag.iti__ea {
  height: 14px;
  background-position: -1445px 0;
}

.iti__flag.iti__ec {
  height: 14px;
  background-position: -1467px 0;
}

.iti__flag.iti__ee {
  height: 13px;
  background-position: -1489px 0;
}

.iti__flag.iti__eg {
  height: 14px;
  background-position: -1511px 0;
}

.iti__flag.iti__eh {
  height: 10px;
  background-position: -1533px 0;
}

.iti__flag.iti__er {
  height: 10px;
  background-position: -1555px 0;
}

.iti__flag.iti__es {
  height: 14px;
  background-position: -1577px 0;
}

.iti__flag.iti__et {
  height: 10px;
  background-position: -1599px 0;
}

.iti__flag.iti__eu {
  height: 14px;
  background-position: -1621px 0;
}

.iti__flag.iti__ez {
  height: 14px;
  background-position: -1643px 0;
}

.iti__flag.iti__fi {
  height: 12px;
  background-position: -1665px 0;
}

.iti__flag.iti__fj {
  height: 10px;
  background-position: -1687px 0;
}

.iti__flag.iti__fk {
  height: 10px;
  background-position: -1709px 0;
}

.iti__flag.iti__fm {
  height: 11px;
  background-position: -1731px 0;
}

.iti__flag.iti__fo {
  height: 15px;
  background-position: -1753px 0;
}

.iti__flag.iti__fr {
  height: 14px;
  background-position: -1775px 0;
}

.iti__flag.iti__fx {
  height: 14px;
  background-position: -1797px 0;
}

.iti__flag.iti__ga {
  height: 15px;
  background-position: -1819px 0;
}

.iti__flag.iti__gb {
  height: 10px;
  background-position: -1841px 0;
}

.iti__flag.iti__gd {
  height: 12px;
  background-position: -1863px 0;
}

.iti__flag.iti__ge {
  height: 14px;
  background-position: -1885px 0;
}

.iti__flag.iti__gf {
  height: 14px;
  background-position: -1907px 0;
}

.iti__flag.iti__gg {
  height: 14px;
  background-position: -1929px 0;
}

.iti__flag.iti__gh {
  height: 14px;
  background-position: -1951px 0;
}

.iti__flag.iti__gi {
  height: 10px;
  background-position: -1973px 0;
}

.iti__flag.iti__gl {
  height: 14px;
  background-position: -1995px 0;
}

.iti__flag.iti__gm {
  height: 14px;
  background-position: -2017px 0;
}

.iti__flag.iti__gn {
  height: 14px;
  background-position: -2039px 0;
}

.iti__flag.iti__gp {
  height: 14px;
  background-position: -2061px 0;
}

.iti__flag.iti__gq {
  height: 14px;
  background-position: -2083px 0;
}

.iti__flag.iti__gr {
  height: 14px;
  background-position: -2105px 0;
}

.iti__flag.iti__gs {
  height: 10px;
  background-position: -2127px 0;
}

.iti__flag.iti__gt {
  height: 13px;
  background-position: -2149px 0;
}

.iti__flag.iti__gu {
  height: 11px;
  background-position: -2171px 0;
}

.iti__flag.iti__gw {
  height: 10px;
  background-position: -2193px 0;
}

.iti__flag.iti__gy {
  height: 12px;
  background-position: -2215px 0;
}

.iti__flag.iti__hk {
  height: 14px;
  background-position: -2237px 0;
}

.iti__flag.iti__hm {
  height: 10px;
  background-position: -2259px 0;
}

.iti__flag.iti__hn {
  height: 10px;
  background-position: -2281px 0;
}

.iti__flag.iti__hr {
  height: 10px;
  background-position: -2303px 0;
}

.iti__flag.iti__ht {
  height: 12px;
  background-position: -2325px 0;
}

.iti__flag.iti__hu {
  height: 10px;
  background-position: -2347px 0;
}

.iti__flag.iti__ic {
  height: 14px;
  background-position: -2369px 0;
}

.iti__flag.iti__id {
  height: 14px;
  background-position: -2391px 0;
}

.iti__flag.iti__ie {
  height: 10px;
  background-position: -2413px 0;
}

.iti__flag.iti__il {
  height: 15px;
  background-position: -2435px 0;
}

.iti__flag.iti__im {
  height: 10px;
  background-position: -2457px 0;
}

.iti__flag.iti__in {
  height: 14px;
  background-position: -2479px 0;
}

.iti__flag.iti__io {
  height: 10px;
  background-position: -2501px 0;
}

.iti__flag.iti__iq {
  height: 14px;
  background-position: -2523px 0;
}

.iti__flag.iti__ir {
  height: 12px;
  background-position: -2545px 0;
}

.iti__flag.iti__is {
  height: 15px;
  background-position: -2567px 0;
}

.iti__flag.iti__it {
  height: 14px;
  background-position: -2589px 0;
}

.iti__flag.iti__je {
  height: 12px;
  background-position: -2611px 0;
}

.iti__flag.iti__jm {
  height: 10px;
  background-position: -2633px 0;
}

.iti__flag.iti__jo {
  height: 10px;
  background-position: -2655px 0;
}

.iti__flag.iti__jp {
  height: 14px;
  background-position: -2677px 0;
}

.iti__flag.iti__ke {
  height: 14px;
  background-position: -2699px 0;
}

.iti__flag.iti__kg {
  height: 12px;
  background-position: -2721px 0;
}

.iti__flag.iti__kh {
  height: 13px;
  background-position: -2743px 0;
}

.iti__flag.iti__ki {
  height: 10px;
  background-position: -2765px 0;
}

.iti__flag.iti__km {
  height: 12px;
  background-position: -2787px 0;
}

.iti__flag.iti__kn {
  height: 14px;
  background-position: -2809px 0;
}

.iti__flag.iti__kp {
  height: 10px;
  background-position: -2831px 0;
}

.iti__flag.iti__kr {
  height: 14px;
  background-position: -2853px 0;
}

.iti__flag.iti__kw {
  height: 10px;
  background-position: -2875px 0;
}

.iti__flag.iti__ky {
  height: 10px;
  background-position: -2897px 0;
}

.iti__flag.iti__kz {
  height: 10px;
  background-position: -2919px 0;
}

.iti__flag.iti__la {
  height: 14px;
  background-position: -2941px 0;
}

.iti__flag.iti__lb {
  height: 14px;
  background-position: -2963px 0;
}

.iti__flag.iti__lc {
  height: 10px;
  background-position: -2985px 0;
}

.iti__flag.iti__li {
  height: 12px;
  background-position: -3007px 0;
}

.iti__flag.iti__lk {
  height: 10px;
  background-position: -3029px 0;
}

.iti__flag.iti__lr {
  height: 11px;
  background-position: -3051px 0;
}

.iti__flag.iti__ls {
  height: 14px;
  background-position: -3073px 0;
}

.iti__flag.iti__lt {
  height: 12px;
  background-position: -3095px 0;
}

.iti__flag.iti__lu {
  height: 12px;
  background-position: -3117px 0;
}

.iti__flag.iti__lv {
  height: 10px;
  background-position: -3139px 0;
}

.iti__flag.iti__ly {
  height: 10px;
  background-position: -3161px 0;
}

.iti__flag.iti__ma {
  height: 14px;
  background-position: -3183px 0;
}

.iti__flag.iti__mc {
  height: 15px;
  background-position: -3205px 0;
}

.iti__flag.iti__md {
  height: 10px;
  background-position: -3226px 0;
}

.iti__flag.iti__me {
  height: 10px;
  background-position: -3248px 0;
}

.iti__flag.iti__mf {
  height: 14px;
  background-position: -3270px 0;
}

.iti__flag.iti__mg {
  height: 14px;
  background-position: -3292px 0;
}

.iti__flag.iti__mh {
  height: 11px;
  background-position: -3314px 0;
}

.iti__flag.iti__mk {
  height: 10px;
  background-position: -3336px 0;
}

.iti__flag.iti__ml {
  height: 14px;
  background-position: -3358px 0;
}

.iti__flag.iti__mm {
  height: 14px;
  background-position: -3380px 0;
}

.iti__flag.iti__mn {
  height: 10px;
  background-position: -3402px 0;
}

.iti__flag.iti__mo {
  height: 14px;
  background-position: -3424px 0;
}

.iti__flag.iti__mp {
  height: 10px;
  background-position: -3446px 0;
}

.iti__flag.iti__mq {
  height: 14px;
  background-position: -3468px 0;
}

.iti__flag.iti__mr {
  height: 14px;
  background-position: -3490px 0;
}

.iti__flag.iti__ms {
  height: 10px;
  background-position: -3512px 0;
}

.iti__flag.iti__mt {
  height: 14px;
  background-position: -3534px 0;
}

.iti__flag.iti__mu {
  height: 14px;
  background-position: -3556px 0;
}

.iti__flag.iti__mv {
  height: 14px;
  background-position: -3578px 0;
}

.iti__flag.iti__mw {
  height: 14px;
  background-position: -3600px 0;
}

.iti__flag.iti__mx {
  height: 12px;
  background-position: -3622px 0;
}

.iti__flag.iti__my {
  height: 10px;
  background-position: -3644px 0;
}

.iti__flag.iti__mz {
  height: 14px;
  background-position: -3666px 0;
}

.iti__flag.iti__na {
  height: 14px;
  background-position: -3688px 0;
}

.iti__flag.iti__nc {
  height: 10px;
  background-position: -3710px 0;
}

.iti__flag.iti__ne {
  height: 15px;
  background-position: -3732px 0;
}

.iti__flag.iti__nf {
  height: 10px;
  background-position: -3752px 0;
}

.iti__flag.iti__ng {
  height: 10px;
  background-position: -3774px 0;
}

.iti__flag.iti__ni {
  height: 12px;
  background-position: -3796px 0;
}

.iti__flag.iti__nl {
  height: 14px;
  background-position: -3818px 0;
}

.iti__flag.iti__no {
  height: 15px;
  background-position: -3840px 0;
}

.iti__flag.iti__np {
  height: 15px;
  background-position: -3862px 0;
}

.iti__flag.iti__nr {
  height: 10px;
  background-position: -3877px 0;
}

.iti__flag.iti__nu {
  height: 10px;
  background-position: -3899px 0;
}

.iti__flag.iti__nz {
  height: 10px;
  background-position: -3921px 0;
}

.iti__flag.iti__om {
  height: 10px;
  background-position: -3943px 0;
}

.iti__flag.iti__pa {
  height: 14px;
  background-position: -3965px 0;
}

.iti__flag.iti__pe {
  height: 14px;
  background-position: -3987px 0;
}

.iti__flag.iti__pf {
  height: 14px;
  background-position: -4009px 0;
}

.iti__flag.iti__pg {
  height: 15px;
  background-position: -4031px 0;
}

.iti__flag.iti__ph {
  height: 10px;
  background-position: -4053px 0;
}

.iti__flag.iti__pk {
  height: 14px;
  background-position: -4075px 0;
}

.iti__flag.iti__pl {
  height: 13px;
  background-position: -4097px 0;
}

.iti__flag.iti__pm {
  height: 14px;
  background-position: -4119px 0;
}

.iti__flag.iti__pn {
  height: 10px;
  background-position: -4141px 0;
}

.iti__flag.iti__pr {
  height: 14px;
  background-position: -4163px 0;
}

.iti__flag.iti__ps {
  height: 10px;
  background-position: -4185px 0;
}

.iti__flag.iti__pt {
  height: 14px;
  background-position: -4207px 0;
}

.iti__flag.iti__pw {
  height: 13px;
  background-position: -4229px 0;
}

.iti__flag.iti__py {
  height: 11px;
  background-position: -4251px 0;
}

.iti__flag.iti__qa {
  height: 8px;
  background-position: -4273px 0;
}

.iti__flag.iti__re {
  height: 14px;
  background-position: -4295px 0;
}

.iti__flag.iti__ro {
  height: 14px;
  background-position: -4317px 0;
}

.iti__flag.iti__rs {
  height: 14px;
  background-position: -4339px 0;
}

.iti__flag.iti__ru {
  height: 14px;
  background-position: -4361px 0;
}

.iti__flag.iti__rw {
  height: 14px;
  background-position: -4383px 0;
}

.iti__flag.iti__sa {
  height: 14px;
  background-position: -4405px 0;
}

.iti__flag.iti__sb {
  height: 10px;
  background-position: -4427px 0;
}

.iti__flag.iti__sc {
  height: 10px;
  background-position: -4449px 0;
}

.iti__flag.iti__sd {
  height: 10px;
  background-position: -4471px 0;
}

.iti__flag.iti__se {
  height: 13px;
  background-position: -4493px 0;
}

.iti__flag.iti__sg {
  height: 14px;
  background-position: -4515px 0;
}

.iti__flag.iti__sh {
  height: 10px;
  background-position: -4537px 0;
}

.iti__flag.iti__si {
  height: 10px;
  background-position: -4559px 0;
}

.iti__flag.iti__sj {
  height: 15px;
  background-position: -4581px 0;
}

.iti__flag.iti__sk {
  height: 14px;
  background-position: -4603px 0;
}

.iti__flag.iti__sl {
  height: 14px;
  background-position: -4625px 0;
}

.iti__flag.iti__sm {
  height: 15px;
  background-position: -4647px 0;
}

.iti__flag.iti__sn {
  height: 14px;
  background-position: -4669px 0;
}

.iti__flag.iti__so {
  height: 14px;
  background-position: -4691px 0;
}

.iti__flag.iti__sr {
  height: 14px;
  background-position: -4713px 0;
}

.iti__flag.iti__ss {
  height: 10px;
  background-position: -4735px 0;
}

.iti__flag.iti__st {
  height: 10px;
  background-position: -4757px 0;
}

.iti__flag.iti__su {
  height: 10px;
  background-position: -4779px 0;
}

.iti__flag.iti__sv {
  height: 12px;
  background-position: -4801px 0;
}

.iti__flag.iti__sx {
  height: 14px;
  background-position: -4823px 0;
}

.iti__flag.iti__sy {
  height: 14px;
  background-position: -4845px 0;
}

.iti__flag.iti__sz {
  height: 14px;
  background-position: -4867px 0;
}

.iti__flag.iti__ta {
  height: 10px;
  background-position: -4889px 0;
}

.iti__flag.iti__tc {
  height: 10px;
  background-position: -4911px 0;
}

.iti__flag.iti__td {
  height: 14px;
  background-position: -4933px 0;
}

.iti__flag.iti__tf {
  height: 14px;
  background-position: -4955px 0;
}

.iti__flag.iti__tg {
  height: 13px;
  background-position: -4977px 0;
}

.iti__flag.iti__th {
  height: 14px;
  background-position: -4999px 0;
}

.iti__flag.iti__tj {
  height: 10px;
  background-position: -5021px 0;
}

.iti__flag.iti__tk {
  height: 10px;
  background-position: -5043px 0;
}

.iti__flag.iti__tl {
  height: 10px;
  background-position: -5065px 0;
}

.iti__flag.iti__tm {
  height: 14px;
  background-position: -5087px 0;
}

.iti__flag.iti__tn {
  height: 14px;
  background-position: -5109px 0;
}

.iti__flag.iti__to {
  height: 10px;
  background-position: -5131px 0;
}

.iti__flag.iti__tr {
  height: 14px;
  background-position: -5153px 0;
}

.iti__flag.iti__tt {
  height: 12px;
  background-position: -5175px 0;
}

.iti__flag.iti__tv {
  height: 10px;
  background-position: -5197px 0;
}

.iti__flag.iti__tw {
  height: 14px;
  background-position: -5219px 0;
}

.iti__flag.iti__tz {
  height: 14px;
  background-position: -5241px 0;
}

.iti__flag.iti__ua {
  height: 14px;
  background-position: -5263px 0;
}

.iti__flag.iti__ug {
  height: 14px;
  background-position: -5285px 0;
}

.iti__flag.iti__uk {
  height: 10px;
  background-position: -5307px 0;
}

.iti__flag.iti__um {
  height: 11px;
  background-position: -5329px 0;
}

.iti__flag.iti__un {
  height: 14px;
  background-position: -5351px 0;
}

.iti__flag.iti__us {
  height: 11px;
  background-position: -5373px 0;
}

.iti__flag.iti__uy {
  height: 14px;
  background-position: -5395px 0;
}

.iti__flag.iti__uz {
  height: 10px;
  background-position: -5417px 0;
}

.iti__flag.iti__va {
  height: 15px;
  background-position: -5439px 0;
}

.iti__flag.iti__vc {
  height: 14px;
  background-position: -5456px 0;
}

.iti__flag.iti__ve {
  height: 14px;
  background-position: -5478px 0;
}

.iti__flag.iti__vg {
  height: 10px;
  background-position: -5500px 0;
}

.iti__flag.iti__vi {
  height: 14px;
  background-position: -5522px 0;
}

.iti__flag.iti__vn {
  height: 14px;
  background-position: -5544px 0;
}

.iti__flag.iti__vu {
  height: 12px;
  background-position: -5566px 0;
}

.iti__flag.iti__wf {
  height: 14px;
  background-position: -5588px 0;
}

.iti__flag.iti__ws {
  height: 10px;
  background-position: -5610px 0;
}

.iti__flag.iti__xk {
  height: 15px;
  background-position: -5632px 0;
}

.iti__flag.iti__ye {
  height: 14px;
  background-position: -5654px 0;
}

.iti__flag.iti__yt {
  height: 14px;
  background-position: -5676px 0;
}

.iti__flag.iti__za {
  height: 14px;
  background-position: -5698px 0;
}

.iti__flag.iti__zm {
  height: 14px;
  background-position: -5720px 0;
}

.iti__flag.iti__zw {
  height: 10px;
  background-position: -5742px 0;
}

.iti__flag {
  height: 15px;
  box-shadow: 0 0 1px 0 #888;
  background-image: url(../img/flags.png?1);
  background-repeat: no-repeat;
  background-color: #dbdbdb;
  background-position: 20px 0;
}

@media (min-resolution: 2x) {
  .iti__flag {
    background-image: url(../img/flags@2x.png?1);
  }
}
.iti__flag.iti__np {
  background-color: transparent;
}

.iti {
  display: flex;
  width: 100%;
}
.iti__flag {
  background-image: url("/plugins/intTelInput/img/flags.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("/plugins/intTelInput/img/flags@2x.png");
  }
}
.iti--separate-dial-code .iti__selected-flag {
  background: transparent;
}

.inputGroup .iti__flag-container + input {
  border-top-left-radius: 15px !important;
  border-bottom-left-radius: 15px !important;
}
.inputGroup .iti__country-list {
  margin-top: 10px;
  padding-top: 10px;
  border-radius: 15px;
  border-color: var(--main-color-middle-gray);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

.openStreetMap__target {
  aspect-ratio: 3/4;
}
@media (min-width: 768px) {
  .openStreetMap__target {
    aspect-ratio: 16/6;
  }
}
.openStreetMap .leaflet-container .leaflet-top,
.openStreetMap .leaflet-container .leaflet-bottom,
.openStreetMap .leaflet-container .leaflet-control {
  z-index: 2;
}
.openStreetMap .leaflet-container .leaflet-pane {
  z-index: 1;
}
.openStreetMap .leaflet-container .leaflet-bar a {
  color: var(--main-color-black);
  border-color: var(--main-color-light-gray);
}
.openStreetMap .leaflet-container .leaflet-touch .leaflet-control-layers,
.openStreetMap .leaflet-container .leaflet-touch .leaflet-bar {
  border-color: var(--main-color-light-gray);
  box-shadow: none;
}
.openStreetMap .leaflet-container .leaflet-popup-content-wrapper {
  color: var(--main-color-black);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.openStreetMap .leaflet-container .leaflet-popup-content {
  margin: 10px 20px 10px 10px;
}
.openStreetMap .leaflet-container .marker-cluster,
.openStreetMap .leaflet-container .marker-cluster-medium {
  color: var(--main-color-black);
  background-color: rgba(62, 125, 48, 0.3);
}
.openStreetMap .leaflet-container .marker-cluster div,
.openStreetMap .leaflet-container .marker-cluster-medium div {
  background: #3e7d30;
}

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

.buttonRow, .buttonRowTop, .buttonRowBottom {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: -5px;
  margin-right: -5px;
}
.buttonRow .button, .buttonRowTop .button, .buttonRowBottom .button,
.buttonRow .buttonLink,
.buttonRowTop .buttonLink,
.buttonRowBottom .buttonLink {
  margin: 10px 5px;
}
@media (max-width: 481px) {
  .buttonRow, .buttonRowTop, .buttonRowBottom {
    text-align: center;
  }
  .buttonRow .pull-left, .buttonRowTop .pull-left, .buttonRowBottom .pull-left,
  .buttonRow .pull-right,
  .buttonRowTop .pull-right,
  .buttonRowBottom .pull-right {
    float: none !important;
  }
  .buttonRow .buttonLink, .buttonRowTop .buttonLink, .buttonRowBottom .buttonLink,
  .buttonRow .button,
  .buttonRowTop .button,
  .buttonRowBottom .button {
    min-width: 220px;
  }
}

.buttonRowBottom {
  margin-bottom: 0;
}
.buttonRowBottom .buttonLink,
.buttonRowBottom .button {
  margin-bottom: 0;
}

.buttonRowTop {
  margin-top: 0;
}
.buttonRowTop .buttonLink,
.buttonRowTop .button {
  margin-top: 0;
}

.linklist .button {
  min-width: 0;
}
.linklist.table_area .table_row .table_cell {
  padding-top: 10px;
  padding-bottom: 10px;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover {
  cursor: pointer;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover .table_cell {
  background-color: var(--main-color-light-gray);
}

@media (max-width: 767px) {
  .linklist .read_more {
    margin-top: 8px;
  }
  .linklist.table_area .table_row {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .linklist.table_area .table_row:first-child {
    padding-top: 0;
  }
  .linklist.table_area .table_row .table_cell {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/*
Lists

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

.checkList - Checklist

Styleguide Base.Lists
*/
ul,
ol {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}
ul li,
ol li {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}

ul.checkList {
  list-style: none;
  padding-left: 25px;
}
ul.checkList li {
  position: relative;
}
ul.checkList li:before {
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: -25px;
  font-size: 20px;
  margin-top: -4px;
}

#overlay {
  display: none;
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 103;
}

/*
Pagination

Markup:
<div class="pagination">
    <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking">
        <i class="icon icon-arrow-left"></i>
    </a>
    <a class="pagination__item " href="?page=1&amp;sort_by=ranking">1</a>
    <a class="pagination__item " href="?page=2&amp;sort_by=ranking">2</a>
    <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking">3</a>
    <span class="pagination__item pagination__item--seperator">...</span>
    <a class="pagination__item " href="?page=5&amp;sort_by=ranking">5</a>
    <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking">
        <i class="icon icon-arrow-right"></i>
    </a>
</div>

Styleguide Components.Pagination
*/
.pagination {
  display: flex;
  align-items: center;
}
.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  margin-left: 5px;
  margin-right: 5px;
  color: var(--main-color-black);
  cursor: not-allowed;
  background: transparent;
  border-bottom: 1.2px solid transparent;
  border-radius: 0;
  font-size: 16px;
}
.pagination__item--inactive {
  color: var(--main-color-dark-gray);
}
.pagination__item--active {
  background: transparent;
  color: var(--main-color-black) !important;
  border-color: var(--main-color-black);
}
.pagination .icon {
  font-size: 24px;
}

button.pagination__item,
a.pagination__item {
  color: var(--main-color-black);
  cursor: pointer;
}
button.pagination__item:hover, button.pagination__item:focus, button.pagination__item:active,
a.pagination__item:hover,
a.pagination__item:focus,
a.pagination__item:active {
  color: var(--main-color-primary);
  text-decoration: none;
  border-color: var(--main-color-primary);
}
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 {
  border-color: transparent;
  color: var(--main-color-primary);
}

/*
Processbar

Markup:
<nav class="processbar" role="navigation>
    <ul class="processbar__items">
      <li class="processbar__item is-done">
          <i class="processbar__icon icon icon-order-address"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item is-active" aria-current="step">
          <i class="processbar__icon icon icon-order-payment"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item">
          <i class="processbar__icon icon icon-order-check"></i>
          <span class="processbar__label">Label</span>
      </li>
    </ul>
    <div class="processbar__inactive"></div>
    <div class="processbar__active"></div>
</nav>

Styleguide Components.Processbar
*/
.processbar {
  margin: 20px -10px 20px -10px;
  z-index: 1;
  position: relative;
}
@media (min-width: 768px) {
  .processbar {
    margin-bottom: 60px;
  }
}
.processbar__icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 5px;
}
.processbar__icon .icon {
  display: block;
}
.processbar__item {
  margin: 0;
  list-style-type: none;
  padding: 0 10px 30px 10px;
  width: 33%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 1rem;
  color: var(--main-color-middle-gray);
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .processbar__item {
    font-size: var(--main-font-size-small);
  }
}
@media (min-width: 1024px) {
  .processbar__item {
    width: 200px;
  }
}
.processbar__item:after {
  content: "";
  width: 23px;
  height: 23px;
  border: 4px solid var(--main-color-white);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  background: var(--main-color-middle-gray);
  transform: translateX(-50%);
}
.processbar__item.is-done, .processbar__item.is-active {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
}
.processbar__item.is-done:after, .processbar__item.is-active:after {
  background: var(--main-color-primary);
}
.processbar__item:first-child:before, .processbar__item:last-child:before {
  content: "";
  height: 5px;
  width: 50%;
  background: var(--main-color-white);
  display: block;
  position: absolute;
  bottom: 9px;
}
.processbar__item:first-child:before {
  right: 50%;
}
.processbar__item:last-child:before {
  left: 50%;
}
.processbar__items {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.processbar__inactive, .processbar__active {
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--main-color-middle-gray);
  bottom: 11px;
  left: 0;
  z-index: -1;
}
.processbar__active {
  background: var(--main-color-primary);
  height: 3px;
  bottom: 10px;
  width: 0;
  transition: width 0.6s ease-in-out;
}

.scrollTopButton {
  position: fixed;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 101;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-align: center;
  cursor: pointer;
  right: -45px;
  bottom: 0;
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -ms-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
}
.scrollTopButton:hover {
  background-color: var(--main-color-primary-darken);
}
.scrollTopButton.sticky {
  right: 0;
}

.tabs {
  margin-bottom: 20px;
}
.tabs .tabs_item {
  float: left;
  padding: 5px 20px;
  border: 1px solid var(--main-color-middle-gray);
}
.tabs .tabs_item:hover {
  background-color: var(--main-color-middle-gray);
}
.tabs .tabs_item:hover input {
  color: var(--main-color-black);
}
.tabs .tabs_item .form-group {
  margin-bottom: 0;
}
.tabs .tabs_item:last-child {
  border-left: 0;
}
.tabs:after {
  clear: both;
  display: block;
  content: " ";
}

/*
Iconbar

Markup:
<div class="iconbar {{modifier_class}}">
    <div class="iconbarItem">
      <a class="iconbarIcon" href="#" title="Account">
          <span class="iconbarIcon__icon">
              <i class="icon icon-user" aria-hidden="true"></i>
          </span>
          <span class="iconbarIcon__label">Account</span>
      </a>
      <div class="iconbarHover iconbarHover--basket">
          <div class="iconbarHover__close">
              <i class="icon icon-close"></i>
          </div>
          <div class="iconbarHover__headline">
              Headline
          </div>
          <div class="iconbarHover__body">
            <ul class="iconbarNavigation">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <div class="iconbarHover__footer">
              <div class="amountLines">
                  <div class="amountLine amountLine--big">
                      <div class="amountLine__label">Sum</div>
                      <div class="amountLine__value">999,99&nbsp;€</div>
                  </div>
              </div>
              <a href="#" class="button button--action button--xl" style="width: 100%">
                  To Basket
              </a>
          </div>
      </div>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon" href="#" title="Favorites">
          <span class="iconbarIcon__icon">
              <i class="icon icon-favorites" aria-hidden="true"></i>
              <span class="iconbarIcon__count">+99</span>
          </span>
          <span class="iconbarIcon__label">Favorites</span>
      </a>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon active" href="#" title="Basket">
          <span class="iconbarIcon__icon">
              <i class="icon icon-basket" aria-hidden="true"></i>
              <span class="iconbarIcon__count">+99</span>
          </span>
          <span class="iconbarIcon__label">Basket</span>
      </a>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon active" href="#" title="Name">
          <span class="iconbarIcon__label">Max Mustermann</span>
          <span class="iconbarIcon__badge">MM</span>
      </a>
    </div>
</div>

.iconbar--landscape - Orientation landscape

Styleguide Components.Iconbar
*/
.iconbarIcon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--main-color-text-base);
  text-decoration: none;
  position: relative;
}
.iconbarIcon:hover, .iconbarIcon:focus, .iconbarIcon:active, .iconbarIcon.is-active {
  text-decoration: none;
  color: var(--main-color-text-base);
}
.iconbarIcon:hover .iconbarIcon__icon, .iconbarIcon:focus .iconbarIcon__icon, .iconbarIcon:active .iconbarIcon__icon, .iconbarIcon.is-active .iconbarIcon__icon {
  color: var(--main-color-primary);
}
.iconbarIcon:hover .iconbarIcon__count, .iconbarIcon:focus .iconbarIcon__count, .iconbarIcon:active .iconbarIcon__count, .iconbarIcon.is-active .iconbarIcon__count {
  color: var(--main-color-primary-contrast);
}
.iconbarIcon__icon {
  font-size: 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.iconbarIcon__badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  margin-left: 10px;
  background: #ece7de;
  color: #212522;
  font-size: 1.2rem;
}
.iconbarIcon__label {
  font-size: 1.3rem;
  line-height: 1;
  display: none;
  margin-top: 2px;
}
@media (min-width: 1250px) {
  .iconbarIcon__label {
    display: block;
  }
}
.iconbarIcon__count {
  position: absolute;
  left: calc(50% + 1px);
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.iconbarIcon__count.is-action {
  display: flex !important;
  animation: scaleRequestIconBigger 0.5s forwards ease-in-out;
}

.iconbar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
@media (min-width: 1024px) {
  .iconbar {
    gap: 30px;
  }
}
@media (min-width: 1540px) {
  .iconbar {
    gap: 40px;
  }
}
.iconbar--landscape {
  align-items: center;
}
.iconbar--landscape .iconbarIcon {
  flex-direction: row;
  gap: 5px;
}
.iconbar--landscape .iconbarIcon__count {
  left: 15px;
  top: -5px;
}
.iconbar--landscape .iconbarIcon__label {
  margin: 0;
}
.iconbar:not(.iconbar--landscape) .iconbarIcon__badge {
  order: -1;
  margin: 0;
  margin-bottom: 5px;
}

.iconbarHover {
  z-index: 104;
  background: var(--main-color-white);
  padding: 20px 30px;
  display: none;
  flex-direction: column;
  width: 250px;
  max-width: 100vw;
  position: absolute;
  top: 100%;
  bottom: auto;
  right: 0;
  max-height: 70vh;
  border-radius: 15px;
  transform: translateX(5%);
  margin-top: 20px;
  filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.1));
}
.iconbarHover:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent var(--main-color-white) transparent;
  border-style: solid;
  position: absolute;
  right: 30px;
  bottom: 100%;
}
@media (max-width: 767px) {
  .iconbarHover {
    display: none;
  }
}
.iconbarHover--bigger {
  width: 320px;
}
.iconbarHover__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
@media (min-width: 768px) {
  .iconbarHover__close {
    display: none;
  }
}
.iconbarHover__navigation {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}
.iconbarHover__navigation li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-bottom: 1px solid var(--main-color-middle-gray);
}
.iconbarHover__navigation li:last-child {
  border-bottom: 0;
}
.iconbarHover__navigation li > span,
.iconbarHover__navigation li > a {
  display: flex;
  align-items: center;
  color: var(--main-color-black);
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}
.iconbarHover__navigation li > span:hover, .iconbarHover__navigation li > span:focus, .iconbarHover__navigation li > span:active, .iconbarHover__navigation li > span.is-active,
.iconbarHover__navigation li > a:hover,
.iconbarHover__navigation li > a:focus,
.iconbarHover__navigation li > a:active,
.iconbarHover__navigation li > a.is-active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.iconbarHover__navigation li > span .icon,
.iconbarHover__navigation li > a .icon {
  font-size: 1.4em;
  margin-right: 10px;
}
.iconbarHover__headline {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.iconbarHover__body {
  overflow: hidden;
  overflow-y: auto;
  padding-right: 10px;
  margin-right: -10px;
}
.iconbarHover__footer {
  padding-top: 20px;
}

.iconbarItem {
  position: relative;
}
@media (min-width: 768px) {
  .iconbarItem.hoverintent .iconbarHover, .iconbarItem.showIconbarHover .iconbarHover {
    display: flex;
  }
}

/*
Iconlist

Markup:
<div class="iconList">
  <a href="#"><i class="icon icon-facebook"></i></a>
  <a href="#"><i class="icon icon-twitter"></i></a>
  <a href="#"><i class="icon icon-youtube"></i></a>
  <a href="#"><i class="icon icon-tiktok"></i></a>
  <a href="#"><i class="icon icon-instagram"></i></a>
  <a href="#"><i class="icon icon-pinterest"></i></a>
</div>

Styleguide Components.Iconlist
*/
.iconList {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
@media (min-width: 768px) {
  .iconList {
    gap: 34px;
  }
}
.iconList a {
  color: var(--main-color-primary);
  text-decoration: none;
}
.iconList a:hover, .iconList a:focus, .iconList a:active {
  color: var(--main-color-primary-dark);
  text-decoration: none;
}
.iconList .icon {
  font-size: 40px;
  line-height: 1;
  display: block;
}

/*
Iconbox

Markup:
<div class="iconbox">
    <i class="icon icon-shipping"></i>Kostenloser Versand ab 50 €
    <small>Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €</small>
</div>

Styleguide Components.Iconbox
*/
.iconbox {
  position: relative;
  padding-top: 40px;
}
@media (min-width: 768px) {
  .iconbox {
    padding-left: 50px;
    padding-top: 0;
  }
}
.iconbox .icon {
  font-size: 28px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 768px) {
  .iconbox .icon {
    font-size: 38px;
    width: 40px;
    height: 40px;
  }
}
.iconbox small {
  display: block;
  color: var(--main-color-dark-gray);
}

/*
Trustbar

JS-Source: ../global/js/trustbar.js

Markup:
<div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;}'>
  <div class="textcontent">Trust 1</div>
  <div class="textcontent">Trust 2</div>
  <div class="textcontent">Trust 3</div>
</div>
<div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;"items":3}'>
  <div class="textcontent">Trust 1</div>
  <div class="textcontent">Trust 2</div>
  <div class="textcontent">Trust 3</div>
</div>

Styleguide Components.Trustbar
*/
.trustBar {
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .trustBar {
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  .trustBar {
    font-size: 1.3rem;
  }
}
.trustBar__close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 1;
}
.trustBar__close .icon {
  display: block;
  margin: 0;
}
.trustBar__close:hover {
  color: var(--main-color-white);
}
.trustBar a {
  color: var(--main-color-black);
  text-decoration: underline;
}
.trustBar a:hover, .trustBar a:focus, .trustBar a:active {
  color: var(--main-color-black);
  text-decoration: underline;
}
.trustBar .textcontent {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;
}
.trustBar .textcontent .icon {
  font-size: 1.2em;
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
}
.trustBar .textcontent .icon:first-child {
  margin-right: 7px;
}
.trustBar .textcontent .icon:last-child {
  margin-left: 7px;
}
.trustBar .swiper-wrapper {
  display: flex;
  align-items: center;
}

/*
Trust Infobar

Markup:
<div class="trustInfobar">
<span class="trustInfobar__label">Text</span>
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
</div>

Styleguide Components.Trust Infobar
*/
.trustInfobar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: -15px;
  margin-right: -15px;
  text-decoration: none;
  color: var(--main-color-black);
}
.trustInfobar:hover, .trustInfobar:focus, .trustInfobar:active {
  text-decoration: none;
  color: var(--main-color-black);
}
.trustInfobar > * {
  margin-bottom: 15px;
  margin-right: 15px;
}
.trustInfobar img {
  object-fit: contain;
  max-height: 60px;
}
@media (max-width: 1539px) {
  .trustInfobar__label {
    width: 100%;
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .trustInfobar {
    justify-content: center;
    text-align: center;
  }
}

/*
Trustlist

Markup:
<ul class="trustList">
    <li>
        <i class="icon icon-payment"></i> Kauf auf Rechnung
    </li>
    <li>
        <i class="icon icon-shipping"></i> Kostenloser Versand &amp; Rückversand
    </li>
    <li>
        <i class="icon icon-reload"></i> 100 Tage Rückgaberecht
    </li>
</ul>

Styleguide Components.Trustlist
*/
.trustList {
  margin: 0 -5px -10px -5px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  font-size: 1.2rem;
}
.trustList li {
  list-style-type: none;
  margin: 0;
  padding: 0 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trustList .icon {
  font-size: 20px;
  margin-right: 5px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/*
Input Groups

Markup:
<div class="inputGroup {{modifier_class}}">
  <input type="text" />
</div>

.is-focus - Focus

Styleguide Form.Input Groups
*/
/*
Input Groups Addons

Markup:
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
  <input type="text" />
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <button type="submit" class="inputGroup__addon"><i class="icon icon-search"></i></button>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <span class="inputGroup__addon inputGroup__addon--clickable"><i class="icon icon-search"></i></span>
</div>

.is-focus - Focus
.is-inactive - Inactive

Styleguide Form.Input Groups Addons
*/
.inputGroup {
  display: flex;
  width: 100%;
  transition: 0.2s ease-in-out;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  position: relative;
}
.inputGroup input,
.inputGroup .input {
  flex-grow: 1;
  transition: 0.2s ease-in-out;
}
.inputGroup input:not(:last-child),
.inputGroup .input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputGroup__addon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--main-color-middle-gray);
  overflow: hidden;
  text-decoration: none;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 15px;
}
@media (min-width: 768px) {
  .inputGroup__addon {
    height: 41px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.inputGroup__addon:first-child {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputGroup__addon:last-child {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon .button {
  min-width: 0;
  border-radius: 0;
  margin: -1px;
  min-height: 0;
}
.inputGroup__addon .icon {
  line-height: 1;
  display: block;
  font-size: 20px;
}
@media (min-width: 768px) {
  .inputGroup__addon .icon {
    font-size: 24px;
  }
}
.inputGroup__addon + input,
.inputGroup__addon + select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon--clickable {
  cursor: pointer;
}
.inputGroup__addon--clickable:hover {
  color: var(--main-color-primary);
}
.inputGroup button.inputGroup__addon {
  min-width: 39px;
  background: transparent;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .inputGroup button.inputGroup__addon {
    min-width: 41px;
  }
}
.inputGroup button.inputGroup__addon:hover, .inputGroup button.inputGroup__addon:focus, .inputGroup button.inputGroup__addon:active {
  background: var(--main-color-primary);
  color: var(--main-color-primary-darken);
}
.inputGroup button.inputGroup__addon i {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inputGroup--infieldAddon .inputGroup__addon {
  position: absolute;
  height: 100%;
  border: 0;
  background: transparent !important;
}
.inputGroup--infieldAddon .inputGroup__addon:first-child {
  left: 0;
}
.inputGroup--infieldAddon .inputGroup__addon:last-child {
  right: 0;
}
.inputGroup--infieldAddon > input:first-child {
  padding-right: 39px;
  border-radius: 0;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:first-child {
    padding-right: 41px;
  }
}
.inputGroup--infieldAddon > input:last-child {
  padding-left: 39px;
  border-radius: 0;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:last-child {
    padding-left: 41px;
  }
}
.inputGroup.is-focus {
  border-color: var(--main-color-primary);
}
.inputGroup.is-focus > input,
.inputGroup.is-focus > .input,
.inputGroup.is-focus select {
  background: var(--main-color-white);
  border-color: var(--main-color-primary);
}
.inputGroup.is-focus .inputGroup__addon {
  background: var(--main-color-white);
  border-color: var(--main-color-primary);
}
.inputGroup.is-inactive .inputGroup__addon {
  display: none;
}

/*
Infield Input Groups

Markup:
<div class="infieldInputGroup">
  <label for="id">Label</label>
  <div class="inputGroup {{modifier_class}}">
    <input type="text" id="id" />
  </div>
</div><br/>
<strong>Filled</strong><br/><br/>
<div class="infieldInputGroup is-filled">
  <label for="id">Label</label>
  <div class="inputGroup {{modifier_class}}">
    <input type="text" id="id" value="Text" />
  </div>
</div>

Styleguide Form.Infield Input Groups
*/
.infieldInputGroup {
  position: relative;
}
.infieldInputGroup > label {
  position: absolute;
  top: 50%;
  transform: translate(0, calc(-50% - 1px));
  left: 15px;
  margin-top: 1px;
  line-height: 18px;
  transition: 0.2s ease-in-out;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .infieldInputGroup > label {
    left: 20px;
    line-height: 20px;
    max-width: calc(100% - 40px);
  }
}
.infieldInputGroup:has(.inputGroup--infieldAddon) > label {
  left: 61px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon) > label {
    left: 67.5px;
  }
}
.infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
  left: 15px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
    left: 20px;
  }
}
.infieldInputGroup input,
.infieldInputGroup select,
.infieldInputGroup textarea {
  transition: padding 0.2s ease-in-out;
}
.infieldInputGroup--select > label, .infieldInputGroup.is-focus > label, .infieldInputGroup.is-filled > label {
  top: 0;
  transform: translate(-5px, -50%);
  color: var(--main-color-dark-gray);
  font-size: 0.7em;
  background: var(--main-color-white);
  line-height: 1;
  padding-left: 5px;
  padding-right: 5px;
  max-width: 100%;
}

/*
Searchbar

You can add minified Classes for each Viewport Size (--minified-xs,--minified-sm,--minified-md,--minified-lg,--minified-xlg)

Markup:
<div class="inputGroup searchBar {{modifier_class}}">
  <input type="text" placeholder="Search..." />
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
</div>

.searchBar--minified
.searchBar--small
.is-focus

Styleguide Components.Searchbar
*/
.searchBar {
  width: 100%;
  border-radius: 15px;
  background: var(--main-color-white);
}
.searchBar input {
  background: var(--main-color-white);
  border-color: var(--main-color-white);
}
.searchBar input:-webkit-autofill,
.searchBar input:-webkit-autofill:hover,
.searchBar input:-webkit-autofill:focus,
.searchBar input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--main-color-white) inset !important;
}
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
  background: var(--main-color-white);
  border-color: var(--main-color-white);
  transition: 0.2s ease-in-out;
  padding-left: 4px;
  padding-right: 4px;
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
  background: var(--main-color-white);
  color: var(--main-color-primary);
}
.searchBar--minified {
  position: relative;
}
.searchBar--minified input {
  width: 0;
  right: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
.searchBar--minified .inputGroup__addon {
  z-index: 1;
}
.searchBar--minified.is-active input {
  width: 300px;
  padding-right: 41px;
  opacity: 1;
  pointer-events: auto;
}
.searchBar--small {
  width: 100%;
  max-width: 200px;
  position: relative;
  border-radius: 0;
}
.searchBar--small input {
  padding: 5px 30px 5px 5px;
  font-size: var(--main-font-size-small);
  border: 0;
  border-bottom: 1px solid var(--main-color-middle-gray);
  border-radius: 0;
  background: transparent !important;
}
.searchBar--small .inputGroup__addon,
.searchBar--small button.inputGroup__addon {
  padding: 0;
  min-width: 0;
  height: 30px;
  width: 30px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0;
  background: transparent !important;
  border-color: transparent !important;
}
.searchBar--small .inputGroup__addon .icon,
.searchBar--small button.inputGroup__addon .icon {
  font-size: 18px;
}
.searchBar--small.is-focus input {
  border-color: transparent !important;
}
.searchBar--small.is-focus .inputGroup__addon,
.searchBar--small.is-focus button.inputGroup__addon {
  border-color: transparent !important;
}
.searchBar.is-focus {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.searchBar.is-focus input, .searchBar.is-focus .inputGroup__addon, .searchBar.is-focus button.inputGroup__addon {
  border-color: var(--main-color-white);
}
.searchBar.is-focus input:hover, .searchBar.is-focus input:focus, .searchBar.is-focus .inputGroup__addon:hover, .searchBar.is-focus .inputGroup__addon:focus, .searchBar.is-focus button.inputGroup__addon:hover, .searchBar.is-focus button.inputGroup__addon:focus {
  background: var(--main-color-white);
}
@media (max-width: 767px) {
  .searchBar--minified-xs {
    position: relative;
  }
  .searchBar--minified-xs input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-xs .inputGroup__addon {
    z-index: 1;
    border-radius: 15px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-xs.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-xs.is-focus input {
    width: 300px;
    padding-right: 41px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 15px;
  }
  .searchBar--minified-xs.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-xs.is-focus .inputGroup__addon:hover, .searchBar--minified-xs.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .searchBar--minified-sm {
    position: relative;
  }
  .searchBar--minified-sm input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-sm .inputGroup__addon {
    z-index: 1;
    border-radius: 15px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-sm.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-sm.is-focus input {
    width: 300px;
    padding-right: 41px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 15px;
  }
  .searchBar--minified-sm.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-sm.is-focus .inputGroup__addon:hover, .searchBar--minified-sm.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 1024px) and (max-width: 1249px) {
  .searchBar--minified-md {
    position: relative;
  }
  .searchBar--minified-md input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-md .inputGroup__addon {
    z-index: 1;
    border-radius: 15px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-md.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-md.is-focus input {
    width: 300px;
    padding-right: 41px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 15px;
  }
  .searchBar--minified-md.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-md.is-focus .inputGroup__addon:hover, .searchBar--minified-md.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 1250px) and (max-width: 1539px) {
  .searchBar--minified-lg {
    position: relative;
  }
  .searchBar--minified-lg input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-lg .inputGroup__addon {
    z-index: 1;
    border-radius: 15px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-lg.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-lg.is-focus input {
    width: 300px;
    padding-right: 41px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 15px;
  }
  .searchBar--minified-lg.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-lg.is-focus .inputGroup__addon:hover, .searchBar--minified-lg.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 1540px) {
  .searchBar--minified-xlg {
    position: relative;
  }
  .searchBar--minified-xlg input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-in-out;
  }
  .searchBar--minified-xlg .inputGroup__addon {
    z-index: 1;
    border-radius: 15px;
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: transparent;
  }
  .searchBar--minified-xlg.is-focus {
    box-shadow: none;
  }
  .searchBar--minified-xlg.is-focus input {
    width: 300px;
    padding-right: 41px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 15px;
  }
  .searchBar--minified-xlg.is-focus .inputGroup__addon {
    background: transparent !important;
    border-color: transparent !important;
  }
  .searchBar--minified-xlg.is-focus .inputGroup__addon:hover, .searchBar--minified-xlg.is-focus .inputGroup__addon:focus {
    background: transparent !important;
    border-color: transparent !important;
  }
}

.searchSuggestionItem {
  border-bottom: 1px solid var(--main-color-middle-gray);
  text-decoration: none;
  padding: 10px;
  color: var(--main-color-black);
  display: grid;
  grid-gap: 10px;
  align-items: center;
  grid-template-columns: auto 1fr;
  grid-template-areas: "searchSuggestionImg searchSuggestionDescription";
  cursor: pointer;
}
.searchSuggestionItem__img {
  grid-area: searchSuggestionImg;
  width: 60px;
}
.searchSuggestionItem__description {
  grid-area: searchSuggestionDescription;
}
.searchSuggestionItem:hover, .searchSuggestionItem.is-active {
  color: var(--main-color-black);
  text-decoration: none;
  background: var(--main-color-light-gray);
}

.searchBarSuggestions {
  background: var(--main-color-white);
  border-radius: 15px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}

.searchBarWrapper {
  position: relative;
}
.searchBarWrapper .searchBarSuggestions {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1;
}
.searchBarWrapper.is-loading .searchBar {
  pointer-events: none;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon {
  animation: rotation 1s infinite ease-in-out;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon:before {
  content: var(--base-icon-loading);
}

.searchBar input {
  padding-left: 0;
}
.searchBar input:focus, .searchBar input:active {
  border-color: transparent;
}
@media (min-width: 1250px) {
  .searchBar button.inputGroup__addon {
    min-width: 50px;
    height: 50px;
  }
  .searchBar input {
    line-height: 30px;
  }
}

/*
Rating

Markup:
<div class="rating">
    <div class="rating__stars">
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active-half"><i class="icon icon-star"></i></span>
    </div>
    <div class="rating__label">
        (4,5/5) Trusted Shops
    </div>
</div>

Styleguide Components.Rating
*/
.rating {
  display: flex;
  align-items: center;
}
.rating__star {
  display: block;
  line-height: 1;
}
.rating__star--active .icon:before {
  content: var(--base-icon-star-filled);
}
.rating__star--active-half .icon:before {
  content: var(--base-icon-star-half);
}
.rating__label {
  margin-left: 10px;
}
.rating__stars {
  display: flex;
  align-items: center;
}

.ratingSelection {
  font-size: 1.8em;
  margin-right: -5px;
}
.ratingSelection .rating__star {
  cursor: pointer;
  margin-right: 5px;
}
.ratingSelection .rating__star:hover {
  color: var(--main-color-primary);
}

.ratingListItem__stars {
  margin-right: 20px;
}
.ratingListItem__header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.ratingList .ratingListItem:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--main-color-middle-gray);
  margin-bottom: 20px;
}

.itemcardRatingLink {
  color: var(--main-color-black);
  text-decoration: none;
}
.itemcardRatingLink:hover, .itemcardRatingLink:focus, .itemcardRatingLink:active {
  color: var(--main-color-primary);
  text-decoration: none;
}

.itemcardRatingViewHeadline {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .itemcardRatingViewHeadline {
    justify-content: space-between;
  }
}
.itemcardRatingViewHeadline h2 {
  margin-bottom: 0;
}
.itemcardRatingViewHeadline .rating {
  margin-left: 20px;
}

/*
Action Icon

Markup:
<button class="actionIcon {{modifier_class}}"><i class="icon icon-favorites"></i></button>

:hover - Hover
:focus - Focus
.is-loading - Loading
.is-success - Success
.is-error - Error

Styleguide Components.Action Icon
*/
.actionIcon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  color: var(--main-color-black);
  text-decoration: none;
  position: relative;
  border: 0;
  background: var(--main-color-white);
  border-radius: 50%;
  padding: 0;
  margin: 0;
  min-height: 0;
}
.actionIcon:hover {
  background: var(--main-color-primary);
  text-decoration: none;
  color: var(--main-color-white);
}
.actionIcon:hover .icon-favorites:before {
  content: var(--base-icon-star);
}
.actionIcon:hover .icon-favorites-filled:before {
  content: var(--base-icon-star-filled);
}
.actionIcon:hover .icon {
  background: transparent;
  color: var(--main-color-white);
}
.actionIcon:focus, .actionIcon:active {
  background: var(--main-color-primary-dark);
  text-decoration: none;
  color: var(--main-color-white);
}
.actionIcon:focus .icon, .actionIcon:active .icon {
  background: transparent;
  color: var(--main-color-white);
}
.actionIcon:before {
  display: none;
}
.actionIcon:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: "";
  transition: 0.2s ease-in-out;
  opacity: 0;
  position: absolute;
}
.actionIcon .icon {
  opacity: 1;
  font-size: 1em;
}
.actionIcon.is-loading, .actionIcon.is-success, .actionIcon.is-error {
  color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  padding: 0;
  background: var(--main-color-white) !important;
}
.actionIcon.is-loading .icon, .actionIcon.is-success .icon, .actionIcon.is-error .icon {
  opacity: 0;
}
.actionIcon.is-loading {
  cursor: wait;
}
.actionIcon.is-loading:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.actionIcon.is-success {
  color: var(--main-color-success) !important;
}
.actionIcon.is-success:after {
  content: var(--base-icon-check);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}
.actionIcon.is-error {
  color: var(--main-color-danger) !important;
}
.actionIcon.is-error:after {
  content: var(--base-icon-close);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}

/*
Tags

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

:hover - Hover
:focus - Focus
:active - Active
.is-loading - Is loading
.is-success - Is success
.is-error - Is error

Styleguide Components.Tags
*/
/*
Tags Group

Markup:
<div class="tags">
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
</div>

Styleguide Components.Tags Group
*/
.tag {
  background: var(--main-color-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);
  border-radius: 4px;
  line-height: 1;
  text-align: center;
}
.tag:hover, .tag.is-active {
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-decoration: none;
}
.tag:focus, .tag:active {
  background: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
  text-decoration: none;
}
.tag .icon {
  font-size: 1.4em;
  margin-left: 5px;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.tag.is-loading, .tag.is-success, .tag.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  color: var(--main-color-black) !important;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.tag.is-loading .icon, .tag.is-success .icon, .tag.is-error .icon {
  opacity: 0;
}
.tag.is-loading:after, .tag.is-success:after, .tag.is-error:after {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: -50% -50%;
  font-size: 20px;
}
.tag.is-loading {
  cursor: wait;
  color: var(--main-color-middle-gray) !important;
}
.tag.is-loading:after {
  content: var(--base-icon-loading);
  color: var(--main-color-black);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.tag.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-success) !important;
}
.tag.is-success:after {
  content: var(--base-icon-check);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.tag.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-danger) !important;
}
.tag.is-error:after {
  content: var(--base-icon-close);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

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

.tag {
  margin: 0 !important;
}
.tag.is-loading {
  color: var(--main-color-middle-gray) !important;
}
.tag.is-loading:after {
  color: var(--main-color-black);
}
.tag.is-success {
  color: var(--main-color-success) !important;
}
.tag.is-success:after {
  color: var(--main-color-white);
}
.tag.is-error {
  color: var(--main-color-danger) !important;
}
.tag.is-error:after {
  color: var(--main-color-white);
}

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

/*
Modals

Markup:
<a href="javascript:void(0)" class="button" data-modal='id-{{modifier_class}}'>Open Modal</a>
<div class="modal {{modifier_class}}" id="id-{{modifier_class}}">
    <div class="modal__dialog" role="document">
        <div class="modal__content">
            <div class="modal__header">
                <div class="modal__title">Title<br/><small>Subtitle</small></div>
                <a href="javascript:void(0)" class="modal__close" data-close="modal" aria-label="Close Modal">
                    <i class="icon icon-close"></i>
                </div>
            </div>
            <div class="modal__body">
              Lorem Ipsum
            </div>
            <div class="modal__footer">
                <button class="button button--action">Save</button>
                <a href="javascript:void(0) class="button" data-close="modal" aria-label="Close Modal">Abort</span>
            </div>
        </div>
    </div>
</div>

.modal--info - Info
.modal--error - Error
.modal--success - Success

Styleguide Components.Modals
*/
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 107;
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
  align-items: flex-end;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .modal {
    padding: 30px;
    align-items: flex-start;
  }
}
@media (min-width: 1250px) {
  .modal {
    padding: 60px;
  }
}
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  transition: 0.4s ease;
  background: var(--main-color-white);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(20%);
}
@media (max-width: 767px) {
  .modal__dialog {
    max-height: 100%;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
@media (min-width: 768px) {
  .modal__dialog {
    border-radius: 10px;
    overflow: hidden;
    transform: translateY(-20%);
  }
}
@media (min-width: 1250px) {
  .modal__dialog {
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.2);
  }
}
.modal__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease-in;
  opacity: 1;
}
.modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.6;
  text-decoration: none;
  color: var(--main-color-black);
  border-radius: 50%;
  text-align: center;
}
.modal__close:hover, .modal__close:focus {
  color: var(--main-color-black);
  text-decoration: none;
  background: var(--main-color-middle-gray);
}
.modal__close i {
  display: block;
}
.modal__close i:before {
  line-height: 1;
  display: block;
}
.modal__header {
  padding: 20px 40px 0 20px;
}
@media (min-width: 768px) {
  .modal__header {
    padding: 30px 50px 0 30px;
  }
}
.modal__body {
  padding: 20px;
}
@media (min-width: 768px) {
  .modal__body {
    padding: 30px;
    padding-top: 0;
  }
}
.modal__footer {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media (min-width: 768px) {
  .modal__footer {
    padding: 30px;
  }
}
.modal__footer:not(.modal__footer--bg) {
  padding-top: 0;
}
.modal__title {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  margin-bottom: 1em;
}
.modal__title small {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
}
.modal--info .modal__header, .modal--error .modal__header, .modal--success .modal__header {
  padding: 0;
}
.modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
  text-align: center;
  max-width: 420px;
  padding-top: 50px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
    padding-top: 130px;
  }
}
.modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
  content: var(--base-icon-exclamation);
  font-family: "icons", Helvetica, Arial, sans-serif;
  border: 2px solid var(--main-color-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  border-radius: 50%;
  color: var(--main-color-warning);
  transform: translateX(-50%);
  line-height: 1;
  top: 20px;
  font-size: 24px;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
    top: 40px;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
}
.modal--error .modal__dialog:before {
  content: var(--base-icon-exclamation);
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
.modal--success .modal__dialog:before {
  content: var(--base-icon-check);
  border-color: var(--main-color-success);
  color: var(--main-color-success);
}
.modal--flyout {
  padding: 0;
  width: 320px;
  transition: all 0.3s ease;
}
.modal--flyout .modal__dialog {
  height: 100%;
  height: 100svh;
  overflow: hidden;
  overflow-y: auto;
  transform: none;
}
.modal--flyoutRight {
  position: fixed;
  right: -320px;
  left: auto;
}
.modal--flyoutRight.open {
  right: 0;
}
.modal--flyoutRight .modal__dialog {
  margin-left: auto;
  margin-right: 0;
}
.modal--flyoutLeft {
  position: fixed;
  left: -320px;
  margin-right: auto;
  margin-left: 0;
  right: auto;
}
.modal--flyoutLeft.open {
  left: 0;
}
.modal--flyoutLeft .modal__dialog {
  margin-right: auto;
  margin-left: 0;
}
.modal--loading .modal__title {
  opacity: 0;
}
.modal--loading .modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.modal--loading .modal__body .icon {
  font-size: 60px;
  animation: rotation 1s infinite linear;
}
.modal--lg .modal__dialog {
  max-width: 1200px;
}
.modal--md .modal__dialog {
  max-width: 900px;
}
.modal--sm .modal__dialog {
  max-width: 600px;
}
.modal--xs .modal__dialog {
  max-width: 440px;
}
.modal--white .modal__dialog {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}
.modal.open .modal__dialog {
  transform: none;
}
.modal--disabled .modal__dialog {
  pointer-events: none;
  margin-top: -10px;
}
.modal--disabled .modal__content {
  opacity: 0.2;
}

.modalBg {
  background: rgba(204, 204, 204, 0.7);
  z-index: 106;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

body.modal-open,
html.modal-open {
  overflow: hidden;
}
@media (min-width: 1024px) {
  body.modal-open,
  html.modal-open {
    padding-right: 6px;
  }
}

/*
Radio List

Markup:
<div class="radioList {{modifier_class}}">
        <label for="radio1" class="radioListItem">
            <input type="radio" name="radio" id="radio1" value="1" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
        <label for="radio2" class="radioListItem">
            <input type="radio" name="radio" id="radio2" value="2" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
</div>

radioList--small - Small

Styleguide Components.Radio List
*/
.radioListItem {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 10px 10px 60px;
  border: 1px solid var(--main-color-middle-gray);
  border-radius: 15px;
  cursor: pointer;
  min-height: 65px;
}
.radioListItem:hover, .radioListItem:focus, .radioListItem:active {
  border-color: var(--main-color-primary);
  z-index: 1;
}
.radioListItem:has(input:focus) {
  border-color: var(--main-color-primary);
}
.radioListItem__image {
  padding-left: 20px;
}
.radioListItem__image img {
  aspect-ratio: 4/3;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.radioListItem__headline {
  font-size: var(--main-font-size-base);
}
.radioListItem__summary {
  display: block;
  margin-top: 5px;
}
.radioListItem__text {
  flex-grow: 1;
}
.radioListItem input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.radioListItem input + i {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--main-color-white);
  border: 1.5px solid var(--main-color-middle-gray);
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.radioListItem input + i:after {
  content: "";
  background: var(--main-color-primary);
  pointer-events: none;
  position: absolute;
  width: 10px;
  height: 10px;
  left: 4px;
  top: 4px;
  opacity: 0;
  transition: opacity 0.1s ease-in;
  background-color: var(--main-color-primary);
  border-radius: 50%;
  display: block;
}
.radioListItem input:focus + i {
  border-color: var(--main-color-primary);
}
.radioListItem input:checked + i:after {
  opacity: 1;
}

.radioList {
  margin-bottom: -20px;
}
.radioList .radioListItem {
  margin-bottom: 20px;
}
.radioList--small {
  margin: 0;
}
.radioList--small .radioListItem {
  margin-bottom: 0;
  border-radius: 0;
  padding: 5px 10px 5px 40px;
  min-height: 53px;
  margin-top: -1px;
}
.radioList--small .radioListItem:first-child {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin-top: 0;
}
.radioList--small .radioListItem:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.radioList--small .radioListItem__summary {
  margin-top: 0;
}
.radioList--small .radioListItem input + i {
  left: 10px;
}

.radioList--small .radioListItem {
  padding: 5px 35px 5px 65px;
}
.radioList--small .radioListItem input + i {
  left: 35px;
}

/*
Link with Icon

Markup:
<a href="#" class="linkWithIcon {{modifier_class}}"><i class="icon icon-favorites"></i><span>Text</span></a>

:hover - Hover
:focus - Focus
:active - Active
.is-loading - Loading
.is-success - Success
.is-error - Error

Styleguide Typo.Link with Icon
*/
.linkWithIcon {
  display: inline-flex;
  align-items: center;
  color: var(--main-color-black);
  text-decoration: none;
  line-height: 1;
}
.linkWithIcon .icon {
  font-size: 1.2em;
  position: relative;
}
.linkWithIcon .icon:first-child {
  margin: 0;
  margin-right: 5px;
}
.linkWithIcon .icon:last-child {
  margin: 0;
  margin-left: 5px;
}
.linkWithIcon:hover, .linkWithIcon:focus, .linkWithIcon:active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}
.linkWithIcon.is-loading, .linkWithIcon.is-success, .linkWithIcon.is-error {
  color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  position: relative;
  pointer-events: none;
  background: transparent !important;
}
.linkWithIcon.is-loading:after, .linkWithIcon.is-success:after, .linkWithIcon.is-error:after {
  display: none;
}
.linkWithIcon.is-loading:before, .linkWithIcon.is-success:before, .linkWithIcon.is-error:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 20px;
  margin-top: -10px;
}
.linkWithIcon.is-loading .icon, .linkWithIcon.is-success .icon, .linkWithIcon.is-error .icon {
  opacity: 0;
}
.linkWithIcon.is-loading {
  cursor: wait;
}
.linkWithIcon.is-loading:before {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.linkWithIcon.is-success {
  color: var(--main-color-success) !important;
}
.linkWithIcon.is-success:before {
  content: var(--base-icon-check);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}
.linkWithIcon.is-error {
  color: var(--main-color-danger) !important;
}
.linkWithIcon.is-error:before {
  content: var(--base-icon-close);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}

button.linkWithIcon {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--main-color-black);
  text-decoration: none;
  cursor: pointer;
}
button.linkWithIcon:hover, button.linkWithIcon:focus, button.linkWithIcon:active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}

.linkWithIcon--rounded .icon {
  width: 36px;
  height: 36px;
  background: var(--main-color-secondary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.linkWithIcon--rounded .icon:first-child {
  margin-right: 10px;
}
.linkWithIcon--rounded .icon:last-child {
  margin-left: 10px;
}
.linkWithIcon--rounded:hover span, .linkWithIcon--rounded:focus span, .linkWithIcon--rounded:active span {
  color: var(--main-color-primary);
}
.linkWithIcon--rounded:hover .icon, .linkWithIcon--rounded:focus .icon, .linkWithIcon--rounded:active .icon {
  background: var(--main-color-primary);
}

.tooltip {
  --tooltip-zindex: 104;
  --tooltip-max-width: 200px;
  --tooltip-padding-x: 5px;
  --tooltip-padding-y: 2.5px;
  --tooltip-margin: ;
  --tooltip-font-size: var(--main-font-size-small);
  --tooltip-color: var(--main-color-white);
  --tooltip-bg: var(--main-color-black);
  --tooltip-border-radius: 15px;
  --tooltip-opacity: 0.9;
  --tooltip-arrow-width: 0.8rem;
  --tooltip-arrow-height: 0.4rem;
  z-index: var(--tooltip-zindex);
  display: block;
  margin: var(--tooltip-margin);
  font-family: var(--main-font-family);
  font-style: normal;
  font-weight: var(--main-font-weight);
  line-height: var(--main-line-height);
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--tooltip-arrow-width);
  height: var(--tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.tooltip-top .tooltip-arrow, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-top .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--tooltip-bg);
}

/* rtl:begin:ignore */
.tooltip-end .tooltip-arrow, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * var(--tooltip-arrow-height));
  width: var(--tooltip-arrow-height);
  height: var(--tooltip-arrow-width);
}
.tooltip-end .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-bottom .tooltip-arrow, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-bottom .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
  border-bottom-color: var(--tooltip-bg);
}

/* rtl:begin:ignore */
.tooltip-start .tooltip-arrow, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * var(--tooltip-arrow-height));
  width: var(--tooltip-arrow-height);
  height: var(--tooltip-arrow-width);
}
.tooltip-start .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--tooltip-arrow-width) * 0.5) 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
  border-left-color: var(--tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  color: var(--tooltip-color);
  text-align: center;
  background-color: var(--tooltip-bg);
  border-radius: var(--tooltip-border-radius);
}

/*
Share Links

Markup:
<div class="shareLinks">
    <a class="shareLink" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Facebook teilen">
        <i class="icon icon-facebook"></i>
        <span>Share on Facebook</span>
    </a>
    <a class="shareLink" href="https://www.pinterest.com/pin/create/link/?url=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Pinterest pinnen">
        <i class="icon icon-pinterest"></i>
        <span>Share on Pinterest</span>
    </a>
</div>

Styleguide Components.Share Links
*/
.shareLink {
  color: var(--main-color-black);
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 20px 10px 10px;
  border: 1.5px solid var(--main-color-middle-gray);
  border-radius: 15px;
  cursor: pointer;
}
.shareLink:hover {
  text-decoration: none;
  color: var(--main-color-white);
  background: var(--main-link-color);
  border-color: var(--main-link-color);
}
.shareLink:focus, .shareLink:active {
  text-decoration: none;
  color: var(--main-color-white);
  background: var(--main-link-color-hover);
  border-color: var(--main-link-color-hover);
}
.shareLink .icon {
  margin-right: 5px;
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shareLink.is-loading, .shareLink.is-success, .shareLink.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.shareLink.is-loading {
  cursor: wait;
  color: var(--main-color-white) !important;
}
.shareLink.is-loading .icon:before {
  content: var(--base-icon-loading);
  animation: rotation 1s infinite ease-in-out;
}
.shareLink.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-white) !important;
}
.shareLink.is-success .icon:before {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.shareLink.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.shareLink.is-error .icon:before {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

.shareLinks {
  display: flex;
  flex-direction: column;
  margin-bottom: -10px;
}
.shareLinks .shareLink {
  margin-bottom: 10px;
}

.shareLink:hover {
  background: var(--main-link-color-hover);
  border-color: var(--main-link-color-hover);
}

/*
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__selectedLabel {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  overflow: hidden;
}
.customSelect__selectedCount {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  font-size: 1.4rem;
  vertical-align: middle;
  margin-top: -2px;
  display: none;
  flex-shrink: 0;
}
.customSelect__selectedCount.is-active {
  display: inline-flex;
}
.customSelect__selected {
  padding-right: 40px;
  display: flex;
}
.customSelect__selected:after {
  right: 10px;
  font-size: 2rem;
  margin-top: 1px;
}
.customSelect__hiddenFormField {
  display: none;
}
.customSelect__dropdown {
  z-index: 2;
  background: var(--main-color-white);
  font-size: var(--main-font-size-small);
  overflow: hidden;
  flex-direction: column;
}
@media (max-width: 767px) {
  .customSelect__dropdown {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    padding: 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    translate: 0 110%;
    transition: 0.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
    z-index: 104;
    max-height: 100vh;
    max-height: 100svh;
  }
}
@media (min-width: 768px) {
  .customSelect__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: 300px;
    max-width: 100vw;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border: 1.5px solid var(--main-color-middle-gray);
    border-radius: 15px;
    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 {
  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: 1.5px solid var(--main-color-middle-gray);
  border-radius: 15px;
  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;
  position: relative;
}
.customSelect.is-loading .customSelect__selected .icon, .customSelect.is-success .customSelect__selected .icon, .customSelect.is-error .customSelect__selected .icon {
  opacity: 0;
}
.customSelect.is-loading .customSelect__selected:after, .customSelect.is-success .customSelect__selected:after, .customSelect.is-error .customSelect__selected:after {
  position: absolute;
  right: 20px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  transform: translateY(0);
  translate: 0 -50%;
  font-size: 24px;
  margin-top: 0;
}
.customSelect.is-loading .customSelect__selected {
  cursor: wait;
  color: var(--main-color-black) !important;
}
.customSelect.is-loading .customSelect__selected:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.customSelect.is-success .customSelect__selected {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-black) !important;
}
.customSelect.is-success .customSelect__selected:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect.is-error .customSelect__selected {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.customSelect.is-error .customSelect__selected:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect--small {
  width: auto;
  display: inline-flex;
}
.customSelect--small .customSelect__selected {
  padding: 0;
  padding-right: 25px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.customSelect--small .customSelect__selected:after {
  font-size: 2rem;
  right: 0;
  margin-top: 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;
}
.customSelect--small.is-loading .customSelect__selected {
  cursor: wait;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-black) !important;
}
.customSelect--small.is-success .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-success) !important;
}
.customSelect--small.is-error .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-danger) !important;
}
.customSelect--openRight .customSelect__dropdown {
  left: auto;
  right: 0;
}
.customSelect--openTop .customSelect__dropdown {
  top: auto;
  bottom: 35px;
}

.viewer360Images img {
  user-drag: none;
  -webkit-user-drag: none;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center center;
}
.viewer360Images img:not(.is-active) {
  display: none;
}

.viewer360 {
  position: relative;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.viewer360__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: 0.4s ease-in-out;
  color: var(--main-color-dark-gray);
  line-height: 1;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25px;
  border-radius: 50%;
  background: var(--main-color-white);
  z-index: 1;
}
.viewer360__loader:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
  position: absolute;
  left: 50%;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -15px;
}
.viewer360.is-loading {
  cursor: wait;
  pointer-events: none;
}
.viewer360.loaded .viewer360__loader {
  opacity: 0;
  pointer-events: none;
}

.viewer360Wrapper {
  position: relative;
  pointer-events: none;
}
.viewer360Wrapper__zoom {
  font-size: 24px;
  color: var(--main-color-dark-gray);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--main-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
.viewer360Wrapper__zoom:hover, .viewer360Wrapper__zoom:focus, .viewer360Wrapper__zoom:active {
  color: var(--main-color-primary);
}
.viewer360Wrapper:has(.viewer360.loaded) {
  pointer-events: auto;
}
.viewer360Wrapper:has(.viewer360.loaded) .viewer360Wrapper__zoom {
  opacity: 1;
  pointer-events: auto;
}

.fullscreenGallery .viewer360Images {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fullscreenGallery .viewer360Images img {
  position: absolute;
  width: 100%;
  height: 100% !important;
}

/*
Contentbox

Markup:
<div class="contentBox {{modifier_class}}">
  <div class="contentImage">
    <img alt="" src="/userdata/images/muster/400x300.png" style="width: 400px; height: 300px;">
  </div>
  <div class="contentText">
    <h3>Headline</h3>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  </div>
</div>

.reverse - Reverse
.contentBox--textinbox - Text in Box

//Styleguide Components.Contentbox
*/
.contentBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  color: var(--main-color-black);
  text-decoration: none;
}
@media (min-width: 768px) {
  .contentBox {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}
.contentBox .contentImage {
  max-width: 100%;
  width: 100%;
  background-color: var(--main-color-white);
  overflow: hidden;
}
.contentBox .contentImage img {
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: 0.2s ease-in-out;
  display: block;
  min-width: 100%;
}
.contentBox .contentText {
  padding: 30px;
  flex-grow: 1;
  display: flex;
}
.contentBox .contentText .textcontent {
  width: 100%;
}
@container containerRowColumn (min-inline-size: 600px) {
  .contentBox {
    flex-direction: row;
  }
  .contentBox .contentImage {
    width: 50%;
    flex-shrink: 0;
    display: flex;
  }
  .contentBox .contentImage > .textcontent {
    display: flex;
  }
  .contentBox .contentImage img {
    min-height: 100%;
  }
  .contentBox.reverse {
    flex-direction: row-reverse;
  }
}
.contentBox > .link {
  color: var(--main-color-black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
@container containerRowColumn (min-inline-size:600px) {
  .contentBox > .link {
    flex-direction: row;
  }
}
.contentBox > .link:hover, .contentBox > .link:focus, .contentBox > .link:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.contentBox > .link:hover .contentImage img, .contentBox > .link:focus .contentImage img, .contentBox > .link:active .contentImage img {
  scale: 1.05;
}
a.contentBox {
  color: var(--main-color-black);
  text-decoration: none;
}
a.contentBox:hover, a.contentBox:focus, a.contentBox:active {
  color: var(--main-color-black);
  text-decoration: none;
}
a.contentBox:hover .contentImage img, a.contentBox:focus .contentImage img, a.contentBox:active .contentImage img {
  scale: 1.05;
}

.contentBox.hasLink > .link {
  cursor: pointer;
  color: var(--main-color-black);
}
.contentBox.hasLink > .link:hover, .contentBox.hasLink > .link:focus, .contentBox.hasLink > .link:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.contentBox.hasLink > .link:hover .contentImage img, .contentBox.hasLink > .link:focus .contentImage img, .contentBox.hasLink > .link:active .contentImage img {
  scale: 1.05;
}

.contentBox.contentBox--textinbox {
  position: relative;
  color: var(--main-color-white);
  border-radius: 0;
}
.contentBox.contentBox--textinbox .contentText {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 15px;
  z-index: 1;
}
@media (min-width: 768px) {
  .contentBox.contentBox--textinbox .contentText {
    padding: 30px;
  }
}
.contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
  line-height: 1.1;
  font-weight: normal;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline {
    font-size: 3rem;
  }
}
.contentBox.contentBox--textinbox .contentText h2:last-child, .contentBox.contentBox--textinbox .contentText .h2:last-child, .contentBox.contentBox--textinbox .contentText .orderboxSummary__headline:last-child {
  margin-bottom: 0;
}
.contentBox.contentBox--textinbox .contentText a {
  color: var(--main-color-white);
}
.contentBox.contentBox--textinbox .contentText .buttonLink:after {
  background: var(--main-color-white);
}
.contentBox.contentBox--textinbox .contentImage img {
  aspect-ratio: auto;
}
.contentBox.contentBox--textinbox.hasLink > .link {
  color: var(--main-color-white);
}
.contentBox.contentBox--textinbox.hasLink > .link:hover, .contentBox.contentBox--textinbox.hasLink > .link:focus, .contentBox.contentBox--textinbox.hasLink > .link:active {
  color: var(--main-color-white);
}

a.contentBox.contentBox--textinbox:hover, a.contentBox.contentBox--textinbox:focus, a.contentBox.contentBox--textinbox:active {
  color: var(--main-color-white);
}

.contentBox {
  box-shadow: none;
  border: 1px solid var(--main-color-middle-gray);
}

a.contentBox:hover, a.contentBox:focus, a.contentBox:active {
  border-color: var(--main-color-primary);
}

.contentTabs__header {
  display: flex;
  margin: 0 auto;
  padding: 0 20px;
  gap: 30px;
  max-width: 1620px;
}
@media (max-width: 767px) {
  .contentTabs__header {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .contentTabs__header > * {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}
.contentTabs__header li {
  margin: 0;
  list-style-type: none;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
  text-decoration: none;
  border: 1px solid var(--main-color-light-gray);
  line-height: 18px;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1.6rem;
}
@media (min-width: 1250px) {
  .contentTabs__header li {
    font-size: 1.8rem;
    line-height: 20px;
    padding: 14px 40px;
    border-radius: 24px;
  }
}
.contentTabs__header li:hover, .contentTabs__header li:focus {
  color: var(--main-color-black);
  background: var(--main-color-middle-gray);
  border-color: var(--main-color-middle-gray);
}
.contentTabs__header li:active, .contentTabs__header li.is-active {
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
.contentTabs__content {
  padding-top: 30px;
}
.contentTabs__content > * {
  display: none;
}
.contentTabs__content > *.is-active {
  display: block;
}
.contentTabs:not(.initialized) .contentTabs__content > *:first-child {
  display: block;
}

.loginBoxes .contentTabs__header li {
  background: var(--main-color-middle-gray);
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--main-font-size-small);
}
@media (min-width: 374px) {
  .loginBoxes .contentTabs__header li {
    font-size: var(--main-font-size-base);
  }
}
@media (min-width: 1250px) {
  .loginBoxes .contentTabs__header li {
    font-size: 1.8rem;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.loginBoxes .contentTabs__header li:hover {
  color: var(--main-color-primary);
  background: var(--main-color-middle-gray);
}
.loginBoxes .contentTabs__header li.is-active {
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
}
.loginBoxes .contentTabs__content {
  padding: 30px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .loginBoxes .contentTabs__content {
    padding: 30px 60px;
    min-height: 340px;
  }
}
@media (min-width: 1250px) {
  .loginBoxes .contentTabs__content {
    padding: 30px 120px;
  }
}
.loginBoxes .contentTabs__content > * {
  width: 100%;
}
.loginBoxes > .row > .gp > .textcontent {
  padding: 30px;
}
@media (min-width: 1024px) {
  .loginBoxes > .row > .gp > .textcontent {
    padding: 30px 60px;
  }
}
@media (min-width: 1250px) {
  .loginBoxes > .row > .gp > .textcontent {
    padding: 30px 120px;
  }
}

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

.flashMessage {
  width: 400px;
  max-width: calc(100% - 40px);
  padding: 15px 20px 15px 55px;
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  align-items: center;
  display: flex;
  cursor: pointer;
  position: fixed;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  font-size: var(--main-font-size-small);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  left: 50%;
  bottom: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
  z-index: 109;
}
.flashMessage.is-active {
  pointer-events: auto;
}
.flashMessage__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--main-color-light-gray);
  text-align: center;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  translate: 0 -50%;
  color: var(--main-color-black);
}
.flashMessage__icon .icon {
  display: block;
  line-height: 1;
}
.flashMessage__close {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--main-font-size-base);
  width: 20px;
  height: 20px;
  transition: 0.2s ease-in;
  background: var(--main-color-white);
  border-radius: 50%;
  color: var(--main-color-black);
}
.flashMessage__close .icon {
  display: block;
  line-height: 1;
  transition: scale 0.2s ease-in;
}
.flashMessage__close:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.flashMessage__msg:not(:last-child) {
  padding-bottom: 2px;
  margin-bottom: 2px;
}
.flashMessage--warning .flashMessage__icon {
  background: var(--main-color-warning);
  background: var(--main-color-warning-contrast);
}
.flashMessage--error .flashMessage__icon {
  background: var(--main-color-danger);
  color: var(--main-color-danger-contrast);
}
.flashMessage--success .flashMessage__icon {
  background: var(--main-color-success);
  color: var(--main-color-success-contrast);
}

/*
Breadcrumb

Markup:
<nav aria-label="Breadcrumb" aria-hidden="true" class="breadcrumbWrapper">
  <ul class="breadcrumb">
    <li>
    <a href="#">Level 1</a>
    </li>
    <span class="breadcrumb__separator">/</span>
    <li>
    <a href="#">Level 2</a>
    </li>
    <span class="breadcrumb__separator">/</span>
    <li aria-current="page" class="current">
    <span>Current</span>
    </li>
  </div>
  <a class="breadcrumbBackbutton" href="#"><i class="icon icon-angle-left"></i>Back</a>
</div>

Styleguide Components.Breadcrumb
*/
.breadcrumb {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 1023px) {
  .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar-thumb {
    display: none;
  }
}
.breadcrumb li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.breadcrumb i {
  margin: 0 4px;
}
.breadcrumb a i {
  display: block;
  margin: 0;
  font-size: 1.2em;
}
.breadcrumbBackbutton {
  color: var(--main-color-black);
  display: inline-flex;
  align-items: center;
}
.breadcrumbBackbutton:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}
.breadcrumbBackbutton i {
  margin-right: 4px;
}
@media (max-width: 1023px) {
  .breadcrumbBackbutton {
    margin-top: 10px;
  }
}

.breadcrumbWrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.3rem;
  line-height: 1;
}
@media (min-width: 1024px) {
  .breadcrumbWrapper {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.breadcrumbWrapper a {
  color: var(--main-color-black);
  text-decoration: none;
}
.breadcrumbWrapper a:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}

/*
Toggle Navigation

Markup:
<div class="navToggler {{modifier_class}}">
  <div class="navToggler__bars">
    <div class="navToggler__bar"></div>
    <div class="navToggler__bar"></div>
    <div class="navToggler__bar"></div>
  </div>
  <div class="navToggler__label">
    Sortiment entdecken
  </div>
</div>

.is-active - Active Class

Styleguide Navigations.Toggle Navigation
*/
.navToggler {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.navToggler__bar {
  width: 100%;
  height: 2px;
  background-color: var(--main-color-black);
  border-radius: 1px;
  position: absolute;
  left: 8px;
  width: calc(100% - 18px);
  width: -moz-calc(100% - 18px);
  width: -webkit-calc(100% - 18px);
  width: -o-calc(100% - 18px);
  transition: 0.2s linear;
}
.navToggler__bar:first-child {
  top: 12px;
}
.navToggler__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.navToggler__bar:last-child {
  bottom: 12px;
}
.navToggler__bars {
  width: 40px;
  height: 40px;
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 1450px) {
  .navToggler__label {
    display: none;
  }
}
.navToggler.is-active .navToggler__bar:first-child {
  rotate: 45deg;
  top: 19px;
}
.navToggler.is-active .navToggler__bar:nth-child(2) {
  height: 0;
  width: 0;
  left: 50%;
}
.navToggler.is-active .navToggler__bar:last-child {
  rotate: -45deg;
  bottom: 19px;
}

.navChildrenToggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navChildrenToggle:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
}
.navChildrenToggle.is-active:after {
  content: var(--base-icon-angle-up);
}

/*
Nav

Markup:
<nav class="nav">
  <ul>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>

Styleguide Navigations.Nav
*/
.nav {
  display: flex;
  flex-wrap: nowrap;
}
.nav ul {
  margin: 0;
  padding: 0;
}
.nav li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.nav a {
  color: var(--main-color-black);
  text-decoration: none;
}
.nav a:hover, .nav a:focus, .nav a:active, .nav a.active, .nav a.active_tree {
  color: var(--main-color-primary);
  text-decoration: underline;
}
.nav li:hover > a, .nav li:focus > a, .nav li:active > a, .nav li.active > a, .nav li.active_tree > a {
  color: var(--main-color-primary);
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
@media (min-width: 768px) {
  .nav ul {
    margin-left: -15px;
    margin-right: -15px;
  }
}
.nav ul > li {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .nav ul > li {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.nav > a {
  margin-right: 20px;
}
@media (min-width: 768px) {
  .nav > a {
    margin-right: 30px;
  }
}

/*
Subnav

Markup:
<nav class="subnav">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="is-active">
      <a href="#">Level 1</a>
      <ul>
        <li class="is-active">
          <a class="is-active" href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
        <li class="active">
          <a href="#" class="is-active">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Styleguide Navigations.Subnav
*/
.subnav {
  font-size: var(--main-font-size-base);
  background: var(--main-color-light-gray);
  border-radius: 15px;
  padding: 20px;
}
@media (min-width: 1250px) {
  .subnav {
    padding: 35px;
  }
}
.subnav ul {
  margin: 0;
  padding: 10px 0 5px 0;
}
.subnav ul:last-child {
  padding-bottom: 0;
}
.subnav li {
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
}
.subnav li:last-child {
  padding-bottom: 0;
}
.subnav li:not(.is-active) > ul {
  display: none;
}
.subnav li:hover > a, .subnav li:focus > a, .subnav li:active > a {
  color: var(--main-color-primary);
}
.subnav a {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight);
  text-decoration: none;
  position: relative;
}
.subnav a:hover, .subnav a:focus, .subnav a:active, .subnav a.is-active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.subnav > ul {
  padding: 0;
}
.subnav > ul > li {
  padding-top: 0;
  padding-bottom: 20px;
}
.subnav > ul > li > a {
  position: relative;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--main-font-weight-black);
}
.subnav > ul > li > a:before {
  content: var(--base-icon-angle-right);
  font-family: "icons", Helvetica, Arial, sans-serif;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: normal;
}
.subnav > ul > li.navcode--verpackungen > a:before {
  content: var(--base-icon-box);
}
.subnav > ul > li.navcode--tischprodukte > a:before {
  content: var(--base-icon-cutlery);
}
.subnav > ul > li.navcode--hygiene-und-reinigungsartikel > a:before {
  content: var(--base-icon-spray);
}
.subnav > ul > li.navcode--branchen > a:before {
  content: var(--base-icon-houses);
}
.subnav > ul > li.navcode--bedruckbar > a:before {
  content: var(--base-icon-print);
}
.subnav > ul > li.navcode--aktionen > a:before {
  content: var(--base-icon-tag);
}
.subnav > ul > li > ul > li {
  margin-left: 40px;
  margin-bottom: 10px;
}
.subnav > ul > li > ul > li > a {
  font-weight: var(--main-font-weight-black);
}

.subnav--account > ul > li > a:before {
  display: none;
}
.subnav--account > ul > li > ul > li {
  margin-left: 20px;
}

/*
Navgroup

Markup:
<nav class="navgroup {{modifier_class}}">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li class="is-active-tree">
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li class="is-active">
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.navgroup--col-2 - 2 Columns
.navgroup--col-3 - 3 Columns
.navgroup--col-4 - 4 Columns
.navgroup--col-5 - 5 Columns
.navgroup--collapse-mobile - Collapse Mobile

Styleguide Navigations.Navgroup
*/
.navgroup li > span,
.navgroup li > a {
  color: var(--main-color-black);
  display: block;
  text-decoration: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.navgroup a:hover, .navgroup a:focus, .navgroup a:active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.navgroup li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.navgroup li:hover > a {
  color: var(--main-color-primary);
}
.navgroup ul {
  margin: 0;
  padding: 0;
}
.navgroup > ul > li > span,
.navgroup > ul > li > a {
  font-weight: var(--main-font-weight-black);
}
.navgroup--col-2 > ul, .navgroup--col-3 > ul, .navgroup--col-4 > ul, .navgroup--col-5 > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -20px;
}
.navgroup--col-2 > ul > li, .navgroup--col-3 > ul > li, .navgroup--col-4 > ul > li, .navgroup--col-5 > ul > li {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .navgroup--col-2 > ul > li {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-3 > ul > li {
    width: 33.3333333333%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-4 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-4 > ul > li {
    width: 25%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-5 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-5 > ul > li {
    width: 25%;
  }
}
@media (min-width: 1250px) {
  .navgroup--col-5 > ul > li {
    width: 20%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navgroup--collapse-tablet a {
    line-height: 30px;
  }
  .navgroup--collapse-tablet li.hasChildren > a,
  .navgroup--collapse-tablet li.hasChildren > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navgroup--collapse-tablet > ul {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
  .navgroup--collapse-tablet > ul > li {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--main-color-middle-gray);
    margin-bottom: 0 !important;
    width: 100%;
  }
  .navgroup--collapse-tablet > ul > li > ul {
    display: none;
  }
  .navgroup--collapse-tablet > ul > li.open > ul {
    display: block;
  }
}
@media (max-width: 767px) {
  .navgroup--collapse-mobile a {
    line-height: 30px;
  }
  .navgroup--collapse-mobile li.hasChildren > a,
  .navgroup--collapse-mobile li.hasChildren > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navgroup--collapse-mobile > ul {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
  .navgroup--collapse-mobile > ul > li {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--main-color-middle-gray);
    margin-bottom: 0 !important;
  }
  .navgroup--collapse-mobile > ul > li > ul {
    display: none;
  }
  .navgroup--collapse-mobile > ul > li.open > ul {
    display: block;
  }
}

.navgroup > ul > li > a,
.navgroup > ul > li > span {
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .navgroup > ul > li > a,
  .navgroup > ul > li > span {
    margin-bottom: 10px;
  }
}

.megaMenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 101;
  background: var(--main-color-white);
  width: 100%;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.megaMenu li {
  padding-top: 5px;
  padding-bottom: 5px;
}
.megaMenu a:not(.button) {
  font-weight: var(--main-font-weight);
  display: block;
}
.megaMenu__navigation > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.megaMenu__navigation > ul > li {
  width: 25%;
  margin-bottom: 30px;
}
@media (min-width: 1540px) {
  .megaMenu__navigation > ul > li {
    margin-bottom: 50px;
  }
}
.megaMenu__navigation > ul > li > a:not(.button) {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.megaMenu .container {
  font-size: var(--main-font-size-base);
  display: flex;
  padding-top: 30px;
}
@media (max-width: 1620px) {
  .megaMenu .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1540px) {
  .megaMenu .container {
    padding-top: 50px;
  }
}
.megaMenu .container .megaMenu__navigation {
  flex-grow: 1;
}
.megaMenu .container .megaMenu__content {
  flex-shrink: 0;
  padding-left: 40px;
  width: 440px;
  display: none;
  margin-bottom: 30px;
}
@media (min-width: 1540px) {
  .megaMenu .container .megaMenu__content {
    margin-bottom: 50px;
  }
}
@media (min-width: 1250px) {
  .megaMenu .container .megaMenu__content {
    display: block;
  }
}

.categoryMenuInfo__img {
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 30px;
}
.categoryMenuInfo__img img {
  display: block;
  aspect-ratio: 405/269;
}

/*
Mainnav

Markup:
<nav class="mainnav">
  <ul>
    <li class="is-active">
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>

Styleguide Navigations.Mainnav
*/
.mainnav {
  display: flex;
  align-items: center;
}
.mainnav ul {
  margin: 0;
  padding: 0;
}
.mainnav li {
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
}
.mainnav a {
  color: var(--main-color-text-base);
  text-decoration: none;
}
.mainnav li:hover > a, .mainnav li:focus > a, .mainnav li:active > a {
  color: var(--main-color-primary);
}
.mainnav li.is-active > a, .mainnav li.is-active-tree > a {
  color: var(--main-color-black);
}
.mainnav li.is-active > a:after, .mainnav li.is-active-tree > a:after {
  height: 2px;
  background: var(--main-color-black);
}
.mainnav li.is-active:hover > a, .mainnav li.is-active:focus > a, .mainnav li.is-active:active > a, .mainnav li.is-active-tree:hover > a, .mainnav li.is-active-tree:focus > a, .mainnav li.is-active-tree:active > a {
  color: var(--main-color-primary);
}
.mainnav li.is-active:hover > a:after, .mainnav li.is-active:focus > a:after, .mainnav li.is-active:active > a:after, .mainnav li.is-active-tree:hover > a:after, .mainnav li.is-active-tree:focus > a:after, .mainnav li.is-active-tree:active > a:after {
  background: var(--main-color-primary);
}
.mainnav > ul {
  display: flex;
  font-size: 1.4rem;
}
@media (min-width: 1250px) {
  .mainnav > ul {
    font-size: 1.6rem;
  }
}
.mainnav > ul > li {
  padding: 0 60px;
  z-index: 1;
  display: flex;
}
@media (min-width: 1024px) {
  .mainnav > ul > li {
    padding: 0 25px;
  }
}
@media (min-width: 1250px) {
  .mainnav > ul > li {
    padding: 0 40px;
  }
}
@media (min-width: 1540px) {
  .mainnav > ul > li {
    padding: 0 60px;
  }
}
.mainnav > ul > li > a {
  font-weight: var(--main-font-weight-black);
  display: flex;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.mainnav > ul > li > a:before, .mainnav > ul > li > a:after {
  content: "";
  aspect-ratio: 1;
  height: 100%;
  background-image: url("/userdata/images/basics/navAddon.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  opacity: 0;
  display: block;
}
.mainnav > ul > li > a:before {
  rotate: 180deg;
  right: 100%;
}
.mainnav > ul > li > a:after {
  left: 100%;
}
.mainnav > ul > li > a:hover, .mainnav > ul > li > a:focus, .mainnav > ul > li > a:active {
  text-decoration: none;
}
.mainnav > ul > li > a.active_tree {
  background: var(--main-color-white);
}
.mainnav > ul > li > a.active_tree:before, .mainnav > ul > li > a.active_tree:after {
  opacity: 1;
}
@media (min-width: 1024px) {
  .mainnav > ul > li > a {
    padding: 10px 0;
  }
}
@media (min-width: 1250px) {
  .mainnav > ul > li > a {
    padding: 13.5px 0;
  }
}
.mainnav > ul > li:first-child > a:before {
  background-image: none;
  background: var(--main-color-white);
  width: 100vw;
}
.mainnav > ul.nav--showMore {
  margin-left: 0;
}
@media (min-width: 1540px) {
  .mainnav > ul.nav--showMore {
    margin-left: 0;
  }
}
.mainnav > ul > li.hoverintent .megaMenu,
.mainnav > ul > li.hoverintent > ul {
  display: block;
}
.mainnav > ul > li.active_tree:before, .mainnav > ul > li.active_tree:after {
  display: block;
}
.mainnav > ul > li.active_tree > a:before {
  display: block;
}

/*
Max Height Content

Markup:
<div class="maxHeightContent js-maxHeightContent" data-button-foldout="read more" data-button-foldin="fold in">
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
  </div>
</div>

Styleguide Components.Max Height Content
*/
.maxHeightContent {
  max-height: 40vh;
  max-height: 40svh;
  overflow: hidden;
  position: relative;
}
.maxHeightContent__buttonWrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background: linear-gradient(0deg, rgb(255, 255, 255) 20px, rgba(255, 255, 255, 0.5) 60px, rgba(255, 255, 255, 0) 100%);
  padding-top: 40px;
}
.maxHeightContent__button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  line-height: 1;
}
.maxHeightContent__button:before {
  content: "+";
}
.maxHeightContent.is-open {
  max-height: none;
  padding-bottom: 60px;
}
.maxHeightContent.is-open .maxHeightContent__button:before {
  content: "-";
}
.maxHeightContent:not(.is-active) .maxHeightContent__buttonWrapper {
  display: none;
}

.dynamicPlaceholders {
  min-height: 100%;
  flex-grow: 1;
  contain: paint;
}
.dynamicPlaceholders__container {
  container-type: inline-size;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
  opacity: 1;
}
.dynamicPlaceholders__container.is-hidden {
  z-index: -1;
  opacity: 0;
}
.dynamicPlaceholders__container > .inner {
  display: flex;
  position: relative;
  align-items: center;
  gap: 7px;
  height: 100%;
}
.dynamicPlaceholders__container > .inner > div:first-child {
  height: 100%;
  align-content: center;
}
.dynamicPlaceholders__element {
  position: absolute;
  transform: translateY(50%);
  bottom: -25%;
  height: 100%;
  align-content: center;
  transition: bottom 0.4s ease-in-out;
  z-index: -1;
  opacity: 0;
}
.dynamicPlaceholders__element.is-active {
  bottom: 50%;
  z-index: inherit;
  opacity: 1;
}
.dynamicPlaceholders__element.is-fadingOut {
  bottom: 125%;
  z-index: inherit;
  opacity: 1;
}

/*
interactiveCursor

Markup:
<div class="interactiveCursor">
        <div class="interactiveCursor__headline">
            <div class="h3">Ihr individuelles Bestellportal</div>
        </div>
        <div class="interactiveCursor__wrapper">
        <div class="interactiveCursor__descriptions">
                <div class="interactiveCursor__description">Preisdarstellung</div>
                <div class="interactiveCursor__description">Spezifische Produkte</div>
                <div class="interactiveCursor__description">Nutzerrechte verwalten</div>
                <div class="interactiveCursor__description">Verbrauchsstatistiken</div>
                <div class="interactiveCursor__description">Bestellhistorie</div>
                <div class="interactiveCursor__description">Datenblätter</div>
        </div>
        <div class="interactiveCursor__textWrapper">
                <div class="interactiveCursor__text">
                    <div>
                        <div class="interactiveCursor__textHeadline h3">Preisdarstellung</div>
                        <div class="interactiveCursor__textSummary">
                            Spezifische Produkte wahlweise mit oder ohne Preisdarstellung
                        </div>
                    </div>
                </div>
                <div class="interactiveCursor__text">
                    <div>
                        <div class="interactiveCursor__textHeadline h3">Spezifische Produkte</div>
                        <div class="interactiveCursor__textSummary">
                            XXX
                        </div>
                    </div>
                </div>
                <div class="interactiveCursor__text">
                    <div>
                        <div class="interactiveCursor__textHeadline h3">Nutzerrechte verwalten</div>
                        <div class="interactiveCursor__textSummary">
                            XXX
                        </div>
                    </div>
                </div>
                <div class="interactiveCursor__text">
                    <div>
                        <div class="interactiveCursor__textHeadline h3">Verbrauchsstatistiken</div>
                        <div class="interactiveCursor__textSummary">
                            XXX
                        </div>
                    </div>
                </div>
                <div class="interactiveCursor__text">
                    <div>
                        <div class="interactiveCursor__textHeadline h3">Bestellhistorie</div>
                        <div class="interactiveCursor__textSummary">

                        </div>
                    </div>
                </div>
                <div class="interactiveCursor__text">
                    <div>
                        <div class="interactiveCursor__textHeadline h3">Datenblätter</div>
                        <div class="interactiveCursor__textSummary">

                        </div>
                    </div>
                </div>
        </div>
        </div>
</div>

Styleguide Components.interactiveCursor
*/
.interactiveCursor {
  position: relative;
  padding-top: 80px;
}
@media (min-width: 768px) {
  .interactiveCursor {
    padding-top: 120px;
  }
}
.interactiveCursor__headline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color-primary);
  transition: 0.2s ease-in-out;
  top: 0;
  padding-top: 80px;
}
@media (min-width: 768px) {
  .interactiveCursor__headline {
    padding-top: 120px;
  }
}
.interactiveCursor__headline > div {
  max-width: 50%;
}
@media (min-width: 768px) {
  .interactiveCursor__headline > div {
    max-width: 270px;
  }
}
.interactiveCursor__headline h3, .interactiveCursor__headline .h3, .interactiveCursor__headline .historyItem__heading {
  margin: 0;
}
@media (max-width: 481px) {
  .interactiveCursor__headline h3, .interactiveCursor__headline .h3, .interactiveCursor__headline .historyItem__heading {
    font-size: 1.6rem;
  }
}
.interactiveCursor__wrapper {
  position: relative;
  width: 640px;
  aspect-ratio: 1;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid var(--main-color-primary);
  border-radius: 50%;
}
@media (max-width: 1023px) {
  .interactiveCursor__wrapper {
    font-size: 12px;
    border-width: 2px;
  }
}
.interactiveCursor__descPoint {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 3px solid var(--main-color-primary);
  border-radius: 50%;
  display: inline-block;
  margin-right: 20px;
  background-color: var(--main-color-white);
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}
@media (max-width: 1249px) {
  .interactiveCursor__descPoint {
    width: 22px;
    height: 22px;
    margin-right: 15px;
    border-width: 2px;
  }
}
@media (max-width: 767px) {
  .interactiveCursor__descPoint {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
}
.interactiveCursor__description {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 22px;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  cursor: pointer;
  font-weight: var(--main-font-weight-bold);
}
.interactiveCursor__description:hover {
  color: var(--main-color-primary);
}
.interactiveCursor__description:hover .interactiveCursor__descPoint {
  background-color: var(--main-color-primary);
}
.interactiveCursor__description.active .interactiveCursor__descPoint {
  background-color: var(--main-color-primary);
}
@media (max-width: 1249px) {
  .interactiveCursor__description {
    font-size: 16px;
  }
}
@media (max-width: 1249px) {
  .interactiveCursor__description {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .interactiveCursor__description {
    font-size: 12px;
  }
}
@media (max-width: 481px) {
  .interactiveCursor__description {
    font-size: 7px;
    align-items: center;
  }
}
.interactiveCursor__descriptions > * {
  position: absolute;
  display: flex;
  width: auto;
  z-index: 1;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .interactiveCursor__descriptions > *.active {
    font-size: 28px;
  }
  .interactiveCursor__descriptions > *.active .interactiveCursor__descPoint {
    width: 52px;
    height: 52px;
    background-color: var(--main-color-primary);
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *.active {
    font-size: 21px;
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *.active {
    font-size: 18px;
  }
  .interactiveCursor__descriptions > *.active .interactiveCursor__descPoint {
    width: 30px;
    height: 30px;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  .interactiveCursor__descriptions > *.active {
    font-size: 12px;
  }
  .interactiveCursor__descriptions > *.active .interactiveCursor__descPoint {
    width: 20px;
    height: 20px;
  }
}
.interactiveCursor__descriptions > *:first-child, .interactiveCursor__descriptions > *:nth-child(2), .interactiveCursor__descriptions > *:nth-child(3) {
  left: 100%;
  margin-left: -26px;
}
@media (max-width: 1249px) {
  .interactiveCursor__descriptions > *:first-child, .interactiveCursor__descriptions > *:nth-child(2), .interactiveCursor__descriptions > *:nth-child(3) {
    margin-left: -8px;
  }
}
@media (max-width: 767px) {
  .interactiveCursor__descriptions > *:first-child, .interactiveCursor__descriptions > *:nth-child(2), .interactiveCursor__descriptions > *:nth-child(3) {
    margin-left: -7px;
  }
}
.interactiveCursor__descriptions > *:first-child {
  top: 12%;
  left: 88%;
}
@media (min-width: 768px) {
  .interactiveCursor__descriptions > *:first-child.active {
    margin-top: -10px;
    margin-left: -26px;
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *:first-child.active {
    margin-top: -4px;
    margin-left: -12px;
  }
}
.interactiveCursor__descriptions > *:nth-child(2) {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
@media (min-width: 768px) {
  .interactiveCursor__descriptions > *:nth-child(2).active {
    margin-left: -23px;
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *:nth-child(2).active {
    margin-left: -14px;
  }
}
.interactiveCursor__descriptions > *:nth-child(3) {
  bottom: 12%;
  left: 88%;
}
@media (min-width: 768px) {
  .interactiveCursor__descriptions > *:nth-child(3).active {
    margin-bottom: -10px;
    margin-left: -26px;
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *:nth-child(3).active {
    margin-bottom: -4px;
    margin-left: -12px;
  }
}
.interactiveCursor__descriptions > *:nth-child(4), .interactiveCursor__descriptions > *:nth-child(5), .interactiveCursor__descriptions > *:last-child {
  right: 100%;
  margin-right: -26px;
  justify-content: flex-end;
  text-align: right;
}
.interactiveCursor__descriptions > *:nth-child(4) .interactiveCursor__descPoint, .interactiveCursor__descriptions > *:nth-child(5) .interactiveCursor__descPoint, .interactiveCursor__descriptions > *:last-child .interactiveCursor__descPoint {
  order: 1;
  margin-right: 0;
  margin-left: 20px;
}
@media (max-width: 1249px) {
  .interactiveCursor__descriptions > *:nth-child(4), .interactiveCursor__descriptions > *:nth-child(5), .interactiveCursor__descriptions > *:last-child {
    margin-right: -8px;
  }
  .interactiveCursor__descriptions > *:nth-child(4) .interactiveCursor__descPoint, .interactiveCursor__descriptions > *:nth-child(5) .interactiveCursor__descPoint, .interactiveCursor__descriptions > *:last-child .interactiveCursor__descPoint {
    margin-left: 15px;
  }
}
@media (max-width: 767px) {
  .interactiveCursor__descriptions > *:nth-child(4), .interactiveCursor__descriptions > *:nth-child(5), .interactiveCursor__descriptions > *:last-child {
    margin-right: -7px;
  }
  .interactiveCursor__descriptions > *:nth-child(4) .interactiveCursor__descPoint, .interactiveCursor__descriptions > *:nth-child(5) .interactiveCursor__descPoint, .interactiveCursor__descriptions > *:last-child .interactiveCursor__descPoint {
    margin-left: 5px;
  }
}
.interactiveCursor__descriptions > *:nth-child(4) {
  bottom: 12%;
  right: 88%;
}
@media (min-width: 768px) {
  .interactiveCursor__descriptions > *:nth-child(4).active {
    margin-bottom: -10px;
    margin-right: -26px;
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *:nth-child(4).active {
    margin-bottom: -4px;
    margin-right: -12px;
  }
}
.interactiveCursor__descriptions > *:nth-child(5) {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
@media (min-width: 768px) {
  .interactiveCursor__descriptions > *:nth-child(5).active {
    margin-right: -23px;
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *:nth-child(5).active {
    margin-right: -14px;
  }
}
.interactiveCursor__descriptions > *:last-child {
  top: 12%;
  right: 88%;
}
@media (min-width: 768px) {
  .interactiveCursor__descriptions > *:last-child.active {
    margin-top: -10px;
    margin-right: -26px;
  }
}
@media (min-width: 768px) and (max-width: 1249px) {
  .interactiveCursor__descriptions > *:last-child.active {
    margin-top: -4px;
    margin-right: -12px;
  }
}
@media (max-width: 481px) {
  .interactiveCursor__descriptions > *:first-child, .interactiveCursor__descriptions > *:nth-child(3), .interactiveCursor__descriptions > *:nth-child(4), .interactiveCursor__descriptions > *:last-child {
    width: 120px;
    white-space: normal;
  }
}
@media (max-width: 481px) {
  .interactiveCursor__descriptions > *:nth-child(2), .interactiveCursor__descriptions > *:nth-child(5) {
    width: 80px;
    white-space: normal;
  }
}
@media (min-width: 768px) {
  .interactiveCursor__text {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    opacity: 0;
    pointer-events: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: stretch;
    overflow: hidden;
    transition: 0.5s ease-in-out;
  }
  .interactiveCursor__text > div {
    padding: 15%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .interactiveCursor__text.active {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 767px) {
  .interactiveCursor__text {
    padding: 20px;
    padding-bottom: 0;
    display: none;
    text-align: center;
  }
  .interactiveCursor__text.active {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    display: block;
  }
  .interactiveCursor__text > div {
    background-color: transparent !important;
  }
}
@media (max-width: 481px) {
  .interactiveCursor__textHeadline {
    font-size: 1.6rem;
  }
}
.interactiveCursor .activePointWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  animation: interactiveCursorRotating 18s linear infinite;
  animation-play-state: paused;
}
.interactiveCursor .activePoint {
  width: 28px;
  height: 28px;
  border: 3px solid var(--main-color-black);
  border-radius: 50%;
  left: 50%;
  top: 0;
  position: absolute;
  margin-left: -14px;
  margin-top: -14px;
  background-color: var(--main-color-black);
}
@media (max-width: 1249px) {
  .interactiveCursor .activePoint {
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    border-width: 2px;
  }
}
@media (max-width: 767px) {
  .interactiveCursor .activePoint {
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
  }
}
.interactiveCursor.active .interactiveCursor__headline {
  top: 0;
  height: 80px;
  overflow: hidden;
  color: var(--main-color-black);
  padding-top: 0;
}
@media (min-width: 768px) {
  .interactiveCursor.active .interactiveCursor__headline {
    height: 120px;
  }
}
.interactiveCursor.isrunning .activePointWrapper {
  animation-play-state: running;
}

@keyframes interactiveCursorRotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.imgTextElement {
  display: grid;
  grid-template-areas: "imageWrapper" "text";
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .imgTextElement {
    grid-template-areas: "imageWrapper text";
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.imgTextElement--default {
  max-width: 1146px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.imgTextElement--wide {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .imgTextElement--wide {
    grid-template-areas: "imageWrapper text";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1250px) {
  .imgTextElement--wide {
    grid-template-areas: "imageWrapper imageWrapper text";
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1484px) {
  .imgTextElement--wide {
    padding-right: calc((100vw - 1444px) / 2);
  }
}
@media (min-width: 1780px) {
  .imgTextElement--wide {
    padding-left: calc((100vw - 1740px) / 2);
  }
}
@media (min-width: 768px) {
  .imgTextElement--imgRight {
    grid-template-areas: "text imageWrapper";
  }
}
@media (min-width: 768px) {
  .imgTextElement--imgRight.imgTextElement--wide {
    grid-template-areas: "text imageWrapper imageWrapper";
  }
}
@media (min-width: 1484px) {
  .imgTextElement--imgRight.imgTextElement--wide {
    padding-left: calc((100vw - 1444px) / 2);
    padding-right: 20px;
  }
}
@media (min-width: 1780px) {
  .imgTextElement--imgRight.imgTextElement--wide {
    padding-right: calc((100vw - 1740px) / 2);
  }
}
.imgTextElement__text {
  grid-area: text;
}
.imgTextElement__imgWrapper {
  grid-area: imageWrapper;
  gap: 20px;
  max-height: 850px;
}
@media (min-width: 1024px) {
  .imgTextElement__imgWrapper {
    gap: 34px;
  }
}
.imgTextElement__imgWrapper picture {
  border-radius: 10px;
  overflow: hidden;
}
.imgTextElement__imgWrapper picture img {
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  height: 100% !important;
}
.imgTextElement__imgWrapper video {
  border-radius: 10px;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
}
.imgTextElement__imgWrapper:has(> :last-child:nth-child(2)) {
  display: grid;
  grid-template-areas: "image1 ." "image1 image2" ". image2";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.imgTextElement__imgWrapper:has(> :last-child:nth-child(2)) > *:nth-child(1) {
  grid-area: image1;
}
.imgTextElement__imgWrapper:has(> :last-child:nth-child(2)) > *:nth-child(2) {
  grid-area: image2;
}
.imgTextElement__imgWrapper:has(> :last-child:nth-child(3)) {
  display: grid;
  grid-template-areas: "image1 image3" "image2 image3" "image2 image3";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.imgTextElement__imgWrapper:has(> :last-child:nth-child(3)) > *:nth-child(1) {
  grid-area: image1;
}
.imgTextElement__imgWrapper:has(> :last-child:nth-child(3)) > *:nth-child(2) {
  grid-area: image2;
}
.imgTextElement__imgWrapper:has(> :last-child:nth-child(3)) > *:nth-child(3) {
  grid-area: image3;
}

/*
Slider Icons

Markup:
<div class="sliderIcons">
            <div class="sliderIcon">
                <div class="sliderIcon__img">
                    <span class="lottieContainer js-lottie" data-path="/userdata/files/animations/box-animation.json"></span>
                </div>
                <div class="sliderIcon__headline">
                    Mehr als 3.000 Gastro-Produkte
                </div>
                <div class="sliderIcon__link">
                    <a class="sliderIcon__link button button--bordered" href="/de/neu/">
                        Neueste Produkte
                    </a>
                </div>
            </div>
            <div class="sliderIcon">
                <div class="sliderIcon__img">
                    <span class="lottieContainer js-lottie" data-path="/userdata/files/animations/box-animation.json"></span>
                </div>
                <div class="sliderIcon__headline">
                    Mehr als 3.000 Gastro-Produkte
                </div>
                <div class="sliderIcon__link">
                    <a class="sliderIcon__link button button--bordered" href="/de/neu/">
                        Neueste Produkte
                    </a>
                </div>
            </div>
            <div class="sliderIcon">
                <div class="sliderIcon__img">
                    <span class="lottieContainer js-lottie" data-path="/userdata/files/animations/box-animation.json"></span>
                </div>
                <div class="sliderIcon__headline">
                    Mehr als 3.000 Gastro-Produkte
                </div>
                <div class="sliderIcon__link">
                    <a class="sliderIcon__link button button--bordered" href="/de/neu/">
                        Neueste Produkte
                    </a>
                </div>
            </div>
            <div class="sliderIcon">
                <div class="sliderIcon__img">
                    <span class="lottieContainer js-lottie" data-path="/userdata/files/animations/box-animation.json"></span>
                </div>
                <div class="sliderIcon__headline">
                    Mehr als 3.000 Gastro-Produkte
                </div>
                <div class="sliderIcon__link">
                    <a class="sliderIcon__link button button--bordered" href="/de/neu/">
                        Neueste Produkte
                    </a>
                </div>
            </div>
            <div class="sliderIcon">
                <div class="sliderIcon__img">
                    <span class="lottieContainer js-lottie" data-path="/userdata/files/animations/box-animation.json"></span>
                </div>
                <div class="sliderIcon__headline">
                    Mehr als 3.000 Gastro-Produkte
                </div>
                <div class="sliderIcon__link">
                    <a class="sliderIcon__link button button--bordered" href="/de/neu/">
                        Neueste Produkte
                    </a>
                </div>
            </div>
    </div>

Styleguide Components.Slider Icons
*/
.sliderIcon {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sliderIcon__img .lottieContainer {
  aspect-ratio: 1;
  margin-left: auto;
  margin-right: auto;
  width: 80px;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .sliderIcon__img .lottieContainer {
    width: 120px;
  }
}
.sliderIcon__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: 1.6rem;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1250px) {
  .sliderIcon__headline {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .sliderIcons {
    width: 100%;
    display: flex;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    padding-left: 13px;
    padding-right: 0;
  }
  .sliderIcons > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    padding-left: 7px;
    padding-right: 7px;
    width: 58%;
  }
}
@media (min-width: 768px) {
  .sliderIcons {
    max-width: 1620px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    display: grid;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .sliderIcons {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  .sliderIcons {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (min-width: 768px) and (min-width: 1250px) {
  .sliderIcons {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
@media (min-width: 768px) and (min-width: 1540px) {
  .sliderIcons {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

.businessTiles:not(.businessTiles.swiper) .businessTiles__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px;
}
@media (min-width: 768px) {
  .businessTiles:not(.businessTiles.swiper) .businessTiles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .businessTiles:not(.businessTiles.swiper) .businessTiles__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 64px;
  }
}
.businessTiles.swiper:not(.businessTiles.swiper-initialized) .businessTiles__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px;
}
.businessTiles.swiper:not(.businessTiles.swiper-initialized) .businessTiles__list .businessTiles__tile:nth-child(n+9) {
  display: none;
}
@media (min-width: 768px) {
  .businessTiles.swiper:not(.businessTiles.swiper-initialized) .businessTiles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .businessTiles.swiper:not(.businessTiles.swiper-initialized) .businessTiles__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 64px;
  }
}
.businessTiles.swiper:not(.businessTiles.swiper-initialized):not(.swiperDualRow) .businessTiles__list .businessTiles__tile:nth-child(n+5) {
  display: none;
}
.businessTiles.swiper:not(.businessTiles.swiper-initialized).swiperDualRow .businessTiles__list .businessTiles__tile:nth-child(n+9) {
  display: none;
}
.businessTiles a {
  text-decoration: none;
}
.businessTiles a:hover {
  color: var(--main-color-black);
}
.businessTiles__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.businessTiles__tile.isLink:hover .businessTiles__image picture img {
  border-color: var(--main-color-secondary);
  scale: 1;
}
.businessTiles__tile.isLink:hover .businessTiles__tag span:after {
  opacity: 1;
}
@media (min-width: 1024px) {
  .businessTiles__tile {
    gap: 35px;
    padding-left: 23.5px;
    padding-right: 23.5px;
  }
}
.businessTiles__image picture img {
  aspect-ratio: 1;
  border: 3px solid transparent;
  border-radius: 50%;
  object-fit: cover;
  transition: 0.2s ease-in-out;
}
@media (min-width: 1250px) {
  .businessTiles__image picture img {
    scale: 0.9;
  }
}
.businessTiles__tag {
  text-align: center;
  text-decoration: none;
  position: relative;
}
.businessTiles__tag span {
  position: relative;
  padding-inline: 42px;
  display: inline-flex;
}
.businessTiles__tag span:after {
  content: var(--base-icon-arrow-right);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: 0.2s ease-in-out;
}
@media (min-width: 1250px) {
  .businessTiles__tag {
    font-size: 20px;
  }
}
.businessTiles__navigation {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 20px;
}
@media (min-width: 1024px) {
  .businessTiles__navigation {
    padding-top: 45px;
  }
}
.businessTiles__navigation .swiper-button-prev, .businessTiles__navigation .swiper-button-next {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
}
.businessTiles.showBorder .businessTiles__image picture img {
  border-color: var(--main-color-secondary);
  transform: rotate(0deg);
}
.businessTiles.showBorder .businessTiles__tile.isLink:hover .businessTiles__image picture img {
  scale: 1;
  transform: rotate(10deg);
}

.countUp--number {
  color: var(--main-color-primary);
  margin-bottom: 25px;
  font-size: 3rem;
  font-weight: var(--main-font-weight-black);
}
@media (min-width: 768px) {
  .countUp--number {
    font-size: 4rem;
  }
}
@media (min-width: 1250px) {
  .countUp--number {
    font-size: 5.5rem;
  }
}

/*
Banner

Markup:
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>

.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right

//Styleguide Siteparts.Banner
*/
/*<svg xmlns="http://www.w3.org/2000/svg" width="395" height="36" viewBox="0 0 395 36" fill="none">
  <path d="M21.608 12.7618C29.1756 4.62335 39.7878 0 50.901 0H344.099C355.212 0 365.824 4.62336 373.392 12.7619L395 36H0L21.608 12.7618Z" fill="#F8F6F2"/>
</svg>*/
.banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
  margin-top: 0;
  line-height: 1;
  text-transform: uppercase;
  font-weight: var(--main-font-weight-black);
  margin-bottom: 20px;
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
    font-size: 3rem;
  }
}
@media (min-width: 1024px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
    font-size: 3.6rem;
  }
}
@media (min-width: 1250px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
    font-size: 4.4rem;
  }
}
@media (min-width: 1540px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
    font-size: 5rem;
  }
}

.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText__text {
  margin-top: 0;
  line-height: 1.3;
  margin-bottom: 20px;
  font-weight: var(--main-font-weight-semibold);
  font-size: 1.6rem;
}
@media (min-width: 1540px) {
  .banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText__text {
    margin-bottom: 30px;
  }
}
@media (min-width: 768px) {
  .banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText__text {
    font-size: 1.8rem;
  }
}
@media (min-width: 1250px) {
  .banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText__text {
    font-size: 2rem;
  }
}

.banner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767.98px) {
  .banner {
    flex-direction: column;
  }
}
.banner .contentImage {
  display: flex;
  width: 100%;
  flex-grow: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.banner .contentImage:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .banner .contentImage:after {
    display: none;
  }
}
.banner .contentImage .textcontent {
  width: 100%;
}
.banner .contentImage video,
.banner .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 100%;
  width: 100%;
  height: 100% !important;
  max-width: none;
  max-height: none;
  flex: 1;
}
@media (max-width: 767px) {
  .banner .contentImage {
    max-height: 460px;
  }
}
@media (max-width: 1023.98px) {
  .banner .contentImage {
    aspect-ratio: 2;
  }
}
.banner .contentText {
  color: var(--main-color-black);
}
.banner .contentText h3:not(.highlighted), .banner .contentText .h3:not(.highlighted), .banner .contentText .historyItem__heading:not(.highlighted) {
  margin-bottom: 10px;
}
.banner .contentText h1:last-child, .banner .contentText .h1:last-child,
.banner .contentText h2:last-child, .banner .contentText .h2:last-child, .banner .contentText .orderboxSummary__headline:last-child,
.banner .contentText h3:last-child, .banner .contentText .h3:last-child, .banner .contentText .historyItem__heading:last-child {
  margin-bottom: 0;
}
.banner .contentText .buttonLink {
  color: var(--main-color-black);
}
.banner .contentText .buttonLink:after {
  background: var(--main-color-black);
}
.banner .contentText .textcontent {
  width: 100%;
}
@media (max-width: 767.98px) {
  .banner .contentText .textcontent .color--white {
    color: var(--main-color-black);
  }
}
@media (min-width: 768px) {
  .banner .contentText .textcontent {
    width: 50%;
  }
}
@media (min-width: 1250px) {
  .banner .contentText .textcontent {
    width: 40%;
  }
}
.banner .contentText .infieldInputGroup {
  color: var(--main-color-black);
}
.banner .contentText.color--white {
  color: var(--main-color-white);
}
.banner .contentText.color--white .buttonLink {
  color: var(--main-color-white);
}
.banner .contentText.color--white .buttonLink:after {
  background: var(--main-color-white);
}
.banner .contentText {
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 40px;
}
@media (min-width: 768px) {
  .banner .contentText {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
}
@media (min-width: 1250px) {
  .banner .contentText {
    padding: 90px;
  }
}
.banner .contentText.contentText--left {
  align-items: flex-start;
}
.banner .contentText.contentText--right {
  align-items: flex-end;
}
.banner .contentText.contentText--vertTop {
  justify-content: flex-start;
}
.banner .contentText.contentText--vertBottom {
  justify-content: flex-end;
}
.banner > .link:hover .contentText__button, .banner > .link:focus .contentText__button {
  background: var(--main-color-white);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
.banner > .link:hover .contentText__button .icon, .banner > .link:focus .contentText__button .icon {
  color: var(--main-color-white);
  background: var(--main-color-primary);
}
.banner.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner {
  color: var(--main-color-black);
  text-decoration: none !important;
}
a.banner:hover .contentText__button, a.banner:focus .contentText__button {
  background: var(--main-color-white);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
a.banner:hover .contentText__button .icon, a.banner:focus .contentText__button .icon {
  color: var(--main-color-white);
  background: var(--main-color-primary);
}
.banner--gradientBlack .banner .contentImage:after {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 35.1%, rgba(119, 119, 119, 0.58) 55.29%, rgba(0, 0, 0, 0.64) 92.79%);
}
@media (min-width: 768px) {
  .banner--gradientBlack .banner .contentText__text {
    color: var(--main-color-white);
  }
}

.banner--headlineBig .banner .contentText__headline {
  font-size: 2.6rem;
}
@media (min-width: 768px) {
  .banner--headlineBig .banner .contentText__headline {
    font-size: 3.4rem;
  }
}
@media (min-width: 1024px) {
  .banner--headlineBig .banner .contentText__headline {
    font-size: 4rem;
  }
}
@media (min-width: 1250px) {
  .banner--headlineBig .banner .contentText__headline {
    font-size: 6rem;
  }
}
@media (min-width: 1540px) {
  .banner--headlineBig .banner .contentText__headline {
    font-size: 8rem;
  }
}
.banner--headlineBig .banner .contentText h1:not(.highlighted), .banner--headlineBig .banner .contentText .h1:not(.highlighted) {
  font-size: 2.6rem;
}
@media (min-width: 768px) {
  .banner--headlineBig .banner .contentText h1:not(.highlighted), .banner--headlineBig .banner .contentText .h1:not(.highlighted) {
    font-size: 3.4rem;
  }
}
@media (min-width: 1024px) {
  .banner--headlineBig .banner .contentText h1:not(.highlighted), .banner--headlineBig .banner .contentText .h1:not(.highlighted) {
    font-size: 4rem;
  }
}
@media (min-width: 1250px) {
  .banner--headlineBig .banner .contentText h1:not(.highlighted), .banner--headlineBig .banner .contentText .h1:not(.highlighted) {
    font-size: 6rem;
  }
}
@media (min-width: 1540px) {
  .banner--headlineBig .banner .contentText h1:not(.highlighted), .banner--headlineBig .banner .contentText .h1:not(.highlighted) {
    font-size: 8rem;
  }
}

/*
Banner with Textbox

Markup:
<a class="banner2" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>

.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right

//Styleguide Siteparts.Banner with Textbox
*/
.banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  .banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
    font-size: 3rem;
  }
}
@media (min-width: 1024px) {
  .banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
    font-size: 3.6rem;
  }
}
@media (min-width: 1250px) {
  .banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
    font-size: 4.4rem;
  }
}
@media (min-width: 1540px) {
  .banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText__headline {
    font-size: 5rem;
  }
}

.banner2 .contentText h2:not(.highlighted), .banner2 .contentText .h2:not(.highlighted), .banner2 .contentText .orderboxSummary__headline:not(.highlighted), .banner2 .contentText__text {
  margin-top: 0;
  margin-bottom: 30px;
}

.banner2 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.banner2 .contentImage {
  display: flex;
  width: 100%;
}
.banner2 .contentImage .textcontent {
  width: 100%;
}
.banner2 .contentImage video,
.banner2 .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 100%;
}
@media (max-width: 1023px) {
  .banner2 .contentImage {
    aspect-ratio: 16/8;
  }
  .banner2 .contentImage video,
  .banner2 .contentImage img {
    height: 100% !important;
  }
}
@media (max-width: 767px) {
  .banner2 .contentImage {
    aspect-ratio: 4/3;
    max-height: 380px;
  }
}
.banner2 .contentText h2:not(.highlighted), .banner2 .contentText .h2:not(.highlighted), .banner2 .contentText .orderboxSummary__headline:not(.highlighted) {
  font-weight: normal;
  margin-bottom: clamp(10px, 0.5em, 10px);
}
.banner2 .contentText h3:not(.highlighted), .banner2 .contentText .h3:not(.highlighted), .banner2 .contentText .historyItem__heading:not(.highlighted) {
  margin-bottom: 10px;
}
.banner2 .contentText h1:last-child, .banner2 .contentText .h1:last-child,
.banner2 .contentText h2:last-child, .banner2 .contentText .h2:last-child, .banner2 .contentText .orderboxSummary__headline:last-child,
.banner2 .contentText h3:last-child, .banner2 .contentText .h3:last-child, .banner2 .contentText .historyItem__heading:last-child {
  margin-bottom: 0;
}
.banner2 .contentText .textcontent {
  width: 100%;
  background: var(--main-color-white);
  padding: 20px 0;
  color: var(--main-color-black);
}
@media (min-width: 768px) {
  .banner2 .contentText .textcontent {
    width: 50%;
    padding: 30px;
  }
}
@media (min-width: 1024px) {
  .banner2 .contentText .textcontent {
    max-width: 500px;
    padding: 40px;
  }
}
.banner2 .contentText {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .banner2 .contentText {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
  }
}
@media (min-width: 1250px) {
  .banner2 .contentText {
    padding: 60px;
  }
}
@media (min-width: 1540px) {
  .banner2 .contentText {
    padding: 60px 120px;
  }
}
.banner2 .contentText.contentText--left {
  align-items: flex-start;
}
.banner2 .contentText.contentText--right {
  align-items: flex-end;
}
.banner2 .contentText.contentText--vertTop {
  justify-content: flex-start;
}
.banner2 .contentText.contentText--vertBottom {
  justify-content: flex-end;
}
.banner2.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner2 {
  color: var(--main-color-black);
  text-decoration: none;
}
/*
Banner with Textbox Type 2

Markup:
<a class="banner3" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>

.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right

//Styleguide Siteparts.Banner with Textbox Type 2
*/
.banner3 .contentText h1:not(.highlighted), .banner3 .contentText .h1:not(.highlighted), .banner3 .contentText__headline {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 3rem;
}
@media (min-width: 1024px) {
  .banner3 .contentText h1:not(.highlighted), .banner3 .contentText .h1:not(.highlighted), .banner3 .contentText__headline {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  .banner3 .contentText h1:not(.highlighted), .banner3 .contentText .h1:not(.highlighted), .banner3 .contentText__headline {
    font-size: 4.7rem;
  }
}

.banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted), .banner3 .contentText__text {
  font-size: 2rem;
}
@media (min-width: 1024px) {
  .banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted), .banner3 .contentText__text {
    font-size: 2.4rem;
  }
}
@media (min-width: 1250px) {
  .banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted), .banner3 .contentText__text {
    font-size: 3rem;
  }
}

.banner3 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  background: var(--main-color-black);
  color: var(--main-color-white);
}
@media (min-width: 768px) {
  .banner3 {
    flex-direction: row;
  }
}
.banner3 .contentImage {
  display: flex;
  width: 100%;
}
@media (min-width: 768px) {
  .banner3 .contentImage {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .banner3 .contentImage {
    width: 60%;
  }
}
.banner3 .contentImage .textcontent {
  width: 100%;
}
.banner3 .contentImage video,
.banner3 .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 100%;
  aspect-ratio: 5/3;
}
@media (min-width: 1024px) {
  .banner3 .contentImage video,
  .banner3 .contentImage img {
    aspect-ratio: 1232/520;
  }
}
.banner3 .contentText {
  padding: 30px 20px;
  display: flex;
  align-items: flex-end;
  flex-grow: 1;
}
@media (min-width: 768px) {
  .banner3 .contentText {
    padding: 30px;
  }
}
@media (min-width: 1024px) {
  .banner3 .contentText {
    padding: 40px;
  }
}
@media (min-width: 1250px) {
  .banner3 .contentText {
    padding: 60px;
  }
}
.banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted) {
  font-weight: normal;
  margin-bottom: clamp(10px, 0.5em, 10px);
}
.banner3 .contentText h3:not(.highlighted), .banner3 .contentText .h3:not(.highlighted), .banner3 .contentText .historyItem__heading:not(.highlighted) {
  margin-bottom: 10px;
}
.banner3 .contentText h1:last-child, .banner3 .contentText .h1:last-child,
.banner3 .contentText h2:last-child, .banner3 .contentText .h2:last-child, .banner3 .contentText .orderboxSummary__headline:last-child,
.banner3 .contentText h3:last-child, .banner3 .contentText .h3:last-child, .banner3 .contentText .historyItem__heading:last-child {
  margin-bottom: 0;
}
.banner3.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner3 {
  color: var(--main-color-white);
  text-decoration: none;
}
/*
Slideshow

Markup:
<div class="slideshow swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a class="banner" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
    <div class="swiper-slide">
      <a class="banner" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

.slideshow--arrows-outside - Arrows Outside

//Styleguide Siteparts.Slideshow
*/
.slideshow.swiper .swiper-pagination {
  position: absolute;
  z-index: 1;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--main-color-white);
  margin: 0 auto;
  clip-path: url(#clipPathSlideshowPagination);
  width: 395px;
  max-width: calc(100% - 40px);
  aspect-ratio: 335/22;
  padding: 5px;
}
@media (min-width: 1024px) {
  .slideshow.swiper .swiper-pagination {
    aspect-ratio: 395/46;
    padding: 10px;
  }
}
.slideshow.swiper .swiper-pagination .swiper-pagination-bullet {
  transition: 0.2s ease-in-out;
  height: 8px;
  width: 40px;
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .slideshow.swiper .swiper-pagination .swiper-pagination-bullet {
    height: 10px;
    border-radius: 5px;
  }
}
.slideshow.swiper .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--main-color-primary);
  width: 70px;
}

/*
Slideshow 3

Markup:
<div class="slideshow slideshow3 swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a class="banner3" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
    <div class="swiper-slide">
      <a class="banner3" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
  </div>
  <div class="swiper-pagination swiper-pagination-vertical"></div>
</div>

//Styleguide Siteparts.Slideshow 3
*/
.slideshow--3.swiper .swiper-slide {
  display: flex;
}
.slideshow--3.swiper .swiper-pagination {
  position: absolute;
  z-index: 1;
  left: auto;
  right: 10px;
  bottom: 0;
  width: auto;
  margin: 0;
}
@media (min-width: 768px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 15px;
    top: 50%;
    bottom: auto;
  }
}
@media (min-width: 1024px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 30px;
  }
}
@media (min-width: 1250px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 40px;
  }
}
.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet {
  background: var(--main-color-white);
  opacity: 1;
  border: 1px solid var(--main-color-white);
}
.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: transparent;
}

/*
Bannergroup

Markup:
<div class="bannerGroup">
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
</div>

//Styleguide Siteparts.Bannergroup
*/
@media (min-width: 768px) {
  .bannerGroup {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(auto, 280px));
    gap: 20px;
    grid-template-areas: "banner1 banner1 banner1 banner1 banner1 banner1" "banner2 banner2 banner2 banner3 banner3 banner3";
  }
}
@media (min-width: 1024px) {
  .bannerGroup {
    grid-template-areas: "banner1 banner1 banner1 banner1 banner2 banner2" "banner1 banner1 banner1 banner1 banner3 banner3";
  }
}
.bannerGroup .banner {
  display: flex;
  margin-bottom: 20px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .bannerGroup .banner {
    margin-bottom: 0;
  }
}
.bannerGroup .banner > .link {
  display: flex;
  width: 100%;
}
.bannerGroup .banner .contentImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.bannerGroup .banner .contentText {
  padding: 20px;
}
@media (min-width: 1250px) {
  .bannerGroup .banner .contentText {
    padding: 30px;
  }
}
.bannerGroup .banner .contentText .textcontent {
  width: 100%;
}
.bannerGroup .banner .contentText .textcontent p:last-child {
  margin-bottom: 0;
}
.bannerGroup .banner:first-child {
  grid-area: banner1;
}
@media (min-width: 1024px) {
  .bannerGroup .banner:not(:first-child) .contentImage {
    position: relative;
    width: 100%;
  }
  .bannerGroup .banner:not(:first-child) .contentImage img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .bannerGroup .banner:nth-child(2) .contentImage, .bannerGroup .banner:nth-child(3) .contentImage {
    aspect-ratio: 16/9;
  }
}
.bannerGroup .banner:nth-child(2) {
  grid-area: banner2;
}
.bannerGroup .banner:nth-child(3) {
  grid-area: banner3;
}

@media (min-width: 768px) {
  .bannerGroup {
    grid-template-rows: repeat(2, minmax(auto, 140px));
  }
}
@media (max-width: 767px) {
  .bannerGroup .banner:first-child .contentImage {
    aspect-ratio: 20/9;
  }
}
@media (max-width: 767px) {
  .bannerGroup .banner:nth-child(2) .contentImage, .bannerGroup .banner:nth-child(3) .contentImage {
    aspect-ratio: 20/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);
  color: var(--main-color-black);
  border: 1px solid var(--main-color-gray-base);
  background-color: var(--main-color-white);
  border-radius: 25px;
  transition: 0.2s ease-in-out;
}
.dcCookieBar__button:hover {
  background-color: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.dcCookieBar__button:active, .dcCookieBar__button:focus {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
@media (max-width: 1024px) {
  .dcCookieBar__button {
    font-size: var(--main-font-size-base);
  }
}
.dcCookieBar__buttonaction {
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  background-color: var(--main-color-primary);
}
.dcCookieBar__buttonaction:hover {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
.dcCookieBar__buttonaction:active, .dcCookieBar__buttonaction:focus {
  background-color: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
.dcCookieBar__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 7.5px;
}
.dcCookieBar__buttons .dcCookieBar__button {
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  flex-basis: 100% !important;
}
.dcCookieBar__main {
  text-align: center;
}
.dcCookieBar__text {
  padding-left: 7.5px;
  padding-right: 7.5px;
  padding-bottom: 15px;
  text-align: left;
}
.dcCookieBar__links {
  text-align: right;
  font-size: var(--main-font-size-small);
}
.dcCookieBar__links a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}
.dcCookieBar__center {
  text-align: center;
  margin-top: 15px;
}
.dcCookieBar__center a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}

.dcCookieModal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(204, 204, 204, 0.7);
  color: var(--main-color-black);
  display: none;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 6001;
  font-size: var(--main-font-size-base);
}
@media (min-width: 441px) {
  .dcCookieModal.dcCookieTopPadding {
    padding-top: 150px;
  }
}
.dcCookieModal__dialog {
  background-color: #ffffff;
  padding: 30px;
  width: 600px;
  max-width: 100%;
  margin: 15px auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}
@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-black);
  background-color: var(--main-color-white);
  text-decoration: none;
  cursor: pointer;
}
.dcCookieModal .dcCookieBar__button:hover {
  background-color: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.dcCookieModal .dcCookieBar__button:active, .dcCookieModal .dcCookieBar__button:focus {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
.dcCookieModal .dcCookieBar__buttonaction {
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  background-color: var(--main-color-primary);
  cursor: pointer;
}
.dcCookieModal .dcCookieBar__buttonaction:hover {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
.dcCookieModal .dcCookieBar__buttonaction:active, .dcCookieModal .dcCookieBar__buttonaction:focus {
  background-color: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
.dcCookieModal .dcCookieBar__links {
  margin-top: 15px;
  text-align: left;
}
.dcCookieModal .dcCookieBar__links a {
  margin-left: 0;
  margin-right: 15px;
}
.dcCookieModal.open {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}

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

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

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

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

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

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

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

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

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

.dcCookieBarRecurringButton {
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px black;
}
.dcCookieBarRecurringButton:hover, .dcCookieBarRecurringButton:focus {
  background-color: var(--main-color-primary-dark);
}
.dcCookieBarRecurringButton svg path {
  fill: #000000;
}
.dcCookieBarRecurringButton .closelabel {
  display: none;
  position: relative;
  top: 3px;
}
.dcCookieBarRecurringButton .openlabel {
  position: relative;
  top: 6px;
}
.dcCookieBarRecurringButton.open .openlabel {
  display: none;
}
.dcCookieBarRecurringButton.open .closelabel {
  display: block;
}

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

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

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

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

.hidden {
  display: none !important;
}

.dcCookieModal {
  --main-font-size-small: 1.3rem;
  --main-font-size-base: 1.4rem;
}

/*
Filegallery

Markup:
<div class="filegallery">
    <div>
      <a class="filegalleryFile" href="#" download>
          <i class="icon icon-file-document"></i><span>Name</span>
      </a>
    </div>
    <div>
      <a class="filegalleryFile" href="#" download>
          <i class="icon icon-file-document"></i><span>Name</span>
      </a>
    </div>
    <div>
      <a class="filegalleryFile" href="#" download>
          <i class="icon icon-file-document"></i><span>Name</span>
      </a>
    </div>
</div>

Styleguide Siteparts.Filegallery
*/
.filegallery {
  margin-bottom: -15px;
}

.filegalleryFile {
  margin-bottom: 15px;
  color: var(--main-color-black);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  text-decoration: none;
}
.filegalleryFile .icon {
  margin-right: 5px;
  font-size: 1.4em;
  line-height: 1;
  margin-top: 0;
  color: var(--main-color-primary);
}
.filegalleryFile span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: var(--main-font-weight-bold);
}
.filegalleryFile:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}

/*
Image Gallery

Markup:
<div class="imageGallery swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

//Styleguide Siteparts.Image Gallery
*/
.imageGalleryItem {
  overflow: hidden;
  cursor: pointer;
}
.imageGalleryItem__content {
  position: relative;
}
.imageGalleryItem__content:after {
  content: var(--base-icon-search);
  font-family: "icons", Helvetica, Arial, sans-serif;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--main-color-white);
  opacity: 0;
  transition: 0.2s opacity ease-in-out;
}
.imageGalleryItem__img {
  transition: 0.2s ease-in-out;
  scale: 1;
}
.imageGalleryItem:hover .imageGalleryItem__content:after {
  opacity: 1;
}
.imageGalleryItem:hover .imageGalleryItem__img {
  scale: 1.1;
}

.imageGallery .imageGalleryItem {
  aspect-ratio: 1.25446;
  border-radius: 12px;
}
.imageGallery .imageGalleryItem__content {
  height: 100%;
}
.imageGallery .imageGalleryItem__img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.imageGallery:not(.imageGallery.swiper-initialized) .swiper-wrapper {
  gap: 40px;
}
.imageGallery:not(.imageGallery.swiper-initialized) .swiper-wrapper .swiper-slide {
  width: 33.3333333333%;
}
.imageGallery__navigation {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 20px;
}
@media (min-width: 1024px) {
  .imageGallery__navigation {
    padding-top: 45px;
  }
}
.imageGallery__navigation .swiper-button-prev, .imageGallery__navigation .swiper-button-next {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
}

.isScrollingSlider > .imageGallery .swiper-wrapper {
  margin-left: -150vw;
}
@media (min-width: 1250px) {
  .isScrollingSlider > .imageGallery .swiper-wrapper {
    margin-left: -50vw;
  }
}
.isScrollingSlider > .imageGallery .imageGallery__navigation {
  display: none;
}

.languageSwitchButton {
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  padding-right: 15px;
}
.languageSwitchButton:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.languageSwitchList {
  padding: 0;
  list-style: none;
  display: flex;
  margin: 0;
  flex-wrap: wrap;
}
.languageSwitchList li {
  width: 100%;
  padding: 0;
  display: flex;
  text-align: center;
}
.languageSwitchList li:not(:last-child) {
  border-bottom: 1px solid var(--main-color-middle-gray);
}
.languageSwitchList li.is-active a {
  font-weight: var(--main-font-weight-bold);
}
.languageSwitchList li img {
  width: 40px;
  flex-shrink: 0;
}
.languageSwitchList li a {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: var(--main-link-color);
  padding: 15px 0;
  width: 100%;
}
.languageSwitchList li a:hover, .languageSwitchList li a:focus {
  text-decoration: underline;
  color: var(--main-link-color);
}

/*
Scrollbar

Markup:
<div class="scrollbar swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
    <div class="swiper-slide">
       <a href="#" class="scrollbar__img">
          <img src="kss-assets/sample.png" width="200px" height="200px" alt="">
       </a>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

.scrollbar--arrows-outside - Arrows Outside

Styleguide Siteparts.Scrollbar
*/
.scrollbar.swiper .swiper-slide {
  text-align: center;
}
.scrollbar.swiper .swiper-button-prev,
.scrollbar.swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  font-size: 36px;
  color: var(--main-color-white);
  scale: 1;
  transition: 0.2s ease-in-out;
}
.scrollbar.swiper .swiper-button-prev:hover, .scrollbar.swiper .swiper-button-prev:focus, .scrollbar.swiper .swiper-button-prev:active,
.scrollbar.swiper .swiper-button-next:hover,
.scrollbar.swiper .swiper-button-next:focus,
.scrollbar.swiper .swiper-button-next:active {
  scale: 1.4;
}
.scrollbar.swiper .swiper-button-prev {
  left: 10px;
}
.scrollbar.swiper .swiper-button-next {
  right: 10px;
}
@media (min-width: 1700px) {
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
    color: var(--main-color-black);
  }
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
    left: -50px;
  }
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
    right: -50px;
  }
}

.container .scrollbar {
  margin-left: -20px;
  margin-right: -20px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
  color: var(--main-color-white);
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
  left: 10px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
  right: 10px;
}

/*
Slidecontent

Markup:
<div class="slidecontent">
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
</div>

Styleguide Siteparts.Slidecontent
*/
.slidecontentItem {
  border-bottom: 1px solid var(--main-color-middle-gray);
}
.slidecontentItem:not(:last-child) {
  margin-bottom: 20px;
}
.slidecontentItem__headline {
  position: relative;
  font-size: 1.6rem;
  color: var(--main-color-black);
  padding: 10px;
  padding-left: 30px;
  cursor: pointer;
}
.slidecontentItem__headline:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 0;
  top: 50%;
  font-size: 20px;
  width: 20px;
  text-align: center;
  transition: 0.2s ease-in-out;
  translate: 0 -50%;
}
.slidecontentItem__headline:hover, .slidecontentItem__headline:active, .slidecontentItem__headline:focus {
  color: var(--main-color-primary);
}
.slidecontentItem__content {
  display: none;
  padding: 10px 10px 20px 30px;
}
.slidecontentItem.is-active .slidecontentItem__headline:after {
  rotate: 180deg;
}

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

.newsletterFooterForm .newsletterForm {
  display: flex;
  width: 100%;
}
.newsletterFooterForm .newsletterForm .infieldInputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.newsletterFooterForm .newsletterForm button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}

.newsletterBanner .newsletterForm {
  display: flex;
  width: 100%;
}
.newsletterBanner .newsletterForm .infieldInputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterBanner .newsletterForm > label {
  display: none;
}
.newsletterBanner .newsletterForm .inputGroup input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.newsletterBanner .newsletterForm button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}

.banner .textcontent + .newsletterBanner {
  margin-top: 20px;
}

.fullscreenSwiper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 106;
  background-color: var(--main-color-white);
  display: flex;
  flex-direction: column;
}
.fullscreenSwiper:before {
  content: var(--base-icon-loading);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: 80px;
  z-index: 106;
  color: var(--main-color-middle-gray);
  animation: rotation 1s infinite ease-in-out;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .fullscreenSwiper:before {
    font-size: 120px;
  }
}
.fullscreenSwiper.is-loading:before {
  opacity: 1;
}
.fullscreenSwiper.is-loading .fullscreenSwiperImage,
.fullscreenSwiper.is-loading .fullscreenSwiperThumbs {
  opacity: 0;
}
.fullscreenSwiperImage {
  width: 100%;
  flex-grow: 1;
  padding: 60px 100px;
  display: flex;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}
.fullscreenSwiperImage:before, .fullscreenSwiperImage:after {
  display: none;
}
.fullscreenSwiperImage::before, .fullscreenSwiperImage::after {
  display: none;
}
.fullscreenSwiperImage .swiper-slide {
  position: relative;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.fullscreenSwiperImage .swiper-slide > * {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
.fullscreenSwiperImage .swiper-slide iframe {
  width: 100%;
  height: 100%;
}
.fullscreenSwiperImage .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.fullscreenSwiperImage .swiper-button-prev,
.fullscreenSwiperImage .swiper-button-next {
  font-size: 40px;
  border: 2px solid transparent;
  color: var(--main-color-gray-base);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-top: -30px;
  cursor: pointer;
}
.fullscreenSwiperImage .swiper-button-prev:hover,
.fullscreenSwiperImage .swiper-button-next:hover {
  color: var(--main-color-action);
  border-color: var(--main-color-action);
}
.fullscreenSwiperImage .swiper-button-prev.swiper-button-lock,
.fullscreenSwiperImage .swiper-button-next.swiper-button-lock {
  display: none;
}
.fullscreenSwiperImage .swiper-button-prev {
  left: 20px;
}
.fullscreenSwiperImage .swiper-button-next {
  right: 20px;
}
@media (max-width: 767px) {
  .fullscreenSwiperImage {
    padding: 10px;
  }
  .fullscreenSwiperImage .swiper-button-prev,
  .fullscreenSwiperImage .swiper-button-next {
    display: none;
  }
}

.fullscreenSwiperThumbs {
  flex-shrink: 0;
  height: 100px;
  padding-bottom: 20px;
  transition: opacity 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs {
    height: 70px;
    padding-bottom: 10px;
  }
}
.fullscreenSwiperThumbs .swiper-wrapper {
  justify-content: center;
}
.fullscreenSwiperThumbs .swiper-slide {
  width: 80px;
  cursor: pointer;
  opacity: 0.4;
  transition: 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs .swiper-slide {
    width: 60px;
  }
}
.fullscreenSwiperThumbs .swiper-slide > img,
.fullscreenSwiperThumbs .swiper-slide > video,
.fullscreenSwiperThumbs .swiper-slide > picture {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.fullscreenSwiperThumbs .swiper-slide:hover, .fullscreenSwiperThumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.fullscreenSwiperThumbs .swiper-button-disabled {
  opacity: 0;
}

.fullscreenSwiperClose {
  position: fixed;
  right: 20px;
  top: 20px;
  font-size: 40px;
  border: 2px solid transparent;
  color: var(--main-color-black);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: 0.2s ease-in-out;
}
.fullscreenSwiperClose:hover {
  color: var(--main-color-action);
  border-color: var(--main-color-action);
}
@media (max-width: 767px) {
  .fullscreenSwiperClose {
    top: 10px;
    right: 10px;
    font-size: 30px;
    border-width: 1px;
    width: 40px;
    height: 40px;
  }
}

body.fullscreen-gallery-opened {
  overflow: hidden;
}

.highlightPicture {
  display: flex;
  flex-direction: column;
}
.highlightPicture__image {
  align-self: center;
  position: relative;
}

.highlightBullet {
  position: absolute;
}
.highlightBullet__button {
  width: 32px;
  height: 32px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: var(--main-color-action);
  color: var(--main-color-white);
  position: relative;
  cursor: pointer;
  z-index: 1;
}
.highlightBullet__button:before {
  font-size: 22px;
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-plus);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--main-color-white);
  transition: 0.1s all ease-in-out;
}
.highlightBullet__button:hover {
  background: var(--main-color-secondary);
}
.highlightBullet__content {
  position: absolute;
  padding: 10px;
  display: none;
  background: var(--main-color-white);
  font-size: var(--main-font-size-base);
  line-height: var(--main-line-height);
  min-width: 150px;
}
@media (min-width: 768px) {
  .highlightBullet__content {
    min-width: 200px;
  }
}
.highlightBullet a {
  color: var(--main-color-black);
  text-decoration: none;
  font-size: var(--main-font-size-base);
  line-height: var(--main-line-height);
}
.highlightBullet a:hover .highlightBullet__description {
  text-decoration: underline;
}
.highlightBullet__headline {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .highlightBullet__headline {
    white-space: nowrap;
  }
}
.highlightBullet__itemNo {
  font-size: var(--main-font-size-small);
}
.highlightBullet__description {
  line-height: 1.2;
}
.highlightBullet__inventory {
  margin-top: 5px;
}
.highlightBullet__inventory p {
  white-space: nowrap;
}
.highlightBullet--left .highlightBullet__content {
  top: 50%;
  right: 16px;
  padding-right: 26px;
  transform: translateY(-50%);
}
.highlightBullet--right .highlightBullet__content {
  top: 50%;
  left: 16px;
  padding-left: 26px;
  transform: translateY(-50%);
}
.highlightBullet.active .highlightBullet__button {
  background: var(--main-color-secondary);
}
.highlightBullet.active .highlightBullet__button:before {
  content: var(--base-icon-minus);
}

body[data-site_code=catalog] .highlightBullet__price {
  display: none;
}

.collectionArea.is-loading, .collectionArea.is-error {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}
.collectionArea.is-loading {
  cursor: wait;
}
.collectionArea.is-error {
  background: red;
}

.news {
  display: flex;
  flex-direction: column;
  color: var(--main-color-black);
  text-decoration: none;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
@container newsItemContainer (min-width:600px) {
  .news {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}
.news:hover, .news:focus, .news:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.news:hover .news__previewimage img, .news:focus .news__previewimage img, .news:active .news__previewimage img {
  scale: 1.05;
}
.news:hover .news__link, .news:focus .news__link, .news:active .news__link {
  color: var(--main-link-color-hover);
}
.news__previewimage {
  display: flex;
  max-width: 100%;
  width: 100%;
  background-color: var(--main-color-white);
  overflow: hidden;
}
.news__previewimage img {
  object-fit: cover;
  aspect-ratio: 1.465;
  transition: 0.2s ease-in-out;
}
.news__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  margin-bottom: 10px;
}
@container newsItemContainer (min-width:600px) {
  .news__headline {
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 52px;
  }
}
.news__summary {
  flex-grow: 1;
}
.news__summary > div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news__link {
  font-size: 24px;
  text-align: right;
  padding-top: 10px;
}
@container newsItemContainer (min-width:600px) {
  .news__link {
    padding-top: 20px;
  }
}
.news__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
@container newsItemContainer (min-width:600px) {
  .news__content {
    padding: 30px;
  }
}
@container newsItemContainer (min-width:600px) {
  .news {
    flex-direction: row;
    align-items: center;
  }
  .news__previewimage {
    width: 50%;
    flex-shrink: 0;
  }
  .news__content {
    flex-grow: 0;
  }
  .news__link {
    display: none;
  }
}

.newsColumn {
  container: newsItemContainer/inline-size;
}

.news {
  box-shadow: none;
  border: 1px solid var(--main-color-middle-gray);
}
.news:hover, .news:focus, .news:active {
  border-color: var(--main-color-black);
}

.event {
  color: var(--main-color-black);
  display: block;
  text-decoration: none;
  border-bottom: 1px solid var(--main-color-middle-gray);
  padding-top: 15px;
  padding-bottom: 15px;
  max-width: 900px;
  position: relative;
  padding-right: 60px;
}
.event:first-child {
  border-top: 1px solid var(--main-color-middle-gray);
}
.event:hover, .event:focus, .event:active {
  text-decoration: none;
  color: var(--main-color-black);
}
.event:hover .event__title,
.event:hover .event__link, .event:focus .event__title,
.event:focus .event__link, .event:active .event__title,
.event:active .event__link {
  color: var(--main-link-color-hover);
}
.event__headline {
  font-size: var(--main-font-size-big);
  font-weight: var(--main-font-weight-bold);
}
.event__date {
  margin-bottom: 5px;
}
.event__link {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s ease-in-out;
}
.event__link .icon {
  font-size: 24px;
}

.media {
  display: flex;
  flex-direction: column;
  color: var(--main-color-black);
  text-decoration: none;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .media {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}
.media:hover, .media:focus, .media:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.media:hover .media__previewimage img, .media:focus .media__previewimage img, .media:active .media__previewimage img {
  scale: 1.05;
}
.media:hover .media__link, .media:focus .media__link, .media:active .media__link {
  color: var(--main-link-color-hover);
}
.media__previewimage {
  display: flex;
  max-width: 100%;
  width: 100%;
  background-color: var(--main-color-light-gray);
  overflow: hidden;
  position: relative;
}
.media__previewimage img {
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: 0.2s ease-in-out;
}
.media__previewimage:after {
  content: var(--base-icon-play);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  color: var(--main-color-white);
}
.media__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .media__headline {
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 52px;
  }
}
.media__summary {
  flex-grow: 1;
}
.media__summary > div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media__link {
  font-size: 24px;
  text-align: right;
  padding-top: 10px;
}
@media (min-width: 1024px) {
  .media__link {
    padding-top: 20px;
  }
}
.media__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 10px 20px;
}
@media (min-width: 1024px) {
  .media__content {
    padding: 30px 30px 20px 30px;
  }
}

.media {
  box-shadow: none;
  border: 1px solid var(--main-color-middle-gray);
}
.media:hover, .media:focus, .media:active {
  border-color: var(--main-color-primary);
}

.job {
  color: var(--main-color-black);
  display: block;
  text-decoration: none;
  border-bottom: 1px solid var(--main-color-middle-gray);
  padding-top: 15px;
  padding-bottom: 15px;
  max-width: 900px;
  position: relative;
  padding-right: 60px;
}
.job:hover, .job:focus, .job:active {
  text-decoration: none;
  color: var(--main-color-black);
}
.job:hover .job__title,
.job:hover .job__link, .job:focus .job__title,
.job:focus .job__link, .job:active .job__title,
.job:active .job__link {
  color: var(--main-link-color-hover);
}
.job__title {
  font-weight: var(--main-font-weight-bold);
  transition: 0.2s ease-in-out;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .job__title {
    font-size: var(--main-font-size-big);
  }
}
@media (min-width: 768px) {
  .job__info--date {
    width: 140px;
  }
}
@media (min-width: 768px) {
  .job__footer {
    display: flex;
    align-items: center;
    gap: 20px;
    row-gap: 0;
    flex-wrap: wrap;
  }
}
.job__link {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s ease-in-out;
}
.job__link .icon {
  font-size: 24px;
}

.historyItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--main-color-light-gray);
}
@media (min-width: 768px) {
  .historyItem {
    flex-direction: row;
  }
}
.historyItem__content {
  flex-grow: 1;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .historyItem__content {
    padding: 40px 30px;
  }
}
@media (min-width: 1540px) {
  .historyItem__content {
    padding: 70px 130px;
  }
}
.historyItem__year {
  margin-bottom: 10px;
  line-height: 1;
  font-weight: var(--main-font-weight-bold);
  font-size: 3rem;
}
@media (min-width: 768px) {
  .historyItem__year {
    font-size: 3.4rem;
  }
}
@media (min-width: 1024px) {
  .historyItem__year {
    font-size: 4.2rem;
  }
}
@media (min-width: 1250px) {
  .historyItem__year {
    font-size: 4.6rem;
  }
}
.historyItem__headline {
  flex-grow: 1;
  margin-bottom: 20px;
  font-size: 2rem;
}
@media (min-width: 1250px) {
  .historyItem__headline {
    font-size: 3rem;
  }
}
.historyItem__img {
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .historyItem__img {
    width: 50%;
    order: 1;
  }
}
@media (min-width: 1250px) {
  .historyItem__img {
    width: 55%;
  }
}
.historyItem__img img {
  aspect-ratio: 790/540;
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
}

.historySlider .swiper-slide {
  display: flex;
  width: 1420px;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.historySlider .swiper-navigation {
  position: relative;
  max-width: 1420px;
  margin: 20px auto 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.historySlider .swiper-navigation > div {
  position: static;
  margin: 0;
  color: var(--main-color-black);
}
.historySlider .swiper-navigation > div:hover {
  color: var(--main-link-color-hover);
}

.collectionHistory {
  position: relative;
}
@media (max-width: 1249.98px) {
  .collectionHistory {
    padding-inline: 20px;
  }
}
@media (min-width: 1921px) {
  .collectionHistory {
    max-width: 1920px;
    margin-inline: auto;
  }
}
.collectionHistory__inner {
  display: grid;
  grid-template-areas: "description description description slider slider";
  position: relative;
  z-index: 1;
  height: 100%;
}
@media (max-width: 1539.98px) {
  .collectionHistory__inner {
    max-width: 1146px;
    margin-inline: auto;
  }
}
@media (min-width: 1540px) {
  .collectionHistory__inner {
    padding-left: 27vw;
    padding-right: 15vw;
  }
}
@media (min-width: 1921px) {
  .collectionHistory__inner {
    padding-left: 518.4px;
    padding-right: 288px;
  }
}
@media (max-width: 1023.98px) {
  .collectionHistory__inner {
    grid-template-areas: "description description slider slider";
  }
}
@media (max-width: 767.98px) {
  .collectionHistory__inner {
    grid-template-areas: "slider" "description";
    gap: 20px;
  }
}
.collectionHistory__details {
  grid-area: description;
  background: var(--main-color-gray-base);
  padding: 20px;
  border-radius: 15px;
  aspect-ratio: 1.3;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
@media (min-width: 768px) {
  .collectionHistory__details {
    aspect-ratio: 1.51078;
    padding: 40px;
  }
}
@media (min-width: 1024px) {
  .collectionHistory__details {
    padding: 65px 90px 110px;
  }
}
.collectionHistory__slider {
  grid-area: slider;
  width: 100%;
  height: 100% !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  background: var(--main-color-white);
}
.collectionHistory__slider .swiper-wrapper {
  height: 100% !important;
}
.collectionHistory__slider .swiper-wrapper .swiper-slide {
  display: flex;
  align-items: flex-end;
}
@media (min-width: 768px) {
  .collectionHistory__slider {
    padding-left: 20px;
    gap: 40px;
  }
}
.collectionHistory__backgroundSlider {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left: calc((100vw - 1740px) / 2);
  max-width: 1920px;
  height: 100% !important;
}
.collectionHistory__backgroundSlider .swiper-wrapper {
  height: 100% !important;
}
.collectionHistory__backgroundSlider .swiper-wrapper .swiper-slide {
  display: flex;
  align-items: flex-end;
}
@media (min-width: 768px) {
  .collectionHistory__backgroundSlider .swiper-wrapper .swiper-slide .historyItem__year {
    width: min-content;
  }
}
.collectionHistory__backgroundSlider .swiper-wrapper .swiper-slide:first-child .historyItem__year {
  font-size: 70px;
}
.collectionHistory__backgroundSlider .swiper-wrapper .swiper-slide:not(.swiper-slide-active) .historyItem__year {
  color: var(--main-color-gray-base);
}
.collectionHistory__backgroundSlider .swiper-wrapper .swiper-slide.swiper-slide-next {
  justify-content: flex-end;
}
.collectionHistory__backgroundSlider .collectionHistory__navigation {
  opacity: 0;
}
@media (max-width: 1539.98px) {
  .collectionHistory__backgroundSlider {
    display: none;
  }
}
@media (min-width: 1921px) {
  .collectionHistory__backgroundSlider {
    padding-left: 90px;
  }
}
.collectionHistory__navigation {
  display: flex;
  align-items: center;
  gap: 20px;
}
.collectionHistory__navigation .swiper-button-prev, .collectionHistory__navigation .swiper-button-next {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
}

.historyItem {
  display: none;
}
.historyItem__smallHeading {
  color: var(--main-color-primary);
  font-size: 1.8rem;
}
.historyItem__year {
  font-size: 120px;
  color: var(--main-color-secondary);
  font-weight: var(--main-font-weight-black);
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .historyItem__year {
    font-size: 50px;
  }
}

@media (min-width: 1024px) {
  .jobsList.isList .job {
    padding-block: 25px;
  }
}
.jobsList.isList .job__info--date {
  width: 180px;
}
.jobsList.isList .job__link {
  width: 36px;
  height: 36px;
  background: var(--main-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.jobsList.isList .job__link .icon {
  color: var(--main-color-white);
  line-height: 0;
}
.jobsList.isList .job:hover, .jobsList.isList .job:focus, .jobsList.isList .job:active {
  color: var(--main-color-black);
}
.jobsList.isList .job:hover .job__title, .jobsList.isList .job:focus .job__title, .jobsList.isList .job:active .job__title {
  color: var(--main-color-black);
}
.jobsList.isList .job:hover .job__link, .jobsList.isList .job:focus .job__link, .jobsList.isList .job:active .job__link {
  background: var(--main-color-primary);
}

.jobsList.isFullView .scrollItem {
  position: sticky;
  top: 185px;
  padding: 20px;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-radius: 15px;
}
.jobsList.isFullView .scrollItem a {
  color: var(--main-color-white);
}
.jobsList.isFullView .scrollItem a:hover, .jobsList.isFullView .scrollItem a:focus, .jobsList.isFullView .scrollItem a:active {
  color: var(--main-color-secondary);
}
@media (max-width: 767.98px) {
  .jobsList.isFullView .scrollItem {
    margin-top: 20px;
  }
}

.isFullView.pg_karriere .mainContent {
  background: var(--main-color-light-gray);
}

/*
Promotions

Markup:
<div class='promotions'>
<div class='promotion promotion--1'>Action</div>
<div class='promotion promotion--2'>Sale</div>
<div class='promotion promotion--3'>New</div>
<div class='promotion promotion--clickable'>New</div>
</div>

Styleguide Shop.Promotions
*/
.promotion {
  background: var(--main-color-black);
  color: var(--main-color-white);
  line-height: 1;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  font-weight: var(--main-font-weight-bold);
  font-size: 1.2rem;
  clip-path: url(#clipPathPromotion);
  min-width: 80px;
}
.promotion.promotion--1, .promotion.promotion--2 {
  background: #c92522;
  color: var(--main-color-white);
}
.promotion.promotion--3 {
  background: var(--main-color-gray-base);
  color: var(--main-color-black);
}
.promotion--clickable {
  cursor: pointer;
}
.promotion--clickable:hover {
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.promotion--clickable:hover.promotion--1, .promotion--clickable:hover.promotion--2 {
  background: var(--main-color-danger-dark);
  color: var(--main-color-danger-dark-contrast);
}
.promotion--clickable:hover.promotion--3 {
  background: var(--main-color-success-dark);
  color: var(--main-color-success-dark-contrast);
}

.promotions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.sortingSelect > label {
  right: 0;
  left: auto;
  padding-right: 0;
}
.sortingSelect select {
  border-color: transparent;
  padding: 13.5px 26px 13.5px;
}
.sortingSelect select:hover, .sortingSelect select:focus, .sortingSelect select:active {
  border-color: transparent;
}
.sortingSelect .selectBody:after, .sortingSelect .customSelect__selected:after {
  right: 0;
  font-size: 20px;
  margin-top: 1px;
}

/*
Prices

Markup:
<div class="prices">
    <span class="crossPrice">299,95&nbsp;€</span>
    <span class="basePrice">199,95&nbsp;€</span>
    <span class="priceNotice">Price incl. 19% VAT.</span>
</div>

Styleguide Shop.Prices
*/
.crossPrice {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.crossPrice:before {
  content: " ";
  height: 1px;
  background-color: var(--main-color-danger);
  width: calc(100% + 6px);
  display: block;
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
}
@media (min-width: 768px) {
  .crossPrice:before {
    height: 1.5px;
  }
}

.basePrice,
.actionPrice {
  white-space: nowrap;
  font-weight: var(--main-font-weight-bold);
}

.priceNotice {
  width: 100%;
  margin-top: 5px;
  font-size: var(--main-font-size-small);
}

.prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.prices .crossPrice + .basePrice {
  color: var(--main-color-danger);
  margin-left: 10px;
}
@media (min-width: 768px) {
  .prices .crossPrice + .basePrice {
    margin-left: 20px;
  }
}

/*
Prices List

Markup:
<div class="pricesList">
    <div class="price">
      <label>UVP</label>
      <span>299,95&nbsp;€</span>
    </div>
    <div class="price">
      <label>HEK</label>
      <span>199,95&nbsp;€</span>
    </div>
    <div class="price">
      <label>Your Price</label>
      <span>159,95&nbsp;€</span>
    </div>
</div>

Styleguide Shop.Prices List
*/
.pricesList {
  display: flex;
  align-items: flex-end;
  margin-left: -10px;
  margin-right: -10px;
}
@media (min-width: 768px) {
  .pricesList {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.pricesList .price {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
  width: 100px;
}
@media (min-width: 768px) {
  .pricesList .price {
    padding-left: 20px;
    padding-right: 20px;
    width: 120px;
  }
}
.pricesList .price:not(:last-child) {
  position: relative;
}
.pricesList .price:not(:last-child):after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 25px;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  background: var(--main-color-dark-gray);
}
.pricesList .price label {
  color: var(--main-color-dark-gray);
}

/*
Prices List Graduated

Markup:
<div class="priceListGraduated">
    <div class="priceListGraduated__link linkWithIcon">
        <i class="icon icon-info"></i><span>More Prices</span>
    </div>
    <div class="priceListGraduated__list">
        <div class="amountLines">
            <div class="amountLine">
                <div class="amountLine__label">UVP</div>
                <div class="amountLine__value"></div>
            </div>
            <div class="amountLine">
                <div class="amountLine__label">HEK</div>
                <div class="amountLine__value">2.999,99&nbsp;€</div>
            </div>
            <div class="amountLine">
                <div class="amountLine__label">Ihr Preis ab 1 Stück</div>
                <div class="amountLine__value">990,00&nbsp;€</div>
            </div>
            <div class="amountLine">
                <div class="amountLine__label">Ihr Preis ab 10 Stück</div>
                <div class="amountLine__value">890,00&nbsp;€</div>
            </div>
            <div class="amountLine">
                <div class="amountLine__label">Ihr Preis ab 50 Stück</div>
                <div class="amountLine__value">790,00&nbsp;€</div>
            </div>
        </div>
    </div>
</div>

Styleguide Shop.Prices List Graduated
*/
.priceListGraduated {
  position: relative;
  font-size: var(--main-font-size-small);
}
@media (min-width: 768px) {
  .priceListGraduated {
    text-align: center;
  }
}
.priceListGraduated__link {
  cursor: pointer;
  color: var(--main-color-dark-gray);
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.priceListGraduated__link .icon:before {
  line-height: 1;
}
.priceListGraduated__list {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  min-width: 200px;
  max-width: 100vw;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border: 1.5px solid var(--main-color-middle-gray);
  border-radius: 15px;
  margin-top: 5px;
  display: none;
  background: var(--main-color-white);
  overflow: hidden;
  padding: 10px;
  z-index: 1;
}
.priceListGraduated .amountLine__label {
  text-align: left;
}
.priceListGraduated .amountLine__value {
  text-align: right;
}
.priceListGraduated.is-active {
  z-index: 1;
}
.priceListGraduated.is-active .priceListGraduated__link {
  color: var(--main-color-primary);
}
.priceListGraduated.is-active .priceListGraduated__list {
  display: block;
}

.itemlistElement.show-priceListGraduated {
  z-index: 1;
  position: relative;
}

/*
State

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

.state--open - Open
.state--pending - Pending
.state--done - Done

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

/*
Categorylist

Markup:
<div class="categoryList">
    <div class="row row--flexsub gridGap--small">
          <div class="col-6 col-md-4 marginBottom">
              <a href="#" class="categoryItem">
                  <div class="categoryItem__image imageCover">
                      <img src="kss-assets/sample.png" alt="Categoryname">
                  </div>
                  <div class="categoryItem__content">
                      <div class="categoryItem__headline">Categoryname</div>
                  </div>
              </a>
          </div>
          <div class="col-6 col-md-4 marginBottom">
              <a href="#" class="categoryItem">
                  <div class="categoryItem__image imageCover">
                      <img src="kss-assets/sample.png" alt="Categoryname">
                  </div>
                  <div class="categoryItem__content">
                      <div class="categoryItem__headline">Categoryname</div>
                  </div>
              </a>
          </div>
          <div class="col-6 col-md-4 marginBottom">
              <a href="#" class="categoryItem">
                  <div class="categoryItem__image imageCover">
                      <img src="kss-assets/sample.png" alt="Categoryname">
                  </div>
                  <div class="categoryItem__content">
                      <div class="categoryItem__headline">Categoryname</div>
                  </div>
              </a>
          </div>
    </div>
</div>

Styleguide Shop.Categorylist
*/
.categoryList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 1024px) {
  .categoryList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }
}
@media (min-width: 1540px) {
  .categoryList {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.categoryItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  color: var(--main-color-black);
}
.categoryItem:hover, .categoryItem:focus, .categoryItem:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.categoryItem:hover .categoryItem__headline, .categoryItem:focus .categoryItem__headline, .categoryItem:active .categoryItem__headline {
  color: var(--main-color-black);
}
.categoryItem:hover .categoryItem__image, .categoryItem:focus .categoryItem__image, .categoryItem:active .categoryItem__image {
  border-color: var(--main-color-action);
}
.categoryItem:hover .categoryItem__image img, .categoryItem:focus .categoryItem__image img, .categoryItem:active .categoryItem__image img {
  rotate: 10deg;
}
.categoryItem:hover .categoryItem__headline:after, .categoryItem:focus .categoryItem__headline:after, .categoryItem:active .categoryItem__headline:after {
  opacity: 1;
}
.categoryItem__image {
  background: var(--main-color-light-gray);
  border-radius: 50%;
  border: 2px solid transparent;
  transition: 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .categoryItem__image {
    border-width: 3px;
  }
}
.categoryItem__image img {
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  width: 100%;
  rotate: 0;
  transition: 0.2s ease-in-out;
}
.categoryItem__content {
  margin-top: 20px;
}
@media (min-width: 1024px) {
  .categoryItem__content {
    margin-top: 35px;
  }
}
.categoryItem__headline {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 1.6rem;
}
.categoryItem__headline:after {
  content: var(--base-icon-arrow-right);
  font-family: "icons", Helvetica, Arial, sans-serif;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--main-color-action);
  color: var(--main-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .categoryItem__headline {
    font-size: 2rem;
  }
}
.categoryItem__description {
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.categoryMain {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.categoryNav {
  display: none;
}
@media (min-width: 1250px) {
  .categoryNav {
    display: block;
    width: 300px;
    position: sticky;
    top: 218px;
  }
}
@media (min-width: 1250px) {
  .categoryNav {
    top: 160px;
  }
}

.categoryContent {
  flex: 1;
}

/*
Categorybox

Markup:
<div class="categoryList">
    <div class="row gridGap--small">
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
    </div>
</div>

Styleguide Shop.Categorybox
*/
.categoryBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--main-color-light-gray);
  text-align: center;
  color: var(--main-color-black);
  text-decoration: none;
  padding: 30px 10px;
  border-radius: 15px;
}
@media (min-width: 1024px) {
  .categoryBox {
    padding: 45px 30px;
  }
}
.categoryBox:hover, .categoryBox:focus, .categoryBox:active {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}
.categoryBox__headline {
  line-height: 1.1;
  font-size: 1.4rem;
}
@media (min-width: 1024px) {
  .categoryBox__headline {
    font-size: 2rem;
  }
}

/*
CategorySlider

Markup:
<div class="categorySlider swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          <a href="#" class="categoryItem" title="Description">
              <div class="categoryItem__image imageCover">
                  <img src="kss-assets/sample.png" alt="Description" loading="lazy" width="260" height="260">
              </div>
              <div class="categoryItem__content">
                  <div class="categoryItem__headline">Description</div>
              </div>
          </a>
      </div>
      <div class="swiper-slide">
          <a href="#" class="categoryItem" title="Description">
              <div class="categoryItem__image imageCover">
                  <img src="kss-assets/sample.png" alt="Description" loading="lazy" width="260" height="260">
              </div>
              <div class="categoryItem__content">
                  <div class="categoryItem__headline">Description</div>
              </div>
          </a>
      </div>
      <div class="swiper-slide">
          <a href="#" class="categoryItem" title="Description">
              <div class="categoryItem__image imageCover">
                  <img src="kss-assets/sample.png" alt="Description" loading="lazy" width="260" height="260">
              </div>
              <div class="categoryItem__content">
                  <div class="categoryItem__headline">Description</div>
              </div>
          </a>
      </div>
      <div class="swiper-slide">
          <a href="#" class="categoryItem" title="Description">
              <div class="categoryItem__image imageCover">
                  <img src="kss-assets/sample.png" alt="Description" loading="lazy" width="260" height="260">
              </div>
              <div class="categoryItem__content">
                  <div class="categoryItem__headline">Description</div>
              </div>
          </a>
      </div>
      <div class="swiper-slide">
          <a href="#" class="categoryItem" title="Description">
              <div class="categoryItem__image imageCover">
                  <img src="kss-assets/sample.png" alt="Description" loading="lazy" width="260" height="260">
              </div>
              <div class="categoryItem__content">
                  <div class="categoryItem__headline">Description</div>
              </div>
          </a>
      </div>
      <div class="swiper-slide">
          <a href="#" class="categoryItem" title="Description">
              <div class="categoryItem__image imageCover">
                  <img src="kss-assets/sample.png" alt="Description" loading="lazy" width="260" height="260">
              </div>
              <div class="categoryItem__content">
                  <div class="categoryItem__headline">Description</div>
              </div>
          </a>
      </div>
    </div>
    <div class="swiper-navigation">
      <div class="swiper-button-prev"><i class="icon icon-arrow-left"></i></div>
      <div class="swiper-button-next"><i class="icon icon-arrow-right"></i></div>
    </div>
</div>

Styleguide Shop.Categoryslider
*/
.categorySlider {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.categorySlider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}
.categorySlider:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
  padding-left: 20px;
  padding-right: 20px;
  width: 45.4545454545%;
}
@media (min-width: 768px) {
  .categorySlider:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
    width: 33.3333333333%;
  }
}
@media (min-width: 1024px) {
  .categorySlider:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
    width: 25%;
  }
}
@media (min-width: 1540px) {
  .categorySlider:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
    width: 20%;
    padding-left: 50px;
    padding-right: 50px;
  }
}
.categorySlider.swiper-initialized .swiper-slide {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 1540px) {
  .categorySlider.swiper-initialized .swiper-slide {
    padding-left: 50px;
    padding-right: 50px;
  }
}
.categorySlider .swiper-navigation {
  position: static;
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-top: 20px;
}
@media (min-width: 1540px) {
  .categorySlider .swiper-navigation {
    margin-top: 45px;
  }
}
.categorySlider .swiper-navigation .swiper-button-prev,
.categorySlider .swiper-navigation .swiper-button-next {
  position: static;
  margin: 0;
}

.container .categorySlider {
  padding-left: 0;
  padding-right: 0;
}

.itemlistElement {
  border: 1px solid var(--main-color-middle-gray);
  border-radius: 10px;
  padding: 0 10px;
  font-size: var(--main-font-size-small);
  container: containerItemlistElement/inline-size;
}
.itemlistElement:not(:last-child) {
  margin-bottom: 20px;
}
.itemlistElement__toggle {
  grid-area: toggle;
}
.itemlistElement__toggle .icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: 0.2s ease-in-out;
}
.itemlistElement__toggle .icon:hover, .itemlistElement__toggle .icon:focus, .itemlistElement__toggle .icon:active {
  color: var(--main-color-primary);
}
.itemlistElement__toggle .icon.is-loading, .itemlistElement__toggle .icon.is-success, .itemlistElement__toggle .icon.is-error {
  cursor: not-allowed;
  pointer-events: none;
}
.itemlistElement__toggle .icon.is-loading {
  cursor: wait;
}
.itemlistElement__toggle .icon.is-loading:before {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.itemlistElement__toggle .icon.is-error {
  color: var(--main-color-danger);
}
.itemlistElement__toggle .icon.is-error:before {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.itemlistElement__image img {
  aspect-ratio: 5/3;
}
.itemlistElement__media {
  grid-area: media;
}
.itemlistElement__name {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
  text-decoration: none;
}
.itemlistElement__description {
  grid-area: description;
}
.itemlistElement__info {
  grid-area: info;
}
.itemlistElement__inventory {
  grid-area: inventory;
}
.itemlistElement__inventory .inventoryShippingInfo {
  display: none;
}
.itemlistElement__prices {
  grid-area: prices;
}
.itemlistElement__orderbutton {
  width: 160px;
}
.itemlistElement__orderbutton .button {
  width: 100%;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton {
  padding: 0;
  transition: ease-in-out 0.2s;
  width: 50px;
  max-width: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton span {
  display: none;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton .icon {
  position: static;
  transform: none;
  margin: 0;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton.is-loading:after, .itemlistElement__orderbutton .orderButtonWrapper .orderButton.is-success:after, .itemlistElement__orderbutton .orderButtonWrapper .orderButton.is-error:after {
  right: 50%;
  translate: 50% -50%;
}
.itemlistElement__actions {
  margin-left: 10px;
  width: 36px;
}
.itemlistElement__addon {
  grid-area: addon;
  display: flex;
  align-items: center;
}
.itemlistElement__wrapper {
  display: grid;
  padding-top: 5px;
  padding-bottom: 5px;
  grid-column-gap: 5px;
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper {
    grid-column-gap: 10px;
    grid-template-columns: 30px 60px 1fr auto;
    grid-template-areas: ". media description prices" ". media inventory addon";
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper {
    align-items: center;
    grid-template-columns: 30px 80px 1fr auto auto;
    grid-template-areas: ". media description prices addon" ". media inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1100px) {
  .itemlistElement__wrapper {
    grid-template-columns: 30px 100px 1fr 130px auto auto;
    grid-template-areas: ". media description inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1200px) {
  .itemlistElement__wrapper {
    grid-template-columns: 30px 100px 155px 1fr 130px auto auto;
    grid-template-areas: ". media description info inventory prices addon";
  }
}
@container containerItemlistElement (max-width: 400px) {
  .itemlistElement__wrapper--noVariant {
    grid-template-columns: 60px 1fr;
    grid-template-areas: "media description" "media inventory" "media prices" "media addon";
  }
}
@container containerItemlistElement (max-width: 400px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-columns: 30px 60px 1fr;
    grid-template-areas: "toggle media description" "toggle media inventory" "toggle media prices" "toggle media addon";
  }
}
@container containerItemlistElement (min-width: 400px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description prices" "toggle media inventory addon";
  }
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description prices addon" "toggle media inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1100px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description inventory prices addon";
  }
}
@container containerItemlistElement (min-width: 1200px) {
  .itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
    grid-template-areas: "toggle media description info inventory prices addon";
  }
}
.itemlistElement__wrapper--isVariant {
  border-top: 1px solid var(--main-color-light-gray);
}
.itemlistElement__wrapper .itemlistElement__inventory {
  margin-top: 5px;
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper .itemlistElement__inventory {
    margin-top: 0;
  }
}
.itemlistElement__wrapper .itemlistElement__prices {
  margin-top: 5px;
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper .itemlistElement__prices {
    margin-top: 0;
  }
}
.itemlistElement__wrapper .itemlistElement__addon {
  margin-top: 5px;
}
@container containerItemlistElement (min-width: 800px) {
  .itemlistElement__wrapper .itemlistElement__addon {
    margin-top: 0;
  }
}
@container containerItemlistElement (max-width: 1199px) {
  .itemlistElement__wrapper .itemlistElement__info {
    display: none;
  }
}
.itemlistElement.is-active .itemlistElement__wrapper--hasVariant .itemlistElement__toggle .icon {
  rotate: 90deg;
}
.itemlistElement.is-active .itemlistElement__wrapper--isVariant {
  display: grid;
}

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

/*
orderboxSummary

Markup:
<div class="orderboxSummary">
  <div class="orderboxSummary__head">
    <div class="orderboxSummary__headline">Headline</div>
  </div>
  <div class="orderboxSummary__main">
    <div class="amountLines">
      <div class="amountLine">
          <div class="amountLine__label">Summe Bestellung</div>
          <div class="amountLine__value">999,00&nbsp;€</div>
      </div>
      <div class="amountLine">
          <div class="amountLine__label">Versandkosten</div>
          <div class="amountLine__value">+8,90&nbsp;€</div>
      </div>
    </div>
  </div>
  <div class="orderboxSummary__footer">
    <div class="amountLines">
        <div class="amountLine amountLine--big">
            <div class="amountLine__label">Gesamtsumme</div>
            <div class="amountLine__value">1.007,90&nbsp;€</div>
        </div>
        <div class="amountLine">
            <div class="amountLine__label">enthaltene MwSt. 19%</div>
            <div class="amountLine__value">160,93&nbsp;€</div>
        </div>
    </div>
    <div class="orderboxSummary__buttons">
      <button type="submit" class="button button--primary button--xl">Order</button>
    </div>
    <div class="orderboxSummary__trust">
      <ul class="trustList">
          <li><i class="icon icon-shipping"></i> Kostenloser Versand ab 50€</li>
          <li><i class="icon icon-invoice"></i> Kauf auf Rechnung</li>
          <li><i class="icon icon-retoure"></i> 50&nbsp;Tage Rückgaberecht</li>
      </ul>
    </div>
  </div>
</div>

Styleguide Shop.orderboxSummary
*/
@media (min-width: 768px) {
  .orderboxSummary {
    padding: 20px 30px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
    background: var(--main-color-white);
  }
}
@media (min-width: 1024px) {
  .orderboxSummary {
    padding: 30px 40px;
  }
}
.orderboxSummary__headline {
  margin: 0;
}
.orderboxSummary__main {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (max-width: 767px) {
  .orderboxSummary__main {
    padding-top: 0;
  }
}
.orderboxSummary__main a {
  text-decoration: none;
  font-size: var(--main-font-size-small);
}
.orderboxSummary__footer {
  padding-top: 20px;
  border-top: 1px solid var(--main-color-middle-gray);
}
@media (max-width: 767px) {
  .orderboxSummary__head {
    display: none;
  }
}
.orderboxSummary__head + .orderboxSummary__footer {
  border-top: 0;
}
.orderboxSummary__buttons .button {
  width: 100%;
  margin-top: 20px;
}
.orderboxSummary__trust {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--main-color-light-gray);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .orderboxSummary__trust .trustList {
    flex-direction: column;
  }
}
.orderboxSummary a:not(.button):not(.tag) {
  color: var(--main-color-black);
}
.orderboxSummary a:not(.button):not(.tag):hover, .orderboxSummary a:not(.button):not(.tag):focus, .orderboxSummary a:not(.button):not(.tag):active, .orderboxSummary a:not(.button):not(.tag).is-active {
  color: var(--main-color-primary);
}

@media (min-width: 1250px) {
  .orderBoxContainer {
    margin-left: 50px;
  }
}

/*
List Type Switch

Markup:
<form class="itemlistTypeSwitch" method="post" action="">
    <input type="hidden" name="categoryId" value="2">
    <button type="submit" name="categoryListType" value="2" title="Kachelansicht">
        <i class="icon icon-columns"></i>
    </button>
    <button type="submit" name="categoryListType" value="1" title="Listenansicht">
        <i class="icon icon-list"></i>
    </button>
</form>

Styleguide Shop.List Type Switch
*/
.listTypeSwitch {
  display: flex;
  gap: 10px;
}
.listTypeSwitch button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-color: transparent;
  background: transparent;
  padding: 0;
}
.listTypeSwitch button:hover, .listTypeSwitch button:focus, .listTypeSwitch button:active {
  border-color: transparent;
  background: transparent;
  color: var(--main-color-primary);
}
.listTypeSwitch button .icon {
  font-size: 1em;
}

/*
Filter

Markup:
<div class="filterBox">
    <div class="filterBox__mobileButton">Filter</div>
    <div class="filterBox__content">
        <div class="filterBox__contentHeader">
            <div class="filterBox__contentTitle">Filter</div>
            <div class="filterBox__close">
                <i class="icon icon-close"></i>
            </div>
        </div>
        <div class="filterBox__filter">
            <div class="row gridGap--small">
                <div class="col-12 col-lg-9 filtersColumn">
                    <div class="row gridGap--small">
                        <div class="col-12 col-sm-4 col-md-3 marginBottom">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="callaway">filter-Marke-8</option>
                                        <option value="titleist">filter-Marke-8</option>
                                        <option value="taylormade">filter-Marke-8</option>
                                    </select>
                                    <div class="customSelect__selected">Marke</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Marke
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?marke=callaway&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Callaway
                                                </div>
                                            </a>
                                            <a href="?marke=titleist&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Titleist
                                                </div>
                                            </a>
                                            <a href="?marke=taylormade&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    TaylorMade
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <form method="get" class="customSelect js-customSelect customSelect--multiple">
                                <input class="customSelect__hiddenFormField" name="farbe" value="">
                                <input class="customSelect__hiddenFormField" name="sort_by" value="base_price_desc">
                                <div class="customSelect__selected">
                                    Farbe <span class="customSelect__selectedCount"></span>
                                </div>
                                <div class="customSelect__dropdown js-searchWrapper">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader">
                                        <div class="customSelect__dropdownTitle">
                                            Farbe
                                        </div>
                                        <div class="inputGroup searchBar">
                                            <input class="js-searchInput" data-wrapper="js-searchWrapper" data-item="js-searchItem" type="text" placeholder="Filter suchen">
                                            <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/silber">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Silber</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/rot">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Rot</div>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownFooter">
                                        <button type="submit" class="button button--action button--sm">
                                            Anwenden
                                        </button>
                                        <br>
                                        <button class="linkWithIcon customSelectReset">
                                            <i class="icon icon-retoure"></i><span>Zurücksetzen</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="regular">filter-Flex-4</option>
                                    <option value="stiff">filter-Flex-4</option>
                                </select>
                                <div class="customSelect__selected">Flex</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Flex
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?flex=regular&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Regular (R)
                                            </div>
                                        </a>
                                        <a href="?flex=stiff&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Stiff (S)
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="60.00">filter-Lie-Winkel-6</option>
                                        <option value="58.50">filter-Lie-Winkel-6</option>
                                    </select>
                                    <div class="customSelect__selected">Lie-Winkel</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Lie-Winkel
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?lie=60.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    60
                                                </div>
                                            </a>
                                            <a href="?lie=58.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    58.50
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="10.00">filter-Loft-7</option>
                                    <option value="11.50">filter-Loft-7</option>
                                    <option value="10.50">filter-Loft-7</option>
                                    <option value="9.00">filter-Loft-7</option>
                                </select>
                                <div class="customSelect__selected">Loft</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Loft
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?loft=10.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10
                                            </div>
                                        </a>
                                        <a href="?loft=11.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                11.50
                                            </div>
                                        </a>
                                        <a href="?loft=10.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10.50
                                            </div>
                                        </a>
                                        <a href="?loft=9.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                9
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="filterBox__toggleFilterColumn marginBottom">
                            <span class="link filterBox__showHiddenFilters">+ Mehr Filter</span>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-4 col-lg-3 marginBottom sortSelectColumn">
                    <form method="get" class="inputGroup is-filled">
                      <div class="sorting">
                        <label for="sorting" aria-hidden="true">
                            Sortierung
                        </label>
                        <div class="customSelect js-customSelect customSelect--small sortingSelect">
                            <select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by" id="sorting">
                                    <option value="item_no">Artikelnummer</option>
                                    <option value="description">Artikelbezeichnung</option>
                                    <option value="creation_date" selected="">Neueste</option>
                                    <option value="sorting">Empfehlung</option>
                            </select>
                            <div class="customSelect__selected">Neueste</div>
                            <div class="customSelect__dropdown">
                                <div class="customSelect__dropdownClose">
                                    <i class="icon icon-close"></i>
                                </div>
                                <div class="customSelect__dropdownHeader d-block d-sm-none">
                                    <div class="customSelect__dropdownTitle">
                                        Sortierung
                                    </div>
                                </div>
                                <div class="customSelect__dropdownBody">
                                        <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
                                            <div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
                                        </div>
                                        <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
                                            <div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
                                        </div>
                                        <div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="creation_date">
                                            <div class="customSelect__dropdownItemHeadline">Neueste</div>
                                        </div>
                                        <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
                                            <div class="customSelect__dropdownItemHeadline">Empfehlung</div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide Shop.Filter
*/
.filterForm {
  width: 100%;
}

.filterReset {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  text-decoration: none;
  padding-left: 40px !important;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.filterReset .icon, .filterReset:before {
  position: absolute;
  font-size: 18px;
  left: 15px;
  top: 50%;
  translate: 0 -50%;
  transition: left 0.2s ease-in-out;
}
.filterReset:before {
  content: var(--base-icon-trash);
  font-family: "icons", Helvetica, Arial, sans-serif;
  left: -50%;
}
.filterReset:hover, .filterReset:focus, .filterReset:active {
  background: var(--main-color-middle-gray);
  border-color: var(--main-color-middle-gray);
  color: var(--main-color-black);
  text-decoration: none;
}
.filterReset:hover .icon, .filterReset:focus .icon, .filterReset:active .icon {
  left: -50%;
}
.filterReset:hover:before, .filterReset:focus:before, .filterReset:active:before {
  left: 15px;
}

.filterBox__mobileButton {
  margin-bottom: 20px;
  display: flex;
  position: relative;
  border: 1px solid var(--main-color-middle-gray);
  border-radius: 25px;
  padding: 5px 10px 5px 35px;
  line-height: 24px;
}
.filterBox__mobileButton:before {
  content: var(--base-icon-filter);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 2rem;
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
}
@media (min-width: 768px) {
  .filterBox__mobileButton {
    display: none;
  }
}
.filterBox__filter .customSelect {
  width: 100%;
}
.filterBox__contentTitle {
  font-weight: var(--main-font-weight-bold);
  font-size: 1.9rem;
}
.filterBox__close {
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.filterBox__close i {
  display: block;
}
.filterBox__close:hover {
  background: var(--main-color-light-gray);
}
.filterBox__contentHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .filterBox__contentHeader {
    display: none;
  }
}
.filterBox__showHiddenFilters {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .filterBox__filter {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: scroll;
  }
}
@media (min-width: 768px) {
  .filterBox__filter .hiddenFilter {
    display: none;
  }
}
.filterBox__filter > .row {
  align-items: flex-start;
}
.filterBox__filter > .row > .filterBox__toggleFilterColumn {
  width: auto;
  display: none;
}
@media (min-width: 768px) {
  .filterBox__filter > .row > .filterBox__toggleFilterColumn {
    display: flex;
    align-items: center;
    min-height: 41px;
  }
}
@media (max-width: 767px) {
  .filterBox__buttons {
    flex-shrink: 0;
    padding-top: 10px;
  }
}
@media (max-width: 767px) {
  .filterBox__content {
    flex-direction: column;
    z-index: 104;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--main-color-white);
    max-height: 100%;
    padding: 20px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1019607843);
    translate: 0 110%;
    transition: 0.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .filterBox.is-active .filterBox__content {
    display: flex;
    translate: 0 0;
    pointer-events: auto;
    opacity: 1;
  }
}
.filterBox .button {
  min-width: 0;
}
.filterBox .button_row {
  margin-top: 0;
  margin-bottom: -10px;
}
.filterBox .button_row .button,
.filterBox .button_row .buttonLink,
.filterBox .button_row .buttonPrimary,
.filterBox .button_row .buttonAction {
  margin-top: 0;
  margin-bottom: 10px;
  min-width: 0;
}

.sortSelectColumn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.sortSelectColumn .inputGroup,
.sortSelectColumn .customSelect {
  width: auto;
  max-width: 100%;
  margin: 0;
}
.sortSelectColumn .sorting {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
}
.sortSelectColumn .sorting > label {
  font-size: 1.2rem;
  text-align: right;
}
@media (min-width: 768px) {
  .sortSelectColumn {
    min-height: 41px;
    flex-wrap: nowrap;
  }
}
@media (max-width: 767px) {
  .sortSelectColumn .customSelect__selected {
    width: 100%;
    display: flex;
  }
}

.filterSortLine {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .filterSortLine {
    margin-bottom: 30px;
  }
}

/*
Variantselection

Markup:
<div class="variantSelection">
  <a class="variantSelection__item" data-tooltip="Label">
    <img src="kss-assets/sample.png" alt="Text" />
  </a>
</div>

Styleguide Shop.Variantselection
*/
.variantSelection {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 5px;
}
.variantSelection__item {
  border: 2px solid var(--main-color-light-gray);
  border-radius: 15px;
  padding: 5px;
  display: flex;
}
.variantSelection__item:hover {
  border-color: var(--main-color-primary);
}
.variantSelection__item.is-active {
  border-color: var(--main-color-black);
}
.variantSelection__item img {
  aspect-ratio: 1;
  object-fit: contain;
}

.variantSelection {
  position: relative;
}
.variantSelection .swiper-button-prev,
.variantSelection .swiper-button-next {
  top: 50%;
  margin-top: -10px;
  color: var(--main-color-dark-gray);
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.variantSelection .swiper-button-prev:not(.swiper-button-disabled),
.variantSelection .swiper-button-next:not(.swiper-button-disabled) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.variantSelection .swiper-button-prev:not(.swiper-button-disabled):hover,
.variantSelection .swiper-button-next:not(.swiper-button-disabled):hover {
  color: var(--main-color-black);
}
.variantSelection .swiper-button-prev.swiper-button-disabled,
.variantSelection .swiper-button-next.swiper-button-disabled {
  display: none;
}
.variantSelection .swiper-button-prev {
  left: -20px;
}
@media (min-width: 1024px) {
  .variantSelection .swiper-button-prev {
    left: -30px;
  }
}
.variantSelection .swiper-button-next {
  right: -20px;
}
@media (min-width: 1024px) {
  .variantSelection .swiper-button-next {
    right: -30px;
  }
}
.variantSelection .swiper-slide {
  width: 90px;
}
.variantSelection .swiper {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.variantSelection .swiper:not(.swiper-initialized) .swiper-wrapper {
  grid-gap: 5px;
}

div:has(> .variantSelection) span {
  display: inline-flex;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-base);
  margin-bottom: 20px;
}
@media (max-width: 767.98px) {
  div:has(> .variantSelection) span {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.variantSelection {
  gap: 15px;
}
.variantSelection__item {
  background: var(--main-color-light-gray);
  width: 90px;
}
.variantSelection__item img {
  width: 100%;
  mix-blend-mode: multiply;
}
@media (max-width: 767.98px) {
  .variantSelection {
    gap: 10px;
  }
  .variantSelection .variantSelection__item {
    width: 70px;
  }
}

/*
Shop Attributes Icons

Markup:
<div class="attributesIcons">
    <div class="attributesIcons__img image">
        <img src="kss-assets/sample.png" alt="" width="70px" height="70px">
    </div>
    <div class="attributesIcons__img image">
        <img src="kss-assets/sample.png" alt="" width="70px" height="70px">
    </div>
</div>

Styleguide Shop.Attributes Icons
*/
.attributesIcons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 8px;
}
.attributesIcons__img {
  max-width: 40px;
}
@media (min-width: 768px) {
  .attributesIcons__img {
    max-width: 70px;
  }
}

.itemcardImagesGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px 40px;
}
@media (max-width: 1023.98px) {
  .itemcardImagesGrid {
    gap: 20px;
  }
}
@media (max-width: 767.98px) {
  .itemcardImagesGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}
.itemcardImagesGrid__item {
  background: var(--main-color-light-gray);
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 1;
  padding: 25px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--main-color-light-gray);
  transition: border-color 0.2s;
}
@media (max-width: 767.98px) {
  .itemcardImagesGrid__item {
    padding: 5px;
  }
}
@media (max-width: 767.98px) {
  .itemcardImagesGrid__item:not(.itemcardImagesGrid__item:first-child):after {
    display: none;
  }
}
.itemcardImagesGrid__item .itemcardImages__img {
  height: 100%;
}
.itemcardImagesGrid__item .itemcardImages__img img {
  mix-blend-mode: multiply;
  width: 100% !important;
  height: 100% !important;
}
.itemcardImagesGrid__item:first-child {
  grid-column: span 2;
}
@media (max-width: 767.98px) {
  .itemcardImagesGrid__item:first-child {
    grid-column: span 4;
  }
}
.itemcardImagesGrid__item:after {
  content: var(--base-icon-search);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 20px;
  color: var(--main-color-dark-gray);
  transition: all 0.2s;
  background: var(--main-color-light-gray);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemcardImagesGrid__item:hover, .itemcardImagesGrid__item:active, .itemcardImagesGrid__item:focus {
  cursor: pointer;
  border-color: var(--main-color-gray-base);
}
.itemcardImagesGrid__item:hover:after, .itemcardImagesGrid__item:active:after, .itemcardImagesGrid__item:focus:after {
  background: var(--main-color-gray-base);
}
@media (min-width: 768px) {
  .itemcardImagesGrid:has(> :last-child:nth-child(even)) .itemcardImagesGrid__item:last-child {
    grid-column: span 2;
    aspect-ratio: 2.1929;
  }
}

.itemcardMain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  margin-bottom: 150px;
}
@media (max-width: 1023.98px) {
  .itemcardMain {
    margin-bottom: 100px;
  }
}
@media (max-width: 767.98px) {
  .itemcardMain {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 50px;
  }
}

.itemcardHeaderAttributes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
}
@media (max-width: 1249.98px) {
  .itemcardHeaderAttributes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.itemcardHeaderAttributes > div {
  display: flex;
  gap: 8px;
  align-items: center;
}
.itemcardHeaderAttributes > div:before {
  content: var(--base-icon-star);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 1.4em;
}
.itemcardHeaderAttributes > [attributeId="5625"]:before {
  content: var(--base-icon-pen-light);
}
.itemcardHeaderAttributes > [attributeId="5626"]:before {
  content: var(--base-icon-badge-check);
}

.itemcardInformation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 190px;
  margin-bottom: 50px;
}
@media (max-width: 1249.98px) {
  .itemcardInformation {
    gap: 60px;
  }
}
@media (max-width: 1023.98px) {
  .itemcardInformation {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .itemcardInformation {
    gap: 30px;
  }
}
.itemcardInformation .itemcardDescriptions:nth-child(2) {
  outline: 2px dotted red;
}

.itemCardInfoIcon {
  display: inline-flex;
  top: 2.5px;
  position: relative;
}

.itemcardAttributesTable tr:first-child td {
  border-top: 0;
}
.itemcardAttributesTable tr:nth-child(even) {
  background: var(--main-color-light-gray);
}
.itemcardAttributesTable tr td {
  border-color: var(--main-color-black);
  padding: 4px 10px;
}
.itemcardAttributesTable tr td:first-child {
  border-right: 1px solid var(--main-color-black);
}
@media (max-width: 767.98px) {
  .itemcardAttributesTable {
    font-size: 14px;
  }
}

.itemcardCrossseller__wrapper:has(.itemcardCrossseller:empty) {
  display: none;
}

.itemcardCrossseller__wrapper {
  background: url("/userdata/images/basics/icons-muster-hintergrund.png") top left repeat;
  padding-block: 50px 100px;
}
.itemcardCrossseller .itemcardCrosssellerList:not(.itemcardCrossseller .itemcardCrosssellerList:first-child) {
  padding-top: 100px;
}

.itemcardBuybox__main {
  background: var(--main-color-light-gray);
  padding: 40px;
  border-radius: 15px;
}
.itemcardBuybox__main hr {
  border-color: var(--main-color-gray-base);
  border-width: 2px;
}
@media (max-width: 767.98px) {
  .itemcardBuybox__main {
    padding: 20px;
  }
}
.itemcardBuybox .enquiryButtonWrapper {
  display: flex;
  gap: 20px;
}
@media (max-width: 767.98px) {
  .itemcardBuybox .enquiryButtonWrapper .enquiryButton .icon {
    margin-right: -8px;
  }
  .itemcardBuybox .enquiryButtonWrapper .enquiryButton span {
    display: none;
  }
}
.itemcardBuybox .orderBox__wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.itemcardVariantSelector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.itemcardVariantSelector > span {
  font-weight: var(--main-font-weight-bold);
}
.itemcardVariantSelector .customSelect {
  width: auto;
}
@media (max-width: 767.98px) {
  .itemcardVariantSelector {
    gap: 5px;
  }
  .itemcardVariantSelector .customSelect {
    width: 100%;
  }
}

/*
Accountbox

Markup:
<div class="accountBox {{modifier_class}}">
    <div class="accountBox__header">
        <div class="accountBox__headline">
           <i class="icon icon-user"></i>
           Headline
        </div>
        <div class="accountBox__actions">
                <a href="#" class="actionIcon" title="">
                    <i class="icon icon-edit"></i>
                </a>
        </div>
    </div>
    <div class="accountBox__content">
        <div class="marginBottom"><small>Name</small><br>John Doe</div>
        <div class="marginBottom"><small>E-Mail</small><br>info@dc.ag</div>
    </div>
    <div class="accountBox__footer">
        <div class="accountBox__footerLeft">
            <button><i class="icon icon-delete"></i>Delete</button>
        </div>
    </div>
</div>
<div class="accountBox">
    <div class="accountBox__header">
        <div class="accountBox__headline">
           <i class="icon icon-user"></i>
           Headline
        </div>
        <div class="accountBox__headerButton">
            <a href="#" title="">
              Show All
            </a>
        </div>
    </div>
    <div class="accountBox__content">
        <div class="marginBottom"><small>Name</small><br>John Doe</div>
        <div class="marginBottom"><small>E-Mail</small><br>info@dc.ag</div>
    </div>
</div>

.accountBox--new - New

Styleguide Shop.Accountbox
*/
.gp.accountBox h3, .gp.accountBox .h3, .gp.accountBox .historyItem__heading, .accountBox__headline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  min-height: 30px;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-base);
  margin: 0;
}
.gp.accountBox h3 .icon, .gp.accountBox .h3 .icon, .gp.accountBox .historyItem__heading .icon, .accountBox__headline .icon {
  font-size: 1.4em;
  margin-right: 5px;
  font-weight: normal;
  width: 30px;
  text-align: center;
}

.accountBox {
  border: 1px solid var(--main-color-middle-gray);
  padding: 10px 20px 20px 20px;
  border-radius: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .accountBox {
    min-height: 120px;
  }
}
.accountBox__actions {
  margin-left: 20px;
  margin-right: -10px;
}
.accountBox__actions a, .accountBox__actions button {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--main-color-dark-gray);
  width: 30px;
  height: 30px;
  display: flex;
  align-content: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  flex-wrap: wrap;
  line-height: 1;
}
.accountBox__actions a:hover, .accountBox__actions button:hover {
  color: var(--main-color-black);
}
.accountBox__actions a:not(:last-child), .accountBox__actions button:not(:last-child) {
  margin-bottom: 10px;
}
.accountBox__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.accountBox__headerButton {
  font-size: var(--main-font-size-small);
}
.accountBox__content {
  flex-grow: 1;
}
.accountBox__content small {
  color: var(--main-color-dark-gray);
}
.accountBox__content .marginBottom:last-child, .accountBox__content .algoliaSearchLayout:last-child {
  margin-bottom: 0;
}
.accountBox__footer {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--main-color-dark-gray);
}
.accountBox__footer a,
.accountBox__footer button {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--main-font-size-small);
  color: var(--main-color-dark-gray);
}
.accountBox__footer a:hover,
.accountBox__footer button:hover {
  color: var(--main-color-black);
}
.accountBox--new {
  text-align: center;
  height: 100%;
  color: var(--main-color-dark-gray);
  font-size: var(--main-font-size-base);
  cursor: pointer;
}
.accountBox--new:hover {
  color: var(--main-color-black);
}
.accountBox--new .accountBox__content {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.accountBox--new .accountBox__content .icon {
  font-size: 40px;
}

a.accountBox {
  color: var(--main-color-black);
  text-decoration: none;
}
a.accountBox:hover {
  text-decoration: none;
  border-color: var(--main-color-primary);
}

.gp.accountBox:hover {
  border-color: var(--main-color-primary);
}
.gp.accountBox > .link {
  text-decoration: none;
  color: var(--main-color-black);
}
.gp.accountBox > .link:hover {
  text-decoration: none;
}
.gp.accountBox h3, .gp.accountBox .h3, .gp.accountBox .historyItem__heading {
  margin-bottom: 10px;
}

.accountBoxForm {
  width: 100%;
  display: flex;
}

/*
Account Infobox

Markup:
<div class="accountInfoBox">
    <div class="accountInfoBox__icon">MM</div>
    <div class="accountInfoBox__name">Max Mustermann</div>
    <div class="accountInfoBox__company">dc AG</div>
    <div class="accountInfoBox__links">
        <a href="#">
            Label
        </a>
        <a href="#">
            Label
        </a>
    </div>
</div>

Styleguide Shop.Account Infobox
*/
.accountInfoBox {
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  grid-template-columns: auto 1fr;
  grid-template-areas: "accountInfoBoxIcon accountInfoBoxName" "accountInfoBoxIcon accountInfoBoxCompany" "accountInfoBoxIcon accountInfoBoxLinks";
}
.accountInfoBox__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7de;
  color: #212522;
  font-size: 2.6rem;
  grid-area: accountInfoBoxIcon;
}
.accountInfoBox__name {
  grid-area: accountInfoBoxName;
  font-weight: var(--main-font-weight-bold);
  font-size: 1.8rem;
}
.accountInfoBox__company {
  grid-area: accountInfoBoxCompany;
}
.accountInfoBox__links {
  grid-area: accountInfoBoxLinks;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.itemSharing__item {
  margin-top: 10px;
}
.itemSharing__btn {
  position: relative;
  padding-left: 24px;
  display: inline-block;
  cursor: pointer;
  color: var(--main-color-black);
}
.itemSharing__btn .icon {
  text-align: center;
  font-size: 1.2em;
  color: var(--main-color-primary);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.itemSharing__btn:hover {
  color: var(--main-link-color-hover);
}

/*
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
*/
.salesPersonBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: var(--main-font-size-small);
  padding: 20px;
}
.salesPersonBox__img {
  margin-bottom: 20px;
  border-radius: 50%;
  overflow: hidden;
  width: 80px;
  margin-left: auto;
  margin-right: auto;
  background: var(--main-color-light-gray);
}
@media (min-width: 768px) {
  .salesPersonBox__img {
    width: 100px;
  }
}
.salesPersonBox__img img {
  object-fit: cover;
  height: 80px !important;
}
@media (min-width: 768px) {
  .salesPersonBox__img img {
    height: 100px !important;
  }
}
.salesPersonBox__position {
  margin-bottom: 10px;
  flex-grow: 1;
}
.salesPersonBox h3, .salesPersonBox .h3, .salesPersonBox .historyItem__heading {
  margin-bottom: 20px;
}
.salesPersonBox__name {
  font-weight: var(--main-font-weight-bold);
}
.salesPersonBox__contact a {
  margin-bottom: 5px;
  hyphens: auto;
  display: block;
}
.salesPersonBox__contact a .icon {
  position: relative;
  top: 2px;
}
.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;
}

.customerMapSearch {
  position: relative;
}
.customerMapSearch__bar {
  position: relative;
}
.customerMapSearch__bar:before {
  content: var(--base-icon-loading);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: rotation 1s infinite ease-in-out;
  display: none;
}
.customerMapSearch__suggestion {
  cursor: pointer;
  padding: 10px 20px;
  font-size: var(--main-font-size-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customerMapSearch__suggestion:not(:first-child) {
  border-top: 1px solid var(--main-color-light-gray);
}
.customerMapSearch__suggestion:hover, .customerMapSearch__suggestion:focus, .customerMapSearch__suggestion:active {
  background: var(--main-color-light-gray);
}
.customerMapSearch__suggestions {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 3;
  background: var(--main-color-white);
  border-radius: 15px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}
.customerMapSearch.is-loading .customerMapSearch__bar {
  pointer-events: none;
  opacity: 0.5;
}
.customerMapSearch.is-loading .customerMapSearch__bar:before {
  display: flex;
}

.js-itemBasketList.is-loading,
.js-basketOrderBox.is-loading {
  cursor: wait;
  pointer-events: none;
}
.js-itemBasketList.is-loading input,
.js-itemBasketList.is-loading .quantity,
.js-basketOrderBox.is-loading input,
.js-basketOrderBox.is-loading .quantity {
  opacity: 0.5;
}

@media (min-width: 768px) {
  .iconbarHover--basket {
    width: 380px;
  }
}
.iconbarHover--basket .iconbarHover__footer .amountLines {
  margin-bottom: 20px;
}
.iconbarHover--basket .itemBasketBox {
  font-size: var(--main-font-size-small);
  grid-gap: 10px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxPrice" "itemBasketBoxImg itemBasketBoxActions itemBasketBoxActions";
}
.iconbarHover--basket .itemBasketBox__img {
  width: 60px;
}
.iconbarHover--basket .itemBasketBox__description {
  font-size: inherit;
}
.iconbarHover--basket .itemBasketBox .linkWithIcon {
  font-size: var(--main-font-size-small);
}

.itemBasketBox {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--main-color-middle-gray);
  color: var(--main-color-black);
  text-decoration: 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__img {
  flex-shrink: 0;
  grid-area: itemBasketBoxImg;
}
.itemBasketBox__img .image img, .itemBasketBox__img .imageCover img {
  aspect-ratio: 4/3;
}
.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;
}
.itemBasketBox__price .basePrice, .itemBasketBox__sumPrice .basePrice {
  font-weight: var(--main-font-weight);
}
.itemBasketBox__price {
  grid-area: itemBasketBoxPrice;
}
.itemBasketBox__sumPrice {
  grid-area: itemBasketBoxSumPrice;
}
.itemBasketBox__actions {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  grid-area: itemBasketBoxActions;
}
.itemBasketBox__quantityWrapper {
  display: flex;
}
.itemBasketBox__quantity {
  grid-area: itemBasketBoxQuantity;
}
.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-gray-base);
  font-size: 1.3rem;
  margin-bottom: 5px;
}
.itemBasketBox .inventoryShippingInfo {
  display: none;
}
.itemBasketBox--header {
  color: var(--main-color-dark-gray);
  font-size: var(--main-font-size-small);
}

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: "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: 130px;
}
.itemBasketBox__price {
  text-align: right;
}
.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: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxInventory" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxPrice itemBasketBoxPrice itemBasketBoxPrice";
  }
  .itemBasketBox__addon {
    align-self: center;
  }
  .itemBasketBox__price {
    text-align: left;
  }
  .itemBasketBox__sumPrice {
    width: 130px;
  }
}
@container containerBasketList (min-width: 650px) {
  .itemBasketBox {
    grid-template-columns: auto 1fr repeat(4, auto);
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxInventory itemBasketBoxInventory";
  }
  .itemBasketBox__price {
    width: 130px;
    text-align: right;
  }
  .itemBasketBox__sumPrice {
    text-align: right;
  }
  .itemBasketBox--header {
    display: grid;
  }
  .itemBasketBox--header .itemBasketBox__inventory {
    display: none;
  }
}
@container containerBasketList (min-width: 800px) {
  .itemBasketBox {
    grid-template-columns: auto 1fr repeat(5, auto);
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInventory itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
  .itemBasketBox__inventory {
    width: 130px;
  }
  .itemBasketBox--header .itemBasketBox__inventory {
    display: block;
  }
}

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

/*
Quantity Spinner

Markup:
<div class="quantity">
    <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
    <div class="quantity__spinner">
        <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
            <i class="icon icon-spinner-up"></i>
        </div>
        <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
            <i class="icon icon-spinner-down"></i>
        </div>
    </div>
</div>

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

Styleguide Shop.Quantity Spinner
*/
.quantity {
  display: flex;
  flex-shrink: 0;
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  max-width: 130px;
}
.quantity input {
  flex-grow: 1;
  text-align: center;
  padding: 0;
  line-height: 30px;
  border-radius: 0;
  border: 0;
  background: transparent;
  padding-inline: 5px;
}
.quantity__spinnerItem {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid var(--main-color-black);
  border-radius: 50%;
  background: transparent;
  width: 30px;
  height: 30px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.quantity__spinnerItem:hover, .quantity__spinnerItem:focus, .quantity__spinnerItem:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}
.quantity__spinnerItem .icon {
  display: block;
}
.quantity__spinnerItem .icon:before {
  line-height: 1;
}
.quantity__spinnerItem--up {
  right: 0;
}
.quantity__spinnerItem--down {
  left: 0;
}
.quantity--inactive {
  opacity: 0.5;
}
.quantity--inactive .quantity__spinnerItem {
  cursor: not-allowed;
  pointer-events: none;
}

#enquiry_order_address_form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
#enquiry_order_address_form > * {
  grid-column: span 6;
}
#enquiry_order_address_form .enquiry__salutation_spacer, #enquiry_order_address_form .enquiry__surname, #enquiry_order_address_form .enquiry__lastname {
  grid-column: span 3;
}
#enquiry_order_address_form .enquiry__user_street, #enquiry_order_address_form .enquiry__city {
  grid-column: span 4;
}
#enquiry_order_address_form .enquiry__user_street_no, #enquiry_order_address_form .enquiry__post_code {
  grid-column: span 2;
}
#enquiry_order_address_form button {
  grid-column: span 3;
}

.itembox {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--main-color-light-gray);
  transition: 0.2s ease-in-out;
  border: 4px solid var(--main-color-light-gray);
  border-radius: 15px;
  overflow: hidden;
  font-size: 1.4rem;
}
.itembox:hover, .itembox:focus, .itembox:active {
  border-color: var(--main-color-middle-gray);
}
.itembox__badges {
  position: absolute;
  top: 0;
  left: 0;
  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 .actionIcon {
  background: transparent;
}
.itembox__actions .actionIcon .icon {
  background: transparent;
}
.itembox__name {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-weight: var(--main-font-weight-bold);
}
@media (min-width: 768px) {
  .itembox__name {
    font-size: var(--main-font-size-base);
  }
}
.itembox__prices {
  margin-top: 20px;
}
.itembox__prices .pricesList {
  font-size: 1.4rem;
  margin-left: -7px;
  margin-right: -7px;
}
.itembox__prices .pricesList label {
  font-size: 0.8em;
}
.itembox__prices .pricesList .price {
  padding-left: 7px;
  padding-right: 7px;
  min-width: 0;
}
.itembox__prices .priceBox {
  gap: 5px 10px;
  justify-content: flex-start;
  align-items: baseline;
  text-align: left;
}
.itembox__prices .priceBox__discount {
  width: 42px;
}
.itembox__prices .priceBox__basePrice {
  width: calc(100% - 52px);
}
.itembox__prices .priceBox__actionPrice {
  width: auto;
  font-size: 1.8rem;
}
.itembox__prices .priceBox__addon {
  width: auto;
}
.itembox__prices .priceListGraduated {
  margin-top: 10px;
}
@media (max-width: 767px) {
  .itembox__prices .priceListGraduated {
    display: none;
  }
}
.itembox__image {
  padding: 20px;
  padding-bottom: 0;
}
.itembox__image img {
  aspect-ratio: 4/3;
  width: 100%;
  display: block;
  mix-blend-mode: multiply;
}
.itembox__head {
  overflow: hidden;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.itembox__content {
  flex-grow: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .itembox__content {
    padding: 20px;
  }
  .itembox__content:not(:last-child) {
    padding-bottom: 10px;
  }
}
.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__itemno {
  color: var(--main-color-dark-gray);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.itembox__itemno .icon {
  font-size: 20px;
  line-height: 1;
}
.itembox__itemno .icon:before {
  line-height: 1;
  display: block;
}
.itembox .inventoryWrapper {
  font-size: 1em;
  color: var(--main-color-dark-gray);
}
.itembox .orderButtonWrapper {
  justify-content: space-between;
}
.itembox .orderButtonWrapper + .inventoryWrapper {
  margin-top: 10px;
}
.itembox .orderButtonWrapper .orderButton {
  padding: 0;
  flex-grow: 0;
  width: 38px;
  height: 38px;
}
@media (min-width: 1024px) {
  .itembox .orderButtonWrapper .orderButton {
    width: 50px;
    height: 50px;
  }
}
.itembox .orderButtonWrapper .orderButton span {
  display: none;
}
.itembox .orderButtonWrapper .orderButton i {
  position: static;
  transform: none;
  margin: 0;
}
@media (max-width: 767px) {
  .itembox .orderButtonWrapper .quantity {
    flex-shrink: 1;
  }
}

.itemboxList {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  max-width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 768px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
@media (min-width: 1024px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
@media (min-width: 1250px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (min-width: 1540px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (min-width: 1024px) {
  .itemboxList {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
}

.itembox__badges {
  left: auto;
  right: 0;
}
.itembox__badges .promotion {
  clip-path: url(#clipPathPromotionFlipped);
  justify-content: flex-end;
}

.itemboxList.swiper {
  max-width: 1620px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  padding-left: 10px;
  padding-right: 10px;
}
.itemboxList.swiper > .swiper-wrapper > * {
  display: flex;
  height: auto;
  padding: 10px;
}
.itemboxList.swiper .swiper-button-prev,
.itemboxList.swiper .swiper-button-next {
  display: none;
}
.itemboxList.swiper .swiper-slide:not(.swiper-slide-visible) {
  opacity: 0;
}
.itemboxList.swiper.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
  width: 45.4545454545%;
}
@media (min-width: 768px) {
  .itemboxList.swiper.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
    width: 33.3333333333%;
  }
}
@media (min-width: 1024px) {
  .itemboxList.swiper.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
    width: 25%;
  }
}
@media (min-width: 1540px) {
  .itemboxList.swiper.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
    width: 20%;
  }
}

/*
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 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;
  line-height: 1;
}
@media (min-width: 768px) {
  .inventoryWrapper {
    font-size: var(--main-font-size-small);
  }
}

.headerLogo {
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .headerLogo {
    text-align: center;
  }
}
.headerLogo img {
  display: block;
}
@media (max-width: 1249px) {
  .headerLogo img {
    width: 160px !important;
  }
}

.headerTopLeft {
  display: none;
}
@media (min-width: 768px) {
  .headerTopLeft {
    display: flex;
    align-items: center;
  }
}
.headerTopLeft .trustList {
  margin-left: -10px;
  margin-right: -10px;
}
.headerTopLeft .trustList li {
  padding-left: 10px;
  padding-right: 10px;
}
.headerTopLeft .trustList a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.headerTopRight {
  display: none;
}
@media (min-width: 768px) {
  .headerTopRight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }
}

.headerTopCenter {
  text-align: center;
}
@media (max-width: 1023px) {
  .headerTopCenter {
    display: none;
  }
}
@media (max-width: 767px) {
  .headerTopCenter {
    display: block;
  }
}

.headerTop {
  background: var(--main-color-white);
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 1.3rem;
  line-height: 20px;
}
@media (min-width: 768px) {
  .headerTop {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.headerTop .container {
  max-width: 1740px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.headerTop .container > * {
  width: 33.3333333333%;
  flex-grow: 1;
}
.headerTop .customSelect__selected {
  font-size: 1.3rem;
  line-height: 1;
}
.headerTop .iconbarHover {
  color: var(--main-color-black);
}
.headerTop a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.headerTop a:hover, .headerTop a:focus, .headerTop a:active {
  color: var(--main-color-primary);
  text-decoration: none;
}

.headerMainTop {
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
  background: var(--main-color-light-gray);
  z-index: 2;
}
@media (min-width: 768px) {
  .headerMainTop {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (min-width: 1024px) {
  .headerMainTop {
    padding-top: 37px;
    padding-bottom: 37px;
  }
}
.headerMainTop .headerSearch {
  grid-area: search;
  border-radius: 15px;
  overflow: hidden;
}
.headerMainTop .headerSearch form {
  width: 100%;
}
@media (max-width: 1023px) {
  .headerMainTop .headerSearch {
    /*no Algolia*/
    /*
    display:none;
    position: absolute;
    background: $white;
    top: 100%;
    border-radius: 50%;
    width: calc(100% - 20px);
    left: 10px;
    margin-top: 10px;
    */
  }
  .headerMainTop .headerSearch:has(.algoliaAutocompleteTrigger) {
    position: fixed;
    top: 100%;
    z-index: 2;
  }
  .headerMainTop .headerSearch:has(.algoliaAutocompleteTrigger) .algoliaAutocompleteTrigger {
    opacity: 0;
  }
}
.headerMainTop .headerSearch--minimal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
@media (min-width: 1250px) {
  .headerMainTop .headerSearch--minimal {
    display: none;
  }
}
@media (max-width: 1249.98px) {
  .headerMainTop .headerSearch {
    display: none;
  }
}
.headerMainTop .headerNavToggler {
  grid-area: navtoggle;
  display: flex;
}
.headerMainTop .headerLogo {
  grid-area: logo;
}
.headerMainTop .headerAccountButtons .textcontent {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1540px) {
  .headerMainTop .headerAccountButtons .textcontent {
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .headerMainTop .headerAccountButtons .button {
    aspect-ratio: 1;
    width: 32px;
    height: 32px;
    min-height: 0;
    line-height: 32px;
    padding: 0;
  }
  .headerMainTop .headerAccountButtons .button span {
    display: none;
  }
  .headerMainTop .headerAccountButtons .button .icon {
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
  }
}
.headerMainTop .headerAccount {
  grid-area: account;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1540px) {
  .headerMainTop .headerAccount {
    gap: 40px;
  }
}
.headerMainTop .headerAccount .iconbar {
  width: 100%;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .headerMainTop .headerAccount .iconbar {
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .headerMainTop .headerAccount .iconbar .iconbarIcon {
    gap: 10px;
    flex-direction: column;
  }
}
.headerMainTop .headerAccount .iconbar .iconbarIcon__label {
  font-size: var(--main-font-size-base);
}
@media (max-width: 1539px) {
  .headerMainTop .headerAccount .iconbar .iconbarIcon__label {
    font-size: 1.6rem;
  }
}
@media (max-width: 767px) {
  .headerMainTop .headerAccount .iconbar .iconbarIcon__icon {
    background: var(--main-color-white);
    border-radius: 50%;
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .headerMainTop .headerAccount .iconbar .iconbarIcon__count {
    top: -5px;
    left: 50%;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    font-size: 0.9rem;
  }
}
.headerMainTop .headerAccount .iconbar .button .button--primary {
  color: var(--main-color-white);
}
.headerMainTop .headerAccount .iconbar .button .button--primary .icon {
  background: var(--main-color-light-gray);
}
@media (max-width: 767px) {
  .headerMainTop .headerAccount .iconbar .button {
    background: transparent;
    font-size: 1.2rem;
    color: var(--main-color-black);
    border: 0;
    flex-direction: column;
    gap: 10px;
  }
  .headerMainTop .headerAccount .iconbar .button .icon {
    order: -1;
    width: 30px;
    height: 30px;
    font-size: 2rem;
    color: var(--main-color-black);
    margin: 0;
  }
  .headerMainTop .headerAccount .iconbar .button--primary .icon {
    background: var(--main-color-primary);
    color: var(--main-color-white);
  }
}
@media (max-width: 767px) {
  .headerMainTop .headerAccount {
    flex-grow: 1;
    width: 100%;
  }
}
.headerMainTop .headerSearchMobileToggle {
  font-size: 2.8rem;
  width: 32px;
  height: 32px;
  text-decoration: none;
  background: transparent;
  grid-area: searchMobile;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.headerMainTop .headerSearchMobileToggle:hover, .headerMainTop .headerSearchMobileToggle:focus, .headerMainTop .headerSearchMobileToggle:active, .headerMainTop .headerSearchMobileToggle.is-active {
  background: var(--main-color-white);
  text-decoration: none;
}
.headerMainTop .headerSearchMobileToggle .icon {
  display: block;
}
.headerMainTop .headerSearchMobileToggle .icon:before {
  display: block;
  line-height: 1;
}
.headerMainTop > .container {
  max-width: 1740px;
  display: grid;
  align-items: center;
  gap: 15px;
  grid-template-columns: 32px 1fr 32px auto;
  grid-template-rows: auto;
  grid-template-areas: "navtoggle logo searchMobile account";
}
@media (min-width: 768px) {
  .headerMainTop > .container {
    gap: 0 20px;
    grid-template-columns: 40px 1fr 40px auto;
    grid-template-areas: "navtoggle logo searchMobile account";
  }
}
@media (min-width: 1024px) {
  .headerMainTop > .container {
    grid-template-columns: 200px 40px 1fr auto;
    grid-template-areas: "logo navtoggle search account";
  }
}
@media (min-width: 1250px) {
  .headerMainTop > .container {
    grid-template-columns: 200px 1fr 360px 1fr;
    grid-template-areas: "logo navtoggle search account";
  }
}
@media (min-width: 1540px) {
  .headerMainTop > .container {
    gap: 0 40px;
    grid-template-columns: 270px 1fr 400px 1fr;
  }
}

.headerMain {
  position: relative;
}
@media (max-width: 1249px) {
  .headerMain .headerMainNavigation {
    display: none;
  }
}
.headerMain .searchBar {
  width: 100%;
}
.headerMain .headerMainTop {
  border-radius: 0 0 15px 15px;
  transition: 0.2s ease;
}
.headerMain.showMainNavigation .headerMainTop {
  border-radius: 0;
}
.headerMain.showMainNavigation .headerMainNavigation {
  bottom: -51.04px;
}

.headerMainNavigation {
  border-top: 1px solid var(--main-color-gray-base);
  position: absolute;
  width: 100%;
  bottom: 0;
  background: var(--main-color-light-gray);
  border-radius: 0 0 15px 15px;
  z-index: 1;
  transition: 0.2s ease;
}
.headerMainNavigation > .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1740px;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .headerMainNavigation > .container {
    flex-wrap: nowrap;
  }
}
.headerMainNavigation:has(.hoverintent) {
  border-radius: 0;
}

.headerMain.sticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

header:has(.headerMain.sticky) .headerTop {
  display: none;
}

#header {
  z-index: 2;
}

.headerEnquiryBasket {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1249.98px) {
  .headerEnquiryBasket {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .headerEnquiryBasket .iconbarIcon__icon {
    background: transparent !important;
    font-size: 28px !important;
  }
}

.footerInfo {
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .footerInfo {
    margin-bottom: 30px;
  }
}
@media (min-width: 1250px) {
  .footerInfo {
    margin-bottom: 90px;
  }
}

.footerMainNavigation {
  margin-bottom: 30px;
}
@media (min-width: 1250px) {
  .footerMainNavigation {
    margin-bottom: 90px;
  }
}
@media (min-width: 1338px) {
  .footerMainNavigation .navgroup:not(.footerNavShop) > ul {
    gap: 40px;
  }
  .footerMainNavigation .navgroup:not(.footerNavShop) > ul > li {
    width: auto;
  }
}
.footerMainNavigation .navgroup > ul > li:hover > a, .footerMainNavigation .navgroup > ul li:focus > a, .footerMainNavigation .navgroup > ul li:active > a {
  color: var(--main-color-black);
  cursor: text;
}
.footerMainNavigation .navgroup > ul > li:hover > a:hover, .footerMainNavigation .navgroup > ul > li:hover > a:focus, .footerMainNavigation .navgroup > ul > li:hover > a:active, .footerMainNavigation .navgroup > ul li:focus > a:hover, .footerMainNavigation .navgroup > ul li:focus > a:focus, .footerMainNavigation .navgroup > ul li:focus > a:active, .footerMainNavigation .navgroup > ul li:active > a:hover, .footerMainNavigation .navgroup > ul li:active > a:focus, .footerMainNavigation .navgroup > ul li:active > a:active {
  color: var(--main-color-black) !important;
}
@media (max-width: 1250px) {
  .footerMainNavigation .navgroup > ul > li {
    width: 50%;
  }
}
@media (max-width: 1023.98px) {
  .footerMainNavigation .navgroup > ul > li {
    width: 100%;
  }
}

.footerClaim {
  font-size: 4rem;
  text-transform: uppercase;
  color: var(--main-color-primary);
  font-weight: var(--main-font-weight-black);
  text-align: center;
  font-family: "Amatic SC";
  line-height: 1;
}
@media (min-width: 768px) {
  .footerClaim {
    font-size: 5rem;
  }
}
@media (min-width: 1024px) {
  .footerClaim {
    font-size: 6rem;
  }
}
@media (min-width: 1250px) {
  .footerClaim {
    font-size: 6rem;
  }
}
@media (min-width: 1540px) {
  .footerClaim {
    font-size: 7rem;
  }
}
@media (max-width: 767px) {
  .footerClaim {
    order: 1;
    margin-top: 5px;
  }
}

@media (max-width: 767px) {
  .footerSocial .iconList {
    justify-content: flex-end;
  }
}
@media (min-width: 768px) {
  .footerSocial .iconList {
    padding-left: 30px;
  }
}

.footerTop {
  background: var(--main-color-light-gray);
  padding-top: 30px;
  padding-bottom: 30px;
}

.footerMain {
  background: var(--main-color-light-gray);
  padding-top: 44px;
  padding-bottom: 30px;
  border-radius: 15px 0 0 15px;
}
@media (min-width: 1024px) {
  .footerMain {
    padding-top: 100px;
    padding-bottom: 80px;
  }
}

.footerBottom {
  font-size: 1.4rem;
  padding-top: 25px;
  border-top: 1px solid var(--main-color-light-gray);
}
@media (min-width: 768px) {
  .footerBottom {
    font-size: 1.6rem;
  }
}
.footerBottom .container {
  max-width: 1740px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footerBottom .footerBottomLeft,
.footerBottom .footerBottomRight {
  margin-bottom: 25px;
}
@media (max-width: 767px) {
  .footerBottom .nav ul {
    gap: 5px 10px;
  }
  .footerBottom .footerBottomLeft {
    margin: 0;
  }
  .footerBottom .footerBottomRight {
    order: -1;
    margin-bottom: 20px;
    flex-grow: 0;
  }
}

#stickyContact {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 10vh;
  right: 10px;
  z-index: 1;
  align-items: flex-end;
  flex-direction: row-reverse;
  gap: 10px;
}
@media (min-width: 768px) {
  #stickyContact {
    gap: 20px;
  }
}
@media (min-width: 1250px) {
  #stickyContact {
    bottom: 33.3333333333vh;
  }
}
@media (min-width: 1540px) {
  #stickyContact {
    right: 36px;
    gap: 40px;
  }
}
#stickyContact > .textcontent:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--main-color-white);
  border-radius: 50%;
  box-shadow: 0 0 9.6px 1px rgba(0, 0, 0, 0.2);
  padding: 12px;
  flex-shrink: 0;
}
#stickyContact > .textcontent:nth-child(1) .icon {
  font-size: 28px;
  display: none;
  color: var(--main-color-secondary);
}
@media (min-width: 768px) {
  #stickyContact > .textcontent:nth-child(1) {
    width: 60px;
    height: 60px;
  }
  #stickyContact > .textcontent:nth-child(1) .icon {
    font-size: 28px;
  }
}
@media (min-width: 1540px) {
  #stickyContact > .textcontent:nth-child(1) {
    width: 90px;
    height: 90px;
  }
  #stickyContact > .textcontent:nth-child(1) .icon {
    font-size: 52px;
  }
}
#stickyContact > .textcontent:nth-child(2) {
  display: none;
  background: var(--main-color-white);
  border-radius: 15px;
  bottom: 0;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 0 9.6px 1px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767.98px) {
  #stickyContact > .textcontent:nth-child(2) {
    margin-left: 20px;
  }
}
@media (min-width: 768px) {
  #stickyContact > .textcontent:nth-child(2) {
    width: 350px;
  }
}
#stickyContact.is-active > .textcontent:nth-child(1) .lottieContainer {
  display: none;
}
#stickyContact.is-active > .textcontent:nth-child(1) .icon {
  display: flex;
}
#stickyContact.is-active > .textcontent:nth-child(2) {
  display: block;
}
#stickyContact:hover > .textcontent:nth-child(1) {
  background: #FFE9DD;
  cursor: pointer;
}

.mobileMenu {
  position: fixed;
  top: 0;
  width: 320px;
  height: 100%;
  height: 100svh;
  z-index: 105;
  background-color: var(--main-color-white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  right: -340px;
  opacity: 0;
  transition: 0.2s ease-in-out;
  pointer-events: none;
}
.mobileMenu__close {
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
}
.mobileMenu__header {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px 0 30px;
  height: 45px;
}
.mobileMenu__subHeader {
  margin-bottom: 20px;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}
.mobileMenu__backLink {
  justify-content: flex-start !important;
  margin-bottom: 20px;
  font-size: var(--main-font-size-small);
  display: inline-flex !important;
}
.mobileMenu__backLink:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-left);
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobileMenu__seperator {
  height: 1px;
  width: 100%;
  background: var(--main-color-gray-base);
  display: block;
}
.mobileMenu__navigation a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--main-color-black);
  padding: 10px 0;
}
.mobileMenu__navigation a:hover, .mobileMenu__navigation a:focus, .mobileMenu__navigation a:active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.mobileMenu__navigation li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.mobileMenu__navigation li.is-active > a, .mobileMenu__navigation li.is-active_tree > a {
  font-weight: var(--main-font-weight-bold);
}
.mobileMenu__navigation ul {
  margin: 0;
  padding: 15px 20px 15px 30px;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: var(--main-color-white);
  transition: 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.mobileMenu__navigation > ul {
  left: 0;
  opacity: 1;
  pointer-events: auto;
  position: static;
  height: auto;
}
.mobileMenu__navigation li.hasChildren > a:after {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-right);
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobileMenu__navigation li.hasChildren.is-open {
  overflow: hidden;
}
.mobileMenu__navigation li.hasChildren.is-open > ul {
  pointer-events: auto;
  opacity: 1;
  left: 0;
  z-index: 1;
  overflow-y: auto;
}
.mobileMenu__navigation--main > ul > li > a {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}
.mobileMenu__section {
  border-top: 1px solid var(--main-color-gray-base);
  padding: 30px 20px 30px 30px;
}
.mobileMenu__body {
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 45px);
  max-height: calc(100dvh - 45px);
  max-height: calc(100svh - 45px);
  overflow-y: auto;
  padding: 0;
  width: 100%;
  flex-grow: 1;
}
.mobileMenu__body:has(li.hasChildren.is-open) {
  max-height: none;
  overflow-y: hidden;
}
.mobileMenu.is-open {
  right: 0;
  opacity: 1;
  pointer-events: auto;
}
.mobileMenu .searchBar--small {
  max-width: none;
}

body.is-mobilemenuopen {
  overflow: hidden;
}

@media print {
  a[href]:after {
    content: none !important;
  }
}
@media (max-width: 1249.98px) {
  .algoliaAutocomplete__wrapper {
    padding-top: 100px;
  }
}
@media (max-width: 1023.98px) {
  .algoliaAutocomplete__wrapper {
    padding-top: 0;
  }
}
.algoliaAutocomplete__layout {
  width: 100%;
  flex-direction: column;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(auto, 420px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header" "content content";
  column-gap: 45px;
}
@media (max-width: 1539px) {
  .algoliaAutocomplete__layout {
    grid-template-columns: minmax(auto, 300px) 1fr;
    column-gap: 30px;
  }
}
@media (max-width: 1249px) {
  .algoliaAutocomplete__layout {
    grid-template-columns: auto 1fr;
  }
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__layout {
    grid-template-columns: 1fr;
    padding: 0;
    grid-template-areas: "header" "content";
  }
}
.algoliaAutocomplete__header {
  position: sticky;
  top: 0;
  background: var(--main-color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  grid-area: header;
}
.algoliaAutocomplete__controls {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-bottom: 20px;
}
@media (max-width: 767px) {
  .algoliaAutocomplete__controls {
    justify-content: unset;
  }
}
.algoliaAutocomplete__content {
  grid-area: content;
  display: flex;
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__content {
    gap: 30px;
    padding: 24px;
    flex-direction: column;
    overflow-x: hidden;
    flex-wrap: nowrap;
    margin-bottom: 100px;
  }
}
.algoliaAutocomplete__side {
  padding-right: 45px;
  width: 20%;
  flex-shrink: 0;
}
.algoliaAutocomplete__side:empty {
  display: none;
}
@media (max-width: 1539px) {
  .algoliaAutocomplete__side {
    padding-right: 30px;
  }
}
@media (max-width: 1249px) {
  .algoliaAutocomplete__side {
    width: 25%;
  }
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__side {
    padding-right: 0;
    border-right: none;
    width: 100%;
    margin-top: 0;
    min-width: unset;
  }
}
.algoliaAutocomplete__results {
  flex-grow: 1;
  width: 80%;
}
.algoliaAutocomplete__results:empty {
  display: none;
}
@media (max-width: 1249px) {
  .algoliaAutocomplete__results {
    width: 75%;
  }
}
@media (max-width: 1023px) {
  .algoliaAutocomplete__results {
    margin-top: 0;
    height: 100%;
    width: 100%;
  }
}
.algoliaAutocomplete .searchBar__dummy {
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.algoliaAutocompletePanel .itembox__name {
  display: block;
}
.algoliaAutocompletePanel .itembox__name mark {
  background-color: var(--main-color-secondary);
  color: var(--main-color-white);
  padding: 1px 2px;
  border-radius: 2px;
  display: inline !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.algoliaCategories {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 16px;
}
@media (max-width: 1023px) {
  .algoliaCategories {
    flex-direction: row;
    overflow-x: auto;
    margin: 0 -40px;
    padding: 0 40px;
    scroll-padding-left: 40px;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
  }
}
.algoliaCategories__item {
  display: flex;
  margin: 0;
}
.algoliaCategories__item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 16px;
  font-size: var(--main-font-weight-bold);
}
.algoliaCategories__item img {
  display: inline-flex;
  width: 55px;
  height: 55px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100%;
}
.algoliaCategories__item span {
  display: inline-flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .algoliaCategories__item {
    display: inline-flex;
    width: auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .algoliaCategories__item:has(img) {
    padding-right: 55px;
  }
  .algoliaCategories__item a {
    display: inline-flex;
  }
}

.algoliaAutocompleteProducts {
  padding-left: 0;
}
.algoliaAutocompleteProducts li {
  margin-bottom: 0;
}

.algoliaAutocompleteForm {
  max-width: 630px;
  flex-grow: 1;
  width: 100%;
  gap: 12px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.algoliaAutocompleteForm.is-loaded {
  opacity: 1;
}
.algoliaAutocompleteForm__input {
  padding-right: 50px;
  padding-left: 12px;
}
.algoliaAutocompleteForm__clear {
  position: absolute;
  right: 0;
  border: none;
  background: transparent;
}
.algoliaAutocompleteForm__submit, .algoliaAutocompleteForm__clear {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 0;
  padding: 0 10px 0;
}
.algoliaAutocompleteForm__submit i, .algoliaAutocompleteForm__clear i {
  margin: 0 !important;
  padding: 0;
  background: transparent;
  font-size: 24px;
  border-radius: 0;
  aspect-ratio: 1;
  height: 35px;
  border-radius: 50%;
}
.algoliaAutocompleteForm__legend {
  color: var(--main-color-middle-gray);
  font-size: var(--main-font-size-small);
}

.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders {
  min-height: 1.2em;
  height: 1.2em;
  flex-grow: 1;
  contain: paint;
  display: flex;
  align-items: center;
}
.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container {
  color: var(--main-color-dark-gray);
  padding-left: 45px;
  pointer-events: none;
  container-type: inline-size;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
  padding-left: 50px;
  opacity: 1;
}
@media (min-width: 768px) {
  .searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container {
    padding-left: 50px;
  }
}
.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container > .inner {
  display: flex;
  position: relative;
  align-items: center;
  gap: 7px;
  height: 100%;
}
.searchBar.searchBar--dynamicPlaceholders .dynamicPlaceholders__container > .inner > div:first-child {
  height: 100%;
  align-content: center;
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text {
  position: absolute;
  white-space: nowrap;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(200%);
  transition: transform 0.75s ease-in-out;
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text > span {
  color: var(--main-color-dark-gray);
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text.current {
  transform: translateY(0);
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text.slide-in {
  transform: translateY(0);
}
.searchBar.searchBar--dynamicPlaceholders .placeholder-text.slide-out {
  transform: translateY(-200%);
}
.searchBar.searchBar--dynamicPlaceholders.is-filled .dynamicPlaceholders__container, .searchBar.searchBar--dynamicPlaceholders.is-focus .dynamicPlaceholders__container {
  display: none;
}

.algoliaAutocompleteModal {
  background: var(--main-color-white);
  position: fixed;
  top: 300px;
  inset: 0;
  width: 100%;
  overflow-y: auto;
  height: 70vh;
  height: 70dvh;
  height: 70svh;
  z-index: 2;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.25);
}
.algoliaAutocompleteModal--minimal {
  height: auto !important;
  min-height: auto;
  max-height: 70vh;
  max-height: 70dvh;
  max-height: 70svh;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 2;
}
.algoliaAutocompleteModal:not(.is-active) {
  display: none;
}
.algoliaAutocompleteModal__box {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--main-color-white);
  display: flex;
  flex-direction: column;
  padding: 40px 0 0 0;
  overflow-y: auto;
  height: 100%;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__box {
    padding: 0;
  }
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side {
  margin-top: 70px;
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side:empty + .algoliaAutocomplete__results {
  margin-top: 70px;
}
@media (min-width: 1250px) {
  .algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__results, .algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocomplete__side {
    margin-top: 100px;
  }
}
.algoliaAutocompleteModal--minimal .algoliaAutocompleteModal__box {
  height: auto;
}
.algoliaAutocompleteModal__content {
  max-width: 1740px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__content {
    padding: 0;
  }
}
.algoliaAutocompleteModal--minimal .algoliaAutocompleteModal__content {
  height: auto;
}
.algoliaAutocompleteModal__close {
  position: absolute;
  top: 0;
  right: 16px;
  clip-path: none;
  font-size: 20px;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 11;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.algoliaAutocompleteModal__close .icon {
  padding: 0;
  border: 0;
  margin: 0 !important;
  background: transparent;
}
@media (max-width: 1023px) {
  .algoliaAutocompleteModal__close {
    position: absolute;
    top: 20px;
    right: 26px;
  }
}
.algoliaAutocompleteModal__close:hover, .algoliaAutocompleteModal__close:focus, .algoliaAutocompleteModal__close:active {
  background: var(--main-color-light-gray);
}
.algoliaAutocompleteModal__close:hover .icon, .algoliaAutocompleteModal__close:focus .icon, .algoliaAutocompleteModal__close:active .icon {
  background: transparent;
}

.algoliaAutocompletePanel {
  display: flex;
  flex-direction: column;
}
.algoliaAutocompletePanel__header {
  margin-bottom: 5px;
}
@media (min-width: 1024px) {
  .algoliaAutocompletePanel__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: auto;
  }
}

.algoliaAutocompleteShowAllButton {
  background: var(--main-color-white);
}
@media (max-width: 1023px) {
  .algoliaAutocompleteShowAllButton {
    grid-area: footer;
    padding: 30px 24px;
    bottom: 0;
    display: grid;
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 1;
  }
}
@media (min-width: 1024px) {
  .algoliaAutocompleteShowAllButton {
    padding: 16px 0;
    border-top: 1px solid #eee;
  }
}

.algoliaAutocompleteModal__mobileSearch {
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
  background: var(--main-color-light-gray);
  z-index: 15;
  border-radius: 0 0 15px 15px;
}
@media (max-width: 767.98px) {
  .algoliaAutocompleteModal__mobileSearch {
    padding: 0 20px 20px;
  }
}
.algoliaAutocompleteModal__mobileSearch .inputGroup__addon {
  border: none !important;
  background: transparent !important;
}
@media (max-width: 767.98px) {
  .algoliaAutocompleteModal__mobileSearch .inputGroup__addon .icon {
    margin-top: 1px;
  }
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile {
  padding-top: 16px;
  width: 100%;
  max-width: calc(100vw - 76px);
}
@media (min-width: 768px) {
  .algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile {
    margin: 0 auto 16px auto;
    width: 520px;
  }
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar {
  margin: 0;
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar .algoliaAutocompleteForm__input {
  padding: 0.75rem 1rem;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar .inputGroup__addon {
  left: 0.5rem;
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar .algoliaAutocompleteForm__clear {
  display: flex;
  align-items: center;
  justify-content: center;
}
.algoliaAutocompleteModal__mobileSearch .algoliaAutocompleteForm--mobile .algoliaAutocompleteForm__searchBar .algoliaAutocompleteForm__clear .icon {
  font-size: 16px;
}

.algoliaAutocompleteModal .algoliaAutocomplete__header {
  display: none;
}

.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) {
  padding-top: 0;
}
.algoliaAutocompleteModal__box:has(.algoliaAutocompleteModal__mobileSearch) .algoliaAutocompleteModal__close {
  position: fixed;
  right: 16px;
  z-index: 20;
}

@media (max-width: 1023px) {
  .algoliaAutocompleteFilter {
    width: 100%;
  }
}
.algoliaAutocompleteFilter__tags {
  display: flex;
  gap: 5px;
  height: 42px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .algoliaAutocompleteFilter__tags {
    display: none;
  }
}
.algoliaAutocompleteFilter__selectWrapper {
  display: none;
}
@media (max-width: 767px) {
  .algoliaAutocompleteFilter__selectWrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
.algoliaAutocompleteFilter__label {
  font-size: var(--main-font-size-small);
}
.algoliaAutocompleteFilter__select {
  border: none;
  appearance: none;
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: var(--main-color-light-gray);
  font-size: var(--main-font-size-small);
  border-radius: 0;
}
.algoliaAutocompleteFilter__item {
  font-size: 13px;
  text-transform: uppercase;
  background: transparent;
  border: none;
  height: 29px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-dark-gray);
}
.algoliaAutocompleteFilter__item.is-active {
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
}

:root {
  --algolia-header-height: 50px;
  --algolia-sidebar-width: 360px;
}
@media (min-width: 1024px) {
  :root {
    --algolia-header-height: 45px;
  }
}
@media (min-width: 1250px) {
  :root {
    --algolia-sidebar-width: 390px;
  }
}
@media (min-width: 1540px) {
  :root {
    --algolia-sidebar-width: 432px;
  }
}

.algoliaSearchLayout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .algoliaSearchLayout {
    contain: layout;
  }
}
.algoliaSearchLayout__header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: var(--main-color-white);
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.algoliaSearchLayout__main {
  flex: 1 1 auto;
}
.algoliaSearchLayout__pagination:empty {
  display: none;
}
.algoliaSearchLayout__section {
  gap: 0;
  position: relative;
  width: 100%;
}
@media (min-width: 1024px) {
  .algoliaSearchLayout__section--filterLeft .algoliaSearchLayout__main {
    display: flex;
    transition: transform 0.2s ease;
    transform: translateX(0);
  }
  .algoliaSearchLayout__section--filterLeft .algoliaSearchLayout__main.is-active {
    transform: translateX(var(--algolia-sidebar-width));
    max-width: calc(100% - var(--algolia-sidebar-width));
  }
}

@media (min-width: 1024px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu {
    position: static;
    padding: 0;
    flex-grow: 1;
    display: flex;
    transform: none;
  }
}
.algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu__content {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
@media (min-width: 768px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu__content {
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  }
}
@media (min-width: 1024px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu__content {
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  }
}
@media (min-width: 1250px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu__content {
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  }
}
@media (min-width: 1540px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu__content {
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  }
}
@media (min-width: 1024px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel {
    position: relative;
    padding-bottom: 0;
    border: 0;
  }
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel__header {
    background-color: var(--main-color-white);
    color: var(--main-color-black);
    border: 1.5px solid var(--main-color-dark-gray);
    border-radius: 15px;
    box-shadow: none;
    display: block;
    width: 100%;
    line-height: 18px;
    font-size: 16px;
    padding: 9px 15px 9px 15px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel__header {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 13.5px 48px 13.5px 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (min-width: 1024px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel__header:after {
    content: var(--base-icon-angle-down);
    font-family: "icons", Helvetica, Arial, sans-serif;
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 20px;
    pointer-events: none;
    transform: translateY(-50%);
    background: var(--main-color-white);
  }
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel__body {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 200px;
    background: var(--main-color-white);
    border: 1.5px solid var(--main-color-middle-gray);
    border-radius: 15px;
    margin-top: 10px;
    padding: 17px 15px 8px;
    display: none;
    z-index: 1;
  }
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel__body:before {
    content: "";
    width: 100%;
    height: 10px;
    display: block;
    position: absolute;
    bottom: 100%;
  }
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel__body .algoliaRefinementList__item {
    width: 100%;
  }
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel.is-active .algoliaPanel__header:after {
    content: var(--base-icon-angle-up);
  }
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu .algoliaPanel.is-active .algoliaPanel__body {
    display: block;
  }
}
@media (min-width: 1024px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchLayout__filterToggle {
    display: none;
  }
}
@media (max-width: 1023px) {
  .algoliaSearchLayout:not(.algoliaSearchLayout--filterPositionLeft) .algoliaSearchSidebarMenu:not(.is-active) {
    opacity: 0;
  }
}
@media (min-width: 1024px) {
  .algoliaSearchLayout.algoliaSearchLayout--filterPositionLeft .algoliaSearchSidebarMenu {
    position: absolute;
    background: var(--main-color-white);
    height: 100%;
  }
  .algoliaSearchLayout.algoliaSearchLayout--filterPositionLeft .algoliaSearchSidebarMenu__container {
    position: sticky;
    max-height: calc(100dvh - 30px - var(--sticky-header-height) + var(--algolia-header-height));
    top: calc(var(--sticky-header-height) + var(--algolia-header-height));
    overflow: hidden;
    overflow-y: auto;
  }
}

.algoliaColorRefinementList__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 16px;
  flex-wrap: wrap;
}
.algoliaColorRefinementList__item {
  margin: 0;
  display: inline-flex;
}
.algoliaColorRefinementList__dot {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 100%;
  transition: 0.05s ease-in-out;
}
.algoliaColorRefinementList__label {
  display: inline-flex;
  position: relative;
  gap: 10px;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
}
.algoliaColorRefinementList__label span {
  position: relative;
}
.algoliaColorRefinementList__label.is-active .algoliaColorRefinementList__dot, .algoliaColorRefinementList__label:hover .algoliaColorRefinementList__dot, .algoliaColorRefinementList__label:focus .algoliaColorRefinementList__dot {
  border: 3px solid var(--main-color-light-gray);
  outline: 1px solid var(--main-color-black);
}
.algoliaColorRefinementList__checkbox {
  display: none;
}

.algoliaFilterBoxToggle {
  display: flex;
  position: relative;
  clip-path: none;
  background: transparent;
  padding: 0;
  gap: 5px;
  border: none;
}
.algoliaFilterBoxToggle:hover, .algoliaFilterBoxToggle:active, .algoliaFilterBoxToggle:focus {
  background: transparent;
}

.algoliaPanel {
  border-bottom: 1px solid var(--main-color-light-gray);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 30px;
}
.algoliaPanel__header {
  line-height: 1;
  cursor: pointer;
}

.algoliaSearchItemBox .prices.loading {
  width: 50%;
}

.algoliaSearchItemBox .prices.loading {
  width: 50%;
}

.algoliaSearchItemList.itemboxList,
.algoliaSearchItemList.itemlist {
  padding-left: 0;
}
.algoliaSearchItemList.itemboxList li,
.algoliaSearchItemList.itemlist li {
  margin-bottom: 0;
  list-style: none;
}

.algoliaSearchItemList.itemlist > li:not(:last-child) {
  margin-bottom: 20px;
}

.algoliaRangeSlider {
  position: relative;
  padding-bottom: 45px;
}
.algoliaRangeSlider__track {
  width: 100%;
  height: 3px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  margin-top: 2px;
}
.algoliaRangeSlider__inputs {
  align-items: center;
  gap: 15px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  grid-template-columns: 2fr auto 2fr;
  display: grid;
}
.algoliaRangeSlider__inputs input {
  text-align: center;
}
@media (max-width: 1023px) {
  .algoliaRangeSlider__inputs input {
    background: var(--main-color-light-gray);
  }
}
.algoliaRangeSlider__ranges {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
}
.algoliaRangeSlider input[type=range] {
  appearance: none;
  width: 100%;
  outline: none;
  position: absolute;
  margin: auto;
  top: 0;
  background-color: transparent;
  pointer-events: none;
  line-height: 0;
  padding: 0;
  border: 0;
}
.algoliaRangeSlider input[type=range]::-webkit-slider-runnable-track, .algoliaRangeSlider input[type=range]::-moz-range-track, .algoliaRangeSlider input[type=range]::-ms-track {
  height: 5px;
}
.algoliaRangeSlider input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}
.algoliaRangeSlider input[type=range]::-moz-range-track {
  -moz-appearance: none;
}
.algoliaRangeSlider input[type=range]::-ms-track {
  appearance: none;
}
.algoliaRangeSlider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background-color: var(--main-color-black);
  cursor: pointer;
  margin-top: -6px;
  pointer-events: auto;
  border-radius: 50%;
}
.algoliaRangeSlider input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.algoliaRangeSlider input[type=range]::-ms-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.algoliaRangeSlider input[type=range]:active::-webkit-slider-thumb {
  background-color: var(--main-color-primary);
}
.algoliaRangeSlider input[type=range]:focus::-webkit-slider-thumb {
  background-color: var(--main-color-primary);
}

.customSelect__dropdownBody .rangeSlider {
  padding-left: 10px;
  padding-right: 10px;
}
.customSelect__dropdownBody .rangeSlider__ranges {
  left: 10px;
  max-width: calc(100% - 20px);
  max-width: -moz-calc(100% - 20px);
  max-width: -webkit-calc(100% - 20px);
  max-width: -o-calc(100% - 20px);
}

.algoliaRefinementList__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 3px;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .algoliaRefinementList__list {
    max-height: 500px;
  }
}
.algoliaRefinementList__item {
  margin: 0;
  display: inline-flex;
  width: 100%;
}
.algoliaRefinementList__label:not(.specialcheckbox) {
  display: inline-flex;
  position: relative;
  padding: 10px;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
  font-size: var(--main-font-size-small);
}
.algoliaRefinementList__label:not(.specialcheckbox) span {
  position: relative;
}
.algoliaRefinementList__label:not(.specialcheckbox):before, .algoliaRefinementList__label:not(.specialcheckbox):after {
  content: "";
  position: absolute;
  inset: 0;
}
.algoliaRefinementList__label:not(.specialcheckbox):hover:after, .algoliaRefinementList__label:not(.specialcheckbox):focus:after, .algoliaRefinementList__label:not(.specialcheckbox):focus-within:after {
  background: var(--main-color-light-gray);
  inset: 0;
}
.algoliaRefinementList__label:not(.specialcheckbox).is-active:after {
  background: var(--main-color-primary);
  inset: 0;
}
.algoliaRefinementList__showMoreButton {
  display: flex;
  margin-inline: auto;
  margin-bottom: -5px;
  font-size: 14px;
}
.algoliaRefinementList__showMoreButton .icon {
  width: 20px;
  height: 20px;
}
.algoliaRefinementList .specialcheckbox i {
  top: 0;
}
.algoliaRefinementList .specialcheckbox.algoliaRefinementList__label span {
  display: flex;
  margin-top: 2px;
}

.algoliaSearchSidebarMenu {
  position: fixed;
  top: 0;
  left: 0;
  padding: 40px 20px 20px;
  background: var(--main-color-white);
  width: var(--algolia-sidebar-width);
  transition: transform 0.2s ease-out, opacity 0.1s ease-out;
  transform: translateX(-100%);
  height: 100%;
  height: 100svh;
  max-width: 100%;
  z-index: 105;
}
.algoliaSearchSidebarMenu.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 1024px) {
  .algoliaSearchSidebarMenu {
    height: auto;
    padding: 0 20px 0 0;
  }
}
@media (min-width: 1250px) {
  .algoliaSearchSidebarMenu {
    padding: 0 60px 0 0;
  }
}
.algoliaSearchSidebarMenu__toggle {
  position: absolute;
  top: 0;
  left: calc(var(--algolia-sidebar-width) - 28px);
}
.algoliaSearchSidebarMenu__toggle .icon {
  background: var(--main-color-middle-gray);
}
@media (min-width: 1024px) {
  .algoliaSearchSidebarMenu__toggle {
    display: none;
  }
}
.algoliaSearchSidebarMenu__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.algoliaSearchSidebarMenu__content {
  gap: 30px;
  display: flex;
  flex-direction: column;
}
.algoliaSearchSidebarMenu__title {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.algoliaSearchSidebarMenu__titleHeadline {
  font-weight: var(--main-font-weight-bold);
}
@media (min-width: 1024px) {
  .algoliaSearchSidebarMenu__footer {
    display: none;
  }
}
.algoliaSearchSidebarMenu__close {
  margin-left: auto;
  clip-path: none;
  width: 17px;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
}
.algoliaSearchSidebarMenu__close:hover, .algoliaSearchSidebarMenu__close:focus, .algoliaSearchSidebarMenu__close:active {
  border: none;
  background: transparent;
}
.algoliaSearchSidebarMenu__close .icon {
  font-size: 20px;
}
.algoliaSearchSidebarMenu__activeFilters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.algoliaSearchSidebarMenu__activeFilters .ais-activeRefinements {
  padding-top: 15px;
  border-top: 1px solid var(--main-color-gray-base);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 20px;
}
.algoliaSearchSidebarMenu__activeFilters .ais-activeRefinements__item {
  justify-content: space-between;
}
.algoliaSearchSidebarMenu__activeFilters .ais-activeRefinements__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.algoliaSearchSidebarMenu__activeFilters .ais-activeRefinements .icon {
  flex-shrink: 0;
}
.algoliaSearchSidebarMenu__activeFilters .linkWithIcon {
  gap: 0;
}
@media (max-width: 1023px) {
  .algoliaSearchSidebarMenu__header {
    display: block;
  }
  body:has(.algoliaSearchSidebarMenu.is-active) {
    overflow: hidden;
  }
  .algoliaSearchSidebarMenu.is-active .algoliaSearchSidebarMenu__container {
    height: 100%;
    overflow: hidden;
  }
  .algoliaSearchSidebarMenu.is-active .algoliaSearchSidebarMenu__content {
    flex: 1;
    overflow-y: auto;
  }
  .algoliaSearchSidebarMenu.is-active .algoliaSearchSidebarMenu__footer {
    display: grid;
  }
}

.algoliaSearchBadge {
  border-radius: 100%;
  min-height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--main-color-light-gray);
  font-size: var(--main-font-size-small);
  line-height: 1;
  font-weight: var(--main-font-weight-bold);
}

.algoliaScrollTo {
  scroll-margin-top: calc(var(--algolia-header-height) + var(--sticky-header-height));
}

.algoliaSearchSortingSelect__select {
  text-align: right;
}
/*# sourceMappingURL=main.css.map */