@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, .spotPriceItem--headline {
  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-adress'></i><span>icon icon-adress</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-bank-location-light'></i><span>icon icon-bank-location-light</span>

<i class='icon icon-bank-location'></i><span>icon icon-bank-location</span>

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

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

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

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

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

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

<i class='icon icon-bell-off'></i><span>icon icon-bell-off</span>

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

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

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

<i class='icon icon-box-taped-light'></i><span>icon icon-box-taped-light</span>

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

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

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

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

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

<i class='icon icon-camera-off'></i><span>icon icon-camera-off</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-cloud'></i><span>icon icon-cloud</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-crop'></i><span>icon icon-crop</span>

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

<i class='icon icon-dots-annotation'></i><span>icon icon-dots-annotation</span>

<i class='icon icon-dots-horizontal'></i><span>icon icon-dots-horizontal</span>

<i class='icon icon-dots-vertical'></i><span>icon icon-dots-vertical</span>

<i class='icon icon-dots'></i><span>icon icon-dots</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-emoji-happy'></i><span>icon icon-emoji-happy</span>

<i class='icon icon-emoji-sad'></i><span>icon icon-emoji-sad</span>

<i class='icon icon-euro'></i><span>icon icon-euro</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-fast-forward'></i><span>icon icon-fast-forward</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-minus'></i><span>icon icon-file-minus</span>

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

<i class='icon icon-file-plus'></i><span>icon icon-file-plus</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-02'></i><span>icon icon-filter-02</span>

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

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

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

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

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

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

<i class='icon icon-grid-masonry'></i><span>icon icon-grid-masonry</span>

<i class='icon icon-headphones'></i><span>icon icon-headphones</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-inbox'></i><span>icon icon-inbox</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-key-light'></i><span>icon icon-key-light</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-redo'></i><span>icon icon-redo</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-rewind'></i><span>icon icon-rewind</span>

<i class='icon icon-save'></i><span>icon icon-save</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-shield-check-light'></i><span>icon icon-shield-check-light</span>

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

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

<i class='icon icon-shield-warning'></i><span>icon icon-shield-warning</span>

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

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

<i class='icon icon-skip-back'></i><span>icon icon-skip-back</span>

<i class='icon icon-skip-forward'></i><span>icon icon-skip-forward</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-warning-annotation'></i><span>icon icon-warning-annotation</span>

<i class='icon icon-warning-triangle'></i><span>icon icon-warning-triangle</span>

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

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

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

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

<i class='icon icon-zoom-out'></i><span>icon icon-zoom-out</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-adress: "";
  --base-icon-adressbook: "";
  --base-icon-angle-down-bold: "";
  --base-icon-angle-down-light: "";
  --base-icon-angle-down: "";
  --base-icon-angle-left-bold: "";
  --base-icon-angle-left-light: "";
  --base-icon-angle-left: "";
  --base-icon-angle-right-bold: "";
  --base-icon-angle-right-light: "";
  --base-icon-angle-right: "";
  --base-icon-angle-up-bold: "";
  --base-icon-angle-up-light: "";
  --base-icon-angle-up: "";
  --base-icon-angles-up-regular: "";
  --base-icon-archive: "";
  --base-icon-arrow-down-left: "";
  --base-icon-arrow-down-right: "";
  --base-icon-arrow-down: "";
  --base-icon-arrow-left: "";
  --base-icon-arrow-pointer: "";
  --base-icon-arrow-right: "";
  --base-icon-arrow-up-left: "";
  --base-icon-arrow-up-right: "";
  --base-icon-arrow-up: "";
  --base-icon-badge: "";
  --base-icon-bank-location-light: "";
  --base-icon-bank-location: "";
  --base-icon-bank-user-light: "";
  --base-icon-bank-user: "";
  --base-icon-bank: "";
  --base-icon-bars-light: "";
  --base-icon-bars: "";
  --base-icon-basket: "";
  --base-icon-bell-off: "";
  --base-icon-bell: "";
  --base-icon-book: "";
  --base-icon-bookmark: "";
  --base-icon-box-taped-light: "";
  --base-icon-box-taped: "";
  --base-icon-box: "";
  --base-icon-briefcase: "";
  --base-icon-broadcast: "";
  --base-icon-building: "";
  --base-icon-camera-off: "";
  --base-icon-camera: "";
  --base-icon-car: "";
  --base-icon-chart-down: "";
  --base-icon-chart-up: "";
  --base-icon-chart: "";
  --base-icon-chat-light: "";
  --base-icon-chat: "";
  --base-icon-check-bold: "";
  --base-icon-check-circle-light: "";
  --base-icon-check-circle: "";
  --base-icon-check: "";
  --base-icon-clipboard: "";
  --base-icon-clock: "";
  --base-icon-close-bold: "";
  --base-icon-close-circle: "";
  --base-icon-close-light: "";
  --base-icon-close: "";
  --base-icon-cloud: "";
  --base-icon-columns: "";
  --base-icon-copy: "";
  --base-icon-crop: "";
  --base-icon-date-light: "";
  --base-icon-date: "";
  --base-icon-document-archive: "";
  --base-icon-dollar: "";
  --base-icon-dots-annotation: "";
  --base-icon-dots-horizontal: "";
  --base-icon-dots-vertical: "";
  --base-icon-dots: "";
  --base-icon-download: "";
  --base-icon-drag-drop: "";
  --base-icon-edit: "";
  --base-icon-emoji-happy: "";
  --base-icon-emoji-sad: "";
  --base-icon-euro: "";
  --base-icon-exclamation-circle: "";
  --base-icon-exclamation: "";
  --base-icon-facebook: "";
  --base-icon-fast-forward: "";
  --base-icon-file-doc: "";
  --base-icon-file-document: "";
  --base-icon-file-image: "";
  --base-icon-file-minus: "";
  --base-icon-file-pdf: "";
  --base-icon-file-plus: "";
  --base-icon-file-powerpoint: "";
  --base-icon-file-video: "";
  --base-icon-file-xls: "";
  --base-icon-filter-02: "";
  --base-icon-filter-144: "";
  --base-icon-filter-63: "";
  --base-icon-filter: "";
  --base-icon-folder-minus: "";
  --base-icon-gift: "";
  --base-icon-gold: "";
  --base-icon-grid-masonry: "";
  --base-icon-headphones: "";
  --base-icon-heart-filled: "";
  --base-icon-heart: "";
  --base-icon-home: "";
  --base-icon-inbox: "";
  --base-icon-info: "";
  --base-icon-instagram: "";
  --base-icon-invoice: "";
  --base-icon-key-light: "";
  --base-icon-key: "";
  --base-icon-language-light: "";
  --base-icon-language: "";
  --base-icon-layer: "";
  --base-icon-link: "";
  --base-icon-linkedin: "";
  --base-icon-list: "";
  --base-icon-loading: "";
  --base-icon-lock: "";
  --base-icon-logged: "";
  --base-icon-login: "";
  --base-icon-logout: "";
  --base-icon-mail: "";
  --base-icon-map-pin: "";
  --base-icon-map: "";
  --base-icon-marketing: "";
  --base-icon-maximize: "";
  --base-icon-minimize: "";
  --base-icon-minus-circle: "";
  --base-icon-minus-light: "";
  --base-icon-minus: "";
  --base-icon-monitor: "";
  --base-icon-music: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment-light: "";
  --base-icon-payment: "";
  --base-icon-pen-to-square: "";
  --base-icon-percentage: "";
  --base-icon-phone: "";
  --base-icon-pinterest: "";
  --base-icon-play: "";
  --base-icon-plus-circle: "";
  --base-icon-plus-light: "";
  --base-icon-plus: "";
  --base-icon-print: "";
  --base-icon-question: "";
  --base-icon-quickorder: "";
  --base-icon-redo: "";
  --base-icon-register: "";
  --base-icon-reload: "";
  --base-icon-retoure: "";
  --base-icon-rewind: "";
  --base-icon-save: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-settings: "";
  --base-icon-share: "";
  --base-icon-shield-check-light: "";
  --base-icon-shield-check: "";
  --base-icon-shield-close: "";
  --base-icon-shield-warning: "";
  --base-icon-shield: "";
  --base-icon-shipping: "";
  --base-icon-skip-back: "";
  --base-icon-skip-forward: "";
  --base-icon-slash: "";
  --base-icon-sorting: "";
  --base-icon-spinner: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star: "";
  --base-icon-stop: "";
  --base-icon-subscriptions: "";
  --base-icon-sun: "";
  --base-icon-tag: "";
  --base-icon-target: "";
  --base-icon-ticket: "";
  --base-icon-tiktok: "";
  --base-icon-trash: "";
  --base-icon-twitter: "";
  --base-icon-undo: "";
  --base-icon-upload: "";
  --base-icon-user-check: "";
  --base-icon-user-close: "";
  --base-icon-user-minus: "";
  --base-icon-user-plus: "";
  --base-icon-user-shield-light: "";
  --base-icon-user-shield: "";
  --base-icon-user: "";
  --base-icon-users-minus: "";
  --base-icon-users-plus: "";
  --base-icon-users: "";
  --base-icon-volume: "";
  --base-icon-warning-annotation: "";
  --base-icon-warning-triangle: "";
  --base-icon-whatsapp: "";
  --base-icon-xing: "";
  --base-icon-youtube: "";
  --base-icon-zip-file: "";
  --base-icon-zoom-out: "";
  --base-icon-zoom: "";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-bank-location-light'></i>

<i class='icon icon-bank-location'></i>

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

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

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

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

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

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

<i class='icon icon-bell-off'></i>

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

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

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

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

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

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

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

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

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

<i class='icon icon-camera-off'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-dots-annotation'></i>

<i class='icon icon-dots-horizontal'></i>

<i class='icon icon-dots-vertical'></i>

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

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

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

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

<i class='icon icon-emoji-happy'></i>

<i class='icon icon-emoji-sad'></i>

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

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

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

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

<i class='icon icon-fast-forward'></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-minus'></i>

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

<i class='icon icon-file-plus'></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-02'></i>

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

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

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

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

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

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

<i class='icon icon-grid-masonry'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-save'></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-shield-check-light'></i>

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

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

<i class='icon icon-shield-warning'></i>

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

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

<i class='icon icon-skip-back'></i>

<i class='icon icon-skip-forward'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-warning-annotation'></i>

<i class='icon icon-warning-triangle'></i>

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

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

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

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

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

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

*/
:root {
  --main-color-white: #ffffff;
  --main-color-black: #3c3c3b;
  --main-color-gray-base: #D8D8D8;
  --main-color-middle-gray: #949494;
  --main-color-dark-gray: #707070;
  --main-color-light-gray: #EEE;
  --main-color-primary: #BE9F56;
  --main-color-primary-light: #F8F5EE;
  --main-color-primary-medium: #CBB278;
  --main-color-primary-dark: #A18646;
  --main-color-primary-darken: #756025;
  --main-color-secondary: #002E55;
  --main-color-secondary-light: #E5EAEE;
  --main-color-secondary-medium: #4D6D88;
  --main-color-secondary-dark: #01213C;
  --main-color-action: #002E55;
  --main-color-danger: #880727;
  --main-color-danger-dark: #780520;
  --main-color-danger-darken: #65041d;
  --main-color-warning: #FAAF00;
  --main-color-warning-dark: #df9d00;
  --main-color-warning-darken: #bc8700;
  --main-color-success: #1E874C;
  --main-color-success-dark: #1a7844;
  --main-color-success-darken: #104a2a;
  --main-color-info: #949494;
  --main-color-gray-background: #F5F5F5;
  --main-color-primary-contrast: #3c3c3b;
  --main-color-primary-light-contrast: #3c3c3b;
  --main-color-primary-medium-contrast: #3c3c3b;
  --main-color-primary-dark-contrast: #3c3c3b;
  --main-color-primary-darken-contrast: #ffffff;
  --main-color-secondary-contrast: #ffffff;
  --main-color-secondary-light-contrast: #3c3c3b;
  --main-color-secondary-medium-contrast: #ffffff;
  --main-color-secondary-dark-contrast: #ffffff;
  --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: #3c3c3b;
  --main-color-warning-dark-contrast: #3c3c3b;
  --main-color-warning-darken-contrast: #3c3c3b;
  --main-color-success-contrast: #ffffff;
  --main-color-success-dark-contrast: #ffffff;
  --main-color-success-darken-contrast: #ffffff;
  --main-color-info-contrast: #3c3c3b;
  --main-font-family: Figtree, Helvetica, Arial, sans-serif;
  --main-font-weight: 300;
  --main-font-weight-medium: 400;
  --main-font-weight-bold: 500;
  --main-font-size-base: 1.6rem;
  --main-font-size-small: 1.4rem;
  --main-font-size-big: 1.8rem;
  --main-line-height: 1.4;
  --main-link-color: #707070;
  --main-link-color-hover: #BE9F56;
}

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

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

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

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

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

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

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

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

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

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

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

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

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

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

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.order-first {
  order: -1;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-last {
  order: 6;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.leadtext - Bigger Text
.smalltext - Smaller Text

Styleguide Typo.Text
*/
/*
Links

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

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

Styleguide Typo.Links
*/
html {
  font-size: 9px;
}
@media (min-width: 1024px) {
  html {
    font-size: 10px;
  }
}

body {
  background-color: var(--main-color-white);
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
  line-height: var(--main-line-height);
  font-family: var(--main-font-family);
  color: var(--main-color-black);
  min-width: 320px;
}
@media (min-width: 2100px) {
  body {
    contain: paint;
    max-width: 2100px;
    margin-left: auto;
    margin-right: auto;
  }
}

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

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

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

a, .link {
  color: var(--main-link-color);
  text-decoration: underline;
  cursor: pointer;
}
b, strong {
  font-weight: var(--main-font-weight-bold);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--main-color-light-gray);
  margin-top: 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);
}

/*
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>


Styleguide Typo.Headlines
*/
h1, .spotPriceItem--headline, .h1,
h2, .h2,
h3, .h3, .itemcardHeadline, .orderboxSummary__headline,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: var(--main-font-weight-medium);
  margin: 0;
  margin-bottom: clamp(10px, 1em, 20px);
}
h1.highlighted, .highlighted.spotPriceItem--headline, .h1.highlighted,
h2.highlighted, .h2.highlighted,
h3.highlighted, .h3.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline,
h4.highlighted, .h4.highlighted,
h5.highlighted, .h5.highlighted,
h6.highlighted, .h6.highlighted {
  font-weight: var(--main-font-weight);
  line-height: 96%;
}
@media (max-width: 767px) {
  h1.highlighted, .highlighted.spotPriceItem--headline, .h1.highlighted,
  h2.highlighted, .h2.highlighted,
  h3.highlighted, .h3.highlighted, .highlighted.itemcardHeadline, .highlighted.orderboxSummary__headline,
  h4.highlighted, .h4.highlighted,
  h5.highlighted, .h5.highlighted,
  h6.highlighted, .h6.highlighted {
    line-height: 1.1;
  }
}

h1, .spotPriceItem--headline, .h1 {
  margin-bottom: clamp(10px, 1em, 30px);
  line-height: 1.2;
  font-weight: var(--main-font-weight);
  font-size: 3rem;
}
@media (min-width: 768px) {
  h1, .spotPriceItem--headline, .h1 {
    font-size: 4.5rem;
  }
}
@media (min-width: 1024px) {
  h1, .spotPriceItem--headline, .h1 {
    font-size: 4.8rem;
  }
}
@media (min-width: 1250px) {
  h1, .spotPriceItem--headline, .h1 {
    font-size: 5.1rem;
  }
}
@media (min-width: 1540px) {
  h1, .spotPriceItem--headline, .h1 {
    font-size: 6rem;
  }
}
h1.highlighted, .highlighted.spotPriceItem--headline, .h1.highlighted {
  font-size: 3rem;
}
@media (min-width: 768px) {
  h1.highlighted, .highlighted.spotPriceItem--headline, .h1.highlighted {
    font-size: 5.5rem;
  }
}
@media (min-width: 1024px) {
  h1.highlighted, .highlighted.spotPriceItem--headline, .h1.highlighted {
    font-size: 6rem;
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .highlighted.spotPriceItem--headline, .h1.highlighted {
    font-size: 7rem;
  }
}
@media (min-width: 1540px) {
  h1.highlighted, .highlighted.spotPriceItem--headline, .h1.highlighted {
    font-size: 9.6rem;
  }
}

h2, .h2 {
  line-height: 1.2;
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  h2, .h2 {
    font-size: 3.1rem;
  }
}
@media (min-width: 1024px) {
  h2, .h2 {
    font-size: 3.28rem;
  }
}
@media (min-width: 1250px) {
  h2, .h2 {
    font-size: 3.46rem;
  }
}
@media (min-width: 1540px) {
  h2, .h2 {
    font-size: 4rem;
  }
}
h2.highlighted, .h2.highlighted {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  h2.highlighted, .h2.highlighted {
    font-size: 2.2rem;
  }
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted {
    font-size: 2.2rem;
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted {
    font-size: 2.2rem;
  }
}
@media (min-width: 1540px) {
  h2.highlighted, .h2.highlighted {
    font-size: 2.2rem;
  }
}

h3, .h3, .itemcardHeadline, .orderboxSummary__headline {
  line-height: 1.2;
  font-size: 2rem;
}
@media (min-width: 768px) {
  h3, .h3, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 2.5rem;
  }
}
@media (min-width: 1024px) {
  h3, .h3, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  h3, .h3, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 2.7rem;
  }
}
@media (min-width: 1540px) {
  h3, .h3, .itemcardHeadline, .orderboxSummary__headline {
    font-size: 3rem;
  }
}

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

h5, .h5 {
  line-height: 1.33;
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  h5, .h5 {
    font-size: 1.45rem;
  }
}
@media (min-width: 1024px) {
  h5, .h5 {
    font-size: 1.46rem;
  }
}
@media (min-width: 1250px) {
  h5, .h5 {
    font-size: 1.47rem;
  }
}
@media (min-width: 1540px) {
  h5, .h5 {
    font-size: 1.5rem;
  }
}

h6, .h6 {
  line-height: 1.2;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  h6, .h6 {
    font-size: 1.8rem;
  }
}
@media (min-width: 1024px) {
  h6, .h6 {
    font-size: 1.84rem;
  }
}
@media (min-width: 1250px) {
  h6, .h6 {
    font-size: 1.88rem;
  }
}
@media (min-width: 1540px) {
  h6, .h6 {
    font-size: 2rem;
  }
}

.account h1.shopSiteHeadline, .account .shopSiteHeadline.spotPriceItem--headline {
  font-size: 3rem;
}
.account h1.shopSiteHeadline span, .account .shopSiteHeadline.spotPriceItem--headline span {
  display: block;
  font-size: 1.6rem;
  font-weight: var(--main-font-weight);
  margin-top: 10px;
}

@media (max-width: 1023px) {
  .textCenter-xs-sm {
    text-align: center;
  }
}
.no-select {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.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;
  }
}
/*
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;
}

/*
Background

Markup:
<div class="kssColorBoxes">
  <div class="kssColorBox bg--light-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--gray-base">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--middle-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--dark-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--primary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
    <div class="kssColorBox bg--primary-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--primary-medium">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
    <div class="kssColorBox bg--primary-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--secondary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--secondary-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--secondary-medium">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--secondary-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--success">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--warning">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</a>
  </div>
  <div class="kssColorBox bg--danger">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button button--action">.button--action</a><br/><br/>
    <a href="#" class="button button--primary">.button--primary</a><br/><br/>
    <a href="#" class="button button--bordered">.button--bordered</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--primary-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--primary-medium">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--primary-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--secondary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
    <div class="kssColorBox border--secondary-light">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
    <div class="kssColorBox border--secondary-medium">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
    <div class="kssColorBox border--secondary-dark">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--success">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
    <div class="kssColorBox border--warning">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
    <div class="kssColorBox border--danger">
    <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
*/
.offset-white-white {
  background: linear-gradient(180deg, #ffffff 50%, #ffffff 50%);
}

.offset-white-black {
  background: linear-gradient(180deg, #ffffff 50%, #3c3c3b 50%);
}

.offset-white-gray-base {
  background: linear-gradient(180deg, #ffffff 50%, #D8D8D8 50%);
}

.offset-white-middle-gray {
  background: linear-gradient(180deg, #ffffff 50%, #949494 50%);
}

.offset-white-dark-gray {
  background: linear-gradient(180deg, #ffffff 50%, #707070 50%);
}

.offset-white-light-gray {
  background: linear-gradient(180deg, #ffffff 50%, #EEE 50%);
}

.offset-white-primary {
  background: linear-gradient(180deg, #ffffff 50%, #BE9F56 50%);
}

.offset-white-primary-light {
  background: linear-gradient(180deg, #ffffff 50%, #F8F5EE 50%);
}

.offset-white-primary-medium {
  background: linear-gradient(180deg, #ffffff 50%, #CBB278 50%);
}

.offset-white-primary-dark {
  background: linear-gradient(180deg, #ffffff 50%, #A18646 50%);
}

.offset-white-primary-darken {
  background: linear-gradient(180deg, #ffffff 50%, #756025 50%);
}

.offset-white-secondary {
  background: linear-gradient(180deg, #ffffff 50%, #002E55 50%);
}

.offset-white-secondary-light {
  background: linear-gradient(180deg, #ffffff 50%, #E5EAEE 50%);
}

.offset-white-secondary-medium {
  background: linear-gradient(180deg, #ffffff 50%, #4D6D88 50%);
}

.offset-white-secondary-dark {
  background: linear-gradient(180deg, #ffffff 50%, #01213C 50%);
}

.offset-white-action {
  background: linear-gradient(180deg, #ffffff 50%, #002E55 50%);
}

.offset-white-danger {
  background: linear-gradient(180deg, #ffffff 50%, #880727 50%);
}

.offset-white-warning {
  background: linear-gradient(180deg, #ffffff 50%, #FAAF00 50%);
}

.offset-white-success {
  background: linear-gradient(180deg, #ffffff 50%, #1E874C 50%);
}

.offset-white-info {
  background: linear-gradient(180deg, #ffffff 50%, #949494 50%);
}

.offset-white-extra-light-gray {
  background: linear-gradient(180deg, #ffffff 50%, #F5F5F5 50%);
}

.offset-black-white {
  background: linear-gradient(180deg, #3c3c3b 50%, #ffffff 50%);
}

.offset-black-black {
  background: linear-gradient(180deg, #3c3c3b 50%, #3c3c3b 50%);
}

.offset-black-gray-base {
  background: linear-gradient(180deg, #3c3c3b 50%, #D8D8D8 50%);
}

.offset-black-middle-gray {
  background: linear-gradient(180deg, #3c3c3b 50%, #949494 50%);
}

.offset-black-dark-gray {
  background: linear-gradient(180deg, #3c3c3b 50%, #707070 50%);
}

.offset-black-light-gray {
  background: linear-gradient(180deg, #3c3c3b 50%, #EEE 50%);
}

.offset-black-primary {
  background: linear-gradient(180deg, #3c3c3b 50%, #BE9F56 50%);
}

.offset-black-primary-light {
  background: linear-gradient(180deg, #3c3c3b 50%, #F8F5EE 50%);
}

.offset-black-primary-medium {
  background: linear-gradient(180deg, #3c3c3b 50%, #CBB278 50%);
}

.offset-black-primary-dark {
  background: linear-gradient(180deg, #3c3c3b 50%, #A18646 50%);
}

.offset-black-primary-darken {
  background: linear-gradient(180deg, #3c3c3b 50%, #756025 50%);
}

.offset-black-secondary {
  background: linear-gradient(180deg, #3c3c3b 50%, #002E55 50%);
}

.offset-black-secondary-light {
  background: linear-gradient(180deg, #3c3c3b 50%, #E5EAEE 50%);
}

.offset-black-secondary-medium {
  background: linear-gradient(180deg, #3c3c3b 50%, #4D6D88 50%);
}

.offset-black-secondary-dark {
  background: linear-gradient(180deg, #3c3c3b 50%, #01213C 50%);
}

.offset-black-action {
  background: linear-gradient(180deg, #3c3c3b 50%, #002E55 50%);
}

.offset-black-danger {
  background: linear-gradient(180deg, #3c3c3b 50%, #880727 50%);
}

.offset-black-warning {
  background: linear-gradient(180deg, #3c3c3b 50%, #FAAF00 50%);
}

.offset-black-success {
  background: linear-gradient(180deg, #3c3c3b 50%, #1E874C 50%);
}

.offset-black-info {
  background: linear-gradient(180deg, #3c3c3b 50%, #949494 50%);
}

.offset-black-extra-light-gray {
  background: linear-gradient(180deg, #3c3c3b 50%, #F5F5F5 50%);
}

.offset-gray-base-white {
  background: linear-gradient(180deg, #D8D8D8 50%, #ffffff 50%);
}

.offset-gray-base-black {
  background: linear-gradient(180deg, #D8D8D8 50%, #3c3c3b 50%);
}

.offset-gray-base-gray-base {
  background: linear-gradient(180deg, #D8D8D8 50%, #D8D8D8 50%);
}

.offset-gray-base-middle-gray {
  background: linear-gradient(180deg, #D8D8D8 50%, #949494 50%);
}

.offset-gray-base-dark-gray {
  background: linear-gradient(180deg, #D8D8D8 50%, #707070 50%);
}

.offset-gray-base-light-gray {
  background: linear-gradient(180deg, #D8D8D8 50%, #EEE 50%);
}

.offset-gray-base-primary {
  background: linear-gradient(180deg, #D8D8D8 50%, #BE9F56 50%);
}

.offset-gray-base-primary-light {
  background: linear-gradient(180deg, #D8D8D8 50%, #F8F5EE 50%);
}

.offset-gray-base-primary-medium {
  background: linear-gradient(180deg, #D8D8D8 50%, #CBB278 50%);
}

.offset-gray-base-primary-dark {
  background: linear-gradient(180deg, #D8D8D8 50%, #A18646 50%);
}

.offset-gray-base-primary-darken {
  background: linear-gradient(180deg, #D8D8D8 50%, #756025 50%);
}

.offset-gray-base-secondary {
  background: linear-gradient(180deg, #D8D8D8 50%, #002E55 50%);
}

.offset-gray-base-secondary-light {
  background: linear-gradient(180deg, #D8D8D8 50%, #E5EAEE 50%);
}

.offset-gray-base-secondary-medium {
  background: linear-gradient(180deg, #D8D8D8 50%, #4D6D88 50%);
}

.offset-gray-base-secondary-dark {
  background: linear-gradient(180deg, #D8D8D8 50%, #01213C 50%);
}

.offset-gray-base-action {
  background: linear-gradient(180deg, #D8D8D8 50%, #002E55 50%);
}

.offset-gray-base-danger {
  background: linear-gradient(180deg, #D8D8D8 50%, #880727 50%);
}

.offset-gray-base-warning {
  background: linear-gradient(180deg, #D8D8D8 50%, #FAAF00 50%);
}

.offset-gray-base-success {
  background: linear-gradient(180deg, #D8D8D8 50%, #1E874C 50%);
}

.offset-gray-base-info {
  background: linear-gradient(180deg, #D8D8D8 50%, #949494 50%);
}

.offset-gray-base-extra-light-gray {
  background: linear-gradient(180deg, #D8D8D8 50%, #F5F5F5 50%);
}

.offset-middle-gray-white {
  background: linear-gradient(180deg, #949494 50%, #ffffff 50%);
}

.offset-middle-gray-black {
  background: linear-gradient(180deg, #949494 50%, #3c3c3b 50%);
}

.offset-middle-gray-gray-base {
  background: linear-gradient(180deg, #949494 50%, #D8D8D8 50%);
}

.offset-middle-gray-middle-gray {
  background: linear-gradient(180deg, #949494 50%, #949494 50%);
}

.offset-middle-gray-dark-gray {
  background: linear-gradient(180deg, #949494 50%, #707070 50%);
}

.offset-middle-gray-light-gray {
  background: linear-gradient(180deg, #949494 50%, #EEE 50%);
}

.offset-middle-gray-primary {
  background: linear-gradient(180deg, #949494 50%, #BE9F56 50%);
}

.offset-middle-gray-primary-light {
  background: linear-gradient(180deg, #949494 50%, #F8F5EE 50%);
}

.offset-middle-gray-primary-medium {
  background: linear-gradient(180deg, #949494 50%, #CBB278 50%);
}

.offset-middle-gray-primary-dark {
  background: linear-gradient(180deg, #949494 50%, #A18646 50%);
}

.offset-middle-gray-primary-darken {
  background: linear-gradient(180deg, #949494 50%, #756025 50%);
}

.offset-middle-gray-secondary {
  background: linear-gradient(180deg, #949494 50%, #002E55 50%);
}

.offset-middle-gray-secondary-light {
  background: linear-gradient(180deg, #949494 50%, #E5EAEE 50%);
}

.offset-middle-gray-secondary-medium {
  background: linear-gradient(180deg, #949494 50%, #4D6D88 50%);
}

.offset-middle-gray-secondary-dark {
  background: linear-gradient(180deg, #949494 50%, #01213C 50%);
}

.offset-middle-gray-action {
  background: linear-gradient(180deg, #949494 50%, #002E55 50%);
}

.offset-middle-gray-danger {
  background: linear-gradient(180deg, #949494 50%, #880727 50%);
}

.offset-middle-gray-warning {
  background: linear-gradient(180deg, #949494 50%, #FAAF00 50%);
}

.offset-middle-gray-success {
  background: linear-gradient(180deg, #949494 50%, #1E874C 50%);
}

.offset-middle-gray-info {
  background: linear-gradient(180deg, #949494 50%, #949494 50%);
}

.offset-middle-gray-extra-light-gray {
  background: linear-gradient(180deg, #949494 50%, #F5F5F5 50%);
}

.offset-dark-gray-white {
  background: linear-gradient(180deg, #707070 50%, #ffffff 50%);
}

.offset-dark-gray-black {
  background: linear-gradient(180deg, #707070 50%, #3c3c3b 50%);
}

.offset-dark-gray-gray-base {
  background: linear-gradient(180deg, #707070 50%, #D8D8D8 50%);
}

.offset-dark-gray-middle-gray {
  background: linear-gradient(180deg, #707070 50%, #949494 50%);
}

.offset-dark-gray-dark-gray {
  background: linear-gradient(180deg, #707070 50%, #707070 50%);
}

.offset-dark-gray-light-gray {
  background: linear-gradient(180deg, #707070 50%, #EEE 50%);
}

.offset-dark-gray-primary {
  background: linear-gradient(180deg, #707070 50%, #BE9F56 50%);
}

.offset-dark-gray-primary-light {
  background: linear-gradient(180deg, #707070 50%, #F8F5EE 50%);
}

.offset-dark-gray-primary-medium {
  background: linear-gradient(180deg, #707070 50%, #CBB278 50%);
}

.offset-dark-gray-primary-dark {
  background: linear-gradient(180deg, #707070 50%, #A18646 50%);
}

.offset-dark-gray-primary-darken {
  background: linear-gradient(180deg, #707070 50%, #756025 50%);
}

.offset-dark-gray-secondary {
  background: linear-gradient(180deg, #707070 50%, #002E55 50%);
}

.offset-dark-gray-secondary-light {
  background: linear-gradient(180deg, #707070 50%, #E5EAEE 50%);
}

.offset-dark-gray-secondary-medium {
  background: linear-gradient(180deg, #707070 50%, #4D6D88 50%);
}

.offset-dark-gray-secondary-dark {
  background: linear-gradient(180deg, #707070 50%, #01213C 50%);
}

.offset-dark-gray-action {
  background: linear-gradient(180deg, #707070 50%, #002E55 50%);
}

.offset-dark-gray-danger {
  background: linear-gradient(180deg, #707070 50%, #880727 50%);
}

.offset-dark-gray-warning {
  background: linear-gradient(180deg, #707070 50%, #FAAF00 50%);
}

.offset-dark-gray-success {
  background: linear-gradient(180deg, #707070 50%, #1E874C 50%);
}

.offset-dark-gray-info {
  background: linear-gradient(180deg, #707070 50%, #949494 50%);
}

.offset-dark-gray-extra-light-gray {
  background: linear-gradient(180deg, #707070 50%, #F5F5F5 50%);
}

.offset-light-gray-white {
  background: linear-gradient(180deg, #EEE 50%, #ffffff 50%);
}

.offset-light-gray-black {
  background: linear-gradient(180deg, #EEE 50%, #3c3c3b 50%);
}

.offset-light-gray-gray-base {
  background: linear-gradient(180deg, #EEE 50%, #D8D8D8 50%);
}

.offset-light-gray-middle-gray {
  background: linear-gradient(180deg, #EEE 50%, #949494 50%);
}

.offset-light-gray-dark-gray {
  background: linear-gradient(180deg, #EEE 50%, #707070 50%);
}

.offset-light-gray-light-gray {
  background: linear-gradient(180deg, #EEE 50%, #EEE 50%);
}

.offset-light-gray-primary {
  background: linear-gradient(180deg, #EEE 50%, #BE9F56 50%);
}

.offset-light-gray-primary-light {
  background: linear-gradient(180deg, #EEE 50%, #F8F5EE 50%);
}

.offset-light-gray-primary-medium {
  background: linear-gradient(180deg, #EEE 50%, #CBB278 50%);
}

.offset-light-gray-primary-dark {
  background: linear-gradient(180deg, #EEE 50%, #A18646 50%);
}

.offset-light-gray-primary-darken {
  background: linear-gradient(180deg, #EEE 50%, #756025 50%);
}

.offset-light-gray-secondary {
  background: linear-gradient(180deg, #EEE 50%, #002E55 50%);
}

.offset-light-gray-secondary-light {
  background: linear-gradient(180deg, #EEE 50%, #E5EAEE 50%);
}

.offset-light-gray-secondary-medium {
  background: linear-gradient(180deg, #EEE 50%, #4D6D88 50%);
}

.offset-light-gray-secondary-dark {
  background: linear-gradient(180deg, #EEE 50%, #01213C 50%);
}

.offset-light-gray-action {
  background: linear-gradient(180deg, #EEE 50%, #002E55 50%);
}

.offset-light-gray-danger {
  background: linear-gradient(180deg, #EEE 50%, #880727 50%);
}

.offset-light-gray-warning {
  background: linear-gradient(180deg, #EEE 50%, #FAAF00 50%);
}

.offset-light-gray-success {
  background: linear-gradient(180deg, #EEE 50%, #1E874C 50%);
}

.offset-light-gray-info {
  background: linear-gradient(180deg, #EEE 50%, #949494 50%);
}

.offset-light-gray-extra-light-gray {
  background: linear-gradient(180deg, #EEE 50%, #F5F5F5 50%);
}

.offset-primary-white {
  background: linear-gradient(180deg, #BE9F56 50%, #ffffff 50%);
}

.offset-primary-black {
  background: linear-gradient(180deg, #BE9F56 50%, #3c3c3b 50%);
}

.offset-primary-gray-base {
  background: linear-gradient(180deg, #BE9F56 50%, #D8D8D8 50%);
}

.offset-primary-middle-gray {
  background: linear-gradient(180deg, #BE9F56 50%, #949494 50%);
}

.offset-primary-dark-gray {
  background: linear-gradient(180deg, #BE9F56 50%, #707070 50%);
}

.offset-primary-light-gray {
  background: linear-gradient(180deg, #BE9F56 50%, #EEE 50%);
}

.offset-primary-primary {
  background: linear-gradient(180deg, #BE9F56 50%, #BE9F56 50%);
}

.offset-primary-primary-light {
  background: linear-gradient(180deg, #BE9F56 50%, #F8F5EE 50%);
}

.offset-primary-primary-medium {
  background: linear-gradient(180deg, #BE9F56 50%, #CBB278 50%);
}

.offset-primary-primary-dark {
  background: linear-gradient(180deg, #BE9F56 50%, #A18646 50%);
}

.offset-primary-primary-darken {
  background: linear-gradient(180deg, #BE9F56 50%, #756025 50%);
}

.offset-primary-secondary {
  background: linear-gradient(180deg, #BE9F56 50%, #002E55 50%);
}

.offset-primary-secondary-light {
  background: linear-gradient(180deg, #BE9F56 50%, #E5EAEE 50%);
}

.offset-primary-secondary-medium {
  background: linear-gradient(180deg, #BE9F56 50%, #4D6D88 50%);
}

.offset-primary-secondary-dark {
  background: linear-gradient(180deg, #BE9F56 50%, #01213C 50%);
}

.offset-primary-action {
  background: linear-gradient(180deg, #BE9F56 50%, #002E55 50%);
}

.offset-primary-danger {
  background: linear-gradient(180deg, #BE9F56 50%, #880727 50%);
}

.offset-primary-warning {
  background: linear-gradient(180deg, #BE9F56 50%, #FAAF00 50%);
}

.offset-primary-success {
  background: linear-gradient(180deg, #BE9F56 50%, #1E874C 50%);
}

.offset-primary-info {
  background: linear-gradient(180deg, #BE9F56 50%, #949494 50%);
}

.offset-primary-extra-light-gray {
  background: linear-gradient(180deg, #BE9F56 50%, #F5F5F5 50%);
}

.offset-primary-light-white {
  background: linear-gradient(180deg, #F8F5EE 50%, #ffffff 50%);
}

.offset-primary-light-black {
  background: linear-gradient(180deg, #F8F5EE 50%, #3c3c3b 50%);
}

.offset-primary-light-gray-base {
  background: linear-gradient(180deg, #F8F5EE 50%, #D8D8D8 50%);
}

.offset-primary-light-middle-gray {
  background: linear-gradient(180deg, #F8F5EE 50%, #949494 50%);
}

.offset-primary-light-dark-gray {
  background: linear-gradient(180deg, #F8F5EE 50%, #707070 50%);
}

.offset-primary-light-light-gray {
  background: linear-gradient(180deg, #F8F5EE 50%, #EEE 50%);
}

.offset-primary-light-primary {
  background: linear-gradient(180deg, #F8F5EE 50%, #BE9F56 50%);
}

.offset-primary-light-primary-light {
  background: linear-gradient(180deg, #F8F5EE 50%, #F8F5EE 50%);
}

.offset-primary-light-primary-medium {
  background: linear-gradient(180deg, #F8F5EE 50%, #CBB278 50%);
}

.offset-primary-light-primary-dark {
  background: linear-gradient(180deg, #F8F5EE 50%, #A18646 50%);
}

.offset-primary-light-primary-darken {
  background: linear-gradient(180deg, #F8F5EE 50%, #756025 50%);
}

.offset-primary-light-secondary {
  background: linear-gradient(180deg, #F8F5EE 50%, #002E55 50%);
}

.offset-primary-light-secondary-light {
  background: linear-gradient(180deg, #F8F5EE 50%, #E5EAEE 50%);
}

.offset-primary-light-secondary-medium {
  background: linear-gradient(180deg, #F8F5EE 50%, #4D6D88 50%);
}

.offset-primary-light-secondary-dark {
  background: linear-gradient(180deg, #F8F5EE 50%, #01213C 50%);
}

.offset-primary-light-action {
  background: linear-gradient(180deg, #F8F5EE 50%, #002E55 50%);
}

.offset-primary-light-danger {
  background: linear-gradient(180deg, #F8F5EE 50%, #880727 50%);
}

.offset-primary-light-warning {
  background: linear-gradient(180deg, #F8F5EE 50%, #FAAF00 50%);
}

.offset-primary-light-success {
  background: linear-gradient(180deg, #F8F5EE 50%, #1E874C 50%);
}

.offset-primary-light-info {
  background: linear-gradient(180deg, #F8F5EE 50%, #949494 50%);
}

.offset-primary-light-extra-light-gray {
  background: linear-gradient(180deg, #F8F5EE 50%, #F5F5F5 50%);
}

.offset-primary-medium-white {
  background: linear-gradient(180deg, #CBB278 50%, #ffffff 50%);
}

.offset-primary-medium-black {
  background: linear-gradient(180deg, #CBB278 50%, #3c3c3b 50%);
}

.offset-primary-medium-gray-base {
  background: linear-gradient(180deg, #CBB278 50%, #D8D8D8 50%);
}

.offset-primary-medium-middle-gray {
  background: linear-gradient(180deg, #CBB278 50%, #949494 50%);
}

.offset-primary-medium-dark-gray {
  background: linear-gradient(180deg, #CBB278 50%, #707070 50%);
}

.offset-primary-medium-light-gray {
  background: linear-gradient(180deg, #CBB278 50%, #EEE 50%);
}

.offset-primary-medium-primary {
  background: linear-gradient(180deg, #CBB278 50%, #BE9F56 50%);
}

.offset-primary-medium-primary-light {
  background: linear-gradient(180deg, #CBB278 50%, #F8F5EE 50%);
}

.offset-primary-medium-primary-medium {
  background: linear-gradient(180deg, #CBB278 50%, #CBB278 50%);
}

.offset-primary-medium-primary-dark {
  background: linear-gradient(180deg, #CBB278 50%, #A18646 50%);
}

.offset-primary-medium-primary-darken {
  background: linear-gradient(180deg, #CBB278 50%, #756025 50%);
}

.offset-primary-medium-secondary {
  background: linear-gradient(180deg, #CBB278 50%, #002E55 50%);
}

.offset-primary-medium-secondary-light {
  background: linear-gradient(180deg, #CBB278 50%, #E5EAEE 50%);
}

.offset-primary-medium-secondary-medium {
  background: linear-gradient(180deg, #CBB278 50%, #4D6D88 50%);
}

.offset-primary-medium-secondary-dark {
  background: linear-gradient(180deg, #CBB278 50%, #01213C 50%);
}

.offset-primary-medium-action {
  background: linear-gradient(180deg, #CBB278 50%, #002E55 50%);
}

.offset-primary-medium-danger {
  background: linear-gradient(180deg, #CBB278 50%, #880727 50%);
}

.offset-primary-medium-warning {
  background: linear-gradient(180deg, #CBB278 50%, #FAAF00 50%);
}

.offset-primary-medium-success {
  background: linear-gradient(180deg, #CBB278 50%, #1E874C 50%);
}

.offset-primary-medium-info {
  background: linear-gradient(180deg, #CBB278 50%, #949494 50%);
}

.offset-primary-medium-extra-light-gray {
  background: linear-gradient(180deg, #CBB278 50%, #F5F5F5 50%);
}

.offset-primary-dark-white {
  background: linear-gradient(180deg, #A18646 50%, #ffffff 50%);
}

.offset-primary-dark-black {
  background: linear-gradient(180deg, #A18646 50%, #3c3c3b 50%);
}

.offset-primary-dark-gray-base {
  background: linear-gradient(180deg, #A18646 50%, #D8D8D8 50%);
}

.offset-primary-dark-middle-gray {
  background: linear-gradient(180deg, #A18646 50%, #949494 50%);
}

.offset-primary-dark-dark-gray {
  background: linear-gradient(180deg, #A18646 50%, #707070 50%);
}

.offset-primary-dark-light-gray {
  background: linear-gradient(180deg, #A18646 50%, #EEE 50%);
}

.offset-primary-dark-primary {
  background: linear-gradient(180deg, #A18646 50%, #BE9F56 50%);
}

.offset-primary-dark-primary-light {
  background: linear-gradient(180deg, #A18646 50%, #F8F5EE 50%);
}

.offset-primary-dark-primary-medium {
  background: linear-gradient(180deg, #A18646 50%, #CBB278 50%);
}

.offset-primary-dark-primary-dark {
  background: linear-gradient(180deg, #A18646 50%, #A18646 50%);
}

.offset-primary-dark-primary-darken {
  background: linear-gradient(180deg, #A18646 50%, #756025 50%);
}

.offset-primary-dark-secondary {
  background: linear-gradient(180deg, #A18646 50%, #002E55 50%);
}

.offset-primary-dark-secondary-light {
  background: linear-gradient(180deg, #A18646 50%, #E5EAEE 50%);
}

.offset-primary-dark-secondary-medium {
  background: linear-gradient(180deg, #A18646 50%, #4D6D88 50%);
}

.offset-primary-dark-secondary-dark {
  background: linear-gradient(180deg, #A18646 50%, #01213C 50%);
}

.offset-primary-dark-action {
  background: linear-gradient(180deg, #A18646 50%, #002E55 50%);
}

.offset-primary-dark-danger {
  background: linear-gradient(180deg, #A18646 50%, #880727 50%);
}

.offset-primary-dark-warning {
  background: linear-gradient(180deg, #A18646 50%, #FAAF00 50%);
}

.offset-primary-dark-success {
  background: linear-gradient(180deg, #A18646 50%, #1E874C 50%);
}

.offset-primary-dark-info {
  background: linear-gradient(180deg, #A18646 50%, #949494 50%);
}

.offset-primary-dark-extra-light-gray {
  background: linear-gradient(180deg, #A18646 50%, #F5F5F5 50%);
}

.offset-primary-darken-white {
  background: linear-gradient(180deg, #756025 50%, #ffffff 50%);
}

.offset-primary-darken-black {
  background: linear-gradient(180deg, #756025 50%, #3c3c3b 50%);
}

.offset-primary-darken-gray-base {
  background: linear-gradient(180deg, #756025 50%, #D8D8D8 50%);
}

.offset-primary-darken-middle-gray {
  background: linear-gradient(180deg, #756025 50%, #949494 50%);
}

.offset-primary-darken-dark-gray {
  background: linear-gradient(180deg, #756025 50%, #707070 50%);
}

.offset-primary-darken-light-gray {
  background: linear-gradient(180deg, #756025 50%, #EEE 50%);
}

.offset-primary-darken-primary {
  background: linear-gradient(180deg, #756025 50%, #BE9F56 50%);
}

.offset-primary-darken-primary-light {
  background: linear-gradient(180deg, #756025 50%, #F8F5EE 50%);
}

.offset-primary-darken-primary-medium {
  background: linear-gradient(180deg, #756025 50%, #CBB278 50%);
}

.offset-primary-darken-primary-dark {
  background: linear-gradient(180deg, #756025 50%, #A18646 50%);
}

.offset-primary-darken-primary-darken {
  background: linear-gradient(180deg, #756025 50%, #756025 50%);
}

.offset-primary-darken-secondary {
  background: linear-gradient(180deg, #756025 50%, #002E55 50%);
}

.offset-primary-darken-secondary-light {
  background: linear-gradient(180deg, #756025 50%, #E5EAEE 50%);
}

.offset-primary-darken-secondary-medium {
  background: linear-gradient(180deg, #756025 50%, #4D6D88 50%);
}

.offset-primary-darken-secondary-dark {
  background: linear-gradient(180deg, #756025 50%, #01213C 50%);
}

.offset-primary-darken-action {
  background: linear-gradient(180deg, #756025 50%, #002E55 50%);
}

.offset-primary-darken-danger {
  background: linear-gradient(180deg, #756025 50%, #880727 50%);
}

.offset-primary-darken-warning {
  background: linear-gradient(180deg, #756025 50%, #FAAF00 50%);
}

.offset-primary-darken-success {
  background: linear-gradient(180deg, #756025 50%, #1E874C 50%);
}

.offset-primary-darken-info {
  background: linear-gradient(180deg, #756025 50%, #949494 50%);
}

.offset-primary-darken-extra-light-gray {
  background: linear-gradient(180deg, #756025 50%, #F5F5F5 50%);
}

.offset-secondary-white {
  background: linear-gradient(180deg, #002E55 50%, #ffffff 50%);
}

.offset-secondary-black {
  background: linear-gradient(180deg, #002E55 50%, #3c3c3b 50%);
}

.offset-secondary-gray-base {
  background: linear-gradient(180deg, #002E55 50%, #D8D8D8 50%);
}

.offset-secondary-middle-gray {
  background: linear-gradient(180deg, #002E55 50%, #949494 50%);
}

.offset-secondary-dark-gray {
  background: linear-gradient(180deg, #002E55 50%, #707070 50%);
}

.offset-secondary-light-gray {
  background: linear-gradient(180deg, #002E55 50%, #EEE 50%);
}

.offset-secondary-primary {
  background: linear-gradient(180deg, #002E55 50%, #BE9F56 50%);
}

.offset-secondary-primary-light {
  background: linear-gradient(180deg, #002E55 50%, #F8F5EE 50%);
}

.offset-secondary-primary-medium {
  background: linear-gradient(180deg, #002E55 50%, #CBB278 50%);
}

.offset-secondary-primary-dark {
  background: linear-gradient(180deg, #002E55 50%, #A18646 50%);
}

.offset-secondary-primary-darken {
  background: linear-gradient(180deg, #002E55 50%, #756025 50%);
}

.offset-secondary-secondary {
  background: linear-gradient(180deg, #002E55 50%, #002E55 50%);
}

.offset-secondary-secondary-light {
  background: linear-gradient(180deg, #002E55 50%, #E5EAEE 50%);
}

.offset-secondary-secondary-medium {
  background: linear-gradient(180deg, #002E55 50%, #4D6D88 50%);
}

.offset-secondary-secondary-dark {
  background: linear-gradient(180deg, #002E55 50%, #01213C 50%);
}

.offset-secondary-action {
  background: linear-gradient(180deg, #002E55 50%, #002E55 50%);
}

.offset-secondary-danger {
  background: linear-gradient(180deg, #002E55 50%, #880727 50%);
}

.offset-secondary-warning {
  background: linear-gradient(180deg, #002E55 50%, #FAAF00 50%);
}

.offset-secondary-success {
  background: linear-gradient(180deg, #002E55 50%, #1E874C 50%);
}

.offset-secondary-info {
  background: linear-gradient(180deg, #002E55 50%, #949494 50%);
}

.offset-secondary-extra-light-gray {
  background: linear-gradient(180deg, #002E55 50%, #F5F5F5 50%);
}

.offset-secondary-light-white {
  background: linear-gradient(180deg, #E5EAEE 50%, #ffffff 50%);
}

.offset-secondary-light-black {
  background: linear-gradient(180deg, #E5EAEE 50%, #3c3c3b 50%);
}

.offset-secondary-light-gray-base {
  background: linear-gradient(180deg, #E5EAEE 50%, #D8D8D8 50%);
}

.offset-secondary-light-middle-gray {
  background: linear-gradient(180deg, #E5EAEE 50%, #949494 50%);
}

.offset-secondary-light-dark-gray {
  background: linear-gradient(180deg, #E5EAEE 50%, #707070 50%);
}

.offset-secondary-light-light-gray {
  background: linear-gradient(180deg, #E5EAEE 50%, #EEE 50%);
}

.offset-secondary-light-primary {
  background: linear-gradient(180deg, #E5EAEE 50%, #BE9F56 50%);
}

.offset-secondary-light-primary-light {
  background: linear-gradient(180deg, #E5EAEE 50%, #F8F5EE 50%);
}

.offset-secondary-light-primary-medium {
  background: linear-gradient(180deg, #E5EAEE 50%, #CBB278 50%);
}

.offset-secondary-light-primary-dark {
  background: linear-gradient(180deg, #E5EAEE 50%, #A18646 50%);
}

.offset-secondary-light-primary-darken {
  background: linear-gradient(180deg, #E5EAEE 50%, #756025 50%);
}

.offset-secondary-light-secondary {
  background: linear-gradient(180deg, #E5EAEE 50%, #002E55 50%);
}

.offset-secondary-light-secondary-light {
  background: linear-gradient(180deg, #E5EAEE 50%, #E5EAEE 50%);
}

.offset-secondary-light-secondary-medium {
  background: linear-gradient(180deg, #E5EAEE 50%, #4D6D88 50%);
}

.offset-secondary-light-secondary-dark {
  background: linear-gradient(180deg, #E5EAEE 50%, #01213C 50%);
}

.offset-secondary-light-action {
  background: linear-gradient(180deg, #E5EAEE 50%, #002E55 50%);
}

.offset-secondary-light-danger {
  background: linear-gradient(180deg, #E5EAEE 50%, #880727 50%);
}

.offset-secondary-light-warning {
  background: linear-gradient(180deg, #E5EAEE 50%, #FAAF00 50%);
}

.offset-secondary-light-success {
  background: linear-gradient(180deg, #E5EAEE 50%, #1E874C 50%);
}

.offset-secondary-light-info {
  background: linear-gradient(180deg, #E5EAEE 50%, #949494 50%);
}

.offset-secondary-light-extra-light-gray {
  background: linear-gradient(180deg, #E5EAEE 50%, #F5F5F5 50%);
}

.offset-secondary-medium-white {
  background: linear-gradient(180deg, #4D6D88 50%, #ffffff 50%);
}

.offset-secondary-medium-black {
  background: linear-gradient(180deg, #4D6D88 50%, #3c3c3b 50%);
}

.offset-secondary-medium-gray-base {
  background: linear-gradient(180deg, #4D6D88 50%, #D8D8D8 50%);
}

.offset-secondary-medium-middle-gray {
  background: linear-gradient(180deg, #4D6D88 50%, #949494 50%);
}

.offset-secondary-medium-dark-gray {
  background: linear-gradient(180deg, #4D6D88 50%, #707070 50%);
}

.offset-secondary-medium-light-gray {
  background: linear-gradient(180deg, #4D6D88 50%, #EEE 50%);
}

.offset-secondary-medium-primary {
  background: linear-gradient(180deg, #4D6D88 50%, #BE9F56 50%);
}

.offset-secondary-medium-primary-light {
  background: linear-gradient(180deg, #4D6D88 50%, #F8F5EE 50%);
}

.offset-secondary-medium-primary-medium {
  background: linear-gradient(180deg, #4D6D88 50%, #CBB278 50%);
}

.offset-secondary-medium-primary-dark {
  background: linear-gradient(180deg, #4D6D88 50%, #A18646 50%);
}

.offset-secondary-medium-primary-darken {
  background: linear-gradient(180deg, #4D6D88 50%, #756025 50%);
}

.offset-secondary-medium-secondary {
  background: linear-gradient(180deg, #4D6D88 50%, #002E55 50%);
}

.offset-secondary-medium-secondary-light {
  background: linear-gradient(180deg, #4D6D88 50%, #E5EAEE 50%);
}

.offset-secondary-medium-secondary-medium {
  background: linear-gradient(180deg, #4D6D88 50%, #4D6D88 50%);
}

.offset-secondary-medium-secondary-dark {
  background: linear-gradient(180deg, #4D6D88 50%, #01213C 50%);
}

.offset-secondary-medium-action {
  background: linear-gradient(180deg, #4D6D88 50%, #002E55 50%);
}

.offset-secondary-medium-danger {
  background: linear-gradient(180deg, #4D6D88 50%, #880727 50%);
}

.offset-secondary-medium-warning {
  background: linear-gradient(180deg, #4D6D88 50%, #FAAF00 50%);
}

.offset-secondary-medium-success {
  background: linear-gradient(180deg, #4D6D88 50%, #1E874C 50%);
}

.offset-secondary-medium-info {
  background: linear-gradient(180deg, #4D6D88 50%, #949494 50%);
}

.offset-secondary-medium-extra-light-gray {
  background: linear-gradient(180deg, #4D6D88 50%, #F5F5F5 50%);
}

.offset-secondary-dark-white {
  background: linear-gradient(180deg, #01213C 50%, #ffffff 50%);
}

.offset-secondary-dark-black {
  background: linear-gradient(180deg, #01213C 50%, #3c3c3b 50%);
}

.offset-secondary-dark-gray-base {
  background: linear-gradient(180deg, #01213C 50%, #D8D8D8 50%);
}

.offset-secondary-dark-middle-gray {
  background: linear-gradient(180deg, #01213C 50%, #949494 50%);
}

.offset-secondary-dark-dark-gray {
  background: linear-gradient(180deg, #01213C 50%, #707070 50%);
}

.offset-secondary-dark-light-gray {
  background: linear-gradient(180deg, #01213C 50%, #EEE 50%);
}

.offset-secondary-dark-primary {
  background: linear-gradient(180deg, #01213C 50%, #BE9F56 50%);
}

.offset-secondary-dark-primary-light {
  background: linear-gradient(180deg, #01213C 50%, #F8F5EE 50%);
}

.offset-secondary-dark-primary-medium {
  background: linear-gradient(180deg, #01213C 50%, #CBB278 50%);
}

.offset-secondary-dark-primary-dark {
  background: linear-gradient(180deg, #01213C 50%, #A18646 50%);
}

.offset-secondary-dark-primary-darken {
  background: linear-gradient(180deg, #01213C 50%, #756025 50%);
}

.offset-secondary-dark-secondary {
  background: linear-gradient(180deg, #01213C 50%, #002E55 50%);
}

.offset-secondary-dark-secondary-light {
  background: linear-gradient(180deg, #01213C 50%, #E5EAEE 50%);
}

.offset-secondary-dark-secondary-medium {
  background: linear-gradient(180deg, #01213C 50%, #4D6D88 50%);
}

.offset-secondary-dark-secondary-dark {
  background: linear-gradient(180deg, #01213C 50%, #01213C 50%);
}

.offset-secondary-dark-action {
  background: linear-gradient(180deg, #01213C 50%, #002E55 50%);
}

.offset-secondary-dark-danger {
  background: linear-gradient(180deg, #01213C 50%, #880727 50%);
}

.offset-secondary-dark-warning {
  background: linear-gradient(180deg, #01213C 50%, #FAAF00 50%);
}

.offset-secondary-dark-success {
  background: linear-gradient(180deg, #01213C 50%, #1E874C 50%);
}

.offset-secondary-dark-info {
  background: linear-gradient(180deg, #01213C 50%, #949494 50%);
}

.offset-secondary-dark-extra-light-gray {
  background: linear-gradient(180deg, #01213C 50%, #F5F5F5 50%);
}

.offset-action-white {
  background: linear-gradient(180deg, #002E55 50%, #ffffff 50%);
}

.offset-action-black {
  background: linear-gradient(180deg, #002E55 50%, #3c3c3b 50%);
}

.offset-action-gray-base {
  background: linear-gradient(180deg, #002E55 50%, #D8D8D8 50%);
}

.offset-action-middle-gray {
  background: linear-gradient(180deg, #002E55 50%, #949494 50%);
}

.offset-action-dark-gray {
  background: linear-gradient(180deg, #002E55 50%, #707070 50%);
}

.offset-action-light-gray {
  background: linear-gradient(180deg, #002E55 50%, #EEE 50%);
}

.offset-action-primary {
  background: linear-gradient(180deg, #002E55 50%, #BE9F56 50%);
}

.offset-action-primary-light {
  background: linear-gradient(180deg, #002E55 50%, #F8F5EE 50%);
}

.offset-action-primary-medium {
  background: linear-gradient(180deg, #002E55 50%, #CBB278 50%);
}

.offset-action-primary-dark {
  background: linear-gradient(180deg, #002E55 50%, #A18646 50%);
}

.offset-action-primary-darken {
  background: linear-gradient(180deg, #002E55 50%, #756025 50%);
}

.offset-action-secondary {
  background: linear-gradient(180deg, #002E55 50%, #002E55 50%);
}

.offset-action-secondary-light {
  background: linear-gradient(180deg, #002E55 50%, #E5EAEE 50%);
}

.offset-action-secondary-medium {
  background: linear-gradient(180deg, #002E55 50%, #4D6D88 50%);
}

.offset-action-secondary-dark {
  background: linear-gradient(180deg, #002E55 50%, #01213C 50%);
}

.offset-action-action {
  background: linear-gradient(180deg, #002E55 50%, #002E55 50%);
}

.offset-action-danger {
  background: linear-gradient(180deg, #002E55 50%, #880727 50%);
}

.offset-action-warning {
  background: linear-gradient(180deg, #002E55 50%, #FAAF00 50%);
}

.offset-action-success {
  background: linear-gradient(180deg, #002E55 50%, #1E874C 50%);
}

.offset-action-info {
  background: linear-gradient(180deg, #002E55 50%, #949494 50%);
}

.offset-action-extra-light-gray {
  background: linear-gradient(180deg, #002E55 50%, #F5F5F5 50%);
}

.offset-danger-white {
  background: linear-gradient(180deg, #880727 50%, #ffffff 50%);
}

.offset-danger-black {
  background: linear-gradient(180deg, #880727 50%, #3c3c3b 50%);
}

.offset-danger-gray-base {
  background: linear-gradient(180deg, #880727 50%, #D8D8D8 50%);
}

.offset-danger-middle-gray {
  background: linear-gradient(180deg, #880727 50%, #949494 50%);
}

.offset-danger-dark-gray {
  background: linear-gradient(180deg, #880727 50%, #707070 50%);
}

.offset-danger-light-gray {
  background: linear-gradient(180deg, #880727 50%, #EEE 50%);
}

.offset-danger-primary {
  background: linear-gradient(180deg, #880727 50%, #BE9F56 50%);
}

.offset-danger-primary-light {
  background: linear-gradient(180deg, #880727 50%, #F8F5EE 50%);
}

.offset-danger-primary-medium {
  background: linear-gradient(180deg, #880727 50%, #CBB278 50%);
}

.offset-danger-primary-dark {
  background: linear-gradient(180deg, #880727 50%, #A18646 50%);
}

.offset-danger-primary-darken {
  background: linear-gradient(180deg, #880727 50%, #756025 50%);
}

.offset-danger-secondary {
  background: linear-gradient(180deg, #880727 50%, #002E55 50%);
}

.offset-danger-secondary-light {
  background: linear-gradient(180deg, #880727 50%, #E5EAEE 50%);
}

.offset-danger-secondary-medium {
  background: linear-gradient(180deg, #880727 50%, #4D6D88 50%);
}

.offset-danger-secondary-dark {
  background: linear-gradient(180deg, #880727 50%, #01213C 50%);
}

.offset-danger-action {
  background: linear-gradient(180deg, #880727 50%, #002E55 50%);
}

.offset-danger-danger {
  background: linear-gradient(180deg, #880727 50%, #880727 50%);
}

.offset-danger-warning {
  background: linear-gradient(180deg, #880727 50%, #FAAF00 50%);
}

.offset-danger-success {
  background: linear-gradient(180deg, #880727 50%, #1E874C 50%);
}

.offset-danger-info {
  background: linear-gradient(180deg, #880727 50%, #949494 50%);
}

.offset-danger-extra-light-gray {
  background: linear-gradient(180deg, #880727 50%, #F5F5F5 50%);
}

.offset-warning-white {
  background: linear-gradient(180deg, #FAAF00 50%, #ffffff 50%);
}

.offset-warning-black {
  background: linear-gradient(180deg, #FAAF00 50%, #3c3c3b 50%);
}

.offset-warning-gray-base {
  background: linear-gradient(180deg, #FAAF00 50%, #D8D8D8 50%);
}

.offset-warning-middle-gray {
  background: linear-gradient(180deg, #FAAF00 50%, #949494 50%);
}

.offset-warning-dark-gray {
  background: linear-gradient(180deg, #FAAF00 50%, #707070 50%);
}

.offset-warning-light-gray {
  background: linear-gradient(180deg, #FAAF00 50%, #EEE 50%);
}

.offset-warning-primary {
  background: linear-gradient(180deg, #FAAF00 50%, #BE9F56 50%);
}

.offset-warning-primary-light {
  background: linear-gradient(180deg, #FAAF00 50%, #F8F5EE 50%);
}

.offset-warning-primary-medium {
  background: linear-gradient(180deg, #FAAF00 50%, #CBB278 50%);
}

.offset-warning-primary-dark {
  background: linear-gradient(180deg, #FAAF00 50%, #A18646 50%);
}

.offset-warning-primary-darken {
  background: linear-gradient(180deg, #FAAF00 50%, #756025 50%);
}

.offset-warning-secondary {
  background: linear-gradient(180deg, #FAAF00 50%, #002E55 50%);
}

.offset-warning-secondary-light {
  background: linear-gradient(180deg, #FAAF00 50%, #E5EAEE 50%);
}

.offset-warning-secondary-medium {
  background: linear-gradient(180deg, #FAAF00 50%, #4D6D88 50%);
}

.offset-warning-secondary-dark {
  background: linear-gradient(180deg, #FAAF00 50%, #01213C 50%);
}

.offset-warning-action {
  background: linear-gradient(180deg, #FAAF00 50%, #002E55 50%);
}

.offset-warning-danger {
  background: linear-gradient(180deg, #FAAF00 50%, #880727 50%);
}

.offset-warning-warning {
  background: linear-gradient(180deg, #FAAF00 50%, #FAAF00 50%);
}

.offset-warning-success {
  background: linear-gradient(180deg, #FAAF00 50%, #1E874C 50%);
}

.offset-warning-info {
  background: linear-gradient(180deg, #FAAF00 50%, #949494 50%);
}

.offset-warning-extra-light-gray {
  background: linear-gradient(180deg, #FAAF00 50%, #F5F5F5 50%);
}

.offset-success-white {
  background: linear-gradient(180deg, #1E874C 50%, #ffffff 50%);
}

.offset-success-black {
  background: linear-gradient(180deg, #1E874C 50%, #3c3c3b 50%);
}

.offset-success-gray-base {
  background: linear-gradient(180deg, #1E874C 50%, #D8D8D8 50%);
}

.offset-success-middle-gray {
  background: linear-gradient(180deg, #1E874C 50%, #949494 50%);
}

.offset-success-dark-gray {
  background: linear-gradient(180deg, #1E874C 50%, #707070 50%);
}

.offset-success-light-gray {
  background: linear-gradient(180deg, #1E874C 50%, #EEE 50%);
}

.offset-success-primary {
  background: linear-gradient(180deg, #1E874C 50%, #BE9F56 50%);
}

.offset-success-primary-light {
  background: linear-gradient(180deg, #1E874C 50%, #F8F5EE 50%);
}

.offset-success-primary-medium {
  background: linear-gradient(180deg, #1E874C 50%, #CBB278 50%);
}

.offset-success-primary-dark {
  background: linear-gradient(180deg, #1E874C 50%, #A18646 50%);
}

.offset-success-primary-darken {
  background: linear-gradient(180deg, #1E874C 50%, #756025 50%);
}

.offset-success-secondary {
  background: linear-gradient(180deg, #1E874C 50%, #002E55 50%);
}

.offset-success-secondary-light {
  background: linear-gradient(180deg, #1E874C 50%, #E5EAEE 50%);
}

.offset-success-secondary-medium {
  background: linear-gradient(180deg, #1E874C 50%, #4D6D88 50%);
}

.offset-success-secondary-dark {
  background: linear-gradient(180deg, #1E874C 50%, #01213C 50%);
}

.offset-success-action {
  background: linear-gradient(180deg, #1E874C 50%, #002E55 50%);
}

.offset-success-danger {
  background: linear-gradient(180deg, #1E874C 50%, #880727 50%);
}

.offset-success-warning {
  background: linear-gradient(180deg, #1E874C 50%, #FAAF00 50%);
}

.offset-success-success {
  background: linear-gradient(180deg, #1E874C 50%, #1E874C 50%);
}

.offset-success-info {
  background: linear-gradient(180deg, #1E874C 50%, #949494 50%);
}

.offset-success-extra-light-gray {
  background: linear-gradient(180deg, #1E874C 50%, #F5F5F5 50%);
}

.offset-info-white {
  background: linear-gradient(180deg, #949494 50%, #ffffff 50%);
}

.offset-info-black {
  background: linear-gradient(180deg, #949494 50%, #3c3c3b 50%);
}

.offset-info-gray-base {
  background: linear-gradient(180deg, #949494 50%, #D8D8D8 50%);
}

.offset-info-middle-gray {
  background: linear-gradient(180deg, #949494 50%, #949494 50%);
}

.offset-info-dark-gray {
  background: linear-gradient(180deg, #949494 50%, #707070 50%);
}

.offset-info-light-gray {
  background: linear-gradient(180deg, #949494 50%, #EEE 50%);
}

.offset-info-primary {
  background: linear-gradient(180deg, #949494 50%, #BE9F56 50%);
}

.offset-info-primary-light {
  background: linear-gradient(180deg, #949494 50%, #F8F5EE 50%);
}

.offset-info-primary-medium {
  background: linear-gradient(180deg, #949494 50%, #CBB278 50%);
}

.offset-info-primary-dark {
  background: linear-gradient(180deg, #949494 50%, #A18646 50%);
}

.offset-info-primary-darken {
  background: linear-gradient(180deg, #949494 50%, #756025 50%);
}

.offset-info-secondary {
  background: linear-gradient(180deg, #949494 50%, #002E55 50%);
}

.offset-info-secondary-light {
  background: linear-gradient(180deg, #949494 50%, #E5EAEE 50%);
}

.offset-info-secondary-medium {
  background: linear-gradient(180deg, #949494 50%, #4D6D88 50%);
}

.offset-info-secondary-dark {
  background: linear-gradient(180deg, #949494 50%, #01213C 50%);
}

.offset-info-action {
  background: linear-gradient(180deg, #949494 50%, #002E55 50%);
}

.offset-info-danger {
  background: linear-gradient(180deg, #949494 50%, #880727 50%);
}

.offset-info-warning {
  background: linear-gradient(180deg, #949494 50%, #FAAF00 50%);
}

.offset-info-success {
  background: linear-gradient(180deg, #949494 50%, #1E874C 50%);
}

.offset-info-info {
  background: linear-gradient(180deg, #949494 50%, #949494 50%);
}

.offset-info-extra-light-gray {
  background: linear-gradient(180deg, #949494 50%, #F5F5F5 50%);
}

.offset-extra-light-gray-white {
  background: linear-gradient(180deg, #F5F5F5 50%, #ffffff 50%);
}

.offset-extra-light-gray-black {
  background: linear-gradient(180deg, #F5F5F5 50%, #3c3c3b 50%);
}

.offset-extra-light-gray-gray-base {
  background: linear-gradient(180deg, #F5F5F5 50%, #D8D8D8 50%);
}

.offset-extra-light-gray-middle-gray {
  background: linear-gradient(180deg, #F5F5F5 50%, #949494 50%);
}

.offset-extra-light-gray-dark-gray {
  background: linear-gradient(180deg, #F5F5F5 50%, #707070 50%);
}

.offset-extra-light-gray-light-gray {
  background: linear-gradient(180deg, #F5F5F5 50%, #EEE 50%);
}

.offset-extra-light-gray-primary {
  background: linear-gradient(180deg, #F5F5F5 50%, #BE9F56 50%);
}

.offset-extra-light-gray-primary-light {
  background: linear-gradient(180deg, #F5F5F5 50%, #F8F5EE 50%);
}

.offset-extra-light-gray-primary-medium {
  background: linear-gradient(180deg, #F5F5F5 50%, #CBB278 50%);
}

.offset-extra-light-gray-primary-dark {
  background: linear-gradient(180deg, #F5F5F5 50%, #A18646 50%);
}

.offset-extra-light-gray-primary-darken {
  background: linear-gradient(180deg, #F5F5F5 50%, #756025 50%);
}

.offset-extra-light-gray-secondary {
  background: linear-gradient(180deg, #F5F5F5 50%, #002E55 50%);
}

.offset-extra-light-gray-secondary-light {
  background: linear-gradient(180deg, #F5F5F5 50%, #E5EAEE 50%);
}

.offset-extra-light-gray-secondary-medium {
  background: linear-gradient(180deg, #F5F5F5 50%, #4D6D88 50%);
}

.offset-extra-light-gray-secondary-dark {
  background: linear-gradient(180deg, #F5F5F5 50%, #01213C 50%);
}

.offset-extra-light-gray-action {
  background: linear-gradient(180deg, #F5F5F5 50%, #002E55 50%);
}

.offset-extra-light-gray-danger {
  background: linear-gradient(180deg, #F5F5F5 50%, #880727 50%);
}

.offset-extra-light-gray-warning {
  background: linear-gradient(180deg, #F5F5F5 50%, #FAAF00 50%);
}

.offset-extra-light-gray-success {
  background: linear-gradient(180deg, #F5F5F5 50%, #1E874C 50%);
}

.offset-extra-light-gray-info {
  background: linear-gradient(180deg, #F5F5F5 50%, #949494 50%);
}

.offset-extra-light-gray-extra-light-gray {
  background: linear-gradient(180deg, #F5F5F5 50%, #F5F5F5 50%);
}

.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: #3c3c3b;
  color: #ffffff;
}
.bg--black a:not(.button), .bg--black .link {
  color: #ffffff;
}

.border--black {
  border-color: #3c3c3b;
}

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

.bg--gray-base {
  background-color: #D8D8D8;
  color: #3c3c3b;
}
.bg--gray-base a:not(.button), .bg--gray-base .link {
  color: #3c3c3b;
}

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

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

.bg--middle-gray {
  background-color: #949494;
  color: #3c3c3b;
}
.bg--middle-gray a:not(.button), .bg--middle-gray .link {
  color: #3c3c3b;
}

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

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

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

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

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

.bg--light-gray {
  background-color: #EEE;
  color: #3c3c3b;
}
.bg--light-gray a:not(.button), .bg--light-gray .link {
  color: #3c3c3b;
}

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

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

.bg--primary {
  background-color: #BE9F56;
  color: var(--main-color-white);
}
.bg--primary a:not(.button), .bg--primary .link {
  color: var(--main-color-white);
}

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

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

.bg--primary-light {
  background-color: #F8F5EE;
  color: #3c3c3b;
}
.bg--primary-light a:not(.button), .bg--primary-light .link {
  color: #3c3c3b;
}

.border--primary-light {
  border-color: #F8F5EE;
}

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

.bg--primary-medium {
  background-color: #CBB278;
  color: #3c3c3b;
}
.bg--primary-medium a:not(.button), .bg--primary-medium .link {
  color: #3c3c3b;
}

.border--primary-medium {
  border-color: #CBB278;
}

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

.bg--primary-dark {
  background-color: #A18646;
  color: #3c3c3b;
}
.bg--primary-dark a:not(.button), .bg--primary-dark .link {
  color: #3c3c3b;
}

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

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

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

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

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

.bg--secondary {
  background-color: #002E55;
  color: #ffffff;
}
.bg--secondary a:not(.button), .bg--secondary .link {
  color: #ffffff;
}

.border--secondary {
  border-color: #002E55;
}

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

.bg--secondary-light {
  background-color: #E5EAEE;
  color: #3c3c3b;
}
.bg--secondary-light a:not(.button), .bg--secondary-light .link {
  color: #3c3c3b;
}

.border--secondary-light {
  border-color: #E5EAEE;
}

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

.bg--secondary-medium {
  background-color: #4D6D88;
  color: #ffffff;
}
.bg--secondary-medium a:not(.button), .bg--secondary-medium .link {
  color: #ffffff;
}

.border--secondary-medium {
  border-color: #4D6D88;
}

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

.bg--secondary-dark {
  background-color: #01213C;
  color: #ffffff;
}
.bg--secondary-dark a:not(.button), .bg--secondary-dark .link {
  color: #ffffff;
}

.border--secondary-dark {
  border-color: #01213C;
}

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

.bg--action {
  background-color: #002E55;
  color: #ffffff;
}
.bg--action a:not(.button), .bg--action .link {
  color: #ffffff;
}

.border--action {
  border-color: #002E55;
}

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

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

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

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

.bg--warning {
  background-color: #FAAF00;
  color: #3c3c3b;
}
.bg--warning a:not(.button), .bg--warning .link {
  color: #3c3c3b;
}

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

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

.bg--success {
  background-color: #1E874C;
  color: #ffffff;
}
.bg--success a:not(.button), .bg--success .link {
  color: #ffffff;
}

.border--success {
  border-color: #1E874C;
}

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

.bg--info {
  background-color: #949494;
  color: #3c3c3b;
}
.bg--info a:not(.button), .bg--info .link {
  color: #3c3c3b;
}

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

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

.bg--extra-light-gray {
  background-color: #F5F5F5;
  color: #3c3c3b;
}
.bg--extra-light-gray a:not(.button), .bg--extra-light-gray .link {
  color: #3c3c3b;
}

.border--extra-light-gray {
  border-color: #F5F5F5;
}

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

.bg--black .button--action {
  background: var(--main-color-white);
  color: var(--main-color-black);
}

.bg--action .button--action, .bg--secondary .button--action, .bg--secondary-dark .button--action {
  background: var(--main-color-white);
  color: var(--main-color-secondary);
}
.bg--action .button--bordered, .bg--secondary .button--bordered, .bg--secondary-dark .button--bordered {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}
.bg--action .buttonLink:after, .bg--secondary .buttonLink:after, .bg--secondary-dark .buttonLink:after {
  background: var(--main-color-white);
}
.bg--action .buttonLink:hover:after, .bg--secondary .buttonLink:hover:after, .bg--secondary-dark .buttonLink:hover:after {
  background: var(--main-color-primary);
}

.bg--primary {
  color: var(--main-color-white);
}
.bg--primary .button--action:hover, .bg--primary .button--bordered:hover {
  background: var(--main-color-secondary-dark);
}

.bg--primary .button--primary, .bg--primary-medium .button--primary, .bg--primary-dark .button--primary {
  background: var(--main-color-white);
  color: var(--main-color-primary);
}
.bg--primary .buttonLink:after, .bg--primary-medium .buttonLink:after, .bg--primary-dark .buttonLink:after {
  background: var(--main-color-white);
}
.bg--primary .buttonLink:hover:after, .bg--primary-medium .buttonLink:hover:after, .bg--primary-dark .buttonLink:hover:after {
  background: var(--main-color-secondary);
}

.bg--middle-gray .button--bordered, .bg--dark-gray .button--bordered, .bg--success .button--bordered, .bg--danger .button--bordered, .bg--secondary-medium .button--bordered {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}

.alert--success a {
  color: var(--main-color-white);
}
.alert--success .site p {
  margin-bottom: 0;
}

.bg--extra-light-gray .button--bordered {
  border-color: var(--main-color-secondary);
  color: var(--main-color-secondary);
}
.bg--extra-light-gray .button--bordered:hover {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
}

/*
Button

Markup:
<a href="#" class="button {{modifier_class}}">Button</a> <button class="button {{modifier_class}}">Button</button> <a href="#" class="button {{modifier_class}}"><i class="icon icon-angle-left" aria-hidden="true"></i> Button</a> <button class="button {{modifier_class}}"><i class="icon icon-angle-left" aria-hidden="true"></i> Button</button> <a href="#" class="button {{modifier_class}}">Button <i class="icon icon-angle-right" aria-hidden="true"></i></a> <button class="button {{modifier_class}}">Button <i class="icon icon-angle-right" aria-hidden="true"></i></button>

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

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, a.banner:hover .contentText__button, a.banner:focus .contentText__button, .banner > .link:hover .button, .banner > .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-secondary);
  border-color: var(--main-color-secondary);
  color: var(--main-color-white);
  text-decoration: none;
}

button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--main-color-secondary);
  border-radius: 8px;
  color: var(--main-color-secondary);
  cursor: pointer;
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  text-decoration: none;
  line-height: 18px;
  font-size: 1.5555556rem;
  padding: 8px 12px 8px 12px;
  transition: ease-in-out 0.2s;
  position: relative;
  letter-spacing: 0.14px;
  font-weight: var(--main-font-weight-medium);
}
.button_disabled:has(.icon),
.btn-disabled:has(.icon),
button:has(.icon),
.button:has(.icon) {
  display: inline-flex;
  gap: 8px;
}
.button_disabled:has(.icon) .icon-angle-right,
.btn-disabled:has(.icon) .icon-angle-right,
button:has(.icon) .icon-angle-right,
.button:has(.icon) .icon-angle-right {
  font-size: 12px;
}
@media (min-width: 768px) {
  button.disabled,
  .button_disabled,
  .btn-disabled,
  .button[disabled],
  button,
  .button {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 12px 16px 12px 16px;
    letter-spacing: 0.16px;
  }
}
.button_disabled:active,
.btn-disabled:active,
button:active,
.button:active {
  background: var(--main-color-secondary);
  border-color: var(--main-color-secondary);
  color: var(--main-color-white);
  text-decoration: none;
}
button--primary,
.button--primary {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-color: var(--main-color-primary);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
button--primary:active,
.button--primary:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
button--action,
.button--action {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  border-color: var(--main-color-secondary);
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
  background: var(--main-color-secondary-dark);
  border-color: var(--main-color-secondary-dark);
  color: var(--main-color-white);
}
button--action:active,
.button--action:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
button--bordered,
.button--bordered {
  background: transparent;
  color: var(--main-color-secondary);
  border-color: var(--main-color-secondary);
}
button--bordered:hover,
button--bordered:focus,
.button--bordered:hover,
.button--bordered:focus {
  background: var(--main-color-secondary-dark);
  border-color: var(--main-color-secondary-dark);
  color: var(--main-color-white);
}
button--bordered:active,
.button--bordered:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: 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:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
  background: var(--main-color-danger-dark);
  border-color: var(--main-color-danger-dark);
  color: var(--main-color-danger-dark-contrast);
}
button--danger:active,
.button--danger:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
button--sm,
.button--sm {
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
  line-height: 18px;
  font-size: var(--main-font-size-small);
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 18px;
    padding-right: 30px;
    padding-bottom: 18px;
    padding-left: 30px;
    line-height: 22px;
    font-size: var(--main-font-size-big);
  }
}
.is-loading.button_disabled,
.is-loading.btn-disabled,
.is-success.button_disabled,
.is-success.btn-disabled,
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-loading,
button.is-success,
button.is-error,
.button.is-loading,
.button.is-success,
.button.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
  padding-right: 40px;
  padding-left: 10px;
}
.is-loading.button_disabled .icon,
.is-loading.btn-disabled .icon,
.is-success.button_disabled .icon,
.is-success.btn-disabled .icon,
.is-error.button_disabled .icon,
.is-error.btn-disabled .icon,
button.is-loading .icon,
button.is-success .icon,
button.is-error .icon,
.button.is-loading .icon,
.button.is-success .icon,
.button.is-error .icon {
  opacity: 0;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-loading:after,
button.is-success:after,
button.is-error:after,
.button.is-loading:after,
.button.is-success:after,
.button.is-error:after {
  position: absolute;
  right: 10px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: 0 -50%;
  font-size: 16px;
}
.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-white) !important;
}
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
button.is-success:after,
.button.is-success:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-error,
.button.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-error:after,
.button.is-error:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

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

.buttonDevider {
  width: 1px;
  height: 32px;
  margin-left: 20px;
  margin-right: 15px;
  background: var(--main-color-gray-base);
  display: inline-block;
  vertical-align: middle;
}

.js-purchaseAccept {
  pointer-events: none;
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
  border-color: var(--main-color-light-gray);
}
.js-purchaseAccept:hover, .js-purchaseAccept:focus, .js-purchaseAccept:active {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  color: var(--main-color-black);
}
.js-purchaseAccept.is-active {
  cursor: pointer;
  pointer-events: all;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-color: var(--main-color-primary);
}
.js-purchaseAccept.is-active:hover, .js-purchaseAccept.is-active:focus {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}
.js-purchaseAccept.is-active:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-white);
}

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

Markup:
<a href="#" class="button--icon"><i class="icon icon-angle-left" aria-hidden="true"></i></a> <br>
<a href="#" class="button--icon primary"><i class="icon icon-angle-left" aria-hidden="true"></i></a> <br>
<a href="#" class="button--icon gray"><i class="icon icon-plus" aria-hidden="true"></i></a>

Styleguide Base.Button Icon
*/
.button--icon {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--main-color-secondary);
  color: var(--main-color-secondary);
  text-decoration: none;
}
.button--icon .icon {
  font-size: 14px;
  line-height: 1;
  display: block;
}
.button--icon:hover, .button--icon:focus, .button--icon:active {
  color: var(--main-color-white);
  background-color: var(--main-color-secondary);
  text-decoration: none;
}
.button--icon.primary {
  border: 1px solid var(--main-color-primary);
  color: var(--main-color-primary);
}
.button--icon.primary:hover, .button--icon.primary:focus, .button--icon.primary:active {
  color: var(--main-color-white);
  background-color: var(--main-color-primary);
}
.button--icon.gray {
  border: 1px solid var(--main-color-gray-base);
  color: var(--main-color-black);
}
.button--icon.gray:hover, .button--icon.gray:focus, .button--icon.gray:active {
  border-color: var(--main-color-black);
  background-color: var(--main-color-white);
}
.button--icon.danger {
  border: 1px solid var(--main-color-danger);
  color: var(--main-color-danger);
}
.button--icon.danger:hover, .button--icon.danger:focus, .button--icon.danger:active {
  border-color: var(--main-color-black);
  background-color: var(--main-color-white);
}
.button--iconWithText > span {
  position: absolute;
  bottom: -20px;
  font-size: 12px;
  line-height: 1;
  color: var(--main-color-secondary);
}
.button--iconWithText:hover > span, .button--iconWithText:focus > span, .button--iconWithText:active > span {
  color: var(--main-color-secondary);
}
.button--iconWithText.text-left {
  border-radius: 16px;
  border: unset;
  padding: 10px;
  width: auto;
  height: auto;
  flex-direction: row;
}
.button--iconWithText.text-left:hover, .button--iconWithText.text-left:focus, .button--iconWithText.text-left:active {
  background: transparent;
}
.button--iconWithText.text-left:hover > span, .button--iconWithText.text-left:focus > span, .button--iconWithText.text-left:active > span {
  color: var(--main-color-black);
}
.button--iconWithText.text-left:hover i, .button--iconWithText.text-left:focus i, .button--iconWithText.text-left:active i {
  border-color: var(--main-color-black);
  background-color: var(--main-color-primary);
}
.button--iconWithText.text-left i {
  border-radius: 50%;
  border: 1px solid var(--main-color-secondary);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  transition: 0.2s ease-in-out;
}
.button--iconWithText.text-left > span {
  bottom: unset;
  text-align: left;
  position: relative;
  font-size: 16px;
}

/*
Button Link

Markup:
<a href="#" class="buttonLink">Button Link</a><br>
<button class="buttonLink">Button Link</button><br>
<a href="#" class="buttonLink">Button Link with Icon Right <i class="icon icon-angle-right"></i></a><br>
<a href="#" class="buttonLink"><i class="icon icon-angle-left"></i> Button Link with Icon left</a>

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;
  color: var(--main-color-black);
}
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 {
  background: var(--main-color-black);
}

.buttonLink {
  display: inline-flex;
  align-items: center;
  color: var(--main-color-black);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  padding: 5px 0 3px 0;
  border: 0;
  text-decoration: none;
  gap: 5px;
}
.buttonLink:after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #9D9D9D;
  height: 1px;
  transition: background-color 0.2s ease-in;
}
.buttonLink:has(.icon) .icon {
  font-size: 12px;
  width: 16px;
}
.buttonLink:has(.icon):after {
  width: calc(100% - 20px);
}
.buttonLink:has(.icon-angle-left):after {
  right: 0;
  left: auto;
}

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

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

.selectBody, .customSelect__selected {
  background-color: var(--main-color-white);
  cursor: pointer;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.selectBody__fake {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.selectBody__fake.open {
  overflow: visible;
}
.selectBody__fake.open .selectBody__options {
  display: block;
}
.selectBody__fakeOption {
  padding: 10px 10px 10px 10px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 25px 1fr 100px auto;
  align-items: center;
  border-bottom: 1px solid var(--main-color-light-gray);
}
.selectBody__fakeOption.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.selectBody__fakeOption .radiobox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--main-color-dark-gray);
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.selectBody__fakeOption .radiobox.checked {
  border-color: var(--main-color-secondary);
  background-color: var(--main-color-secondary);
}
.selectBody__fakeOption .radiobox.checked:after {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-check);
  color: var(--main-color-white);
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.selectBody__fakeOption .pricePerMonth {
  font-size: 2rem;
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-secondary);
  flex-direction: column;
  gap: 5px;
  display: flex;
  align-items: flex-end;
  line-height: 1;
}
.selectBody__fakeOption .pricePerMonth > span {
  font-size: 1.2rem;
  color: var(--main-color-dark-gray);
}
.selectBody__fakeOption img {
  max-width: 100px;
}
.selectBody__fakeOption:hover {
  background-color: var(--main-color-light-gray);
}
@media (max-width: 767px) {
  .selectBody__fakeOption {
    grid-template-columns: 25px 1fr;
    grid-template-rows: auto auto;
  }
  .selectBody__fakeOption > *:nth-child(3), .selectBody__fakeOption > *:nth-child(4) {
    grid-column: span 1;
    grid-row: 2;
  }
  .selectBody__fakeOption > *:nth-child(4) {
    grid-column: span 1;
    grid-row: 2;
  }
  .selectBody__fakeOption img {
    margin-left: 35px;
  }
}
@media (max-width: 359px) {
  .selectBody__fakeOption > *:nth-child(3) {
    grid-column: span 2;
    grid-row: 2;
  }
  .selectBody__fakeOption > *:nth-child(4) {
    grid-column: span 2;
    grid-row: 3;
  }
}
.selectBody__fakeOptionText {
  font-size: 16px;
  font-weight: var(--main-font-weight-medium);
  color: var(--main-color-secondary);
}
.selectBody__fakeOptionText > span {
  font-size: 12px;
  color: var(--main-color-dark-gray);
}
@media (max-width: 767px) {
  .selectBody__fakeOptionText {
    font-size: 14px;
    white-space: normal;
  }
}
.selectBody__selected {
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-weight: var(--main-font-weight-medium);
}
.selectBody__options {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--main-color-middle-gray);
  background: var(--main-color-white);
  z-index: 20;
  contain: paint;
}
.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;
}

.infieldInputGroup.marginBottom--small {
  margin-bottom: 16px;
}

.infieldInputGroup:has(textarea) > label {
  top: 14px;
  transform: translate(0);
}

/*
File Input

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

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

Styleguide Form.File Input
*/
.fileBody {
  display: block;
  position: relative;
  width: 100%;
}
.fileBody input {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.fileBody input + span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 1px solid var(--main-color-middle-gray);
  border-radius: 8px;
  box-shadow: none;
  width: 100%;
  line-height: 18px;
  font-size: clamp(16px, var(--main-font-size-small), 20px);
  padding: 8px 12px 8px 12px;
  min-height: 36px;
  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: 12px 16px 12px 16px;
    min-height: 46px;
  }
}
.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: 36px;
  min-height: 36px;
  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: 46px;
    width: 46px;
  }
}

/*
Radioboxes

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

Styleguide Form.Radioboxes
*/ /*
Radioboxes Switch

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

Styleguide Form.Radioboxes Switch
*/
/*
Checkboxes

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

Styleguide Form.Checkboxes
*/
/*
Checkboxes Switch

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

Styleguide Form.Checkboxes Switch
*/
.specialradiobox,
.specialcheckbox,
.specialcheckboxSwitch {
  position: relative;
  line-height: 20px;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 10px;
  padding-left: 24px;
  color: var(--main-color-black);
}
.specialradiobox i,
.specialcheckbox i,
.specialcheckboxSwitch i {
  font-style: normal;
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: var(--main-color-white);
  border: 1px 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: 10px;
  height: 10px;
  left: 2px;
  top: 2px;
  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) + i,
.specialcheckbox:has(input:focus) + i,
.specialcheckboxSwitch:has(input:focus) + i {
  border-color: var(--main-color-primary);
}
.specialradiobox input,
.specialcheckbox input,
.specialcheckboxSwitch input {
  position: absolute;
  width: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.specialradiobox input:disabled,
.specialcheckbox input:disabled,
.specialcheckboxSwitch input:disabled {
  cursor: not-allowed;
}
.specialradiobox:has(input:active):not(.disabled) i:after,
.specialcheckbox:has(input:active):not(.disabled) i:after,
.specialcheckboxSwitch:has(input:active):not(.disabled) i:after {
  opacity: 1;
}
.specialradiobox:has(input:active):disabled,
.specialcheckbox:has(input:active):disabled,
.specialcheckboxSwitch:has(input:active):disabled {
  cursor: not-allowed;
}
.specialradiobox:has(input:active):disabled + i,
.specialcheckbox:has(input:active):disabled + i,
.specialcheckboxSwitch:has(input:active):disabled + i {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.specialradiobox:has(input:active):disabled + i:after,
.specialcheckbox:has(input:active):disabled + i:after,
.specialcheckboxSwitch:has(input:active):disabled + i:after {
  color: var(--main-color-gray-base);
}
.specialradiobox:has(input:active):focus + i,
.specialcheckbox:has(input:active):focus + i,
.specialcheckboxSwitch:has(input:active):focus + i {
  border-color: var(--main-color-primary);
}
.specialradiobox:active:not(.disabled) i:after,
.specialcheckbox:active:not(.disabled) i:after,
.specialcheckboxSwitch:active:not(.disabled) i:after {
  opacity: 0.7;
}
.specialradiobox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckbox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckboxSwitch:active:not(.disabled) input:disabled:not(:checked) + i:after {
  opacity: 0;
}
.specialradiobox.disabled,
.specialcheckbox.disabled,
.specialcheckboxSwitch.disabled {
  cursor: default;
  color: var(--main-color-black);
}
.specialradiobox:focus i,
.specialcheckbox:focus i,
.specialcheckboxSwitch:focus i {
  outline: 2px solid var(--main-color-primary);
  outline-offset: 2px;
}

.specialcheckbox {
  padding-left: 24px;
  line-height: 18px;
}
.specialcheckbox i {
  border-radius: 4px;
  width: 14px;
  height: 14px;
  top: 2px;
}
.specialcheckbox i:after {
  left: -1px;
  content: var(--base-icon-check-bold);
  font-family: "icons", Helvetica, Arial, sans-serif;
  color: var(--main-color-white);
  top: -1px;
  opacity: 0;
  line-height: 14px;
  transition: opacity 0.1s ease-in;
  font-size: 10px;
  background-color: var(--main-color-secondary);
  border-radius: 4px;
  padding-left: 2px;
  width: 14px;
  height: 14px;
}
.specialcheckbox input {
  width: 14px;
  height: 14px;
  left: 0;
  top: 0;
}
.specialcheckbox:focus i {
  outline: 2px solid var(--main-color-primary);
  outline-offset: 2px;
}

.specialcheckboxSwitch {
  padding-left: 55px;
  margin-bottom: 0;
}
.specialcheckboxSwitch i {
  background: var(--main-color-gray-base);
  border-radius: 16px;
  width: 40px;
  height: 20px;
  border: none;
  position: absolute;
  margin-top: 3px;
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch i:after {
  content: "";
  display: block;
  background: var(--main-color-white);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 3px;
  left: 3px;
  opacity: 1;
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch input {
  width: 40px;
  height: 20px;
  left: 0;
  top: 0;
}
.specialcheckboxSwitch:has(input:checked) i {
  background: var(--main-color-primary);
}
.specialcheckboxSwitch:has(input:checked) i:after {
  left: 22px;
  background: var(--main-color-white);
}
.specialcheckboxSwitch:focus i {
  outline: 2px solid var(--main-color-primary);
  outline-offset: 2px;
}

.specialradiobox i {
  top: 2px;
}

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

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

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

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

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

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

/*
Tables

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


Styleguide Base.Tables
*/
table:not(.order_sum, .vat_table) {
  font-size: var(--main-font-size-base);
}
table:not(.order_sum, .vat_table) tr:nth-child(odd) td {
  background-color: #F6F6F6;
}

td,
th {
  padding: 10px 5px;
  border-bottom: 0;
  text-align: left;
}
@media (min-width: 1250px) {
  td,
  th {
    padding-left: 10px;
    padding-right: 20px;
  }
}

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

tr th {
  font-size: 1.4rem;
  font-weight: var(--main-font-weight-bold);
}

.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 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 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: 768px) {
  .table {
    display: table;
  }
}
.table__row {
  border-bottom: 0;
}
@media (min-width: 768px) {
  .table__row {
    display: table-row;
  }
}
@media (min-width: 768px) {
  .table__row:not(.table__row--header):nth-child(odd) {
    background-color: #F6F6F6;
  }
}
.table__row.table__row--header {
  font-weight: var(--main-font-weight-bold);
  font-size: 1.4rem;
}
@media (max-width: 767px) {
  .table__row.table__row--header {
    display: none;
  }
}
@media (max-width: 767px) {
  .table__row {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--main-color-middle-gray);
    padding-bottom: 10px;
  }
}
@media (min-width: 768px) {
  .table__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 5px;
    border-bottom: 0;
  }
  .table__cell--label {
    display: none;
  }
}
@media (min-width: 1250px) {
  .table__cell {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 767px) {
  .table__cell {
    text-align: left !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .table__cell .button {
    margin-top: 10px;
  }
  .table__cell--label {
    display: inline-block;
    font-weight: var(--main-font-weight-bold);
  }
}

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

::-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: 16px;
}
.paddingTop {
  padding-top: 16px;
}
.paddingRight {
  padding-right: 16px;
}
.paddingBottom {
  padding-bottom: 16px;
}
.paddingLeft {
  padding-left: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767.98px) {
  .p--middle {
    padding: 32px;
  }
  .pt--middle {
    padding-top: 32px;
  }
  .pr--middle {
    padding-right: 32px;
  }
  .pb--middle {
    padding-bottom: 32px;
  }
  .pl--middle {
    padding-left: 32px;
  }
  .padding--middle {
    padding: 32px;
  }
  .paddingTop--middle {
    padding-top: 32px;
  }
  .paddingRight--middle {
    padding-right: 32px;
  }
  .paddingBottom--middle {
    padding-bottom: 32px;
  }
  .paddingLeft--middle {
    padding-left: 32px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .p--middle {
    padding: 40px;
  }
  .pt--middle {
    padding-top: 40px;
  }
  .pr--middle {
    padding-right: 40px;
  }
  .pb--middle {
    padding-bottom: 40px;
  }
  .pl--middle {
    padding-left: 40px;
  }
  .padding--middle {
    padding: 40px;
  }
  .paddingTop--middle {
    padding-top: 40px;
  }
  .paddingRight--middle {
    padding-right: 40px;
  }
  .paddingBottom--middle {
    padding-bottom: 40px;
  }
  .paddingLeft--middle {
    padding-left: 40px;
  }
}
@media (max-width: 767.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 (min-width: 768px) and (max-width: 1023.98px) {
  .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;
  }
}
@media (max-width: 767.98px) {
  .p--xlarge {
    padding: 60px;
  }
  .pt--xlarge {
    padding-top: 60px;
  }
  .pr--xlarge {
    padding-right: 60px;
  }
  .pb--xlarge {
    padding-bottom: 60px;
  }
  .pl--xlarge {
    padding-left: 60px;
  }
  .padding--xlarge {
    padding: 60px;
  }
  .paddingTop--xlarge {
    padding-top: 60px;
  }
  .paddingRight--xlarge {
    padding-right: 60px;
  }
  .paddingBottom--xlarge {
    padding-bottom: 60px;
  }
  .paddingLeft--xlarge {
    padding-left: 60px;
  }
}
@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 (min-width: 1024px) and (max-width: 1249.98px) {
  .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) {
  .xs-padding {
    padding-bottom: 10px;
  }
  .xs-padding-base {
    padding-bottom: 16px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sm-padding {
    padding-bottom: 10px;
  }
  .sm-padding-base {
    padding-bottom: 16px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .md-padding {
    padding-bottom: 10px;
  }
  .md-padding-base {
    padding-bottom: 16px;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .lg-padding {
    padding-bottom: 10px;
  }
  .lg-padding-base {
    padding-bottom: 16px;
  }
}
@media (min-width: 1540px) {
  .xlg-padding {
    padding-bottom: 10px;
  }
  .xlg-padding-base {
    padding-bottom: 16px;
  }
}
/*
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: 16px;
}
.marginTop {
  margin-top: 16px;
}
.marginRight {
  margin-right: 16px;
}
.marginBottom {
  margin-bottom: 16px;
}
.marginLeft {
  margin-left: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767.98px) {
  .m--middle {
    margin: 32px;
  }
  .mt--middle {
    margin-top: 32px;
  }
  .mr--middle {
    margin-right: 32px;
  }
  .mb--middle {
    margin-bottom: 32px;
  }
  .ml--middle {
    margin-left: 32px;
  }
  .margin--middle {
    margin: 32px;
  }
  .marginTop--middle {
    margin-top: 32px;
  }
  .marginRight--middle {
    margin-right: 32px;
  }
  .marginBottom--middle {
    margin-bottom: 32px;
  }
  .marginLeft--middle {
    margin-left: 32px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .m--middle {
    margin: 40px;
  }
  .mt--middle {
    margin-top: 40px;
  }
  .mr--middle {
    margin-right: 40px;
  }
  .mb--middle {
    margin-bottom: 40px;
  }
  .ml--middle {
    margin-left: 40px;
  }
  .margin--middle {
    margin: 40px;
  }
  .marginTop--middle {
    margin-top: 40px;
  }
  .marginRight--middle {
    margin-right: 40px;
  }
  .marginBottom--middle {
    margin-bottom: 40px;
  }
  .marginLeft--middle {
    margin-left: 40px;
  }
}
@media (max-width: 767.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 (min-width: 768px) and (max-width: 1023.98px) {
  .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;
  }
}
@media (max-width: 767.98px) {
  .m--xlarge {
    margin: 60px;
  }
  .mt--xlarge {
    margin-top: 60px;
  }
  .mr--xlarge {
    margin-right: 60px;
  }
  .mb--xlarge {
    margin-bottom: 60px;
  }
  .ml--xlarge {
    margin-left: 60px;
  }
  .margin--xlarge {
    margin: 60px;
  }
  .marginTop--xlarge {
    margin-top: 60px;
  }
  .marginRight--xlarge {
    margin-right: 60px;
  }
  .marginBottom--xlarge {
    margin-bottom: 60px;
  }
  .marginLeft--xlarge {
    margin-left: 60px;
  }
}
@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 (min-width: 1024px) and (max-width: 1249.98px) {
  .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) {
  .xs-margin {
    margin-bottom: 10px;
  }
  .xs-margin-base {
    margin-bottom: 16px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sm-margin {
    margin-bottom: 10px;
  }
  .sm-margin-base {
    margin-bottom: 16px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .md-margin {
    margin-bottom: 10px;
  }
  .md-margin-base {
    margin-bottom: 16px;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .lg-margin {
    margin-bottom: 10px;
  }
  .lg-margin-base {
    margin-bottom: 16px;
  }
}
@media (min-width: 1540px) {
  .xlg-margin {
    margin-bottom: 10px;
  }
  .xlg-margin-base {
    margin-bottom: 16px;
  }
}
@media (max-width: 767px) {
  .noMarginBottom-xs {
    margin-bottom: 0;
  }
}

/*
Containers

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

.container - Base Container
.container--xxsmall - xxSmall Container
.container--small - Small Container
.container--middle - middle 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: 1540px;
}

.container--xxsmall {
  max-width: 500px;
}

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

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

.container--middle {
  max-width: 1240px;
}

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

.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: -5px;
  margin-left: -5px;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 5px;
  padding-left: 5px;
}
.row > *.marginBottom {
  margin-bottom: 10px;
}

.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 {
  margin-bottom: 0;
}

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

@media (min-width: 1620px) {
  .row.gridGap--large {
    margin-left: -40px;
    margin-right: -40px;
  }
  .row.gridGap--large > * {
    padding-left: 40px;
    padding-right: 40px;
  }
  .row.gridGap--large > *.marginBottom {
    margin-bottom: 80px;
  }
}
@media (max-width: 1619px) {
  .row.gridGap--large {
    margin-left: -20px;
    margin-right: -20px;
  }
  .row.gridGap--large > * {
    padding-left: 20px;
    padding-right: 20px;
  }
  .row.gridGap--large > *.marginBottom {
    margin-bottom: 40px;
  }
}

@media (min-width: 1620px) {
  .row.gridGap--xlarge {
    margin-left: -80px;
    margin-right: -80px;
  }
  .row.gridGap--xlarge > * {
    padding-left: 80px;
    padding-right: 80px;
  }
  .row.gridGap--xlarge > *.marginBottom {
    margin-bottom: 80px;
  }
}
@media (max-width: 1619px) {
  .row.gridGap--xlarge {
    margin-left: -20px;
    margin-right: -20px;
  }
  .row.gridGap--xlarge > * {
    padding-left: 40px;
    padding-right: 40px;
  }
  .row.gridGap--xlarge > *.marginBottom {
    margin-bottom: 40px;
  }
}

@media (min-width: 1010px) {
  .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 {
    margin-bottom: 80px;
  }
}

@media (min-width: 880px) {
  .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 {
    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: -5px;
    margin-right: -20px;
    padding-left: -3px;
  }
  .row.scrollSnapTablet > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    padding-left: 8px;
    padding-right: 8px;
    width: calc(100% - 80px / 2);
    width: -moz-calc(100% - 80px / 2);
    width: -webkit-calc(100% - 80px / 2);
    width: -o-calc(100% - 80px / 2);
  }
  .row.scrollSnapTablet > *.col-sm-6 {
    width: calc(50% - 80px / 2);
    width: -moz-calc(50% - 80px / 2);
    width: -webkit-calc(50% - 80px / 2);
    width: -o-calc(50% - 80px / 2);
  }
  .row.scrollSnapTablet > *.col-sm-4 {
    width: calc(33% - 80px / 2);
    width: -moz-calc(33% - 80px / 2);
    width: -webkit-calc(33% - 80px / 2);
    width: -o-calc(33% - 80px / 2);
  }
  .row.scrollSnapTablet > *.col-sm-8 {
    width: calc(67% - 80px / 2);
    width: -moz-calc(67% - 80px / 2);
    width: -webkit-calc(67% - 80px / 2);
    width: -o-calc(67% - 80px / 2);
  }
  .row.scrollSnapTablet.pl--middle, .row.scrollSnapTablet.pl--large, .row.scrollSnapTablet.pr--middle, .row.scrollSnapTablet.pr--large {
    padding-left: 10px;
    padding-right: 10px;
  }
}

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

@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;
  display: flex;
}

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

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

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

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

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

.row.align-items-stretch > div > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  align-items: flex-start;
}
.row.align-items-stretch > div > div > .textcontent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.row.align-items-stretch > div > div > .textcontent > div {
  flex-grow: 1;
}

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

.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.8
 * 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: May 23, 2025
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-lock {
  display: none;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  display: none;
}

.swiper-slide {
  height: auto;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--main-color-dark-gray);
  cursor: pointer;
  font-size: 16px;
  width: 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-button-next .icon, .swiper-button-prev .icon {
  display: block;
  line-height: 1;
}
.swiper-button-next:hover, .swiper-button-next:focus, .swiper-button-next:active, .swiper-button-prev:hover, .swiper-button-prev:focus, .swiper-button-prev:active {
  color: var(--main-link-color-hover);
}

.swiper-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;
}

.scrollbar .swiper-wrapper {
  transition-timing-function: linear !important;
}

.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: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.inputGroup .iti__country-list {
  margin-top: 10px;
  padding-top: 10px;
  border-radius: 8px;
  border-color: var(--main-color-middle-gray);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

.dealerSearchItems {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.dealerSearchItems::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.dealerSearchItems::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.dealerSearchItems::-webkit-scrollbar-thumb {
  background: var(--main-color-gray-base);
  border: 0 none transparent;
  border-radius: 3px;
}
.dealerSearchItems::-webkit-scrollbar-thumb:hover {
  background: var(--main-color-black);
}
.dealerSearchItems::-webkit-scrollbar-thumb:active {
  background: var(--main-color-black);
}
.dealerSearchItems::-webkit-scrollbar-track {
  background: var(--main-color-light-gray);
  border: 0 none transparent;
  border-radius: 0;
}
.dealerSearchItems::-webkit-scrollbar-track:hover {
  background: var(--main-color-light-gray);
}
.dealerSearchItems::-webkit-scrollbar-track:active {
  background: var(--main-color-light-gray);
}
.dealerSearchItems::-webkit-scrollbar-corner {
  background: transparent;
}

.dealerSearchItem {
  border-bottom: 1px solid var(--main-color-light-gray);
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px;
}
@media (min-height: 1050px) {
  .dealerSearchItem {
    padding-bottom: 30px;
    padding-top: 30px;
    padding-right: 20px;
  }
}
@media (min-width: 1024px) {
  .dealerSearchItem {
    padding-bottom: 20px;
    padding-top: 20px;
  }
}
.dealerSearchItem__headline {
  font-weight: var(--main-font-weight-bold);
  margin-top: 5px;
  margin-bottom: 5px;
}
@media (min-width: 1024px) {
  .dealerSearchItem__headline {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.dealerSearchItem:first-child {
  padding-top: 10px;
}

.dealerSearchMap {
  aspect-ratio: 1;
}
@media (min-width: 1250px) {
  .dealerSearchMap {
    aspect-ratio: 4/3;
  }
}

.dealerSearchResults {
  display: flex;
  flex-wrap: nowrap;
  grid-gap: 10px;
  flex-direction: column;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .dealerSearchResults {
    flex-direction: row;
  }
}
.dealerSearchResults .dealerSearchItemsWrapper {
  width: 100%;
  flex-shrink: 0;
}
.dealerSearchResults .dealerSearchItemsWrapper .dealerSearchItems {
  overflow: hidden;
  overflow-y: auto;
  max-height: 30vh;
}
@media (min-width: 768px) {
  .dealerSearchResults .dealerSearchItemsWrapper {
    width: 30%;
    position: relative;
  }
  .dealerSearchResults .dealerSearchItemsWrapper .dealerSearchItems {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 100%;
  }
}
.dealerSearchResults .dealerSearchMapWrapper {
  flex-grow: 1;
}

.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;
  font-size: 14px;
}
.openStreetMap .leaflet-container .awesome-marker:not(.awesome-marker-shadow) {
  background-image: none;
}
.openStreetMap .leaflet-container .awesome-marker:not(.awesome-marker-shadow):after {
  content: var(--base-icon-map-pin);
  font-family: "icons", Helvetica, Arial, sans-serif;
  color: var(--main-color-secondary);
  display: block;
  font-size: 32px;
}
.openStreetMap .leaflet-container .awesome-marker:not(.awesome-marker-shadow) .fa {
  display: none;
}
.openStreetMap .leaflet-container .marker-cluster,
.openStreetMap .leaflet-container .marker-cluster-medium {
  color: var(--main-color-black);
  background-color: rgba(190, 159, 86, 0.3);
}
.openStreetMap .leaflet-container .marker-cluster div,
.openStreetMap .leaflet-container .marker-cluster-medium div {
  background: #BE9F56;
}
.openStreetMap.hasLeftContent {
  height: 960px;
  display: flex;
  gap: 40px;
}
@media (max-width: 1249px) {
  .openStreetMap.hasLeftContent {
    height: auto;
    flex-direction: column;
  }
  .openStreetMap.hasLeftContent .googlemaps_content {
    height: 500px !important;
  }
}
.openStreetMap .openStreetMap__left {
  width: 580px;
  gap: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
}
.openStreetMap .openStreetMap__left .openStreetMap__entries {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: 960px;
  padding-bottom: 30px;
  padding-right: 20px;
}
.openStreetMap .openStreetMap__left .openStreetMap__entries > a {
  text-decoration: none;
  color: var(--main-color-black);
}
.openStreetMap .openStreetMap__left .openStreetMap__entries > a:hover, .openStreetMap .openStreetMap__left .openStreetMap__entries > a:focus, .openStreetMap .openStreetMap__left .openStreetMap__entries > a:active {
  color: var(--main-color-black);
}
.openStreetMap .openStreetMap__left .openStreetMap__entries > a:hover .button--icon, .openStreetMap .openStreetMap__left .openStreetMap__entries > a:focus .button--icon, .openStreetMap .openStreetMap__left .openStreetMap__entries > a:active .button--icon {
  background-color: var(--main-color-secondary);
  color: var(--main-color-white);
}
.openStreetMap .openStreetMap__left .fadeOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
}
@media (max-width: 1249px) {
  .openStreetMap .openStreetMap__left {
    flex-direction: row;
    width: 100%;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    max-width: 100vw;
  }
  .openStreetMap .openStreetMap__left .openStreetMap__entries {
    flex-direction: row;
    white-space: nowrap;
    scroll-snap-align: center;
    padding-right: 30px;
    padding-bottom: 20px;
  }
  .openStreetMap .openStreetMap__left .fadeOverlay {
    top: 0;
    bottom: 0;
    right: 0;
    left: unset;
    width: 60px;
    height: 100%;
    background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  }
}
.openStreetMap__entry {
  border: 1px solid var(--main-color-light-gray);
  border-radius: 16px;
  padding: 24px;
  padding-right: 60px;
  cursor: pointer;
  position: relative;
}
.openStreetMap__entry.highlight {
  background: var(--main-color-light-gray);
  transition: background 0.5s ease;
}
.openStreetMap__entry svg {
  margin-bottom: 10px;
}
.openStreetMap__entry:hover svg path {
  fill: var(--main-color-primary);
}
.openStreetMap__entry--active {
  background: var(--main-color-light-gray);
}
.openStreetMap__entry .button--icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
@media (max-width: 1249px) {
  .openStreetMap__entry {
    padding: 12px;
    padding-right: 60px;
  }
  .openStreetMap__entry .button--icon {
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
  }
}

/*
Alerts

Markup:
<div class="alert {{modifier_class}}">Text</div>

.alert--danger - Danger
.alert--success - Success
.alert--warning - Warning
.alert--primary - Primary
.alert--secondary - Secondary

Styleguide Components.Alerts
*/
.alert {
  border-radius: 8px;
  position: relative;
  color: var(--main-color-black);
  background: var(--main-color-light-gray);
  padding: 10px;
  padding-left: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
}
.alert:before {
  content: var(--base-icon-info);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 10px;
  top: 50%;
  font-size: 24px;
  width: 40px;
  translate: 0 -50%;
  text-align: center;
  line-height: 1;
  display: block;
}
.alert--primary {
  background: #BE9F56;
  color: #3c3c3b;
}
.alert--secondary {
  background: #002E55;
  color: #ffffff;
}
.alert--action {
  background: #002E55;
  color: #ffffff;
}
.alert--danger {
  background: #880727;
  color: #ffffff;
}
.alert--warning {
  background: #FAAF00;
  color: #3c3c3b;
}
.alert--success {
  background: #1E874C;
  color: #ffffff;
}

.buttonRow, .buttonRowTop, .buttonRowBottom {
  margin-top: 32px;
  margin-bottom: 32px;
  margin-left: -5px;
  margin-right: -5px;
}
.buttonRow .button, .buttonRowTop .button, .buttonRowBottom .button,
.buttonRow .buttonLink,
.buttonRowTop .buttonLink,
.buttonRowBottom .buttonLink {
  margin: 16px 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;
  }
}

.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: 16px;
  padding-bottom: 16px;
}
.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: 16px;
    padding-top: 16px;
  }
  .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:
<div class="kss-lists">
<ul class="">
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
<ol class="">
<li>List</li>
<li>List</li>
<li>List</li>
</ol>
<ul class="checkList">
<li><b>Headline</b>List</li>
</ul>
<ol class="checkList checkList--circle">
<li><b>Headline</b>List</li>
<li><b>Headline</b>List</li>
</ol>
<ul class="checkList checkList--circle">
<li><b>Headline</b>List</li>
<li><b>Headline</b>List</li>
</ul>
<ul class="checkList checkList--large">
<li>List</li>
<li>List</li>
</ul>
</div>

Styleguide Base.Lists
*/
ul,
ol {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}
ul li,
ol li {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

ul.checkList {
  list-style: none;
  padding-left: 25px;
}
ul.checkList li {
  position: relative;
}
ul.checkList li b, ul.checkList li strong {
  display: block;
  font-size: 1.8rem;
}
ul.checkList li:before {
  content: var(--base-icon-check-bold);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: -25px;
  font-size: 14px;
  margin-top: 1px;
  color: var(--main-color-secondary-medium);
}
ul.checkList--circle {
  padding-left: 35px;
}
ul.checkList--circle li b, ul.checkList--circle li strong {
  display: block;
  font-size: 1.8rem;
}
ul.checkList--circle li:before {
  position: absolute;
  left: -35px;
  font-size: 14px;
  margin-top: -1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--main-color-secondary-medium);
  width: 26px;
  height: 26px;
  padding-top: 2px;
}
ul.checkList--large {
  padding-left: 35px;
}
ul.checkList--large li {
  font-size: 2.6rem;
  font-weight: var(--main-font-weight-medium);
  margin-bottom: 22px;
}
ul.checkList--large li:before {
  font-size: 2.6rem;
  color: var(--main-color-black);
  left: -35px;
}
@media (max-width: 767px) {
  ul.checkList--large {
    padding-left: 30px;
  }
  ul.checkList--large li {
    font-size: 2rem;
  }
  ul.checkList--large li:before {
    font-size: 2rem;
    left: -25px;
  }
}

ol.checkList--circle {
  counter-reset: list-counter;
  position: relative;
  list-style: none;
  padding-left: 0;
}
ol.checkList--circle li {
  counter-increment: list-counter;
  position: relative;
  padding-left: 40px;
  margin-bottom: 10px;
}
ol.checkList--circle li b, ol.checkList--circle li strong {
  display: block;
  font-size: 1.8rem;
}
ol.checkList--circle li:before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid var(--main-color-secondary-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: var(--main-color-secondary-medium);
  padding-top: 1px;
}

#overlay {
  display: none;
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 103;
}

/*
Pagination

Markup:
<nav role="navigation" aria-label="Pagination">
  <ul class="pagination">
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking" aria-label="Previous Page">
            <i class="icon icon-angle-left" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="pagination__item " href="?page=1&amp;sort_by=ranking" aria-label="Goto Page 1">1</a>
      </li>
      <li>
        <a class="pagination__item " href="?page=2&amp;sort_by=ranking" aria-label="Goto Page 2">2</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking" aria-current="true" aria-label="Goto Page 3">3</a>
      </li>
      <span class="pagination__item pagination__item--seperator">...</span>
      <li>
        <a class="pagination__item " href="?page=5&amp;sort_by=ranking" aria-label="Goto Page 5">5</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking" aria-label="Next Page">
            <i class="icon icon-angle-right" aria-hidden="true"></i>
        </a>
      </li>
  </ul>
</nav>

Styleguide Components.Pagination
*/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.pagination li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: var(--main-color-black);
  border: 0;
  border-radius: 0;
  font-size: 18px;
  margin: 0 8px;
  padding: 0 3px;
}
.pagination__item--active {
  color: var(--main-color-secondary-medium) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pagination__item:hover {
  color: var(--main-color-secondary-medium);
}
.pagination .icon {
  font-size: 16px;
}

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-secondary-medium);
  text-decoration: none;
}

/*
Processbar

Markup:
<nav class="processbar" role="navigation>
    <ul class="processbar__items">
      <li class="processbar__item is-done">
          <i class="processbar__icon icon icon-order-address"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item is-active" aria-current="step">
          <i class="processbar__icon icon icon-order-payment"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item">
          <i class="processbar__icon icon icon-order-check"></i>
          <span class="processbar__label">Label</span>
      </li>
    </ul>
    <div class="processbar__inactive"></div>
    <div class="processbar__active"></div>
</nav>

Styleguide Components.Processbar
*/
.processbar {
  margin: 20px -10px 20px -10px;
  z-index: 1;
  position: relative;
}
@media (min-width: 768px) {
  .processbar {
    margin-bottom: 60px;
  }
}
.processbar__icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 5px;
}
.processbar__icon .icon {
  display: block;
}
.processbar__item {
  margin: 0;
  list-style-type: none;
  padding: 0 10px 30px 10px;
  width: 33%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 1rem;
  color: var(--main-color-middle-gray);
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .processbar__item {
    font-size: var(--main-font-size-small);
  }
}
@media (min-width: 1024px) {
  .processbar__item {
    width: 200px;
  }
}
.processbar__item:after {
  content: "";
  width: 23px;
  height: 23px;
  border: 4px solid var(--main-color-white);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  background: var(--main-color-middle-gray);
  transform: translateX(-50%);
}
.processbar__item.is-done, .processbar__item.is-active {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
}
.processbar__item.is-done:after, .processbar__item.is-active:after {
  background: var(--main-color-primary);
}
.processbar__item:first-child:before, .processbar__item:last-child:before {
  content: "";
  height: 5px;
  width: 50%;
  background: var(--main-color-white);
  display: block;
  position: absolute;
  bottom: 9px;
}
.processbar__item:first-child:before {
  right: 50%;
}
.processbar__item:last-child:before {
  left: 50%;
}
.processbar__items {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.processbar__inactive, .processbar__active {
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--main-color-middle-gray);
  bottom: 11px;
  left: 0;
  z-index: -1;
}
.processbar__active {
  background: var(--main-color-primary);
  height: 3px;
  bottom: 10px;
  width: 0;
  transition: width 0.6s ease-in-out;
}

.scrollTopButton {
  position: fixed;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 101;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-align: center;
  cursor: pointer;
  right: -45px;
  bottom: 0;
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -ms-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
}
.scrollTopButton:hover {
  background-color: var(--main-color-primary-darken);
}
.scrollTopButton.sticky {
  right: 0;
}

.tabs {
  margin-bottom: 32px;
}
.tabs .tabs_item {
  float: left;
  padding: 8px 32px;
  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: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .iconbarIcon__icon {
    font-size: 18px;
    width: 36px;
    height: 36px;
  }
}
.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: #949494;
  color: #3c3c3b;
  font-size: 1.2rem;
}
.iconbarIcon__label {
  font-size: 1.3rem;
  line-height: 1;
  display: none;
}
@media (min-width: 1250px) {
  .iconbarIcon__label {
    display: block;
  }
}
.iconbarIcon__count {
  position: absolute;
  left: calc(50% + 2px);
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--main-color-light-gray);
  color: var(--main-color-primary-contrast);
}
.iconbarIcon__count.is-action {
  display: flex !important;
  background: var(--main-color-action);
  color: var(--main-color-white);
  animation: scaleRequestIconBigger 1s forwards ease-in-out;
}

.iconbar {
  display: flex;
  align-items: flex-end;
}
@media (min-width: 1250px) {
  .iconbar {
    margin-left: 0;
    margin-right: 0;
  }
  .iconbar .iconbarIcon {
    padding-left: 0;
    padding-right: 0;
  }
}
.iconbar--landscape {
  align-items: center;
}
.iconbar--landscape .iconbarIcon {
  flex-direction: row;
}
.iconbar:not(.iconbar--landscape) .iconbarIcon__badge {
  order: -1;
  margin: 0;
  margin-bottom: 5px;
}

.iconbarHover {
  z-index: 104;
  background: var(--main-color-white);
  padding: 10px 20px;
  display: none;
  flex-direction: column;
  width: auto;
  max-width: 100vw;
  position: absolute;
  top: 100%;
  bottom: auto;
  right: 50%;
  max-height: 70vh;
  border-radius: 8px;
  transform: translateX(5%);
  margin-top: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
  .iconbarHover {
    display: none;
  }
}
.iconbarHover--bigger {
  width: 320px;
  transform: translateX(10%);
}
.iconbarHover__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
@media (min-width: 768px) {
  .iconbarHover__close {
    display: none;
  }
}
.iconbarHover__navigation {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}
.iconbarHover__navigation li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.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;
  font-weight: var(--main-font-weight-bold);
  white-space: nowrap;
}
.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: 18px;
  margin-right: 10px;
  color: var(--main-color-secondary-medium);
}
.iconbarHover__headline {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.iconbarHover__body {
  overflow: hidden;
  overflow-y: auto;
  padding-right: 10px;
  margin-right: -10px;
}
.iconbarHover__footer {
  padding-top: 20px;
}

.iconbarItem {
  position: relative;
}
@media (min-width: 768px) {
  .iconbarItem.hoverintent .iconbarHover, .iconbarItem.showIconbarHover .iconbarHover {
    display: flex;
  }
}

/*
Iconlist

Markup:
<div class="iconList">
  <a href="#"><i class="icon icon-facebook"></i></a>
  <a href="#"><i class="icon icon-twitter"></i></a>
  <a href="#"><i class="icon icon-youtube"></i></a>
  <a href="#"><i class="icon icon-tiktok"></i></a>
  <a href="#"><i class="icon icon-instagram"></i></a>
  <a href="#"><i class="icon icon-pinterest"></i></a>
</div>

Styleguide Components.Iconlist
*/
.iconList {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-bottom: -5px;
  column-gap: 24px;
}
.iconList a {
  color: var(--main-color-primary);
  text-decoration: none;
  margin-right: 5px;
  margin-bottom: 5px;
}
.iconList a:hover, .iconList a:focus, .iconList a:active {
  color: var(--main-color-white);
  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;
  font-weight: 600;
  border-right: 1px solid var(--main-color-gray-base);
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 0;
  margin-left: 25px;
}
.iconbox .icon {
  color: var(--main-color-secondary-medium);
  font-size: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
.iconbox small {
  display: block;
  font-weight: var(--main-font-weight);
  font-size: 1.6rem;
}
.iconbox.iconbox--last {
  border-right: none;
}
@media (max-width: 1249px) {
  .iconbox {
    border-right: 1px solid var(--main-color-white);
  }
}
@media (max-width: 767px) {
  .iconbox {
    border-right: 1px solid var(--main-color-gray-base);
    margin-left: 0;
  }
}

.trustIcons--basket .textcontent {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.trustIcons--basket .textcontent .iconbox {
  width: calc(25% - 40px);
}
.trustIcons--basket .textcontent .iconbox:last-child {
  border-right: none;
}
@media (max-width: 1249px) {
  .trustIcons--basket .textcontent .iconbox {
    width: calc(50% - 40px);
  }
  .trustIcons--basket .textcontent .iconbox:nth-child(2) {
    border-right: none;
  }
}
@media (max-width: 767px) {
  .trustIcons--basket .textcontent .iconbox {
    width: 100%;
    border-right: none;
  }
}

.trustIcons--checkout .textcontent {
  display: flex;
  flex-wrap: wrap;
}
.trustIcons--checkout .textcontent .iconbox {
  margin-left: 15px;
  width: calc(25% - 15px);
  padding-left: 35px;
  padding-right: 20px;
  line-height: 1.2;
  display: flex;
  align-items: center;
}
.trustIcons--checkout .textcontent .iconbox:last-child {
  border-right: none;
}
.trustIcons--checkout .textcontent .iconbox .icon {
  font-size: 20px;
  height: 100%;
  margin-bottom: 0;
}
@media (max-width: 1023px) {
  .trustIcons--checkout .textcontent {
    gap: 20px 0;
  }
  .trustIcons--checkout .textcontent .iconbox {
    width: calc(50% - 15px);
  }
  .trustIcons--checkout .textcontent .iconbox:nth-child(2) {
    border-right: none;
  }
}
@media (max-width: 481px) {
  .trustIcons--checkout .textcontent .iconbox {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--main-color-gray-base);
    margin-left: 0;
    padding-bottom: 20px;
  }
  .trustIcons--checkout .textcontent .iconbox .icon {
    padding-bottom: 20px;
  }
}

.trustIconsSwiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
}
.trustIconsSwiper .swiper-pagination-bullet-active {
  background: var(--main-color-primary);
}
@media screen and (min-width: 1024px) {
  .trustIconsSwiper .swiper-slide:last-child .iconbox {
    border-right: 0;
  }
}

/*
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: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
}
.trustBar__close .icon {
  display: block;
  margin: 0;
}
.trustBar__close:hover {
  color: var(--main-color-secondary);
}
.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: 35px;
  padding-right: 35px;
  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: -30px;
  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: 32px;
}
.trustInfobar img {
  object-fit: contain;
  max-height: 120px;
}
@media (max-width: 1539px) {
  .trustInfobar__label {
    width: 100%;
    margin-right: 0;
  }
}
@media (max-width: 1023px) {
  .trustInfobar > * {
    margin-bottom: 32px;
    margin-right: 20px;
  }
}

/*
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__addon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--main-color-middle-gray);
  overflow: hidden;
  text-decoration: none;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .inputGroup__addon {
    height: 46px;
    padding-left: 16px;
    padding-right: 16px;
  }
}
.inputGroup__addon:first-child {
  margin-right: -1px;
}
.inputGroup__addon:last-child {
  margin-left: -1px;
}
.inputGroup__addon .button {
  min-width: 0;
  border-radius: 0;
  margin: -1px;
  min-height: 0;
}
.inputGroup__addon .icon {
  line-height: 1;
  display: block;
  font-size: 16px;
}
@media (min-width: 768px) {
  .inputGroup__addon .icon {
    font-size: 20px;
  }
}
.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: 36px;
  background: transparent;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .inputGroup button.inputGroup__addon {
    min-width: 46px;
  }
}
.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%;
  background: transparent !important;
  border: 0;
}
.inputGroup--infieldAddon .inputGroup__addon:first-child {
  left: 0;
}
.inputGroup--infieldAddon .inputGroup__addon:last-child {
  right: 0;
}
.inputGroup--infieldAddon > input:first-child {
  padding-right: 36px;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:first-child {
    padding-right: 46px;
  }
}
.inputGroup--infieldAddon > input:last-child {
  padding-left: 36px;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:last-child {
    padding-left: 46px;
  }
}
.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 input {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.inputGroup.is-inactive .inputGroup__addon {
  display: none;
}

.bg--secondary input, .bg--secondary select, .bg--secondary textarea {
  background: none !important;
  border-color: var(--main-color-white);
}
.bg--secondary .selectBody, .bg--secondary .customSelect__selected {
  background: none;
}
.bg--secondary .selectBody select option, .bg--secondary .customSelect__selected select option {
  color: #000 !important;
  background: #fff !important;
}
.bg--secondary input, .bg--secondary textarea, .bg--secondary select {
  color: var(--main-color-white);
}
.bg--secondary .specialcheckbox {
  color: var(--main-color-white);
}
.bg--secondary .specialcheckbox i {
  border: 0;
}
.bg--secondary .specialcheckbox i:after {
  left: 0;
  top: 0;
  background: var(--main-color-white);
  color: var(--main-color-secondary);
}
.bg--secondary .contactformular .button--primary {
  background: var(--main-color-white);
  color: var(--main-color-secondary);
  border-color: var(--main-color-white);
  font-weight: 600;
}
.bg--secondary .contactformular .button--primary:hover {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}
.bg--secondary .infieldInputGroup--select > label, .bg--secondary .infieldInputGroup.is-focus > label, .bg--secondary .infieldInputGroup.is-filled > label {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
}

/*
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: 12px;
  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% - 24px);
}
@media (min-width: 768px) {
  .infieldInputGroup > label {
    left: 16px;
    line-height: 20px;
    max-width: calc(100% - 32px);
  }
}
.infieldInputGroup:has(.inputGroup--infieldAddon) > label {
  left: 16px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon) > label {
    left: 16px;
  }
}
.infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
  left: 12px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
    left: 16px;
  }
}
.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%;
}
.infieldInputGroup:has(.iti--show-flags) > 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%;
}
.infieldInputGroup.infieldInputGroup--withPlaceholder > 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;
}

/*
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%;
  min-width: 340px;
  border-radius: 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .searchBar {
    padding-left: 60px;
    min-width: 240px;
  }
}
@media (min-width: 1024px) and (max-width: 1249px) {
  .searchBar {
    padding-left: 60px;
    min-width: 340px;
  }
}
.searchBar input {
  background: transparent;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--main-color-black);
  padding: 10px 0;
}
.searchBar input::placeholder {
  color: var(--main-color-black);
  opacity: 1;
  transition: color 0.5s ease;
}
.searchBar input:focus::placeholder {
  color: transparent;
}
.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 transparent inset !important;
}
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
  order: -1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--main-color-black);
  transition: 0.2s ease-in-out;
  padding-right: 16px;
  padding-left: 0;
  border-radius: 0;
  min-width: 40px;
  height: 44px;
  color: var(--main-color-black);
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
  background: transparent;
  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: 46px;
  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;
}
@media (max-width: 767px) {
  .searchBar {
    min-width: 100%;
  }
  .searchBar--minified-xs {
    position: relative;
  }
  .searchBar--minified-xs input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease-in-out;
  }
  .searchBar--minified-xs .inputGroup__addon {
    z-index: 1;
    border-radius: 0;
    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: 46px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 0;
  }
  .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.5s ease-in-out;
  }
  .searchBar--minified-sm .inputGroup__addon {
    z-index: 1;
    border-radius: 0;
    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: 46px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 0;
  }
  .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.5s ease-in-out;
  }
  .searchBar--minified-md .inputGroup__addon {
    z-index: 1;
    border-radius: 0;
    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: 46px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 0;
  }
  .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.5s ease-in-out;
  }
  .searchBar--minified-lg .inputGroup__addon {
    z-index: 1;
    border-radius: 0;
    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: 46px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 0;
  }
  .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.5s ease-in-out;
  }
  .searchBar--minified-xlg .inputGroup__addon {
    z-index: 1;
    border-radius: 0;
    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: 46px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--main-color-primary);
    border-radius: 0;
  }
  .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: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}

.searchBarWrapper {
  position: relative;
}
.searchBarWrapper .searchBarSuggestions {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1;
}
.searchBarWrapper.is-loading .searchBar {
  pointer-events: none;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon {
  animation: rotation 1s infinite ease-in-out;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon:before {
  content: var(--base-icon-loading);
}

/*
Rating

Markup:
<div class="rating">
    <div class="rating__stars">
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active-half"><i class="icon icon-star"></i></span>
    </div>
    <div class="rating__label">
        (4,5/5) Trusted Shops
    </div>
</div>

Styleguide Components.Rating
*/
.rating {
  display: flex;
  align-items: center;
}
.rating__star {
  display: block;
  line-height: 1;
}
.rating__star--active .icon:before {
  content: var(--base-icon-star-filled);
}
.rating__star--active-half .icon:before {
  content: var(--base-icon-star-half);
}
.rating__label {
  margin-left: 10px;
}
.rating__stars {
  display: flex;
  align-items: center;
}

.ratingSelection {
  font-size: 1.8em;
  margin-right: -5px;
}
.ratingSelection .rating__star {
  cursor: pointer;
  margin-right: 5px;
}
.ratingSelection .rating__star:hover {
  color: var(--main-color-primary);
}

.ratingListItem__stars {
  margin-right: 20px;
}
.ratingListItem__header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.ratingList .ratingListItem:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--main-color-middle-gray);
  margin-bottom: 20px;
}

.itemcardRatingLink {
  color: var(--main-color-black);
  text-decoration: none;
}
.itemcardRatingLink:hover, .itemcardRatingLink:focus, .itemcardRatingLink:active {
  color: var(--main-color-primary);
  text-decoration: none;
}

.itemcardRatingViewHeadline {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .itemcardRatingViewHeadline {
    justify-content: space-between;
  }
}
.itemcardRatingViewHeadline h2 {
  margin-bottom: 0;
}
.itemcardRatingViewHeadline .rating {
  margin-left: 20px;
}

/*
Action Icon

Markup:
<button class="actionIcon {{modifier_class}}"><i class="icon icon-favorites"></i></button>

:hover - Hover
:focus - Focus
.is-loading - Loading
.is-success - Success
.is-error - Error

Styleguide Components.Action Icon
*/
.actionIcon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  color: var(--main-color-black);
  text-decoration: none;
  position: relative;
  border: 0;
  background: transparent;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  backdrop-filter: none !important;
}
.actionIcon:hover {
  background: transparent;
  text-decoration: none;
  color: var(--main-color-primary);
}
.actionIcon:hover .icon-favorites:before {
  content: var(--base-icon-heart);
}
.actionIcon:hover .icon-favorites-filled:before {
  content: var(--base-icon-heart-filled);
}
.actionIcon:focus, .actionIcon:active {
  background: transparent;
  text-decoration: none;
  color: var(--main-color-primary);
}
.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 .icon.icon-close {
  font-size: 1.2rem;
}
.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: 1249px) {
  .tags {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    max-width: 100vw;
    gap: 5px;
  }
  .tags > * {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

/*
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: 16px;
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  color: var(--main-color-black);
  border-radius: 50%;
  text-align: center;
  border: 2px solid transparent;
}
.modal__close:hover, .modal__close:focus {
  color: var(--main-color-secondary);
  text-decoration: none;
  border-color: var(--main-color-secondary);
  background: var(--main-color-white);
  opacity: 1;
}
.modal__close i {
  display: block;
}
.modal__close i:before {
  line-height: 1;
  display: block;
}
.modal__header {
  padding: 20px 40px 0 20px;
}
@media (min-width: 768px) {
  .modal__header {
    padding: 30px 50px 0 30px;
  }
}
.modal__body {
  padding: 20px;
}
@media (min-width: 768px) {
  .modal__body {
    padding: 30px;
    padding-top: 0;
  }
}
.modal__footer {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media (min-width: 768px) {
  .modal__footer {
    padding: 30px;
  }
}
.modal__footer:not(.modal__footer--bg) {
  padding-top: 0;
}
.modal__title {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  margin-bottom: 1em;
}
.modal__title small {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
}
.modal--info .modal__header, .modal--error .modal__header, .modal--success .modal__header {
  padding: 0;
}
.modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
  text-align: center;
  max-width: 420px;
  padding-top: 50px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
    padding-top: 130px;
  }
}
.modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
  content: var(--base-icon-exclamation);
  font-family: "icons", Helvetica, Arial, sans-serif;
  border: 2px solid var(--main-color-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  border-radius: 50%;
  color: var(--main-color-warning);
  transform: translateX(-50%);
  line-height: 1;
  top: 20px;
  font-size: 24px;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
    top: 40px;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
}
.modal--error .modal__dialog:before {
  content: var(--base-icon-exclamation);
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
.modal--success .modal__dialog:before {
  content: var(--base-icon-check);
  border-color: var(--main-color-success);
  color: var(--main-color-success);
}
.modal--flyout {
  padding: 0;
  width: 320px;
  transition: all 0.3s ease;
}
.modal--flyout .modal__dialog {
  height: 100%;
  height: 100svh;
  overflow: hidden;
  overflow-y: auto;
  transform: none;
}
.modal--flyoutRight {
  position: fixed;
  right: -320px;
  left: auto;
}
.modal--flyoutRight.open {
  right: 0;
}
.modal--flyoutRight .modal__dialog {
  margin-left: auto;
  margin-right: 0;
}
.modal--flyoutLeft {
  position: fixed;
  left: -320px;
  margin-right: auto;
  margin-left: 0;
  right: auto;
}
.modal--flyoutLeft.open {
  left: 0;
}
.modal--flyoutLeft .modal__dialog {
  margin-right: auto;
  margin-left: 0;
}
.modal--loading .modal__title {
  opacity: 0;
}
.modal--loading .modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.modal--loading .modal__body .icon {
  font-size: 60px;
  animation: rotation 1s infinite linear;
}
.modal--lg .modal__dialog {
  max-width: 1200px;
}
.modal--md .modal__dialog {
  max-width: 900px;
}
.modal--sm .modal__dialog {
  max-width: 600px;
}
.modal--xs .modal__dialog {
  max-width: 420px;
}
.modal--white .modal__dialog {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}
.modal.open .modal__dialog {
  transform: none;
}
.modal--disabled .modal__dialog {
  pointer-events: none;
  margin-top: -10px;
}
.modal--disabled .modal__content {
  opacity: 0.2;
}

.modalBg {
  background: rgba(204, 204, 204, 0.7);
  z-index: 106;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

body.modal-open,
html.modal-open {
  overflow: hidden;
}
@media (min-width: 1024px) {
  body.modal-open,
  html.modal-open {
    padding-right: 6px;
  }
}

/*
Radio List

Markup:
<div class="radioList {{modifier_class}}">
        <label for="radio1" class="radioListItem">
            <input type="radio" name="radio" id="radio1" value="1" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
        <label for="radio2" class="radioListItem">
            <input type="radio" name="radio" id="radio2" value="2" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
</div>

radioList--small - Small

Styleguide Components.Radio List
*/
.radioListItem {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 10px 10px 50px;
  border-top: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  cursor: pointer;
  min-height: 65px;
}
.radioListItem:hover, .radioListItem:focus, .radioListItem:active {
  z-index: 1;
  background-color: var(--main-color-gray-background);
}
.radioListItem.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  font-size: 1.6rem;
}
.radioListItem.disabled .radioListItem__textHover {
  display: none;
  position: absolute;
  right: 0;
  width: 0;
  opacity: 0;
  z-index: 99;
  color: var(--main-color-black);
  padding-left: 50px;
  transition: all 0.2s ease-in-out;
}
.radioListItem.disabled:hover {
  opacity: 1;
  transition: all 0.2s ease-in-out;
}
.radioListItem.disabled:hover .radioListItem__textHover {
  display: block;
  left: 0;
  width: 100%;
  opacity: 1;
  background-color: var(--main-color-gray-background);
}
.radioListItem__image {
  padding-left: 20px;
}
.radioListItem__image img {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
  width: 100px;
}
.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;
  cursor: pointer;
}
.radioListItem input + i {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--main-color-white);
  border: 1px solid var(--main-color-middle-gray);
  border-radius: 50%;
  position: absolute;
  left: 10px;
  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;
}
.radioListItem.hasChildren {
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
}

.radioList {
  margin-bottom: -20px;
}
.radioList .radioListItem {
  margin-bottom: -1px;
}
.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: 8px;
  border-top-right-radius: 8px;
  margin-top: 0;
}
.radioList--small .radioListItem:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.radioList--small .radioListItem__summary {
  margin-top: 0;
}
.radioList--small .radioListItem input + i {
  left: 10px;
}

/*
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-right: 5px;
}
.linkWithIcon .icon:last-child {
  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);
}

/*
Share Links

Markup:
<div class="shareLinks">
    <a class="shareLink" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Facebook teilen">
        <i class="icon icon-facebook"></i>
        <span>Share on Facebook</span>
    </a>
    <a class="shareLink" href="https://www.pinterest.com/pin/create/link/?url=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Pinterest pinnen">
        <i class="icon icon-pinterest"></i>
        <span>Share on Pinterest</span>
    </a>
</div>

Styleguide Components.Share Links
*/
.shareLink {
  color: var(--main-color-black);
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 20px 10px 10px;
  border: 1px solid var(--main-color-middle-gray);
  border-radius: 8px;
  cursor: pointer;
}
.shareLink:hover {
  text-decoration: none;
  color: var(--main-color-white);
  background: var(--main-link-color);
  border-color: var(--main-link-color);
}
.shareLink:focus, .shareLink:active {
  text-decoration: none;
  color: var(--main-color-white);
  background: var(--main-link-color-hover);
  border-color: var(--main-link-color-hover);
}
.shareLink .icon {
  margin-right: 5px;
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shareLink.is-loading, .shareLink.is-success, .shareLink.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.shareLink.is-loading {
  cursor: wait;
  color: var(--main-color-white) !important;
}
.shareLink.is-loading .icon:before {
  content: var(--base-icon-loading);
  animation: rotation 1s infinite ease-in-out;
}
.shareLink.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-white) !important;
}
.shareLink.is-success .icon:before {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.shareLink.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.shareLink.is-error .icon:before {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

.shareLinks {
  display: flex;
  flex-direction: column;
  margin-bottom: -10px;
}
.shareLinks .shareLink {
  margin-bottom: 10px;
}

/*
Custom Select

Markup:
<div class="customSelect js-customSelect {{modifier_class}}">
  <select>
    <option disabled selected>{{tc.please_choose}}</option>
    <option value="s">S</option>
    <option value="m">M</option>
    <option value="l">L</option>
    <option value="xl" disabled>XL</option>
    <option value="xxl">XXL</option>
  </select>
  <div class="customSelect__selected">Choose</div>
  <div class="customSelect__dropdown">
    <div class="customSelect__dropdownClose">
        <i class="icon icon-close"></i>
    </div>
    <div class="customSelect__dropdownHeader d-block d-sm-none">
        <div class="customSelect__dropdownTitle">
            Title
        </div>
    </div>
    <div class="customSelect__dropdownItem" data-value="s">
      <div class="customSelect__dropdownItemHeadline">S</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="m">
      <div class="customSelect__dropdownItemHeadline">M</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="l">
      <div class="customSelect__dropdownItemHeadline">L</div>
    </div>
    <div class="customSelect__dropdownItem disabled" data-value="xl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
      <div class="customSelect__dropdownItemText">Not available</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="xxl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
    </div>
  </div>
</div>

.is-loading - is loading
.is-success - is success
.is-error - is error
.customSelect--small - Small Custom Select
.customSelect--small.is-loading - Small Custom Select is loading
.customSelect--small.is-success - Small Custom Select is success
.customSelect--small.is-error - Small Custom Select is error

Styleguide Components.Custom Select
*/
.customSelect {
  position: relative;
  width: 100%;
}
.customSelect__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__hiddenFormField {
  display: none;
}
.customSelect__dropdown {
  z-index: 2;
  background: var(--main-color-white);
  font-size: var(--main-font-size-small);
  overflow: hidden;
  flex-direction: column;
}
@media (max-width: 767px) {
  .customSelect__dropdown {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    padding: 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    translate: 0 110%;
    transition: 0.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
    z-index: 104;
    max-height: 100vh;
    max-height: 100svh;
  }
}
@media (min-width: 768px) {
  .customSelect__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: 300px;
    max-width: 100vw;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--main-color-middle-gray);
    border-radius: 8px;
    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: 1px solid var(--main-color-middle-gray);
  border-radius: 8px;
  background: var(--main-color-white);
}
.customSelect__dropdownItem--radio:after, .customSelect__dropdownItem--checkbox:after {
  opacity: 0;
}
.customSelect__dropdownItem--radio.is-active:before, .customSelect__dropdownItem--checkbox.is-active:before {
  border-color: var(--main-color-black);
}
.customSelect__dropdownItem--radio.is-active:after, .customSelect__dropdownItem--checkbox.is-active:after {
  opacity: 1;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--radio:after {
  border-radius: 50%;
}
.customSelect__dropdownItem--radio:after {
  background: var(--main-color-black);
  width: 12px;
  height: 12px;
  margin-left: 4px;
  opacity: 0;
}
.customSelect__dropdownItem--checkbox:after {
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 18px;
}
.customSelect__dropdownItem--checkbox.is-active {
  background: transparent;
}
.customSelect__dropdownItem--checkbox.is-active:before {
  border-color: var(--main-color-black);
}
.customSelect__dropdownItem--checkbox.is-active:after {
  opacity: 1;
}
.customSelect select {
  display: none;
}
.customSelect.is-active .customSelect__selected {
  border-color: var(--main-color-primary);
}
.customSelect.is-active .customSelect__selected:after {
  content: var(--base-icon-angle-up);
}
.customSelect.is-active .customSelect__dropdown {
  display: flex;
}
@media (max-width: 767px) {
  .customSelect.is-active .customSelect__dropdown {
    translate: 0 0;
    pointer-events: auto;
    opacity: 1;
  }
}
.customSelect.is-loading .customSelect__selected, .customSelect.is-success .customSelect__selected, .customSelect.is-error .customSelect__selected {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
  padding-right: 40px;
  padding-left: 10px;
  position: relative;
}
.customSelect.is-loading .customSelect__selected .icon, .customSelect.is-success .customSelect__selected .icon, .customSelect.is-error .customSelect__selected .icon {
  opacity: 0;
}
.customSelect.is-loading .customSelect__selected:after, .customSelect.is-success .customSelect__selected:after, .customSelect.is-error .customSelect__selected:after {
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  transform: translateY(0);
  translate: 0 -50%;
  font-size: 24px;
  margin-top: 0;
}
.customSelect.is-loading .customSelect__selected {
  cursor: wait;
  color: var(--main-color-black) !important;
}
.customSelect.is-loading .customSelect__selected:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.customSelect.is-success .customSelect__selected {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-black) !important;
}
.customSelect.is-success .customSelect__selected:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect.is-error .customSelect__selected {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.customSelect.is-error .customSelect__selected:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.customSelect--small {
  width: auto;
  display: inline-flex;
}
.customSelect--small .customSelect__selected {
  padding: 0;
  padding-right: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.customSelect--small .customSelect__selected:after {
  font-size: 1.2rem;
  right: 0;
}
.customSelect--small.is-loading .customSelect__selected, .customSelect--small.is-success .customSelect__selected, .customSelect--small.is-error .customSelect__selected {
  padding-right: 20px;
  padding-left: 0;
}
.customSelect--small.is-loading .customSelect__selected:after, .customSelect--small.is-success .customSelect__selected:after, .customSelect--small.is-error .customSelect__selected:after {
  right: 0;
  font-size: 16px;
}
.customSelect--small.is-loading .customSelect__selected {
  cursor: wait;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-black) !important;
}
.customSelect--small.is-success .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-success) !important;
}
.customSelect--small.is-error .customSelect__selected {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--main-color-danger) !important;
}
.customSelect--openRight .customSelect__dropdown {
  left: auto;
  right: 0;
}
.customSelect--openTop .customSelect__dropdown {
  top: auto;
  bottom: 35px;
}

.viewer360Images img {
  user-drag: none;
  -webkit-user-drag: none;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center center;
}
.viewer360Images img:not(.is-active) {
  display: none;
}

.viewer360 {
  position: relative;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.viewer360__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: 0.4s ease-in-out;
  color: var(--main-color-dark-gray);
  line-height: 1;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25px;
  border-radius: 50%;
  background: var(--main-color-white);
  z-index: 1;
}
.viewer360__loader:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
  position: absolute;
  left: 50%;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -15px;
}
.viewer360.is-loading {
  cursor: wait;
  pointer-events: none;
}
.viewer360.loaded .viewer360__loader {
  opacity: 0;
  pointer-events: none;
}

.viewer360Wrapper {
  position: relative;
  pointer-events: none;
}
.viewer360Wrapper__zoom {
  font-size: 24px;
  color: var(--main-color-dark-gray);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--main-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
.viewer360Wrapper__zoom:hover, .viewer360Wrapper__zoom:focus, .viewer360Wrapper__zoom:active {
  color: var(--main-color-primary);
}
.viewer360Wrapper:has(.viewer360.loaded) {
  pointer-events: auto;
}
.viewer360Wrapper:has(.viewer360.loaded) .viewer360Wrapper__zoom {
  opacity: 1;
  pointer-events: auto;
}

.fullscreenGallery .viewer360Images {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fullscreenGallery .viewer360Images img {
  position: absolute;
  width: 100%;
  height: 100% !important;
}

/*
Contentbox

Markup:
<div class="contentBox {{modifier_class}}">
  <div class="contentImage">
    <img alt="" src="/userdata/images/muster/400x300.png" style="width: 400px; height: 300px;">
  </div>
  <div class="contentText">
    <h3>Headline</h3>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  </div>
</div>

.reverse - Reverse
.contentBox--textinbox - Text in Box

//Styleguide Components.Contentbox
*/
.contentBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 8px;
  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 {
  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 {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2 {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  .contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2 {
    font-size: 3rem;
  }
}
.contentBox.contentBox--textinbox .contentText h2:last-child, .contentBox.contentBox--textinbox .contentText .h2: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);
}

.contentTabs__header {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  border-bottom: 1px solid var(--main-color-gray-base);
  gap: 40px;
}
.contentTabs__header li {
  margin: 0;
  padding: 15px 0;
  list-style-type: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: var(--main-font-weight-bold);
}
.contentTabs__header li:hover, .contentTabs__header li.is-active {
  border-bottom: 1px solid var(--main-color-black);
  margin-bottom: -1px;
}
@media (max-width: 767px) {
  .contentTabs__header {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    max-width: 100vw;
    gap: 20px;
    padding-bottom: 1px;
  }
  .contentTabs__header li {
    white-space: nowrap;
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}
.contentTabs__content {
  padding: 30px 0;
}
.contentTabs__content > * {
  display: none;
}
.contentTabs__content > *.is-active {
  display: block;
}
.contentTabs:not(.initialized) .contentTabs__content > *:first-child {
  display: block;
}

.itemcardBuybox .contentTabs__header {
  justify-content: flex-start;
  gap: 40px;
}
.itemcardBuybox .contentTabs__header li:after {
  content: var(--base-icon-angle-down-light);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 12px;
  display: block;
  transition: all 0.2s ease-in-out;
}
.itemcardBuybox .contentTabs__header li:hover:after, .itemcardBuybox .contentTabs__header li.is-active:after {
  content: var(--base-icon-angle-up-light);
}

.tabs--pills {
  margin-bottom: 30px;
}
.tabs--pills .contentTabs__header {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--main-color-secondary);
  border-radius: 50px;
  overflow: hidden;
  width: max-content;
  gap: 0;
}
.tabs--pills .contentTabs__header li {
  padding: 8px 20px;
  cursor: pointer;
  background: var(--main-color-white);
  text-align: center;
  align-items: center;
  color: var(--main-color-secondary);
  transition: background-color 0.2s, color 0.2s;
  user-select: none;
  border-radius: 50px;
  font-weight: var(--main-font-weight-bold);
  line-height: 26px;
  min-width: 133px;
}
.tabs--pills .contentTabs__header li a {
  text-decoration: none;
  flex-grow: 1;
  color: var(--main-color-secondary);
}
.tabs--pills .contentTabs__header li.is-active {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  cursor: default;
  justify-content: center;
}
.tabs--pills .contentTabs__header li:not(.is-active):hover {
  color: var(--main-color-secondary-medium);
  background: transparent;
  border-radius: 0;
}
.tabs--pills .contentTabs__header li:not(.is-active):hover a {
  color: var(--main-color-secondary-medium);
}

.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: 8px;
  font-size: var(--main-font-size-small);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  left: 50%;
  bottom: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
  z-index: 109;
}
.flashMessage.is-active {
  pointer-events: auto;
}
.flashMessage__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--main-color-light-gray);
  text-align: center;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  translate: 0 -50%;
  color: var(--main-color-black);
}
.flashMessage__icon .icon {
  display: block;
  line-height: 1;
}
.flashMessage__close {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--main-font-size-base);
  width: 20px;
  height: 20px;
  transition: 0.2s ease-in;
  background: var(--main-color-white);
  border-radius: 50%;
  color: var(--main-color-black);
}
.flashMessage__close .icon {
  display: block;
  line-height: 1;
  transition: scale 0.2s ease-in;
}
.flashMessage__close:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
}
.flashMessage__msg:not(:last-child) {
  padding-bottom: 2px;
  margin-bottom: 2px;
}
.flashMessage--warning .flashMessage__icon {
  background: var(--main-color-warning);
  background: var(--main-color-warning-contrast);
}
.flashMessage--error .flashMessage__icon {
  background: var(--main-color-danger);
  color: var(--main-color-danger-contrast);
}
.flashMessage--success .flashMessage__icon {
  background: var(--main-color-success);
  color: var(--main-color-success-contrast);
}

/*
Breadcrumb

Markup:
<nav aria-label="Breadcrumb" aria-hidden="true" class="breadcrumbWrapper">
  <ul class="breadcrumb">
    <li>
    <a href="#">Level 1</a>
    </li>
    <i class="icon icon-slash"></i>
    <li>
    <a href="#">Level 2</a>
    </li>
    <i class="icon icon-slash"></i>
    <li aria-current="page" class="current">
    <span>Current</span>
    </li>
  </div>
  <a class="breadcrumbBackbutton" href="#"><i class="icon icon-angle-left"></i>Back</a>
</div>

Styleguide Components.Breadcrumb
*/
.breadcrumb {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
  }
}
.breadcrumb li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.breadcrumb i {
  margin: 0 8px;
}
.breadcrumb a i {
  display: block;
  margin: 0;
  font-size: 14px;
}
.breadcrumb .current {
  color: var(--main-color-black);
}
.breadcrumb .current a {
  color: var(--main-color-black);
}

.breadcrumbBackbutton {
  color: var(--main-color-dark-gray);
  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: var(--main-font-size-small);
  line-height: 1;
  color: var(--main-color-dark-gray);
}
@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-dark-gray);
  text-decoration: none;
}
.breadcrumbWrapper a:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}

body.pg_404 .breadcrumbWrapper {
  display: none;
}

/*
Toggle Navigation

Markup:
<div class="navToggler {{modifier_class}}">
  <div class="navToggler__bar"></div>
  <div class="navToggler__bar"></div>
  <div class="navToggler__bar"></div>
</div>

.is-active - Active Class

Styleguide Navigations.Toggle Navigation
*/
.navToggler {
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
}
.navToggler__bar {
  width: 100%;
  height: 2px;
  background-color: var(--main-color-black);
  border-radius: 2px;
  position: absolute;
  left: 0;
  width: calc(100% - 22px);
  width: -moz-calc(100% - 22px);
  width: -webkit-calc(100% - 22px);
  width: -o-calc(100% - 22px);
  transition: 0.2s linear;
}
.navToggler__bar:first-child {
  top: 11px;
}
.navToggler__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.navToggler__bar:last-child {
  bottom: 11px;
}
.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;
}

.js-toggleLinkSlide {
  cursor: pointer;
}

.navChildrenToggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navChildrenToggle:after {
  content: var(--base-icon-plus);
  font-family: "icons", Helvetica, Arial, sans-serif;
}
.navChildrenToggle.is-active:after {
  content: var(--base-icon-minus);
}

/*
Nav

Markup:
<nav class="nav">
  <ul>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>

Styleguide Navigations.Nav
*/
.nav {
  display: flex;
  flex-wrap: nowrap;
}
.nav ul {
  margin: 0;
  padding: 0;
}
.nav li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.nav a {
  color: var(--main-color-black);
  text-decoration: none;
  font-size: 1.4rem;
}
.nav a:hover, .nav a:focus, .nav a:active, .nav a.active, .nav a.active_tree {
  color: var(--main-color-primary);
}
.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;
  }
}

.megaMenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 101;
  background: var(--main-color-white);
  width: 100%;
  border-top: 1px solid var(--main-color-black);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
  padding-top: 60px;
  padding-bottom: 60px;
}
.megaMenu li {
  padding-top: 5px;
  padding-bottom: 5px;
}
.megaMenu a {
  font-weight: var(--main-font-weight);
  display: block;
  font-size: 16px;
  line-height: 1.33;
  margin-bottom: 10px;
}
@media (min-width: 1540px) {
  .megaMenu a {
    font-size: 18px;
  }
}
.megaMenu__navigation {
  max-width: 1500px;
}
.megaMenu__navigation > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 60px;
}
.megaMenu__navigation > ul > li {
  display: flex;
  flex-direction: column;
  width: calc(33.3333333333% - 40px);
  border-right: 1px solid var(--main-color-gray-base);
  padding-right: 60px;
}
.megaMenu__navigation > ul > li:last-child, .megaMenu__navigation > ul > li:nth-child(3) {
  border-right: none;
}
.megaMenu__navigation > ul > li > a {
  font-size: 2.5rem;
  font-weight: var(--main-font-weight-medium);
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  line-height: 1.2;
  color: var(--main-color-black);
}
@media (min-width: 1540px) {
  .megaMenu__navigation > ul > li > a {
    font-size: 3rem;
  }
}
@media (max-width: 1539px) {
  .megaMenu__navigation > ul {
    gap: 30px;
  }
  .megaMenu__navigation > ul > li {
    padding-right: 30px;
  }
}
.megaMenu ul.nav--content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
}
.megaMenu ul.nav--content > li {
  display: flex;
  flex-direction: column;
  width: calc(25% - 30px);
  border-right: 1px solid var(--main-color-gray-base);
  padding-right: 60px;
}
.megaMenu ul.nav--content > li:last-child, .megaMenu ul.nav--content > li:nth-child(4) {
  border-right: none;
}
.megaMenu ul.nav--content > li > a {
  font-size: 3rem;
  font-weight: var(--main-font-weight-medium);
  color: var(--main-color-black);
  display: flex;
  line-height: 1.2;
  hyphens: auto;
  flex-direction: column;
}
.megaMenu ul.nav--content > li > a .navigationName {
  min-height: 80px;
}
.megaMenu ul.nav--content > li > a:hover {
  color: var(--main-color-primary);
}
@media (max-width: 1539px) {
  .megaMenu ul.nav--content > li {
    padding-right: 30px;
  }
}
.megaMenu .groupNavigationWrapper {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.megaMenu .groupNavigationWrapper ul.level_3 {
  flex-shrink: 0;
}
.megaMenu .groupNavigationWrapper ul.level_3:not(:has(.groupNavigation)) {
  display: none;
}
.megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) {
  column-gap: 20px;
  column-count: 2;
}
@media (min-width: 1540px) {
  .megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) {
    column-gap: 40px;
  }
}
.megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) .groupNavigation {
  break-inside: avoid;
}
.megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) .groupNavigationList {
  column-count: 1;
}
.megaMenu .groupNavigation {
  margin-bottom: 40px;
}
.megaMenu .categoryIcon {
  max-width: 220px;
  aspect-ratio: 1;
  border-radius: 8px;
}
@media (max-width: 1539px) {
  .megaMenu .categoryIcon {
    max-width: 180px;
  }
}
.megaMenu .categoryIconLink {
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.megaMenu .categoryIconLink .navigation__viewAll {
  max-width: 220px;
  justify-content: space-between;
}
.megaMenu .container {
  font-size: var(--main-font-size-base);
  display: flex;
  padding-top: 0;
}
.megaMenu .container .megaMenu__navigation {
  flex-grow: 1;
}
.megaMenu .container .megaMenu__content {
  flex-shrink: 0;
  padding-left: 10px;
  width: 25%;
  display: none;
}
.megaMenu .container .megaMenu__content > a {
  flex-direction: column;
  align-items: flex-start;
}
.megaMenu .container .megaMenu__content > a .categoryIcon {
  margin-top: 40px;
  margin-bottom: 20px;
}
@media (min-width: 1250px) {
  .megaMenu .container .megaMenu__content {
    display: block;
  }
}
.megaMenu::before {
  content: "";
  position: absolute;
  top: -35px;
  left: 0;
  width: 100%;
  height: 35px;
  background: transparent;
  border-color: transparent;
  pointer-events: auto;
  display: block;
}

.navigation__viewAll {
  font-size: 18px;
  font-weight: var(--main-font-weight);
  color: var(--main-color-dark-gray);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.navigation__viewAll .icon {
  font-size: 12px;
}
@media (max-width: 1539px) {
  .navigation__viewAll {
    font-size: 16px;
  }
}

.groupNavigationTitle {
  font-size: 15px;
  font-weight: var(--main-font-weight-bold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.33;
  margin-bottom: 25px;
  display: inline-flex;
}

/*
Subnav

Markup:
<nav class="subnav">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="is-active">
      <a href="#">Level 1</a>
      <ul>
        <li class="is-active">
          <a class="is-active" href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
        <li class="active">
          <a href="#" class="is-active">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Styleguide Navigations.Subnav
*/
.subnav {
  font-size: var(--main-font-size-base);
}
.subnav ul {
  margin: 0;
  padding: 5px 0;
}
.subnav ul:last-child {
  padding-bottom: 0;
}
.subnav li {
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
}
.subnav li:last-child {
  padding-bottom: 0;
}
.subnav li:not(.is-active) > ul {
  display: none;
}
.subnav a {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight);
  text-decoration: none;
  position: relative;
}
.subnav a:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}
.subnav > ul {
  padding: 0;
}
.subnav > ul > li {
  padding-bottom: 10px;
}
.subnav > ul > li > a {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}
.subnav > ul ul {
  padding-top: 10px;
}
.subnav > ul ul a {
  padding-left: 20px;
  white-space: nowrap;
}
.subnav > ul ul a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-30px);
  width: 12px;
  height: 8px;
  background-color: var(--main-color-primary);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
}
.subnav > ul ul a:hover:before, .subnav > ul ul a.is-active:before {
  opacity: 1;
  transform: translate(0, -50%);
}

/*
Navgroup

Markup:
<nav class="navgroup {{modifier_class}}">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li class="is-active-tree">
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li class="is-active">
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.navgroup--col-2 - 2 Columns
.navgroup--col-3 - 3 Columns
.navgroup--col-4 - 4 Columns
.navgroup--col-5 - 5 Columns
.navgroup--collapse-mobile - Collapse Mobile

Styleguide Navigations.Navgroup
*/
.navgroup {
  margin-bottom: -15px;
}
.navgroup li > span,
.navgroup a {
  color: var(--main-color-black);
  display: block;
  margin-bottom: 15px;
  text-decoration: none;
}
.navgroup a:hover, .navgroup a:focus, .navgroup a:active {
  color: var(--main-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 {
  color: var(--main-color-dark-gray);
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 45px;
}
@media (max-width: 1023px) {
  .navgroup > ul > li > span,
  .navgroup > ul > li > a {
    margin-bottom: 22.5px;
  }
}
@media (max-width: 1023px) {
  .navgroup > ul > li > span,
  .navgroup > ul > li > a {
    margin-bottom: 15px;
  }
}
.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: -20px;
  margin-right: -20px;
  margin-bottom: -40px;
}
.navgroup--col-2 > ul > li, .navgroup--col-3 > ul > li, .navgroup--col-4 > ul > li, .navgroup--col-5 > ul > li {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .navgroup--col-2 > ul > li {
    width: 50%;
    min-width: 180px;
  }
}
@media (min-width: 768px) {
  .navgroup--col-3 > ul > li {
    width: 33.3333333333%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-4 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-4 > ul > li {
    width: 25%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-5 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-5 > ul > li {
    width: 25%;
  }
}
@media (min-width: 1250px) {
  .navgroup--col-5 > ul > li {
    width: 20%;
  }
}
@media (max-width: 767px) {
  .navgroup--collapse-mobile a {
    margin-bottom: 15px;
    line-height: 30px;
  }
  .navgroup--collapse-mobile li.hasChildren > a,
  .navgroup--collapse-mobile li.hasChildren > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navgroup--collapse-mobile > ul {
    margin-left: 0;
    margin-right: 0;
  }
  .navgroup--collapse-mobile > ul > li {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--main-color-gray-base);
  }
  .navgroup--collapse-mobile > ul > li > ul {
    display: none;
  }
  .navgroup--collapse-mobile > ul > li.open > ul {
    display: block;
  }
}

/*
Mainnav

Markup:
<nav class="mainnav">
  <ul>
    <li class="is-active">
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
  <span class="mainnav__seperator"></span>
  <ul>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>

Styleguide Navigations.Mainnav
*/
.mainnav {
  display: flex;
  align-items: center;
}
.mainnav__seperator {
  width: 1px;
  height: 27px;
  background: var(--main-color-gray-base);
  display: block;
  margin-left: 20px;
  margin-right: 20px;
}
@media (min-width: 1250px) {
  .mainnav__seperator {
    margin-left: 30px;
    margin-right: 30px;
  }
}
.mainnav ul {
  margin: 0;
  padding: 0;
}
.mainnav li {
  margin: 0;
  padding: 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, .mainnav .textcontent > ul {
  display: flex;
  gap: 20px;
  font-size: var(--main-font-size-base);
}
@media (min-width: 1540px) {
  .mainnav > ul, .mainnav .textcontent > ul {
    gap: 30px;
    font-size: 2rem;
  }
}
.mainnav > ul > li > a, .mainnav .textcontent > ul > li > a {
  font-weight: var(--main-font-weight);
  position: relative;
  display: block;
  padding-left: 20px;
}
.mainnav > ul > li > a::before, .mainnav .textcontent > ul > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-30px);
  width: 12px;
  height: 8px;
  background-color: var(--main-color-primary);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
}
.mainnav > ul > li > a.active_tree::before, .mainnav > ul > li > a.is-active-tree::before, .mainnav .textcontent > ul > li > a.active_tree::before, .mainnav .textcontent > ul > li > a.is-active-tree::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.mainnav > ul > li:hover > a::before, .mainnav .textcontent > ul > li:hover > a::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.mainnav > ul.nav--content > li > a, .mainnav .textcontent > ul.nav--content > li > a {
  font-weight: var(--main-font-weight);
}
.mainnav > ul.nav--showMore, .mainnav .textcontent > ul.nav--showMore {
  margin-left: 20px;
}
@media (min-width: 1540px) {
  .mainnav > ul.nav--showMore, .mainnav .textcontent > ul.nav--showMore {
    margin-left: 30px;
  }
}
.mainnav > ul > li.hoverintent .megaMenu,
.mainnav > ul > li.hoverintent > ul {
  display: block;
}
.mainnav ul.nav--shop {
  margin-right: 30px;
}
@media (min-width: 1540px) {
  .mainnav ul.nav--shop {
    margin-right: 30px;
  }
}

.loadingScreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 108;
  padding: 30px;
  font-size: 20px;
  font-weight: var(--main-font-weight-bold);
  background-color: var(--main-color-white);
  transition: 0.2s ease-in-out;
  background: linear-gradient(253deg, var(--main-color-white), var(--main-color-gray-base));
  background-size: 400% 400%;
  animation: loadingScreenGradient 3s ease infinite;
  pointer-events: none;
}
.loadingScreen__icon {
  font-size: 120px;
  font-weight: normal;
  animation: rotation 1s infinite linear;
}

@keyframes loadingScreenGradient {
  0%, 100% {
    background-position: 0 87%;
  }
  50% {
    background-position: 100% 14%;
  }
}
body.is-loading-screen {
  overflow: hidden;
}

/*
Actionbox

Markup:
<div class="actionBox">
  Text
</div>

Styleguide Components.Actionbox
*/
.actionBox {
  padding: 30px;
  background-color: var(--main-color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) {
  .actionBox {
    padding: 60px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  }
}

/*
Max Height Content

Markup:
<div class="maxHeightContent js-maxHeightContent" data-button-foldout="read more" data-button-foldin="fold in">
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
  </div>
</div>

Styleguide Components.Max Height Content
*/
.maxHeightContent {
  max-height: 40vh;
  max-height: 40svh;
  overflow: hidden;
  position: relative;
}
.maxHeightContent__buttonWrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background: linear-gradient(0deg, rgb(255, 255, 255) 20px, rgba(255, 255, 255, 0.5) 60px, rgba(255, 255, 255, 0) 100%);
  padding-top: 40px;
}
.maxHeightContent__button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  line-height: 1;
}
.maxHeightContent__button:before {
  content: "+";
}
.maxHeightContent.is-open {
  max-height: none;
  padding-bottom: 60px;
}
.maxHeightContent.is-open .maxHeightContent__button:before {
  content: "-";
}
.maxHeightContent:not(.is-active) .maxHeightContent__buttonWrapper {
  display: none;
}

.dynamicPlaceholders {
  min-height: 100%;
  flex-grow: 1;
  contain: paint;
}
.dynamicPlaceholders__container {
  container-type: inline-size;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
  padding-left: 40px;
  opacity: 1;
}
.dynamicPlaceholders__container.is-hidden {
  z-index: -1;
  opacity: 0;
}
.dynamicPlaceholders__container > .inner {
  display: flex;
  position: relative;
  align-items: center;
  gap: 5px;
  height: 100%;
  font-size: 1.8rem;
  line-height: 1.3333;
  color: var(--main-color-dark-gray);
}
.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;
}

.roundCorners {
  border-radius: 16px;
  contain: paint;
}
.roundCorners picture, .roundCorners img, .roundCorners .youtubecontent {
  border-radius: 16px;
  contain: paint;
}

.offset-250 .itemboxList {
  margin-top: -250px !important;
}
@media (max-width: 1023px) {
  .offset-250 .itemboxList {
    margin-top: -180px !important;
  }
}
@media (max-width: 767px) {
  .offset-250 .itemboxList {
    margin-top: -100px !important;
  }
}
@media (max-width: 767px) {
  .offset-250:has(.banner) .banner .contentImage {
    height: 420px;
  }
}

.borderElements {
  position: relative;
}
.borderElements:after {
  content: "";
  width: 1px;
  position: absolute;
  left: 50%;
  height: 100%;
  background: var(--main-color-gray-base);
  display: block;
  top: 0;
}
@media screen and (max-width: 1250px) {
  .borderElements:after {
    display: none;
  }
}
.borderElements:has(> .col-lg-6) {
  justify-content: space-between;
}
.borderElements > .col-lg-6 {
  max-width: 593px;
}
@media screen and (max-width: 1250px) {
  .borderElements > .col-lg-6 {
    max-width: 100%;
  }
}

.languageSwitcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}
.languageSwitcher__flag {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  contain: paint;
  margin-top: -3px;
}
.languageSwitcher__flag img {
  object-fit: cover;
  height: 100% !important;
  border-radius: 50%;
}
.languageSwitcher__language {
  font-size: 1.8rem;
  text-transform: uppercase;
}
@media (max-width: 1023px) {
  .languageSwitcher__language {
    font-size: 14px;
  }
}
.languageSwitcher__list {
  position: absolute;
  top: 100%;
  right: 20px;
  z-index: 202;
  background-color: var(--main-color-white);
  margin: 0;
  padding: 20px;
  display: none;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: var(--main-color-black);
}
.languageSwitcher__list > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--main-color-gray-base);
}
.languageSwitcher__list > div span {
  white-space: nowrap;
  width: 250px;
  font-weight: 700;
  position: relative;
  padding-right: 10px;
  contain: paint;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}
.languageSwitcher__list > div span img {
  width: 14px;
  height: 14px !important;
  border-radius: 50%;
  contain: paint;
  object-fit: cover;
}
.languageSwitcher__list > div nav {
  padding-left: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  max-width: 223px;
  flex-shrink: 0;
}
.languageSwitcher__list > div a {
  margin-left: 5px;
  margin-right: 5px;
}
.languageSwitcher__list > div a.is-active {
  font-weight: var(--main-font-weight-bold);
}
.languageSwitcher__list > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.languageSwitcher.hoverintent .languageSwitcher__list {
  display: block;
}
@media (max-width: 1023px) {
  .languageSwitcher__list {
    transition: 0.2s all ease;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.contactBox {
  position: fixed;
  right: 20px;
  top: 250px;
  z-index: 12;
  transition: all 0.4s ease;
}
.contactBox .contactBox--wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  border-radius: 50px;
  padding: 20px 13px;
  overflow: hidden;
  transition: all 0.4s ease;
}
.contactBox .contactBox--icons {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  gap: 16px;
  transition: transform 0.4s ease;
  cursor: pointer;
}
.contactBox .contactBox--content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  pointer-events: none;
  width: 0;
}
.contactBox .contactBox--content a {
  display: flex;
  color: var(--main-color-white);
  white-space: nowrap;
}
.contactBox .contactBox--content a:hover {
  color: var(--main-color-primary);
}
.contactBox .contactBox--content .openingTimes {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}
.contactBox.hoverintent .contactBox--wrapper {
  border-radius: 10px;
  height: auto;
  padding-left: 18px;
  padding-right: 18px;
}
.contactBox.hoverintent .contactBox--content {
  opacity: 1;
  width: 250px;
  padding: 0 0 0 25px;
  max-height: 175px;
  pointer-events: auto;
}

body.isLandingPage:not(.card) #header,
body.isLandingPage-header:not(.card) #header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease, color 0.3s ease;
  width: 100%;
}
body.isLandingPage:not(.card) #header > *:not(.headerTrust),
body.isLandingPage-header:not(.card) #header > *:not(.headerTrust) {
  transition: color 0.3s ease;
}
body.isLandingPage:not(.card) #header:not(.sticky-visible):not(.sticky-hidden),
body.isLandingPage-header:not(.card) #header:not(.sticky-visible):not(.sticky-hidden) {
  position: absolute;
  transform: translateY(0);
}
body.isLandingPage:not(.card) .navToggler__bar,
body.isLandingPage:not(.card) .dynamicPlaceholders__container > .inner,
body.isLandingPage-header:not(.card) .navToggler__bar,
body.isLandingPage-header:not(.card) .dynamicPlaceholders__container > .inner {
  transition: border-color 0.3s ease, color 0.3s ease;
}

body.isLandingPage:not(.card) #header {
  background: transparent;
}
body.isLandingPage:not(.card) #header > *:not(.headerTrust) {
  background: transparent;
  box-shadow: none;
  color: var(--main-color-white);
  transition: none;
}
body.isLandingPage:not(.card) #header:hover > *:not(.headerTrust) {
  background: var(--main-color-white);
  color: var(--main-color-black);
  box-shadow: none;
  transition: none;
}
body.isLandingPage:not(.card) #header:hover .navToggler__bar {
  background-color: var(--main-color-black);
}
body.isLandingPage:not(.card) #header:hover .searchBar .inputGroup__addon,
body.isLandingPage:not(.card) #header:hover .searchBar input {
  background: transparent;
  border-color: var(--main-color-black);
  color: var(--main-color-black);
  transition: none;
}
body.isLandingPage:not(.card) #header:hover .dynamicPlaceholders__container > .inner {
  color: var(--main-color-black);
}
body.isLandingPage:not(.card) #header:hover .button--bordered {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}
body.isLandingPage:not(.card) .navToggler__bar {
  background-color: var(--main-color-white);
}
body.isLandingPage:not(.card) .searchBar .inputGroup__addon,
body.isLandingPage:not(.card) .searchBar input {
  background: transparent;
  border-color: var(--main-color-white);
  color: var(--main-color-white);
  transition: none;
}
body.isLandingPage:not(.card) .dynamicPlaceholders__container > .inner {
  color: var(--main-color-white);
}
body.isLandingPage:not(.card) .button--bordered {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}
body.isLandingPage:not(.card) .button--bordered:hover {
  border-color: var(--main-color-secondary-dark);
}
body.isLandingPage:not(.card) .bg--extra-light-gray .button--bordered {
  border-color: var(--main-color-secondary);
  color: var(--main-color-secondary);
}
body.isLandingPage:not(.card) .bg--extra-light-gray .button--bordered:hover {
  background: var(--main-color-secondary-dark);
  border-color: var(--main-color-secondary-dark);
  color: var(--main-color-white);
}
body.isLandingPage:not(.card) .iconbarHover--basket {
  color: var(--main-color-black);
}
body.isLandingPage:not(.card) .mainnav li.is-active-tree > a {
  color: var(--main-color-white);
}

body.isLandingPage-header #header {
  background: var(--main-color-white);
}
body.isLandingPage-header #header > *:not(.headerTrust) {
  background: var(--main-color-white);
  color: var(--main-color-black);
  box-shadow: none;
}
body.isLandingPage-header .navToggler__bar {
  background-color: var(--main-color-black);
}
body.isLandingPage-header .searchBar .inputGroup__addon,
body.isLandingPage-header .searchBar input {
  background: white !important;
  border-color: var(--main-color-black);
  color: var(--main-color-black);
}
body.isLandingPage-header .dynamicPlaceholders__container > .inner {
  color: var(--main-color-black);
}
body.isLandingPage-header .button--bordered {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}

.offset-50 {
  transform: translateY(-50%);
  margin-bottom: -425px;
}
@media screen and (max-width: 1540px) {
  .offset-50 {
    margin-bottom: -375px;
  }
}
@media screen and (max-width: 1250px) {
  .offset-50 {
    margin-bottom: -325px;
  }
}
@media screen and (max-width: 1024px) {
  .offset-50 {
    margin-bottom: -275px;
  }
}
@media screen and (max-width: 768px) {
  .offset-50 {
    margin-bottom: -225px;
  }
}
@media screen and (max-width: 481px) {
  .offset-50 {
    margin-bottom: -175px;
  }
}
.offset-50 img {
  object-fit: cover;
  width: 100%;
  height: 850px !important;
  border-radius: 16px;
}
@media screen and (max-width: 1540px) {
  .offset-50 img {
    height: 750px !important;
  }
}
@media screen and (max-width: 1250px) {
  .offset-50 img {
    height: 650px !important;
  }
}
@media screen and (max-width: 1024px) {
  .offset-50 img {
    height: 550px !important;
  }
}
@media screen and (max-width: 768px) {
  .offset-50 img {
    height: 450px !important;
  }
}
@media screen and (max-width: 481px) {
  .offset-50 img {
    height: 350px !important;
  }
}

.mainContent > .gp:has(+ .gp .offset-50) {
  padding-bottom: 425px;
}
@media screen and (max-width: 1540px) {
  .mainContent > .gp:has(+ .gp .offset-50) {
    padding-bottom: 375px;
  }
}
@media screen and (max-width: 1250px) {
  .mainContent > .gp:has(+ .gp .offset-50) {
    padding-bottom: 325px;
  }
}
@media screen and (max-width: 1024px) {
  .mainContent > .gp:has(+ .gp .offset-50) {
    padding-bottom: 275px;
  }
}
@media screen and (max-width: 768px) {
  .mainContent > .gp:has(+ .gp .offset-50) {
    padding-bottom: 225px;
  }
}
@media screen and (max-width: 481px) {
  .mainContent > .gp:has(+ .gp .offset-50) {
    padding-bottom: 175px;
  }
}

.fullContainerLeftPadding {
  padding-left: calc((100% - 1840px) / 2);
  overflow: hidden;
  max-width: 100%;
}
@media screen and (max-width: 1860px) {
  .fullContainerLeftPadding {
    padding-left: 20px;
  }
}
.fullContainerLeftPadding .col-12:has(> .swiper) {
  padding-right: 0 !important;
}

.goldCalculator {
  max-width: 500px;
  margin-bottom: 100px;
}
.goldCalculator .slidecontent {
  border-radius: 8px;
  contain: paint;
}
.goldCalculator .slidecontentItem.gold {
  background: linear-gradient(90deg, #A18646 0%, #BE9F56 50%, #CBB278 100%);
}
.goldCalculator .slidecontentItem.silver {
  background: linear-gradient(90deg, #8B8B8B 0%, #B9B9B9 100%);
}
.goldCalculator .slidecontentItem.platinum {
  background: linear-gradient(90deg, #B8B8B8 0%, #D4D4D4 100%);
}
.goldCalculator .slidecontentItem.palladium {
  background: linear-gradient(90deg, #A7A7A7 0%, #D0D0D0 100%);
}
.goldCalculator .slidecontentItem.is-active {
  padding-bottom: 0;
}
.goldCalculator .slidecontentItem__headline {
  color: var(--main-color-white);
  padding-left: 20px;
  padding-right: 50px;
}
.goldCalculator .slidecontentItem__headline:after {
  left: unset;
  right: 20px;
}
.goldCalculator .slidecontentItem__headline:hover:after {
  color: var(--main-color-white);
}
.goldCalculator .slidecontentItem__content {
  padding: 20px;
  background: var(--main-color-light-gray);
}
.goldCalculator .slidecontentItem__content fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.goldCalculator .metalType {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
  border-bottom: 1px solid var(--main-color-gray-base);
  padding-bottom: 10px;
}
.goldCalculator .metalType label {
  font-size: 1.6rem;
  font-weight: var(--main-font-weight-bold);
}
.goldCalculator .metalType input {
  width: 150px;
  padding: 5px 27px 5px 5px;
  text-align: right;
  background: var(--main-color-white);
}
@media (max-width: 767px) {
  .goldCalculator .metalType input {
    width: 100px;
  }
}
.goldCalculator .metalType > div {
  position: relative;
}
.goldCalculator .metalType > div > span {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--main-color-dark-gray);
}
.goldCalculator .metalType span {
  margin-left: 0.5rem;
}
.goldCalculator__result {
  padding: 20px;
  margin-top: 20px;
  text-align: center;
  border-radius: 8px;
  background: var(--main-color-light-gray);
}
.goldCalculator__result--headline {
  font-size: 2.8rem;
  font-weight: var(--main-font-weight-medium);
  margin-bottom: 5px;
}
.goldCalculator__result #result {
  font-size: 3rem;
  color: var(--main-color-primary);
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 20px;
}
.goldCalculator__result .buttonRowTop {
  margin-bottom: 0;
}
.goldCalculator__result button {
  cursor: pointer;
}
.goldCalculator__result button[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}

.category-goldsparplan-deutsche-bank .headerTrust,
.category-goldsparplan-deutsche-bank .headerSearch,
.category-goldsparplan-deutsche-bank .iconbarItem--favorites,
.category-goldsparplan-deutsche-bank .iconbarItem--basket,
.category-goldsparplan-deutsche-bank .languageSwitcher,
.category-goldsparplan-deutsche-bank .headerMain,
.category-goldsparplan-deutsche-bank .headerNavToggler,
.category-goldsparplan-deutsche-bank .footerMain,
.category-goldsparplan-deutsche-bank .footerBottomTop, .category-goldsparplan-post-bank .headerTrust,
.category-goldsparplan-post-bank .headerSearch,
.category-goldsparplan-post-bank .iconbarItem--favorites,
.category-goldsparplan-post-bank .iconbarItem--basket,
.category-goldsparplan-post-bank .languageSwitcher,
.category-goldsparplan-post-bank .headerMain,
.category-goldsparplan-post-bank .headerNavToggler,
.category-goldsparplan-post-bank .footerMain,
.category-goldsparplan-post-bank .footerBottomTop, .category-goldsparplan-augsburg .headerTrust,
.category-goldsparplan-augsburg .headerSearch,
.category-goldsparplan-augsburg .iconbarItem--favorites,
.category-goldsparplan-augsburg .iconbarItem--basket,
.category-goldsparplan-augsburg .languageSwitcher,
.category-goldsparplan-augsburg .headerMain,
.category-goldsparplan-augsburg .headerNavToggler,
.category-goldsparplan-augsburg .footerMain,
.category-goldsparplan-augsburg .footerBottomTop, .category-goldsparplan-berlin-fasanenstrasse .headerTrust,
.category-goldsparplan-berlin-fasanenstrasse .headerSearch,
.category-goldsparplan-berlin-fasanenstrasse .iconbarItem--favorites,
.category-goldsparplan-berlin-fasanenstrasse .iconbarItem--basket,
.category-goldsparplan-berlin-fasanenstrasse .languageSwitcher,
.category-goldsparplan-berlin-fasanenstrasse .headerMain,
.category-goldsparplan-berlin-fasanenstrasse .headerNavToggler,
.category-goldsparplan-berlin-fasanenstrasse .footerMain,
.category-goldsparplan-berlin-fasanenstrasse .footerBottomTop, .category-goldsparplan-berlin-gendarmenmarkt .headerTrust,
.category-goldsparplan-berlin-gendarmenmarkt .headerSearch,
.category-goldsparplan-berlin-gendarmenmarkt .iconbarItem--favorites,
.category-goldsparplan-berlin-gendarmenmarkt .iconbarItem--basket,
.category-goldsparplan-berlin-gendarmenmarkt .languageSwitcher,
.category-goldsparplan-berlin-gendarmenmarkt .headerMain,
.category-goldsparplan-berlin-gendarmenmarkt .headerNavToggler,
.category-goldsparplan-berlin-gendarmenmarkt .footerMain,
.category-goldsparplan-berlin-gendarmenmarkt .footerBottomTop, .category-goldsparplan-duesseldorf .headerTrust,
.category-goldsparplan-duesseldorf .headerSearch,
.category-goldsparplan-duesseldorf .iconbarItem--favorites,
.category-goldsparplan-duesseldorf .iconbarItem--basket,
.category-goldsparplan-duesseldorf .languageSwitcher,
.category-goldsparplan-duesseldorf .headerMain,
.category-goldsparplan-duesseldorf .headerNavToggler,
.category-goldsparplan-duesseldorf .footerMain,
.category-goldsparplan-duesseldorf .footerBottomTop, .category-goldsparplan-koeln .headerTrust,
.category-goldsparplan-koeln .headerSearch,
.category-goldsparplan-koeln .iconbarItem--favorites,
.category-goldsparplan-koeln .iconbarItem--basket,
.category-goldsparplan-koeln .languageSwitcher,
.category-goldsparplan-koeln .headerMain,
.category-goldsparplan-koeln .headerNavToggler,
.category-goldsparplan-koeln .footerMain,
.category-goldsparplan-koeln .footerBottomTop, .category-goldsparplan-frankfurt .headerTrust,
.category-goldsparplan-frankfurt .headerSearch,
.category-goldsparplan-frankfurt .iconbarItem--favorites,
.category-goldsparplan-frankfurt .iconbarItem--basket,
.category-goldsparplan-frankfurt .languageSwitcher,
.category-goldsparplan-frankfurt .headerMain,
.category-goldsparplan-frankfurt .headerNavToggler,
.category-goldsparplan-frankfurt .footerMain,
.category-goldsparplan-frankfurt .footerBottomTop, .category-goldsparplan-hamburg .headerTrust,
.category-goldsparplan-hamburg .headerSearch,
.category-goldsparplan-hamburg .iconbarItem--favorites,
.category-goldsparplan-hamburg .iconbarItem--basket,
.category-goldsparplan-hamburg .languageSwitcher,
.category-goldsparplan-hamburg .headerMain,
.category-goldsparplan-hamburg .headerNavToggler,
.category-goldsparplan-hamburg .footerMain,
.category-goldsparplan-hamburg .footerBottomTop, .category-goldsparplan-hannover .headerTrust,
.category-goldsparplan-hannover .headerSearch,
.category-goldsparplan-hannover .iconbarItem--favorites,
.category-goldsparplan-hannover .iconbarItem--basket,
.category-goldsparplan-hannover .languageSwitcher,
.category-goldsparplan-hannover .headerMain,
.category-goldsparplan-hannover .headerNavToggler,
.category-goldsparplan-hannover .footerMain,
.category-goldsparplan-hannover .footerBottomTop, .category-goldsparplan-muenchen .headerTrust,
.category-goldsparplan-muenchen .headerSearch,
.category-goldsparplan-muenchen .iconbarItem--favorites,
.category-goldsparplan-muenchen .iconbarItem--basket,
.category-goldsparplan-muenchen .languageSwitcher,
.category-goldsparplan-muenchen .headerMain,
.category-goldsparplan-muenchen .headerNavToggler,
.category-goldsparplan-muenchen .footerMain,
.category-goldsparplan-muenchen .footerBottomTop, .category-goldsparplan-nuernberg .headerTrust,
.category-goldsparplan-nuernberg .headerSearch,
.category-goldsparplan-nuernberg .iconbarItem--favorites,
.category-goldsparplan-nuernberg .iconbarItem--basket,
.category-goldsparplan-nuernberg .languageSwitcher,
.category-goldsparplan-nuernberg .headerMain,
.category-goldsparplan-nuernberg .headerNavToggler,
.category-goldsparplan-nuernberg .footerMain,
.category-goldsparplan-nuernberg .footerBottomTop, .category-goldsparplan-pforzheim .headerTrust,
.category-goldsparplan-pforzheim .headerSearch,
.category-goldsparplan-pforzheim .iconbarItem--favorites,
.category-goldsparplan-pforzheim .iconbarItem--basket,
.category-goldsparplan-pforzheim .languageSwitcher,
.category-goldsparplan-pforzheim .headerMain,
.category-goldsparplan-pforzheim .headerNavToggler,
.category-goldsparplan-pforzheim .footerMain,
.category-goldsparplan-pforzheim .footerBottomTop, .category-goldsparplan-stuttgart .headerTrust,
.category-goldsparplan-stuttgart .headerSearch,
.category-goldsparplan-stuttgart .iconbarItem--favorites,
.category-goldsparplan-stuttgart .iconbarItem--basket,
.category-goldsparplan-stuttgart .languageSwitcher,
.category-goldsparplan-stuttgart .headerMain,
.category-goldsparplan-stuttgart .headerNavToggler,
.category-goldsparplan-stuttgart .footerMain,
.category-goldsparplan-stuttgart .footerBottomTop {
  display: none !important;
}
@media (min-width: 768px) {
  .category-goldsparplan-deutsche-bank .headerLogo, .category-goldsparplan-post-bank .headerLogo, .category-goldsparplan-augsburg .headerLogo, .category-goldsparplan-berlin-fasanenstrasse .headerLogo, .category-goldsparplan-berlin-gendarmenmarkt .headerLogo, .category-goldsparplan-duesseldorf .headerLogo, .category-goldsparplan-koeln .headerLogo, .category-goldsparplan-frankfurt .headerLogo, .category-goldsparplan-hamburg .headerLogo, .category-goldsparplan-hannover .headerLogo, .category-goldsparplan-muenchen .headerLogo, .category-goldsparplan-nuernberg .headerLogo, .category-goldsparplan-pforzheim .headerLogo, .category-goldsparplan-stuttgart .headerLogo {
    max-width: 350px;
  }
  .category-goldsparplan-deutsche-bank .headerLogo img, .category-goldsparplan-deutsche-bank .headerLogo a, .category-goldsparplan-post-bank .headerLogo img, .category-goldsparplan-post-bank .headerLogo a, .category-goldsparplan-augsburg .headerLogo img, .category-goldsparplan-augsburg .headerLogo a, .category-goldsparplan-berlin-fasanenstrasse .headerLogo img, .category-goldsparplan-berlin-fasanenstrasse .headerLogo a, .category-goldsparplan-berlin-gendarmenmarkt .headerLogo img, .category-goldsparplan-berlin-gendarmenmarkt .headerLogo a, .category-goldsparplan-duesseldorf .headerLogo img, .category-goldsparplan-duesseldorf .headerLogo a, .category-goldsparplan-koeln .headerLogo img, .category-goldsparplan-koeln .headerLogo a, .category-goldsparplan-frankfurt .headerLogo img, .category-goldsparplan-frankfurt .headerLogo a, .category-goldsparplan-hamburg .headerLogo img, .category-goldsparplan-hamburg .headerLogo a, .category-goldsparplan-hannover .headerLogo img, .category-goldsparplan-hannover .headerLogo a, .category-goldsparplan-muenchen .headerLogo img, .category-goldsparplan-muenchen .headerLogo a, .category-goldsparplan-nuernberg .headerLogo img, .category-goldsparplan-nuernberg .headerLogo a, .category-goldsparplan-pforzheim .headerLogo img, .category-goldsparplan-pforzheim .headerLogo a, .category-goldsparplan-stuttgart .headerLogo img, .category-goldsparplan-stuttgart .headerLogo a {
    aspect-ratio: auto;
  }
}
@media (max-width: 767px) {
  .category-goldsparplan-deutsche-bank .headerLogo, .category-goldsparplan-post-bank .headerLogo, .category-goldsparplan-augsburg .headerLogo, .category-goldsparplan-berlin-fasanenstrasse .headerLogo, .category-goldsparplan-berlin-gendarmenmarkt .headerLogo, .category-goldsparplan-duesseldorf .headerLogo, .category-goldsparplan-koeln .headerLogo, .category-goldsparplan-frankfurt .headerLogo, .category-goldsparplan-hamburg .headerLogo, .category-goldsparplan-hannover .headerLogo, .category-goldsparplan-muenchen .headerLogo, .category-goldsparplan-nuernberg .headerLogo, .category-goldsparplan-pforzheim .headerLogo, .category-goldsparplan-stuttgart .headerLogo {
    max-width: 240px;
    min-width: auto;
  }
  .category-goldsparplan-deutsche-bank .headerLogo img, .category-goldsparplan-deutsche-bank .headerLogo a, .category-goldsparplan-post-bank .headerLogo img, .category-goldsparplan-post-bank .headerLogo a, .category-goldsparplan-augsburg .headerLogo img, .category-goldsparplan-augsburg .headerLogo a, .category-goldsparplan-berlin-fasanenstrasse .headerLogo img, .category-goldsparplan-berlin-fasanenstrasse .headerLogo a, .category-goldsparplan-berlin-gendarmenmarkt .headerLogo img, .category-goldsparplan-berlin-gendarmenmarkt .headerLogo a, .category-goldsparplan-duesseldorf .headerLogo img, .category-goldsparplan-duesseldorf .headerLogo a, .category-goldsparplan-koeln .headerLogo img, .category-goldsparplan-koeln .headerLogo a, .category-goldsparplan-frankfurt .headerLogo img, .category-goldsparplan-frankfurt .headerLogo a, .category-goldsparplan-hamburg .headerLogo img, .category-goldsparplan-hamburg .headerLogo a, .category-goldsparplan-hannover .headerLogo img, .category-goldsparplan-hannover .headerLogo a, .category-goldsparplan-muenchen .headerLogo img, .category-goldsparplan-muenchen .headerLogo a, .category-goldsparplan-nuernberg .headerLogo img, .category-goldsparplan-nuernberg .headerLogo a, .category-goldsparplan-pforzheim .headerLogo img, .category-goldsparplan-pforzheim .headerLogo a, .category-goldsparplan-stuttgart .headerLogo img, .category-goldsparplan-stuttgart .headerLogo a {
    aspect-ratio: auto;
  }
}
.category-goldsparplan-deutsche-bank .headerTopMiddle, .category-goldsparplan-post-bank .headerTopMiddle, .category-goldsparplan-augsburg .headerTopMiddle, .category-goldsparplan-berlin-fasanenstrasse .headerTopMiddle, .category-goldsparplan-berlin-gendarmenmarkt .headerTopMiddle, .category-goldsparplan-duesseldorf .headerTopMiddle, .category-goldsparplan-koeln .headerTopMiddle, .category-goldsparplan-frankfurt .headerTopMiddle, .category-goldsparplan-hamburg .headerTopMiddle, .category-goldsparplan-hannover .headerTopMiddle, .category-goldsparplan-muenchen .headerTopMiddle, .category-goldsparplan-nuernberg .headerTopMiddle, .category-goldsparplan-pforzheim .headerTopMiddle, .category-goldsparplan-stuttgart .headerTopMiddle {
  position: relative;
  left: unset;
  transform: unset;
  top: 0 !important;
}
@media (max-width: 767px) {
  .category-goldsparplan-deutsche-bank .headerTop .container, .category-goldsparplan-post-bank .headerTop .container, .category-goldsparplan-augsburg .headerTop .container, .category-goldsparplan-berlin-fasanenstrasse .headerTop .container, .category-goldsparplan-berlin-gendarmenmarkt .headerTop .container, .category-goldsparplan-duesseldorf .headerTop .container, .category-goldsparplan-koeln .headerTop .container, .category-goldsparplan-frankfurt .headerTop .container, .category-goldsparplan-hamburg .headerTop .container, .category-goldsparplan-hannover .headerTop .container, .category-goldsparplan-muenchen .headerTop .container, .category-goldsparplan-nuernberg .headerTop .container, .category-goldsparplan-pforzheim .headerTop .container, .category-goldsparplan-stuttgart .headerTop .container {
    gap: 0;
  }
  .category-goldsparplan-deutsche-bank .headerTopMiddle, .category-goldsparplan-post-bank .headerTopMiddle, .category-goldsparplan-augsburg .headerTopMiddle, .category-goldsparplan-berlin-fasanenstrasse .headerTopMiddle, .category-goldsparplan-berlin-gendarmenmarkt .headerTopMiddle, .category-goldsparplan-duesseldorf .headerTopMiddle, .category-goldsparplan-koeln .headerTopMiddle, .category-goldsparplan-frankfurt .headerTopMiddle, .category-goldsparplan-hamburg .headerTopMiddle, .category-goldsparplan-hannover .headerTopMiddle, .category-goldsparplan-muenchen .headerTopMiddle, .category-goldsparplan-nuernberg .headerTopMiddle, .category-goldsparplan-pforzheim .headerTopMiddle, .category-goldsparplan-stuttgart .headerTopMiddle {
    width: 100%;
    text-align: center;
  }
  .category-goldsparplan-deutsche-bank .headerTopMiddle .headerLogo, .category-goldsparplan-post-bank .headerTopMiddle .headerLogo, .category-goldsparplan-augsburg .headerTopMiddle .headerLogo, .category-goldsparplan-berlin-fasanenstrasse .headerTopMiddle .headerLogo, .category-goldsparplan-berlin-gendarmenmarkt .headerTopMiddle .headerLogo, .category-goldsparplan-duesseldorf .headerTopMiddle .headerLogo, .category-goldsparplan-koeln .headerTopMiddle .headerLogo, .category-goldsparplan-frankfurt .headerTopMiddle .headerLogo, .category-goldsparplan-hamburg .headerTopMiddle .headerLogo, .category-goldsparplan-hannover .headerTopMiddle .headerLogo, .category-goldsparplan-muenchen .headerTopMiddle .headerLogo, .category-goldsparplan-nuernberg .headerTopMiddle .headerLogo, .category-goldsparplan-pforzheim .headerTopMiddle .headerLogo, .category-goldsparplan-stuttgart .headerTopMiddle .headerLogo {
    margin: 0 auto;
  }
  .category-goldsparplan-deutsche-bank .headerTopRight, .category-goldsparplan-post-bank .headerTopRight, .category-goldsparplan-augsburg .headerTopRight, .category-goldsparplan-berlin-fasanenstrasse .headerTopRight, .category-goldsparplan-berlin-gendarmenmarkt .headerTopRight, .category-goldsparplan-duesseldorf .headerTopRight, .category-goldsparplan-koeln .headerTopRight, .category-goldsparplan-frankfurt .headerTopRight, .category-goldsparplan-hamburg .headerTopRight, .category-goldsparplan-hannover .headerTopRight, .category-goldsparplan-muenchen .headerTopRight, .category-goldsparplan-nuernberg .headerTopRight, .category-goldsparplan-pforzheim .headerTopRight, .category-goldsparplan-stuttgart .headerTopRight {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 767px) {
  .category-goldsparplan-deutsche-bank .headerLogo {
    max-width: 200px;
  }
}

.logoWithText {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px 20px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.1;
  flex-wrap: wrap;
}

.passwordRequirements {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 14px;
}
.passwordRequirements li {
  color: var(--main-color-dark-gray);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}
.passwordRequirements li::before {
  content: "•";
  font-size: 14px;
  transition: opacity 0.2s ease;
}
.passwordRequirements li.is-valid {
  color: var(--main-color-success);
}
.passwordRequirements li.is-valid::before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-check-bold);
  opacity: 1;
  font-size: 12px;
}
.passwordRequirements li.is-invalid {
  color: var(--main-color-danger);
}
.passwordRequirements li.is-invalid::before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-close-bold);
  opacity: 1;
  font-size: 10px;
}

/*
Banner

Markup:
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>

.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right

//Styleguide Siteparts.Banner
*/
.banner .contentText__headline {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 3rem;
}
@media (min-width: 1024px) {
  .banner .contentText__headline {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  .banner .contentText__headline {
    font-size: 4rem;
  }
}

.banner .contentText h1:not(.highlighted), .banner .contentText .spotPriceItem--headline:not(.highlighted), .banner .contentText .h1:not(.highlighted) {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 3rem;
}
@media (min-width: 1024px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .spotPriceItem--headline:not(.highlighted), .banner .contentText .h1:not(.highlighted) {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .spotPriceItem--headline:not(.highlighted), .banner .contentText .h1:not(.highlighted) {
    font-size: 4rem;
  }
}
@media (min-width: 1540px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .spotPriceItem--headline:not(.highlighted), .banner .contentText .h1:not(.highlighted) {
    font-size: 6rem;
  }
}

.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText__text {
  margin-top: 0;
  margin-bottom: 32px;
  font-size: 1.8rem;
}
@media (min-width: 1024px) {
  .banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText__text {
    font-size: 2.6rem;
  }
}

.banner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  min-height: 380px;
}
.banner .contentImage {
  display: flex;
  width: 100%;
  flex-grow: 1;
  height: 100%;
  min-height: 380px;
}
.banner .contentImage:after {
  background: linear-gradient(270deg, rgba(0, 46, 85, 0) 0%, rgba(0, 46, 85, 0.6) 100%);
}
.banner .contentImage .textcontent {
  width: 100%;
}
.banner .contentImage video,
.banner .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 380px;
  width: 100%;
  height: 100% !important;
  max-width: none;
  max-height: none;
  flex: 1;
}
@media (max-width: 767px) {
  .banner .contentImage {
    aspect-ratio: 1;
    max-height: 380px;
  }
}
.banner .contentText {
  color: var(--main-color-white);
}
.banner .contentText h1:not(.highlighted), .banner .contentText .spotPriceItem--headline:not(.highlighted), .banner .contentText .h1:not(.highlighted) {
  margin-bottom: 5rem !important;
}
@media (max-width: 767px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .spotPriceItem--headline:not(.highlighted), .banner .contentText .h1:not(.highlighted) {
    margin-bottom: 2rem !important;
  }
}
.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted) {
  margin-bottom: 10px;
}
.banner .contentText h3:not(.highlighted), .banner .contentText .h3:not(.highlighted), .banner .contentText .itemcardHeadline:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted) {
  margin-bottom: 10px;
}
.banner .contentText h1:last-child, .banner .contentText .spotPriceItem--headline:last-child, .banner .contentText .h1:last-child,
.banner .contentText h2:last-child, .banner .contentText .h2:last-child,
.banner .contentText h3:last-child, .banner .contentText .h3:last-child, .banner .contentText .itemcardHeadline:last-child, .banner .contentText .orderboxSummary__headline:last-child {
  margin-bottom: 0;
}
.banner .contentText .buttonLink {
  color: var(--main-color-white);
}
.banner .contentText .buttonLink:after {
  background: var(--main-color-white);
}
.banner .contentText .textcontent {
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .banner .contentText .textcontent {
    width: auto;
    max-width: 80%;
  }
}
.banner .contentText .infieldInputGroup {
  color: var(--main-color-black);
}
.banner .contentText.color--black {
  color: var(--main-color-black);
}
.banner .contentText.color--black .buttonLink {
  color: var(--main-color-black);
}
.banner .contentText.color--black .buttonLink:after {
  background: var(--main-color-black);
}
.banner .contentText {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1250px) {
  .banner .contentText {
    padding: 64px;
  }
}
.banner .contentText.contentText--left {
  align-items: flex-start;
}
@media (max-width: 767px) {
  .banner .contentText.contentText--left {
    justify-content: flex-start;
  }
}
.banner .contentText.contentText--right {
  align-items: flex-end;
}
.banner .contentText.contentText--vertTop {
  justify-content: flex-start;
}
.banner .contentText.contentText--vertBottom {
  justify-content: flex-end;
}
.banner.banner--hasNoText .contentImage:after {
  display: none;
}
.banner .button--bordered {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}
@media (min-width: 1250px) {
  .banner {
    min-height: 530px;
  }
  .banner .contentImage {
    min-height: 530px;
  }
  .banner .contentImage video,
  .banner .contentImage img {
    min-height: 530px;
  }
}

.noGradient .banner .contentImage:after {
  display: none;
}

a.banner {
  color: var(--main-color-black);
}
a.banner:hover .button--bordered, a.banner:focus .button--bordered {
  border-color: var(--main-color-secondary-dark);
  background-color: var(--main-color-secondary-dark);
}

body.isLandingPage .mainContent > .gp:first-of-type .banner,
body.isLandingPage-header .mainContent > .gp:first-of-type .banner {
  text-decoration: none;
}
body.isLandingPage .mainContent > .gp:first-of-type .banner .contentText,
body.isLandingPage-header .mainContent > .gp:first-of-type .banner .contentText {
  position: static;
  padding: 263px 64px 104px 64px;
  display: block;
  margin: 0 auto;
  width: 100%;
}
@media screen and (max-width: 1250px) {
  body.isLandingPage .mainContent > .gp:first-of-type .banner .contentText,
  body.isLandingPage-header .mainContent > .gp:first-of-type .banner .contentText {
    padding: 120px 64px 64px 64px;
  }
}
@media screen and (max-width: 768px) {
  body.isLandingPage .mainContent > .gp:first-of-type .banner .contentText,
  body.isLandingPage-header .mainContent > .gp:first-of-type .banner .contentText {
    padding: 180px 20px 20px 20px;
  }
}
body.isLandingPage .mainContent > .gp:first-of-type .banner .contentText .textcontent,
body.isLandingPage-header .mainContent > .gp:first-of-type .banner .contentText .textcontent {
  margin: 0 auto;
}
body.isLandingPage .mainContent > .gp:first-of-type .banner .contentImage,
body.isLandingPage-header .mainContent > .gp:first-of-type .banner .contentImage {
  position: absolute;
}
@media (max-width: 767px) {
  body.isLandingPage .mainContent > .gp:first-of-type .banner .contentImage,
  body.isLandingPage-header .mainContent > .gp:first-of-type .banner .contentImage {
    aspect-ratio: unset;
    max-height: unset;
  }
}

/*
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 {
  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: 400px;
  }
}
.banner2 .contentText h1:last-child, .banner2 .contentText .spotPriceItem--headline:last-child, .banner2 .contentText .h1:last-child,
.banner2 .contentText h2:last-child, .banner2 .contentText .h2:last-child,
.banner2 .contentText h3:last-child, .banner2 .contentText .h3:last-child, .banner2 .contentText .itemcardHeadline:last-child, .banner2 .contentText .orderboxSummary__headline:last-child {
  margin-bottom: 0;
}
.banner2 .contentText .textcontent {
  width: 100%;
  padding: 0;
  color: var(--main-color-white);
}
@media (min-width: 768px) {
  .banner2 .contentText .textcontent {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .banner2 .contentText .textcontent {
    max-width: 42%;
  }
}
.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: 48px;
  }
}
.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 .spotPriceItem--headline: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 .spotPriceItem--headline: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 .spotPriceItem--headline: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__text {
  font-size: 2rem;
}
@media (min-width: 1024px) {
  .banner3 .contentText h2:not(.highlighted), .banner3 .contentText .h2: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__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) {
  font-weight: normal;
  margin-bottom: clamp(10px, 0.5em, 10px);
}
.banner3 .contentText h3:not(.highlighted), .banner3 .contentText .h3:not(.highlighted), .banner3 .contentText .itemcardHeadline:not(.highlighted), .banner3 .contentText .orderboxSummary__headline:not(.highlighted) {
  margin-bottom: 10px;
}
.banner3 .contentText h1:last-child, .banner3 .contentText .spotPriceItem--headline:last-child, .banner3 .contentText .h1:last-child,
.banner3 .contentText h2:last-child, .banner3 .contentText .h2:last-child,
.banner3 .contentText h3:last-child, .banner3 .contentText .h3:last-child, .banner3 .contentText .itemcardHeadline:last-child, .banner3 .contentText .orderboxSummary__headline:last-child {
  margin-bottom: 0;
}
.banner3.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner3 {
  color: var(--main-color-white);
  text-decoration: none;
}
/*
Slideshow

Markup:
<div class="slideshow swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a class="banner" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
    <div class="swiper-slide">
      <a class="banner" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

.slideshow--arrows-outside - Arrows Outside

//Styleguide Siteparts.Slideshow
*/
.slideshow.swiper .swiper-button-prev,
.slideshow.swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  font-size: 36px;
  color: var(--main-color-white);
  scale: 1;
  transition: 0.2s ease-in-out;
}
.slideshow.swiper .swiper-button-prev:hover, .slideshow.swiper .swiper-button-prev:focus, .slideshow.swiper .swiper-button-prev:active,
.slideshow.swiper .swiper-button-next:hover,
.slideshow.swiper .swiper-button-next:focus,
.slideshow.swiper .swiper-button-next:active {
  scale: 1.4;
}
.slideshow.swiper .swiper-button-prev {
  left: 10px;
}
.slideshow.swiper .swiper-button-next {
  right: 10px;
}
@media (min-width: 1620px) {
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev,
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
    color: var(--main-color-black);
  }
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
    left: -50px;
  }
  .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
    right: -50px;
  }
}

.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev,
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
  color: var(--main-color-white);
}
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
  left: 10px;
}
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
  right: 10px;
}

/*
Slideshow 3

Markup:
<div class="slideshow slideshow3 swiper {{modifier_class}}" data-options="">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a class="banner3" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
    <div class="swiper-slide">
      <a class="banner3" href="#">
        <div class="contentImage">
            <img src="kss-assets/sample.png" width="1360px" height="480px">
        </div>
        <div class="contentText ">
            <div class="textcontent">
                <div class="contentText__headline">
                    Headline
                </div>
                <div class="contentText__text contentText--left contentText--vertTop">
                    Subline
                </div>
                <div class="button contentText__button">Button</div>
            </div>
        </div>
      </a>
    </div>
  </div>
  <div class="swiper-pagination swiper-pagination-vertical"></div>
</div>

//Styleguide Siteparts.Slideshow 3
*/
.slideshow--3.swiper .swiper-slide {
  display: flex;
}
.slideshow--3.swiper .swiper-pagination {
  position: absolute;
  z-index: 1;
  left: auto;
  right: 10px;
  bottom: 0;
  width: auto;
  margin: 0;
}
@media (min-width: 768px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 15px;
    top: 50%;
    bottom: auto;
  }
}
@media (min-width: 1024px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 30px;
  }
}
@media (min-width: 1250px) {
  .slideshow--3.swiper .swiper-pagination {
    right: 40px;
  }
}
.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet {
  background: var(--main-color-white);
  opacity: 1;
  border: 1px solid var(--main-color-white);
}
.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: transparent;
}

/*
Bannergroup

Markup:
<div class="bannerGroup">
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
<a class="banner" href="#">
    <div class="contentImage">
        <img src="kss-assets/sample.png" width="1360px" height="480px">
    </div>
    <div class="contentText {{modifier_class}}">
        <div class="textcontent">
            <div class="contentText__headline">
                Headline
            </div>
            <div class="contentText__text contentText--left contentText--vertTop">
                Subline
            </div>
            <div class="button contentText__button">Button</div>
        </div>
    </div>
</a>
</div>

//Styleguide Siteparts.Bannergroup
*/
@media (min-width: 768px) {
  .bannerGroup {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(auto, 280px));
    gap: 20px;
    grid-template-areas: "banner1 banner1 banner1 banner1 banner1 banner1" "banner2 banner2 banner2 banner3 banner3 banner3";
  }
}
@media (min-width: 1024px) {
  .bannerGroup {
    grid-template-areas: "banner1 banner1 banner1 banner1 banner2 banner2" "banner1 banner1 banner1 banner1 banner3 banner3";
  }
}
.bannerGroup .banner {
  display: flex;
  margin-bottom: 20px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .bannerGroup .banner {
    margin-bottom: 0;
  }
}
.bannerGroup .banner > .link {
  display: flex;
  width: 100%;
}
.bannerGroup .banner .contentImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.bannerGroup .banner .contentText {
  padding: 20px;
}
@media (min-width: 1250px) {
  .bannerGroup .banner .contentText {
    padding: 30px;
  }
}
.bannerGroup .banner .contentText .textcontent {
  width: 100%;
}
.bannerGroup .banner .contentText .textcontent p:last-child {
  margin-bottom: 0;
}
.bannerGroup .banner:first-child {
  grid-area: banner1;
}
@media (min-width: 1024px) {
  .bannerGroup .banner:not(:first-child) .contentImage {
    position: relative;
    width: 100%;
  }
  .bannerGroup .banner:not(:first-child) .contentImage img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .bannerGroup .banner:nth-child(2) .contentImage, .bannerGroup .banner:nth-child(3) .contentImage {
    aspect-ratio: 16/9;
  }
}
.bannerGroup .banner:nth-child(2) {
  grid-area: banner2;
}
.bannerGroup .banner:nth-child(3) {
  grid-area: banner3;
}

.dcCookieBar {
  position: fixed;
  left: 0;
  bottom: 0;
  line-height: 1.3;
  width: 100%;
  min-width: 320px;
  box-shadow: 0 0 10px black;
  z-index: 6000;
  padding: 15px;
  padding-left: 90px;
  background-color: var(--main-color-white);
  font-size: var(--main-font-size-base);
  color: var(--main-color-black);
  box-sizing: border-box;
}
.dcCookieBar a {
  color: var(--main-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: 8px;
  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: 320px) {
  .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: 8px;
}
@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;
}

/*
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: -16px;
}

.filegalleryFile {
  margin-bottom: 16px;
  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: 12px;
  font-size: 18px;
  line-height: 1;
  margin-top: -2px;
}
.filegalleryFile span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--main-color-middle-gray);
  text-underline-offset: 4.68px;
}
.filegalleryFile:hover {
  color: var(--main-color-black);
  text-decoration: none;
}
.filegalleryFile:hover span {
  text-decoration-color: var(--main-color-black);
}

/*
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;
  height: 100%;
  width: 100%;
}
.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: 25px;
  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;
}

.imageGalleryWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 10px;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .imageGalleryWrapper {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 481px) {
  .imageGalleryWrapper {
    grid-template-columns: 1fr;
  }
}
.imageGalleryWrapperFourGrid {
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 481px) {
  .imageGalleryWrapperFourGrid {
    grid-template-columns: 1fr;
  }
}
.imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(1), .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(4) {
  --rows: 15;
}
@media screen and (max-width: 481px) {
  .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(1), .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(4) {
    --rows: 10;
  }
}
.imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(2), .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(3) {
  --rows: 20;
}
@media screen and (max-width: 481px) {
  .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(2), .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(3) {
    --rows: 15;
  }
}
.imageGalleryItem {
  border-radius: 12px;
  grid-row: span var(--rows, 10);
  --rows: 15;
}
@media screen and (max-width: 481px) {
  .imageGalleryItem {
    --rows: 10;
  }
}
.imageGalleryItem:nth-child(even) {
  --rows: 20;
}
@media screen and (max-width: 481px) {
  .imageGalleryItem:nth-child(even) {
    --rows: 15;
  }
}
.imageGalleryItem:nth-child(6n+5) {
  --rows: 20;
}
@media screen and (max-width: 481px) {
  .imageGalleryItem:nth-child(6n+5) {
    --rows: 15;
  }
}
.imageGalleryItem:nth-child(6n+6) {
  --rows: 15;
}
@media screen and (max-width: 481px) {
  .imageGalleryItem:nth-child(6n+6) {
    --rows: 10;
  }
}
.imageGalleryItem img {
  object-fit: cover;
  height: 100% !important;
  width: 100%;
}

.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: 1620px) {
  .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-top: 1px solid var(--main-color-gray-base);
  border-bottom: 1px solid var(--main-color-gray-base);
  padding: 20px 0 0 0;
}
.slidecontentItem:not(:last-child) {
  margin-bottom: -1px;
}
.slidecontentItem__headline {
  position: relative;
  font-size: 2rem;
  color: var(--main-color-black);
  padding-left: 40px;
  cursor: pointer;
  line-height: 1.4;
  margin-bottom: 20px;
}
.slidecontentItem__headline:after {
  content: var(--base-icon-plus);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 0;
  top: 50%;
  font-size: 24px;
  width: 24px;
  text-align: center;
  transition: 0.2s ease-in-out;
  translate: 0 -50%;
}
.slidecontentItem__headline:hover:after, .slidecontentItem__headline:active:after, .slidecontentItem__headline:focus:after {
  color: var(--main-color-secondary-medium);
}
@media (max-width: 767px) {
  .slidecontentItem__headline {
    font-size: 1.8rem;
    padding-left: 35px;
  }
  .slidecontentItem__headline:after {
    font-size: 21px;
    width: 21px;
  }
}
.slidecontentItem__content {
  display: none;
  padding: 0 10px 0 40px;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .slidecontentItem__content {
    padding: 0 10px 0 35px;
  }
}
.slidecontentItem.is-active {
  padding-bottom: 20px;
}
.slidecontentItem.is-active .slidecontentItem__headline:after {
  content: var(--base-icon-minus);
}

.newsletterFooterForm .newsletterForm {
  display: flex;
  width: 100%;
}
.newsletterFooterForm .newsletterForm .infieldInputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  line-height: 26px;
  max-height: 46px;
}
.newsletterFooterForm .newsletterForm button {
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  border-color: var(--main-color-secondary);
}
.newsletterFooterForm .newsletterForm .klaviyo-form {
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .klaviyo-form button {
  width: auto;
}
.newsletterFooterForm .button-icon {
  display: none;
}
@media (max-width: 767px) {
  .newsletterFooterForm button {
    width: 48px;
  }
  .newsletterFooterForm .button-text {
    display: none;
  }
  .newsletterFooterForm .button-icon {
    display: inline-flex;
  }
}

.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-secondary);
  color: var(--main-color-white);
  border-color: var(--main-color-secondary);
}

.banner .textcontent + .newsletterBanner {
  margin-top: 20px;
}

.newsletterFormSitepart .specialcheckbox {
  margin-bottom: 26px;
}

.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: 96px 160px;
  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-slide .swiper-zoom-container img {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.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;
  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: 16px;
  }
  .fullscreenSwiperImage .swiper-button-prev,
  .fullscreenSwiperImage .swiper-button-next {
    display: none;
  }
}
.fullscreenSwiper .icon-close {
  font-size: 20px;
}
@media screen and (max-width: 481px) {
  .fullscreenSwiper .icon-close {
    font-size: 15px;
  }
}
.fullscreenSwiper .icon-angle-left,
.fullscreenSwiper .icon-angle-right {
  font-size: 30px;
}

.fullscreenSwiperThumbs {
  flex-shrink: 0;
  height: 112px;
  padding-bottom: 32px;
  transition: opacity 0.2s ease-in-out;
  overflow: visible;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs {
    height: 76px;
    padding-bottom: 16px;
  }
}
.fullscreenSwiperThumbs .swiper-wrapper {
  justify-content: center;
}
.fullscreenSwiperThumbs .swiper-slide {
  width: 80px;
  cursor: pointer;
  opacity: 0.4;
  transition: 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs .swiper-slide {
    width: 60px;
  }
}
.fullscreenSwiperThumbs .swiper-slide > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.fullscreenSwiperThumbs .swiper-slide:hover, .fullscreenSwiperThumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.fullscreenSwiperThumbs .swiper-button-disabled {
  opacity: 0;
}

.fullscreenSwiperClose {
  position: fixed;
  right: 20px;
  top: 20px;
  font-size: 40px;
  border: 2px solid transparent;
  color: var(--main-color-black);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: 0.2s ease-in-out;
}
.fullscreenSwiperClose:hover {
  color: var(--main-color-action);
  border-color: var(--main-color-action);
}
@media (max-width: 767px) {
  .fullscreenSwiperClose {
    top: 10px;
    right: 10px;
    font-size: 30px;
    border-width: 1px;
    width: 40px;
    height: 40px;
  }
}

body.fullscreen-gallery-opened {
  overflow: hidden;
  contain: unset;
}

.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;
}

/*
Locker Rental Process

Markup:
<form id="stepForm">
<div id="progress-container">
<div id="progress-bar"></div>
<span id="step-counter">Schritt 1 von 5</span>
</div>
<div class="form-step">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group-step" style="display:none">
<label for="firstname">Vorname:</label>
<input type="text" id="firstname" name="firstname" required>
<label for="lastname">Nachname:</label>
<input type="text" id="lastname" name="lastname" required>
</div>
<div class="form-step" style="display:none">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group-step" style="display:none">
<label for="password">Passwort:</label>
<input type="password" id="password" name="password" required minlength="6">
<label for="passwordConfirm">Passwort wiederholen:</label>
<input type="password" id="passwordConfirm" name="passwordConfirm" required minlength="6">
</div>
<div class="form-step" style="display:none">
<label for="terms">
<input type="checkbox" id="terms" name="terms" required> AGB akzeptieren
</label>
</div>
<button type="submit" style="display:none">Absenden</button>
</form>
*/
.lockerRentalProcess {
  max-width: 900px;
  padding: 40px;
  border: 1px solid var(--main-color-light-gray);
  border-radius: 8px;
  background-color: var(--main-color-gray-background);
}
.lockerRentalProcess .progressWrapper {
  padding: 10px 0;
  background-color: var(--main-color-gray-background);
  position: sticky;
  top: 25px;
  z-index: 2;
  right: 0;
  margin-bottom: 20px;
}
.lockerRentalProcess #progress-container {
  margin-bottom: 40px;
  height: 20px;
  background: var(--main-color-white);
  border-radius: 8px;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}
.lockerRentalProcess #progress-bar {
  height: 100%;
  width: 0%;
  max-width: 100%;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  border-radius: 10px;
  transition: width 0.3s ease;
}
.lockerRentalProcess #step-counter {
  position: relative;
  margin-top: 10px;
  justify-content: flex-end;
  font-size: 12px;
  line-height: 20px;
  color: var(--main-color-black);
  display: flex;
}
.lockerRentalProcess .form-step,
.lockerRentalProcess .form-group-step {
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lockerRentalProcess .form-step.show,
.lockerRentalProcess .form-group-step.show {
  display: block !important;
  opacity: 1;
}
@media (max-width: 767px) {
  .lockerRentalProcess {
    padding: 20px;
  }
}

.flatpickr-day.endRange,
.flatpickr-day.selected,
.flatpickr-day.startRange {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
}
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus {
  background: var(--main-color-secondary);
  border-color: var(--main-color-secondary);
}

.chartHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .chartHeader {
    flex-direction: column-reverse;
    align-items: unset;
    gap: 20px;
  }
}
.chartSelects {
  display: grid;
  grid-template-columns: 300px 300px;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .chartSelects {
    grid-template-columns: 100%;
  }
}
.chartTools {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 24px;
}
.chartTools button {
  border: 0;
  padding: 0;
  line-height: unset;
  letter-spacing: 0;
  font-size: 20px;
}
.chartTools button:hover {
  color: var(--main-color-primary);
  cursor: pointer;
  background: none;
}
.chartDate {
  position: relative;
}
.chartDate .icon {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 0;
}
.chartPicker {
  position: relative;
  z-index: 1;
  background: transparent;
}
.chartPicker:hover .icon {
  color: var(--main-color-primary);
}
.chartHints {
  margin-top: 32px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
@media screen and (max-width: 1024px) {
  .chartHints {
    flex-direction: column;
    align-items: unset;
    gap: 20px;
  }
}
.chartHints p {
  margin: 0;
}
.chartBox {
  height: 200px;
  width: 100%;
  position: relative;
}
.chartTags .tags {
  justify-content: end;
}
@media screen and (max-width: 1024px) {
  .chartTags .tags {
    justify-content: start;
  }
}

.priceListNumber {
  grid-area: a;
}
.priceListHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .priceListHeader {
    flex-direction: column;
    align-items: start;
    gap: 15px;
    margin-bottom: 0px;
  }
}
.priceListTableHeader {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  text-transform: uppercase;
  padding: 18px 0;
}
@media screen and (max-width: 768px) {
  .priceListTableHeader {
    padding: 5px 0;
  }
}
.priceListTableHeader .sortable {
  cursor: pointer;
}
.priceListTableHeader .sortable .sortableIcon {
  position: relative;
  margin-left: 40px;
  margin-right: -15px;
}
.priceListTableHeader .sortable .sortableIcon:after {
  content: var(--base-icon-angle-down-bold);
  font-family: icons;
  font-size: 9px;
  position: absolute;
  right: 20px;
  bottom: -2px;
  color: var(--main-color-white);
}
.priceListTableHeader .sortable .sortableIcon:before {
  content: var(--base-icon-angle-up-bold);
  font-family: icons;
  font-size: 9px;
  position: absolute;
  top: -2px;
  right: 20px;
  color: var(--main-color-white);
}
.priceListTableHeader .sortable.activeSortingAsc .sortableIcon:after {
  color: var(--main-color-primary);
}
.priceListTableHeader .sortable.activeSortingDesc .sortableIcon:before {
  color: var(--main-color-primary);
}
@media screen and (max-width: 768px) {
  .priceListTableHeader .priceListBuy, .priceListTableHeader .priceListSell, .priceListTableHeader .priceListImage {
    display: none;
  }
}
.priceListTableRow {
  display: grid;
  grid-template-columns: 200px 140px auto 200px 200px;
  padding: 5px 12px;
  align-items: center;
  text-decoration: none;
  grid-template-areas: "a b c d e";
}
@media screen and (max-width: 1250px) {
  .priceListTableRow {
    grid-template-columns: 100px 140px auto 150px 150px;
  }
}
@media screen and (max-width: 768px) {
  .priceListTableRow {
    grid-template-columns: 90px 60px auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "a b c" ". . d" ". . e";
  }
}
.priceListTableRow:hover {
  text-decoration: none;
}
.priceListTableRow .mobileLabel {
  display: none;
}
@media screen and (max-width: 768px) {
  .priceListTableRow .mobileLabel {
    display: inline-block;
    font-weight: 400;
  }
}
.priceListTableRow:nth-child(even) {
  background: var(--main-color-secondary-light);
}
.priceListImage {
  text-align: center;
  grid-area: b;
}
.priceListImage img {
  max-width: 75px;
  max-height: 75px;
  display: block;
}
@media screen and (max-width: 768px) {
  .priceListImage img {
    max-width: 50px;
    max-height: 50px;
  }
}
.priceListArticle {
  grid-area: c;
}
.priceListBuy {
  grid-area: d;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .priceListBuy {
    text-align: left;
  }
}
.priceListSell {
  grid-area: e;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .priceListSell {
    text-align: left;
  }
}
.priceListSearch {
  min-width: 300px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .priceListSearch {
    width: 100%;
  }
}
.priceListSearch #priceListSearchInput {
  padding-right: 40px;
}
.priceListSearch .icon {
  position: absolute;
  right: 15px;
  top: 12px;
}
.priceListTags .tag {
  font-size: var(--main-font-size-base);
  padding: 10px 15px;
}
@media screen and (max-width: 768px) {
  .priceListTags .tag {
    padding: 7px 10px;
    font-size: var(--main-font-size-small);
  }
}

.referenceListTableHeader {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  text-transform: uppercase;
  padding: 18px 0;
}
@media screen and (max-width: 768px) {
  .referenceListTableHeader {
    padding: 5px 0;
  }
}
@media screen and (max-width: 481px) {
  .referenceListTableHeader {
    font-size: var(--main-font-size-small);
  }
}
.referenceListRow {
  display: grid;
  grid-template-columns: 75% 12.5% 12.5%;
  padding: 5px 12px;
}
@media screen and (max-width: 1250px) {
  .referenceListRow {
    grid-template-columns: 60% 20% 20%;
  }
}
@media screen and (max-width: 768px) {
  .referenceListRow {
    grid-template-columns: 33% 33% 33%;
  }
}
.referenceListRow:nth-child(even) {
  background: var(--main-color-secondary-light);
}
.referenceListBuy {
  text-align: right;
}
.referenceListSell {
  text-align: right;
}
.referenceListTags {
  margin-bottom: 20px;
}

.heroBanner {
  height: 960px;
  position: relative;
  background: var(--main-color-secondary);
  overflow: hidden;
}
.heroBanner .contentText {
  padding-left: 20px !important;
  padding-right: 20px !important;
  max-width: 1840px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1250px) {
  .heroBanner .contentText {
    padding-top: 220px !important;
  }
}
@media (min-width: 1540px) {
  .heroBanner .contentText {
    padding-top: 295px !important;
  }
}
.heroBanner .contentText .subline {
  font-size: 3rem;
  font-weight: var(--main-font-weight-medium);
  line-height: 1.2;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .heroBanner .contentText .subline {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
.heroBanner .contentText .highlighted {
  max-width: 60%;
  margin-bottom: 40px;
}
@media (max-width: 1539px) {
  .heroBanner .contentText .highlighted {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .heroBanner .contentText .highlighted {
    font-size: 38px;
    margin-bottom: 16px;
    line-height: 1.1;
  }
}
@media (max-width: 481px) {
  .heroBanner .contentText .highlighted {
    font-size: 36px;
  }
}
.heroBanner .contentImage {
  border-bottom: 2px solid var(--main-color-primary);
}
@media (max-width: 767px) {
  .heroBanner .contentImage {
    max-height: 100%;
  }
}
.heroBanner .contentImage:after {
  background: linear-gradient(0, rgba(0, 0, 0, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
}
.heroBanner .contentOverlay {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 1920px;
  height: auto;
  pointer-events: none;
}
.heroBanner .contentOverlay .imageWrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: -210px;
  z-index: 11;
  max-height: 300px;
}
.heroBanner .contentOverlay .imageWrapper picture {
  max-height: 300px;
}
@media (max-width: 1539px) {
  .heroBanner {
    height: 800px;
  }
}
@media (max-width: 1023px) {
  .heroBanner {
    height: 580px;
  }
  .heroBanner .contentOverlay {
    bottom: -90px;
  }
  .heroBanner .contentOverlay .imageWrapper {
    margin-bottom: -125px;
    max-height: 180px;
  }
  .heroBanner .contentOverlay .imageWrapper picture, .heroBanner .contentOverlay .imageWrapper img {
    max-height: 180px;
  }
}
@media (max-width: 767px) {
  .heroBanner .contentText.contentText--left {
    justify-content: center;
  }
}

@media screen and (min-width: 1250px) {
  body:has(.js-trustBar) .heroBanner .contentText {
    padding-top: 250px !important;
  }
}
@media (max-width: 1249px) {
  body:has(.js-trustBar) .heroBanner .contentText {
    padding-top: 160px !important;
  }
}
@media (max-width: 768px) {
  body:has(.js-trustBar) .heroBanner .contentText {
    padding-top: 200px !important;
  }
}

.textImgSection .contentText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
}
@media (min-width: 768px) {
  .textImgSection .contentText {
    padding: 50px;
  }
}
@media (min-width: 1250px) {
  .textImgSection .contentText {
    padding: 150px 100px;
  }
}
.textImgSection .contentImage picture, .textImgSection .contentImage .categoryPicture {
  height: 100%;
}
.textImgSection .contentImage picture img, .textImgSection .contentImage .categoryPicture img {
  object-fit: cover;
  height: 100% !important;
}
.textImgSection .contentImage .categoryPicture img {
  width: 100% !important;
  max-height: 500px;
}

.imageHoverExpand .gridRow {
  display: flex;
  gap: 1rem;
  transition: all 0.4s ease;
}
.imageHoverExpand .gridRow .gridItem {
  flex: 1 1 0;
  transition: flex 0.6s ease, transform 0.4s ease;
  height: 680px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  border-radius: 16px;
}
.imageHoverExpand .gridRow .gridItem picture {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}
.imageHoverExpand .gridRow .gridItem picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  border-radius: 16px;
}
.imageHoverExpand .gridRow .gridItem .gridItemContent--headline {
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 40px;
  transition: font-size 0.5s ease;
  transition-delay: 0.2s;
  white-space: nowrap;
}
@media (min-width: 1250px) {
  .imageHoverExpand .gridRow .gridItem.hoverintent {
    flex: 3 1 0;
    z-index: 2;
  }
  .imageHoverExpand .gridRow .gridItem.hoverintent img {
    transform: scale(1.05);
  }
  .imageHoverExpand .gridRow .gridItem.hoverintent .gridItemContent--headline {
    font-size: 4rem;
  }
}
.imageHoverExpand .gridRow .gridItem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.imageHoverExpand .gridRow .gridItem .gridItemContent {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  z-index: 1;
  color: var(--main-color-white);
  transition: opacity 0.4s ease;
}
.imageHoverExpand .gridRow .gridItem > a {
  display: block;
  height: 100%;
}
.imageHoverExpand .gridRow .gridItem > a:hover .button--bordered {
  background: var(--main-color-secondary-dark);
  border-color: var(--main-color-secondary-dark);
}
@media (min-width: 1250px) {
  .imageHoverExpand .gridRow:has(.gridItem.hoverintent) .gridItem:not(.hoverintent) .gridItemContent {
    opacity: 0;
  }
}
.imageHoverExpand .button--icon {
  color: var(--main-color-white);
  border-color: var(--main-color-white);
  width: 40px;
  height: 40px;
}
.imageHoverExpand .button--bordered {
  color: var(--main-color-white);
  border-color: var(--main-color-white);
  display: inline-flex;
  height: 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 12px 8px 16px;
  align-items: center;
  gap: 6px;
  font-size: 1.4rem;
  min-width: auto;
}
.imageHoverExpand .button--bordered:hover {
  background: var(--main-color-secondary-dark);
  border-color: var(--main-color-secondary-dark);
}
.imageHoverExpand .buttonRow, .imageHoverExpand .buttonRowBottom, .imageHoverExpand .buttonRowTop {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 5px;
  margin: 0;
}
.imageHoverExpand .buttonRow .button, .imageHoverExpand .buttonRowBottom .button, .imageHoverExpand .buttonRowTop .button {
  margin: 0;
  flex-shrink: 0;
}
@media (min-width: 1250px) {
  .imageHoverExpand .buttonRow, .imageHoverExpand .buttonRowBottom, .imageHoverExpand .buttonRowTop {
    flex-wrap: nowrap;
  }
}

@media (max-width: 1249px) {
  .imageHoverExpand {
    margin-right: -20px;
  }
  .imageHoverExpand .gridRow {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
  }
  .imageHoverExpand .gridRow .gridItem {
    flex: 0 0 auto;
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    scroll-snap-align: start;
    transition: width 0.4s ease;
    height: 480px;
  }
  .imageHoverExpand .gridRow .gridItem:last-child {
    margin-right: 20px;
  }
}
.swiperTiles {
  display: flex;
  flex-direction: column;
}
.swiperTiles .swiper-container {
  overflow: visible;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.swiperTiles .swiper-container.is-loading {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.swiperTiles .contentImage {
  height: 100%;
  max-height: 650px;
}
.swiperTiles .contentImage picture {
  height: 100%;
}
.swiperTiles .contentImage picture img {
  object-fit: cover;
}
.swiperTiles .contentText {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 50px;
}
.swiperTiles .contentText--subline {
  font-size: 1.8rem;
  line-height: 1.33;
  margin-bottom: 10px;
}
.swiperTiles .contentText--headline {
  font-weight: var(--main-font-weight-medium);
  font-size: 4rem;
  line-height: 1.2;
  margin-bottom: 40px;
  max-width: 60%;
}
.swiperTiles .swiper-slide {
  position: relative;
  border-radius: 16px;
  transition: transform 0.4s ease, opacity 0.4s ease;
  contain: paint;
  min-height: 400px;
}
.swiperTiles .swiper-slide.dimmed, .swiperTiles .swiper-slide.swiper-slide-prev {
  opacity: 0.5;
  transform: scale(0.9) translateX(-40px);
}
.swiperTiles .swiper-slide.swiper-slide-prev {
  transform: scale(0.9) translateX(40px);
}
@media (max-width: 1249px) {
  .swiperTiles .swiper-slide.dimmed, .swiperTiles .swiper-slide.swiper-slide-prev {
    transform: scale(0.9) translateX(-25px);
  }
  .swiperTiles .swiper-slide.swiper-slide-prev {
    transform: scale(0.9) translateX(25px);
  }
}
@media (max-width: 1023px) {
  .swiperTiles .swiper-slide.dimmed, .swiperTiles .swiper-slide.swiper-slide-prev {
    transform: scale(0.9) translateX(-15px);
  }
  .swiperTiles .swiper-slide.swiper-slide-prev {
    transform: scale(0.9) translateX(15px);
  }
}
@media (max-width: 767px) {
  .swiperTiles .swiper-slide.dimmed, .swiperTiles .swiper-slide.swiper-slide-prev {
    transform: scale(0.95) translateX(0);
  }
  .swiperTiles .swiper-slide.swiper-slide-prev {
    transform: scale(0.95) translateX(0);
  }
}
.swiperTiles .swiperControls {
  display: flex;
  align-items: center;
  gap: 60px;
}
.swiperTiles .swiperButtonWrapper {
  position: relative;
  display: flex;
  gap: 32px;
  width: 97px;
  margin-left: -20px;
}
@media (max-width: 767px) {
  .swiperTiles .swiperButtonWrapper {
    width: 120px;
  }
}
.swiperTiles .swiper-pagination {
  display: flex;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.swiperTiles .swiper-pagination .swiper-pagination-bullet {
  flex: 1 1 0;
  height: 2px;
  border-radius: 0;
}
@media (max-width: 1249px) {
  .swiperTiles .contentText {
    padding: 20px;
  }
  .swiperTiles .contentText--subline {
    font-size: 1.6rem;
    margin-bottom: 5px;
  }
  .swiperTiles .contentText--headline {
    font-size: 2.8rem;
    margin-bottom: 20px;
    max-width: 80%;
  }
  .swiperTiles .swiperControls {
    gap: 20px;
  }
  .swiperTiles .swiper-pagination {
    gap: 5px;
  }
}
@media (max-width: 767px) {
  .swiperTiles .swiper-pagination {
    margin: 10px 0;
    padding-right: 20px;
  }
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 64px;
}
@media (max-width: 767px) {
  .divider {
    gap: 20px;
  }
}

.line {
  flex: 1;
  height: 1px;
  background-color: var(--main-color-gray-base);
}

svg {
  object-fit: contain;
  height: 42px;
}

.bannerSlider {
  position: relative;
  color: var(--main-color-white);
  overflow: hidden;
}
.bannerSlider .swiperControls {
  position: absolute;
  bottom: 90px;
  left: 20px;
  right: 20px;
  max-width: 1800px;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid var(--main-color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
@media (min-width: 1800px) {
  .bannerSlider .swiperControls {
    left: 60px;
    right: 60px;
    width: calc(100% - 120px);
  }
}
@media (max-width: 1249px) {
  .bannerSlider .swiperControls {
    padding-top: 32px;
    bottom: 40px;
  }
}
@media (max-width: 1023px) {
  .bannerSlider .swiperControls {
    bottom: 70px;
  }
  .bannerSlider .swiperControls nav {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767px) {
  .bannerSlider .swiperControls {
    padding-top: 16px;
    bottom: 50px;
  }
}
.bannerSlider .contentText {
  position: absolute;
  top: 40%;
  left: 10%;
  transform: translate(-10%, -40%);
  text-align: center;
  max-width: 600px;
  padding-left: 20px;
  padding-right: 20px;
}
.bannerSlider .contentText .textcontent {
  margin-bottom: 20px;
}
.bannerSlider .contentText .button {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
}
.bannerSlider .contentText .button:hover {
  border-color: var(--main-color-secondary-dark);
}
@media (max-width: 1249px) {
  .bannerSlider .contentText {
    width: 100%;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
  }
}
.bannerSlider .contentImage {
  height: 100%;
}
.bannerSlider .contentImage picture {
  height: 100%;
}
.bannerSlider .contentImage picture img {
  object-fit: cover;
}
.bannerSlider .contentImage:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, rgba(0, 46, 85, 0) 0%, rgba(0, 46, 85, 0.6) 100%);
}
@media (max-width: 767px) {
  .bannerSlider .contentImage:after {
    background: linear-gradient(180deg, rgba(0, 46, 85, 0) 0%, rgba(0, 46, 85, 0.8) 100%);
  }
}
.bannerSlider .custom-pagination {
  list-style: none;
  display: flex;
  gap: 40px;
  padding-left: 0;
}
.bannerSlider .custom-pagination li {
  margin-bottom: 0;
  opacity: 0.7;
  cursor: pointer;
  font-weight: var(--main-font-weight-medium);
  letter-spacing: 0.3px;
}
.bannerSlider .custom-pagination li.is-active {
  opacity: 1;
}
@media (max-width: 1023px) {
  .bannerSlider .custom-pagination {
    display: inline-flex;
    gap: 20px;
    margin: 0;
  }
  .bannerSlider .custom-pagination li {
    flex: 0 0 auto;
  }
  .bannerSlider .custom-pagination.is-active {
    opacity: 1;
  }
}
.bannerSlider .swiper-slide {
  max-height: 960px;
}
@media (max-width: 1249px) {
  .bannerSlider .swiper-slide {
    height: 600px;
  }
}
@media (max-width: 767px) {
  .bannerSlider .swiper-slide {
    height: 450px;
  }
}
.bannerSlider .swiper-pagination {
  text-align: right;
  color: var(--main-color-white);
  max-width: 50px;
  margin-top: 0;
}
.bannerSlider .swiperButtonWrapper {
  position: relative;
  width: 97px;
  height: 40px;
  margin-left: -20px;
}
.bannerSlider .swiperButtonWrapper > div {
  color: var(--main-color-white);
}
.bannerSlider .swiperButtonWrapper > div:hover, .bannerSlider .swiperButtonWrapper > div:focus {
  color: var(--main-color-primary);
}

.coinSeries {
  width: 1005px;
  align-self: stretch;
}
@media screen and (max-width: 1540px) {
  .coinSeries {
    width: 50%;
  }
}
@media screen and (max-width: 1024px) {
  .coinSeries {
    width: 100%;
  }
}
.coinSeries .swiper-container {
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .coinSeries .swiper-container {
    height: auto;
  }
}
.coinSeries .swiper-wrapper {
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .coinSeries .swiper-wrapper {
    height: auto;
  }
}
.coinSeries .coinMobileContent {
  display: none;
}
@media screen and (max-width: 1024px) {
  .coinSeries .coinMobileContent {
    display: block;
  }
}
.coinSeries .coinMobileContent .h1 {
  margin-bottom: 10px;
}
.coinSeries .contentImage {
  position: relative;
  padding-left: 12%;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .coinSeries .contentImage {
    padding-left: 0;
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 481px) {
  .coinSeries .contentImage {
    padding-bottom: 50px;
  }
}
.coinSeries .contentImage .coinImage {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% - 383px);
  width: 383px;
  aspect-ratio: 1/1;
  opacity: 0;
}
@media screen and (max-width: 1540px) {
  .coinSeries .contentImage .coinImage {
    width: 283px;
  }
}
@media screen and (max-width: 481px) {
  .coinSeries .contentImage .coinImage {
    width: 183px;
  }
}
@media screen and (max-width: 1024px) {
  .coinSeries .contentImage .coinImage {
    top: unset;
    bottom: 0px;
    left: 50% !important;
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}
.coinSeries .contentImage .coinBackground {
  height: 100%;
}
.coinSeries .contentImage .coinBackground picture, .coinSeries .contentImage .coinBackground img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 1005/700;
  border-radius: 12px 0 0 12px;
  height: 700px !important;
}
@media screen and (max-width: 1024px) {
  .coinSeries .contentImage .coinBackground picture, .coinSeries .contentImage .coinBackground img {
    border-radius: 12px;
    height: 400px !important;
  }
}
@media screen and (max-width: 481px) {
  .coinSeries .contentImage .coinBackground picture, .coinSeries .contentImage .coinBackground img {
    height: 300px !important;
  }
}
.coinSeries .swiper-slide {
  background: var(--main-color-white);
}
@media screen and (max-width: 1024px) {
  .coinSeries .swiper-slide {
    height: 100%;
  }
}
.coinSeries .swiper-slide-active .coinImage {
  transition: opacity 0.5s ease-in-out, left 1s ease-in-out;
  left: 0;
  opacity: 1;
}
.coinSeries .swiper-slide.changeEvent .coinImage {
  left: calc(100% - 383px);
}
.coinSeriesWrapper {
  display: flex;
  padding-left: calc((100% - 1840px) / 2 + 40px);
}
@media screen and (max-width: 1860px) {
  .coinSeriesWrapper {
    padding-left: 20px;
  }
}
@media screen and (max-width: 1024px) {
  .coinSeriesWrapper {
    flex-direction: column;
  }
}
.coinSeriesWrapper .swiperControls {
  width: calc(100% - 1005px);
  padding-right: 84px;
}
@media screen and (max-width: 1540px) {
  .coinSeriesWrapper .swiperControls {
    width: 50%;
  }
}
@media screen and (max-width: 1024px) {
  .coinSeriesWrapper .swiperControls {
    width: 100%;
  }
}
.coinSeriesWrapper .swiperControls .coinBtn {
  margin: 0;
  position: relative;
  cursor: pointer;
}
.coinSeriesWrapper .swiperControls .coinBtn .coinDescription {
  margin: 0;
  display: none;
  max-width: 600px;
}
.coinSeriesWrapper .swiperControls .coinBtn .coinTitle {
  color: var(--main-color-middle-gray);
  line-height: 100%;
  margin: 0;
}
.coinSeriesWrapper .swiperControls .coinBtn:after {
  content: var(--base-icon-angle-right-light);
  font-family: "icons", Helvetica, Arial, sans-serif;
  color: var(--main-color-primary);
  font-size: 30px;
  position: absolute;
  opacity: 0;
  right: 0;
  top: 15px;
  transition: opacity 0.5s ease-out;
}
@media screen and (max-width: 1540px) {
  .coinSeriesWrapper .swiperControls .coinBtn:after {
    top: 12px;
    font-size: 22px;
  }
}
.coinSeriesWrapper .swiperControls .coinBtn.is-active {
  height: auto;
}
.coinSeriesWrapper .swiperControls .coinBtn.is-active .coinDescription {
  margin: 20px 0 0 0;
  opacity: 1;
  display: block;
}
.coinSeriesWrapper .swiperControls .coinBtn.is-active .coinTitle {
  color: var(--main-color-black);
}
.coinSeriesWrapper .swiperControls .coinBtn.is-active:after {
  opacity: 1;
}
.coinSeriesWrapper .swiperControls .coinBtn::marker {
  content: "";
  display: none;
}
.coinSeriesWrapper .swiperControls .coinBtn a, .coinSeriesWrapper .swiperControls .coinBtn a > * {
  text-decoration: none;
}
.coinSeriesWrapper .swiperControls .coinBtn a:hover {
  color: var(--main-color-dark-gray);
}
.coinSeriesWrapper .custom-pagination {
  list-style: none;
  display: flex;
  gap: 25px;
  flex-direction: column;
  padding: 0;
}
@media screen and (max-width: 1024px) {
  .coinSeriesWrapper .custom-pagination {
    display: none;
  }
}
.coinSeriesTitle {
  margin-bottom: 65px;
}
@media screen and (max-width: 1024px) {
  .coinSeriesTitle {
    margin-bottom: 20px;
  }
}

.jumpmarks {
  text-align: center;
  white-space: nowrap;
  overflow-x: auto;
}
.jumpmarks .jumpmark {
  display: inline-block;
  margin: 0 20px;
  padding-bottom: 10px;
}
@media screen and (max-width: 1024px) {
  .jumpmarks .jumpmark {
    margin: 0 10px;
  }
}
.jumpmarks .jumpmark a {
  text-decoration: none;
  white-space: nowrap;
}
.jumpmarks .jumpmark a.active {
  color: var(--main-color-black);
}
.jumpmarks .jumpmark a:hover {
  color: var(--main-color-black);
}

div:has(> .jumpmarks) {
  position: sticky;
  padding: 40px 20px 30px 20px;
  background: var(--main-color-white);
  top: 0;
  z-index: 3;
}
@media screen and (max-width: 1024px) {
  div:has(> .jumpmarks) {
    padding: 20px;
  }
}

.galleryGrid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.galleryGridColumn {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
}
.galleryGridColumn:first-child {
  width: calc(56% - 5px);
}
.galleryGridColumn:last-child {
  width: calc(44% - 5px);
}
.galleryGrid picture {
  height: 100%;
}
.galleryGrid img {
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  display: block;
}
.galleryGridImage1 {
  aspect-ratio: 507/560;
  overflow: hidden;
}
.galleryGridImage2 img {
  aspect-ratio: 377/560;
}
.galleryGridImage3 {
  padding-left: 26%;
}
.galleryGridImage3 img {
  aspect-ratio: 377/450;
}

@media screen and (min-width: 1024px) {
  .serviceGrid .swiper-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
  }
}
.serviceGridBox {
  position: relative;
  padding: 60px 40px;
  border-bottom: 1px solid var(--main-color-gray-base);
  border-right: 1px solid var(--main-color-gray-base);
}
@media screen and (max-width: 1024px) {
  .serviceGridBox {
    border-bottom: 0;
    padding: 20px !important;
  }
}
.serviceGridBox:after {
  content: "";
  position: absolute;
  top: -36px;
  left: -76px;
  width: 72px;
  height: 72px;
  background: var(--main-color-white);
}
@media screen and (max-width: 1024px) {
  .serviceGridBox:after {
    display: none;
  }
}
.serviceGridBox p {
  margin: 0;
}
.serviceGridBox .icon {
  margin-bottom: 32px;
  display: block;
  font-size: 50px;
  color: var(--main-color-secondary-medium);
}
@media screen and (max-width: 481px) {
  .serviceGridBox .icon {
    font-size: 30px;
    margin-bottom: 10px;
  }
}
.serviceGridBox:nth-child(-n+3) {
  padding-top: 40px;
}
@media screen and (max-width: 481px) {
  .serviceGridBox:nth-child(-n+3) {
    padding-top: 20px;
  }
}
.serviceGridBox:nth-child(-n+3):after {
  display: none;
}
.serviceGridBox:nth-last-child(-n+3) {
  padding-bottom: 40px;
  border-bottom: 0;
}
.serviceGridBox:nth-child(3n) {
  border-right: none;
}
@media screen and (max-width: 1024px) {
  .serviceGridBox:nth-child(3n) {
    border-right: 1px solid var(--main-color-gray-base);
  }
}
@media screen and (max-width: 1024px) {
  .serviceGridBox:last-child {
    border-right: 0 !important;
  }
}
.serviceGrid .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
}
.serviceGrid .swiper-pagination-bullet-active {
  background: var(--main-color-primary);
}

.container:has(.serviceGrid.swiper-initialized) {
  padding-left: 0;
  padding-right: 0;
}

.previewGridHeader {
  text-align: center;
}
.previewGridButton {
  margin: 80px 0;
}
@media (max-width: 1249px) {
  .previewGridButton {
    margin: 40px 0;
  }
}
@media (max-width: 767px) {
  .previewGridButton {
    margin: 20px 0;
  }
}
.previewGridButton .button {
  font-weight: 600;
}
.previewGridButton .button i {
  font-size: 12px;
}
.previewGridBody {
  display: grid;
  grid-template-columns: calc((100% - 20px) * 0.299) calc((100% - 20px) * 0.402) calc((100% - 20px) * 0.299);
  grid-auto-rows: 10px;
  gap: 10px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .previewGridBody {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .previewGridBody {
    gap: 5px;
  }
}
.previewGridBody.previewGridTwoColumns {
  grid-template-columns: 1fr 1fr;
}
.previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn {
  --rows: 30 !important;
}
@media screen and (max-width: 1024px) {
  .previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn .h2:not(.customSize) {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 1024px) and (min-width: 481px) {
  .previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn .h2:not(.customSize) {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 768px) {
  .previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn {
    --rows: 20 !important;
  }
}
.previewGridBody.previewGridTwoColumns .previewGridSpacer {
  grid-column: 2 !important;
}
.previewGridBox {
  padding: 40px;
  --rows: 20;
  grid-row: span var(--rows, 10);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  color: var(--main-color-white) !important;
}
@media screen and (max-width: 768px) {
  .previewGridBox {
    --rows: 10;
    padding: 20px;
  }
  .previewGridBox:nth-of-type(5n + 2), .previewGridBox:nth-of-type(5n + 4) {
    --rows: 20 !important;
  }
  .previewGridBox:nth-of-type(5n + 1) {
    grid-column: 1/-1;
    --rows: 20 !important;
  }
}
.previewGridBox:hover {
  color: var(--main-color-white);
}
.previewGridBox:hover img {
  transform: scale(1.2);
}
.previewGridBox:hover .previewGridContent .icon {
  background: rgba(255, 255, 255, 0.3);
}
.previewGridBigBox {
  --rows: 30;
}
@media screen and (max-width: 768px) {
  .previewGridBigBox {
    --rows: 10;
  }
}
.previewGridBigBox.middleColumn {
  --rows: 40;
}
@media screen and (max-width: 1024px) {
  .previewGridBigBox.middleColumn {
    --rows: 30;
  }
  .previewGridBigBox.middleColumn .h2:not(.customSize) {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 1024px) and (min-width: 481px) {
  .previewGridBigBox.middleColumn .h2:not(.customSize) {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 768px) {
  .previewGridBigBox.middleColumn {
    --rows: 10;
  }
}
.previewGridContent {
  position: absolute;
  bottom: 40px;
  left: 40px;
  width: calc(100% - 80px);
  display: flex;
  justify-content: space-between;
  gap: 33px;
  align-items: end;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .previewGridContent {
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
  }
}
.previewGridContent .icon {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  border: 1px solid var(--main-color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  transition: all 0.3s linear;
}
@media screen and (max-width: 768px) {
  .previewGridContent .icon {
    display: none;
  }
}
.previewGridTitle {
  width: calc(100% - 77px);
  margin: 0;
}
@media screen and (max-width: 768px) {
  .previewGridTitle {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
  }
}
.previewGridImage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.previewGridImage picture {
  height: 100%;
}
.previewGridImage img {
  object-fit: cover !important;
  object-position: top center;
  transition: all 0.3s linear;
}
.previewGridImage:before {
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.previewGridSpacer {
  display: block;
  visibility: hidden;
  --rows: 5;
  grid-row: span var(--rows);
  grid-column: 1;
}
@media screen and (max-width: 1024px) {
  .previewGridSpacer {
    --rows: 3;
  }
}
@media screen and (max-width: 768px) {
  .previewGridSpacer {
    display: none;
  }
}
.previewGridSpacer.thirdSpacer {
  --rows: 3;
  grid-column: 3;
}
@media screen and (max-width: 1024px) {
  .previewGridSpacer.thirdSpacer {
    display: none;
  }
}

.canvasContainer {
  position: absolute;
  width: 100vw;
  height: 890px;
  left: 0;
  top: 0;
  background-repeat: repeat, no-repeat;
  z-index: -1;
}
.canvasContainer.init {
  background-image: url("../../../../../userdata/media/picture/degussa-form-animation.png");
}
@media screen and (max-width: 1024px) {
  .canvasContainer {
    display: none;
  }
}

.spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media screen and (max-width: 1024px) {
  .spotlight {
    display: none;
  }
}

.mainContent:has(.canvasContainer) {
  position: relative;
  z-index: 0;
}

.stickyButtonBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  z-index: 99;
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  opacity: 1;
  transition: opacity 1s ease;
}
@media screen and (max-width: 768px) {
  .stickyButtonBar {
    padding: 20px;
  }
}
.stickyButtonBar .button {
  margin: 0 20px;
}
.stickyButtonBar .button .icon {
  font-size: 12px;
}
.stickyButtonBar .button:first-child {
  margin-left: 0;
}
.stickyButtonBar .button:last-child {
  margin-right: 0;
}
.stickyButtonBar.hidden {
  opacity: 0;
  pointer-events: none;
}

body:has(.stickyButtonBar) .footerBottom {
  margin-bottom: 110px;
}
@media screen and (max-width: 768px) {
  body:has(.stickyButtonBar) .footerBottom {
    margin-bottom: 77px;
  }
}

.twoColumnsElement {
  padding: 80px 0;
}
@media screen and (max-width: 1024px) {
  .twoColumnsElement {
    padding: 40px 0;
  }
}
@media screen and (max-width: 481px) {
  .twoColumnsElement {
    padding: 20px 0;
  }
}
@media screen and (min-width: 768px) {
  .twoColumnsElementBody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
  }
}
.twoColumnsElementBody:after {
  content: "";
  height: 100%;
  width: 1px;
  background: var(--main-color-white);
  display: block;
  top: 0;
  left: 50%;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .twoColumnsElementBody:after {
    display: none;
  }
}
.twoColumnsElementContent {
  margin: 60px 0 106px 0;
}
@media screen and (max-width: 768px) {
  .twoColumnsElementContent {
    margin: 40px 0 76px 0;
  }
}
.twoColumnsElementContent li {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .twoColumnsElementContent li {
    margin-bottom: 20px;
  }
}
.twoColumnsElementColumn {
  box-sizing: border-box;
  padding: 0 160px 0 80px;
  position: relative;
  width: auto;
}
@media screen and (max-width: 1250px) {
  .twoColumnsElementColumn {
    padding: 0 80px;
  }
}
@media screen and (max-width: 1024px) {
  .twoColumnsElementColumn {
    padding: 0 40px;
  }
}
@media screen and (max-width: 768px) {
  .twoColumnsElementColumn {
    padding: 0;
  }
}
.twoColumnsElementColumn .button {
  position: absolute;
  bottom: 0;
}
.twoColumnsElementColumn:first-child {
  padding: 0 80px 0 160px;
}
@media screen and (max-width: 1250px) {
  .twoColumnsElementColumn:first-child {
    padding: 0 80px;
  }
}
@media screen and (max-width: 1024px) {
  .twoColumnsElementColumn:first-child {
    padding: 0 40px;
  }
}
@media screen and (max-width: 768px) {
  .twoColumnsElementColumn:first-child {
    padding: 0;
  }
}
.twoColumnsElementHead {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0 20px;
}
.twoColumnsElement .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: var(--main-color-white);
  opacity: 0.7;
}
.twoColumnsElement .swiper-pagination-bullet-active {
  background: var(--main-color-primary);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .twoColumnsElement .swiper-pagination {
    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: 8px;
  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;
}

.history {
  position: relative;
  background: linear-gradient(180deg, var(--main-color-secondary) 0%, rgba(0, 46, 85, 0) 74.14%);
  contain: paint;
  padding: 8rem 0;
}

.historyTimeBeam {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: 1800px;
  padding: 4rem 2rem;
}
.historyTimeBeam .historyHeadline {
  max-width: 880px;
  text-align: center;
  margin-bottom: 4rem;
  color: var(--main-color-white);
}
.historyTimeBeam .historyHeadline h1, .historyTimeBeam .historyHeadline .spotPriceItem--headline, .historyTimeBeam .historyHeadline .h1 {
  font-size: 9.6rem;
  margin-bottom: 6rem;
  line-height: 1.2;
}
.historyTimeBeam .historyHeadline h1 span, .historyTimeBeam .historyHeadline .spotPriceItem--headline span, .historyTimeBeam .historyHeadline .h1 span {
  font-size: 9.6rem;
}
@media (max-width: 1023px) {
  .historyTimeBeam .historyHeadline h1, .historyTimeBeam .historyHeadline .spotPriceItem--headline, .historyTimeBeam .historyHeadline .h1 {
    font-size: 5rem;
  }
  .historyTimeBeam .historyHeadline h1 span, .historyTimeBeam .historyHeadline .spotPriceItem--headline span, .historyTimeBeam .historyHeadline .h1 span {
    font-size: 5rem;
  }
}
.historyTimeBeam .historyItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6rem;
  width: 100%;
  min-height: 360px;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease-out;
  z-index: 2;
}
.historyTimeBeam .historyItem.visible {
  opacity: 1;
  transform: translateY(0);
}
.historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) {
  text-align: center;
  justify-content: center;
}
.historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) .historyItem__content {
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
}
.historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) .historyItem__content .historyItem__textWrapper {
  padding: 0;
  max-width: 790px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) .historyItem__content {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.historyTimeBeam .historyItem__img {
  flex: 1;
  display: flex;
  justify-content: center;
}
.historyTimeBeam .historyItem__img img {
  width: 100%;
  max-width: 760px;
  border-radius: 1rem;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: transform, opacity;
}
.historyTimeBeam .historyItem__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: transform, opacity;
  z-index: 3;
}
.historyTimeBeam .historyItem__content .historyItem__year,
.historyTimeBeam .historyItem__content .historyItem__headline,
.historyTimeBeam .historyItem__content .historyItem__text {
  transition: color 0.35s ease, mix-blend-mode 0.35s ease;
  color: var(--main-color-white);
  mix-blend-mode: normal;
}
.historyTimeBeam .historyItem__content .historyItem__year {
  font-size: 20rem;
  line-height: 0.95;
  margin-bottom: 100px;
}
@media (max-width: 1539px) {
  .historyTimeBeam .historyItem__content .historyItem__year {
    font-size: 12rem;
  }
}
@media (max-width: 1249px) {
  .historyTimeBeam .historyItem__content .historyItem__year {
    font-size: 8rem;
    margin-bottom: 50px;
  }
}
@media (max-width: 1023px) {
  .historyTimeBeam .historyItem__content .historyItem__year {
    font-size: 5rem;
    margin-bottom: 25px;
    text-align: center;
  }
}
.historyTimeBeam .historyItem__content .historyItem__headline {
  font-size: 4rem;
  font-weight: var(--main-font-weight-medium);
  margin-bottom: 5rem;
}
@media (max-width: 1249px) {
  .historyTimeBeam .historyItem__content .historyItem__headline {
    font-size: 3rem;
    margin-bottom: 4rem;
  }
}
@media (max-width: 767px) {
  .historyTimeBeam .historyItem__content .historyItem__headline {
    font-size: 2.4rem;
    margin-bottom: 10px;
  }
}
.historyTimeBeam .historyItem__content .historyItem__text {
  font-size: 3rem;
  line-height: 1.2;
}
@media (max-width: 1249px) {
  .historyTimeBeam .historyItem__content .historyItem__text {
    font-size: 2.4rem;
  }
}
@media (max-width: 767px) {
  .historyTimeBeam .historyItem__content .historyItem__text {
    font-size: 2rem;
  }
}
.historyTimeBeam .historyItem.leftImage {
  flex-direction: row;
}
.historyTimeBeam .historyItem.leftImage .historyItem__img img {
  transform: translateX(-80px);
}
.historyTimeBeam .historyItem.leftImage .historyItem__content {
  transform: translateX(80px);
  text-align: left;
}
@media (max-width: 1023px) {
  .historyTimeBeam .historyItem.leftImage .historyItem__content {
    text-align: center;
  }
}
@media (min-width: 1540px) {
  .historyTimeBeam .historyItem.leftImage .historyItem__textWrapper {
    padding-left: 150px;
  }
}
.historyTimeBeam .historyItem.rightImage {
  flex-direction: row-reverse;
}
.historyTimeBeam .historyItem.rightImage .historyItem__img img {
  transform: translateX(80px);
}
.historyTimeBeam .historyItem.rightImage .historyItem__content {
  transform: translateX(-80px);
  text-align: right;
}
@media (max-width: 1023px) {
  .historyTimeBeam .historyItem.rightImage .historyItem__content {
    text-align: center;
  }
}
@media (min-width: 1540px) {
  .historyTimeBeam .historyItem.rightImage .historyItem__textWrapper {
    padding-right: 150px;
  }
}
.historyTimeBeam .historyItem.visible .historyItem__img img {
  opacity: 1;
  transform: translateX(0);
}
.historyTimeBeam .historyItem.visible .historyItem__content {
  opacity: 1;
  transform: translateX(0);
}
.historyTimeBeam .historyItem.in-light .historyItem__year,
.historyTimeBeam .historyItem.in-light .historyItem__headline,
.historyTimeBeam .historyItem.in-light .historyItem__text {
  color: var(--main-color-secondary);
  mix-blend-mode: normal;
}
@media (max-width: 1023px) {
  .historyTimeBeam .historyItem {
    gap: 2rem;
  }
}
.historyTimeBeam .historyLine {
  position: relative;
  width: 2px;
  height: 300px;
  background-color: transparent;
  margin: 0 auto;
  transition: background-color 0.3s ease;
}
.historyTimeBeam .historyLine::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-color-white);
  opacity: 0;
  transform: translateY(0);
  transition: background-color 0.6s ease, opacity 0.3s ease;
}
.historyTimeBeam .historyLine.animate::after {
  animation: growLine 1.2s ease-out forwards;
}
.historyTimeBeam .historyLine.in-light::after {
  background-color: var(--main-color-secondary);
}
@media (max-width: 1249px) {
  .historyTimeBeam .historyItem {
    margin-bottom: 50px;
  }
  .historyTimeBeam .historyLine {
    height: 150px;
    margin-bottom: 50px;
  }
}
@media (max-width: 1023px) {
  .historyTimeBeam .historyItem {
    flex-direction: column !important;
    margin-bottom: 30px;
  }
  .historyTimeBeam .historyItem__content {
    transform: translateY(20px);
    align-items: center;
  }
  .historyTimeBeam .historyItem__img img {
    transform: translateY(-20px);
  }
  .historyTimeBeam .historyLine {
    height: 100px;
    margin-bottom: 30px;
  }
}

@keyframes growLine {
  0% {
    transform: translateY(0);
    opacity: 0;
    height: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    height: 100%;
  }
}
.col-12:has(> .newsList) {
  display: flex;
  flex-direction: column-reverse;
}
.col-12:has(> .newsList) nav {
  margin-top: 100px;
}
@media screen and (max-width: 768px) {
  .col-12:has(> .newsList) nav {
    margin-top: 60px;
  }
}

.js-collectionFilter {
  display: block;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 1249px) {
  .js-collectionFilter {
    padding-bottom: 20px;
  }
}
.js-collectionFilter .tag {
  background: none;
  font-size: 20px;
  font-weight: 400;
  padding: 0;
  display: inline-block;
  margin: 0 20px;
}
@media screen and (max-width: 768px) {
  .js-collectionFilter .tag {
    margin: 0 8px;
  }
}
.js-collectionFilter .tag:first-child {
  margin-left: 0;
}
.js-collectionFilter .tag:last-child {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .js-collectionFilter .tag {
    font-size: 16px;
  }
}
.js-collectionFilter .tag:hover {
  text-decoration: underline;
  text-underline-offset: 7px;
}
.js-collectionFilter .tag.is-active {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 7px;
}
.js-collectionFilter .tag.is-loading {
  background: none !important;
}

.container:has(.isFullView.newsList) {
  max-width: 100%;
  padding: 0;
}

.newsHeader {
  display: grid;
  gap: 75px;
  grid-template-columns: 1fr 675px;
  padding-right: calc((100% - 1840px) / 2 + 20px);
}
@media screen and (max-width: 1880px) {
  .newsHeader {
    padding-right: 20px;
  }
}
@media screen and (max-width: 1250px) {
  .newsHeader {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 1024px) {
  .newsHeader {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    padding-bottom: 40px;
    gap: 10px;
  }
}
@media screen and (max-width: 481px) {
  .newsHeader {
    gap: 0;
    padding-bottom: 20px;
  }
}
.newsHeaderDetails {
  padding: 75px 0;
}
@media screen and (max-width: 1024px) {
  .newsHeaderDetails {
    padding-bottom: 0;
    padding-top: 40px;
  }
}
@media screen and (max-width: 481px) {
  .newsHeaderDetails {
    padding-top: 20px;
  }
}
.newsHeaderDetails .linkWithIcon {
  font-weight: 400;
}
.newsHeaderDetails .linkWithIcon span {
  text-decoration: underline;
  text-decoration-color: var(--main-color-gray-base);
  text-underline-offset: 5px;
}
.newsHeaderDetails .linkWithIcon .icon {
  font-size: 12px;
  margin-right: 6px;
}
.newsHeaderDetailsLine {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--main-color-gray-base);
  margin-bottom: 100px;
}
@media screen and (max-width: 1024px) {
  .newsHeaderDetailsLine {
    margin-top: 20px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .newsHeaderDetailsLine {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}
.newsHeader img {
  height: 800px !important;
  object-fit: cover !important;
  border-radius: 0 16px 16px 0;
}
@media screen and (max-width: 1250px) {
  .newsHeader img {
    height: 600px !important;
  }
}
@media screen and (max-width: 1024px) {
  .newsHeader img {
    height: 400px !important;
    border-radius: 16px;
  }
}
@media screen and (max-width: 768px) {
  .newsHeader img {
    height: 250px !important;
  }
}
@media screen and (max-width: 1024px) {
  .newsHeader picture {
    order: 1;
  }
}
.newsHeaderDate {
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .newsHeaderDate {
    font-size: 14px;
  }
}
.newsHeader.newsHeaderWithoutImage {
  display: block;
  max-width: 895px;
  margin-left: 453px;
}
.newsHeader.newsHeaderWithoutImage .newsHeaderDetails {
  padding-bottom: 0;
}

.newsIcons {
  display: flex;
  gap: 24px;
}
.newsIcons a {
  text-decoration: none;
}
.newsIcons .icon {
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .newsIcons .icon {
    font-size: 14px;
  }
}

.newsIntro {
  padding: 100px 0;
  max-width: 895px;
  margin-left: 453px;
}
@media screen and (max-width: 1024px) {
  .newsIntro {
    margin-left: 0;
    padding: 0 0 20px 0;
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .newsIntro .youTubeIntro {
    margin-bottom: 20px;
  }
}

.newsMain {
  background: #F5F5F5;
  padding: 100px 0;
}
@media screen and (max-width: 1024px) {
  .newsMain {
    padding: 40px 0;
  }
}
.newsMainWrapper {
  display: grid;
  grid-template-columns: 353px auto;
  gap: 100px;
}
@media screen and (max-width: 1024px) {
  .newsMainWrapper {
    display: block;
  }
}
.newsMainContentText {
  max-width: 895px;
}
.newsMainContentImage {
  max-height: 900px;
}
@media screen and (max-width: 1024px) {
  .newsMainContentImage {
    max-height: 500px;
  }
}
.newsMainContentImage img {
  border-radius: 16px;
  max-height: 900px;
  width: auto !important;
}
@media screen and (max-width: 1024px) {
  .newsMainContentImage img {
    max-height: 500px;
  }
}
.newsMainContentGallery {
  max-width: 1347px;
}

@media screen and (max-width: 1024px) {
  .newsSidebar {
    display: none;
  }
}

.newsArticle .itembox__detailButton {
  display: block;
}
.newsArticle form {
  display: none;
}

.newsCollections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.newsCollections a {
  color: var(--main-color-black);
  text-underline-offset: 4px;
  text-decoration-color: var(--main-color-middle-gray);
  text-decoration-thickness: 6%;
}
.newsCollections a:hover {
  color: var(--main-color-middle-gray);
}

.newsList {
  position: relative;
}

.newsPost {
  display: block;
  padding: 32px 0;
  border-bottom: 1px solid var(--main-color-middle-gray);
  text-decoration: none;
  color: var(--main-color-black);
}
.newsPost.newsPostWithImage {
  display: grid;
  grid-template-columns: 100px auto;
  gap: 16px;
}
.newsPostImage img {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: 4px;
}
.newsPostDetail {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.newsPostReadMore {
  display: flex;
  align-items: center;
  gap: 6px;
}
.newsPostReadMore .icon {
  font-size: 12px;
}
.newsPostReadMore span {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--main-color-middle-gray);
}
.newsPost p {
  margin: 0;
}
.newsPost:hover {
  text-decoration: none;
}
.newsPost:hover .newsPostReadMore span {
  text-decoration-color: var(--main-color-primary);
}

.pressNotificationWrapper {
  text-decoration: none;
  color: var(--main-color-black);
}
.pressNotificationWrapper:hover {
  text-decoration: none;
  color: var(--main-color-dark-gray);
}
.pressNotification.isList {
  margin-top: -18px;
}
.pressNotificationGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
}
@media screen and (max-width: 1024px) {
  .pressNotificationGrid {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 481px) {
  .pressNotificationGrid {
    gap: 32px;
  }
}
.pressNotificationImage {
  margin-bottom: 32px;
}
@media screen and (max-width: 481px) {
  .pressNotificationImage {
    margin-bottom: 20px;
  }
}
.pressNotificationImage img {
  border-radius: 12px;
  aspect-ratio: 565/400;
  object-fit: cover !important;
}
@media screen and (max-width: 1024px) {
  .pressNotificationImage img {
    max-height: 400px;
  }
}
.pressNotificationDetails {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--main-color-gray-base);
  font-size: 18px;
}
@media screen and (max-width: 481px) {
  .pressNotificationDetails {
    padding-bottom: 20px;
    font-size: 14px;
  }
}
.pressNotificationDate {
  font-weight: 500;
}
.pressNotificationButton {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pressNotificationButton span {
  text-decoration: underline;
  text-decoration-color: #9D9D9D;
  text-decoration-thickness: 6%; /* 0.96px */
  text-underline-offset: 26%;
}
.pressNotificationButton .icon {
  font-size: 12px;
}
.pressNotificationTitle {
  margin-top: 32px;
}
@media screen and (max-width: 481px) {
  .pressNotificationTitle {
    margin-top: 20px;
  }
}
.pressNotificationIntro {
  max-width: 895px;
  margin: 100px auto;
}
@media screen and (max-width: 1024px) {
  .pressNotificationIntro {
    margin: 0 auto 40px auto;
  }
}
@media screen and (max-width: 481px) {
  .pressNotificationIntro {
    margin-bottom: 20px;
  }
}
.pressNotificationContent {
  max-width: 895px;
  margin: 0 auto;
}
.pressNotificationContent .newsMainContentGallery {
  margin-top: 80px;
}
@media screen and (max-width: 481px) {
  .pressNotificationContent .newsMainContentGallery {
    margin-top: 40px;
  }
}

@media screen and (max-width: 481px) {
  .newsMain:has(.pressNotificationContent) {
    padding: 20px 0;
  }
}

div[class*=col-]:has(.pressnotifications) .pagination {
  justify-content: end;
  transform: translateY(35px);
  margin-right: calc((100% - 1840px) / 2 + 20px);
}
@media screen and (max-width: 1840px) {
  div[class*=col-]:has(.pressnotifications) .pagination {
    margin-right: 20px;
  }
}
@media screen and (max-width: 1024px) {
  div[class*=col-]:has(.pressnotifications) .pagination {
    justify-content: center;
    transform: translateY(0);
    margin: 20px 0;
  }
}
@media screen and (max-width: 1024px) {
  div[class*=col-]:has(.pressnotifications) {
    display: flex;
    flex-direction: column-reverse;
  }
}

.pressReportsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
@media screen and (max-width: 1024px) {
  .pressReportsGrid {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 481px) {
  .pressReportsGrid {
    gap: 40px;
  }
}
.pressReportsWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  text-decoration: none;
  color: var(--main-color-black);
}
@media screen and (max-width: 481px) {
  .pressReportsWrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.pressReportsWrapper:hover {
  color: var(--main-color-dark-gray);
  text-decoration: none;
}
.pressReportsMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--main-color-gray-base);
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 1250px) {
  .pressReportsMeta {
    font-size: 14px;
  }
}
@media screen and (max-width: 481px) {
  .pressReportsMeta {
    padding-bottom: 20px;
  }
}
.pressReportsImage img {
  height: 300px !important;
  object-fit: cover !important;
  border-radius: 12px;
}
@media screen and (max-width: 481px) {
  .pressReportsImage img {
    height: 230px !important;
  }
}
.pressReportsTitle {
  margin: 30px 0;
}
@media screen and (max-width: 481px) {
  .pressReportsTitle {
    margin: 20px 0;
  }
}
.pressReportsText {
  line-height: 125%;
}

div[class*=col-]:has(.pressreports) .pagination {
  justify-content: end;
  transform: translateY(35px);
  margin-right: calc((100% - 1840px) / 2 + 20px);
}
@media screen and (max-width: 1840px) {
  div[class*=col-]:has(.pressreports) .pagination {
    margin-right: 20px;
  }
}
@media screen and (max-width: 1024px) {
  div[class*=col-]:has(.pressreports) .pagination {
    justify-content: center;
    transform: translateY(0);
    margin: 20px 0;
  }
}
@media screen and (max-width: 1024px) {
  div[class*=col-]:has(.pressreports) {
    display: flex;
    flex-direction: column-reverse;
  }
}

/*
Promotions

Markup:
<div class='promotions'>
<div class='promotion promotion--1'>Action</div>
<div class='promotion promotion--2'>Sale</div>
<div class='promotion promotion--3'>New</div>
<div class='promotion promotion--clickable'>New</div>
</div>

Styleguide Shop.Promotions
*/
.promotion {
  min-width: 40px;
  border-radius: 6px;
  border: 1px solid var(--main-color-primary);
  background: var(--main-color-primary-light);
  color: var(--main-color-primary);
  line-height: 1;
  padding: 4px;
  display: inline-flex;
  font-size: 12px;
  text-align: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .promotion {
    font-size: 14px;
    min-width: 64px;
    padding: 4px 8px;
  }
}
.promotion.promotion--3 {
  border-color: var(--main-color-success);
  color: var(--main-color-success);
}
.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;
}

/*
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-medium);
}

.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;
  }
}

/*
Inventory

Markup:
<div class="inventoryWrapper">
    <div class="inventory {{modifier_class}}">
      <span itemprop="availability" content="http://schema.org/InStock"></span>
      <p>Text</p>
    </div>
    <div class="inventoryShippingInfo">
      Shipping Info
    </div>
</div>

.available - Available
.low_availability - Low availability
.not_available - Not Available
.not_available_orderable - Not Available Orderable
.not_available_orderable_number - Not Available Orderable Number

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: 8px;
  height: 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 1;
  translate: 0 -50%;
  background-color: var(--main-color-success);
}
.inventory.low_availability:before {
  background-color: var(--main-color-warning);
}
.inventory.not_available {
  padding-left: 20px;
}
.inventory.not_available:before {
  content: var(--base-icon-info);
  background-color: transparent;
  font-family: "icons", Helvetica, Arial, sans-serif;
  width: 16px;
  height: 16px;
}
.inventory p {
  margin: 0;
}

.inventoryShippingInfo {
  border-left: 1px solid var(--main-color-black);
  padding-left: 5px;
  margin-left: 5px;
  display: none;
}

.inventoryWrapper {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  font-size: var(--main-font-size-small);
  line-height: 1;
}

/*
Quantity Spinner

Markup:
<div class="quantity">
    <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
    <div class="quantity__spinner">
        <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
            <i class="icon icon-spinner-up"></i>
        </div>
        <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
            <i class="icon icon-spinner-down"></i>
        </div>
    </div>
</div><br/>
<strong>Small</strong><br/>
<div class="quantity quantity--small">
    <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
    <div class="quantity__spinner">
        <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
            <i class="icon icon-spinner-up"></i>
        </div>
        <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
            <i class="icon icon-spinner-down"></i>
        </div>
    </div>
</div>

:hover - Hover
:focus - Focus
:active - Active
disabled - Disabled

Styleguide Shop.Quantity Spinner
*/
.quantity {
  max-width: 90px;
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 40px;
}
.quantity input {
  flex-grow: 1;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
  border: 0;
}
.quantity input:disabled {
  background-color: var(--main-color-white);
}
.quantity__spinner {
  width: 25px;
  position: relative;
  border-left: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.quantity__spinnerItem {
  position: absolute;
  right: 0;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  background: var(--main-color-white);
  border-radius: 8px;
}
.quantity__spinnerItem:hover, .quantity__spinnerItem:focus, .quantity__spinnerItem:active {
  color: var(--main-color-secondary);
}
.quantity__spinnerItem .icon:before {
  line-height: 1;
}
.quantity__spinnerItem--up {
  top: 0;
  border-bottom: 1px solid var(--main-color-white);
}
.quantity__spinnerItem--down {
  bottom: 0;
}
.quantity--small {
  position: relative;
  padding-left: 30px;
  width: 130px;
  max-width: 100%;
  border: 1px solid var(--main-color-gray-base);
  border-right: 0;
  border-radius: 8px 0 0 8px;
}
.quantity--small input {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0;
}
.quantity--small .quantity__spinner {
  position: static;
  border: 0;
  border-radius: 0;
}
.quantity--small .quantity__spinnerItem {
  width: 30px;
  height: 100%;
}
.quantity--small .quantity__spinnerItem--up {
  border-bottom: 0;
  border-radius: 0;
  right: 16px;
}
.quantity--small .quantity__spinnerItem--down {
  right: auto;
  left: 12px;
  top: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 767px) {
  .quantity--small {
    width: 100px;
  }
  .quantity--small .quantity__spinnerItem {
    width: 30px;
    height: 100%;
  }
  .quantity--small .quantity__spinnerItem--up {
    right: 6px;
  }
  .quantity--small .quantity__spinnerItem--down {
    left: 6px;
  }
}
.quantity--inactive .quantity__spinnerItem {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.3;
  background-color: var(--main-color-white);
}

/*
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">
                      <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">
                      <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">
                      <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
*/
.categoryItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--main-color-black);
  position: relative;
  text-decoration: none;
  align-items: center;
}
.categoryItem__image {
  background: var(--main-color-white);
  display: flex;
  align-items: center;
  height: 350px;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 1023px) {
  .categoryItem__image {
    height: 220px;
  }
}
.categoryItem__image img {
  transition: 0.2s ease-in-out;
  aspect-ratio: 1;
  height: 350px !important;
  object-fit: cover;
  width: 100% !important;
}
@media (max-width: 1023px) {
  .categoryItem__image img {
    height: 220px !important;
  }
}
.categoryItem__content {
  padding: 15px;
}
.categoryItem__headline {
  line-height: 1.1;
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 2rem;
}
@media (min-width: 768px) {
  .categoryItem__headline {
    font-size: 2.4rem;
  }
}
@media (min-width: 1024px) {
  .categoryItem__headline {
    font-size: 3.5rem;
  }
}
@media (min-width: 1250px) {
  .categoryItem__headline {
    font-size: 4rem;
  }
}
.categoryItem__headline .icon {
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
  font-size: 12px;
}
@media (min-width: 768px) {
  .categoryItem__headline .icon {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .categoryItem__headline .icon {
    font-size: 20px;
  }
}
@media (min-width: 1250px) {
  .categoryItem__headline .icon {
    font-size: 24px;
  }
}
@media (min-width: 1250px) {
  .categoryItem__headline .icon {
    margin-top: 6px;
  }
}
.categoryItem__description {
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.categoryItem:hover, .categoryItem:focus, .categoryItem:active {
  text-decoration: none;
  color: var(--main-color-black);
}
.categoryItem:hover .icon, .categoryItem:focus .icon, .categoryItem:active .icon {
  transform: translateX(15px);
  color: var(--main-color-primary);
}

.categoryList.categoryList--marken .categoryItem:after,
.categoryList.categoryList--marken .categoryItem__content {
  display: none;
}
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .gridGap--large {
  margin-left: -10px;
  margin-right: -10px;
}
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:after {
  display: none;
}
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__headline {
  font-size: 2.5rem;
}
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__content {
  border: 1px solid var(--main-color-secondary);
  border-radius: 8px;
  padding: 5px 15px;
}
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:hover .categoryItem__content, .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:focus .categoryItem__content, .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:active .categoryItem__content {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
}
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) > div > .col-6 {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}
@media (max-width: 767px) {
  .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .gridGap--large {
    margin-left: -5px;
    margin-right: -5px;
  }
  .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__headline {
    font-size: 1.6rem;
  }
  .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__content {
    padding: 5px;
  }
  .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) > div > .col-6 {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }
}

/*
Categorybox

Markup:
<div class="categoryList">
    <div class="row gridGap--small">
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
              <a href="#" class="categoryBox">
                  <div class="categoryItem__headline">Categoryname</div>
              </a>
          </div>
    </div>
</div>

Styleguide Shop.Categorybox
*/
.categoryBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--main-color-black);
  text-align: center;
  color: var(--main-color-white);
  text-decoration: none;
  padding: 30px 10px;
}
@media (min-width: 768px) {
  .categoryBox {
    padding: 60px 30px;
  }
}
.categoryBox:hover, .categoryBox:focus, .categoryBox:active {
  background: var(--main-color-primary);
  color: var(--main-color-black);
  text-decoration: none;
}
.categoryBox__headline {
  line-height: 1.1;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .categoryBox__headline {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  .categoryBox__headline {
    font-size: 2.6rem;
  }
}
@media (min-width: 1250px) {
  .categoryBox__headline {
    font-size: 3rem;
  }
}

.categoryPicture {
  margin-bottom: 30px;
}

.categoryMain {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.categoryNav {
  display: none;
}
@media (min-width: 1024px) {
  .categoryNav {
    display: block;
    width: 20%;
    position: sticky;
    top: 122px;
  }
}
@media (min-width: 1250px) {
  .categoryNav {
    width: 16.6666666667%;
    top: 142px;
  }
}

.categoryContent {
  flex: 1;
}
.categoryContent .itemListView:not(:has(.categoryList)) .filterSortLine {
  margin-bottom: 80px;
}
@media (max-width: 1539px) {
  .categoryContent .itemListView:not(:has(.categoryList)) .filterSortLine {
    margin-bottom: 10px;
  }
}

.categoryInfo__description {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}
.categoryInfo__description .shopSiteHeadline, .categoryInfo__description h1, .categoryInfo__description .spotPriceItem--headline {
  margin-bottom: 0;
  line-height: 1;
}
@media (max-width: 767px) {
  .categoryInfo__description {
    gap: 20px;
    margin-bottom: 20px;
  }
}

.categoryContent--bottom:has(.contentText) .textImgSection {
  margin-top: 60px;
}
.categoryContent--bottom:has(.contentText) .textImgSection .contentText {
  padding: 20px;
  justify-content: center;
}
@media (min-width: 768px) {
  .categoryContent--bottom:has(.contentText) .textImgSection .contentText {
    padding: 50px;
  }
}
@media (min-width: 1250px) {
  .categoryContent--bottom:has(.contentText) .textImgSection .contentText {
    padding: 100px 150px;
  }
}
.categoryContent--bottom .categoryPicture {
  margin-bottom: 0;
}

/*
Categorylist Itempreview

Markup:
<div class="categoryItempreviewList">
    <div class="row row--flexsub gridGap--small">
        <div class="col-xs-12 col-sm-4 col-md-3 marginBottom">
            <a href="#" class="categoryItempreview">
                <div class="categoryItempreview__headline">Name</div>
                <div class="categoryItempreview__items">
                    <div class="categoryItempreview__item">
                        <span class="categoryItempreview__itemImage image">
                            <img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
                        </span>
                    </div>
                    <div class="categoryItempreview__item">
                        <span class="categoryItempreview__itemImage image">
                            <img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
                        </span>
                    </div>
                    <div class="categoryItempreview__item">
                        <span class="categoryItempreview__itemImage image">
                            <img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
                        </span>
                    </div>
                    <div class="categoryItempreview__count">
                        +99
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

Styleguide Shop.Categorylist Itempreview
*/
.categoryItempreview {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  text-decoration: none;
  color: var(--main-color-black);
  transition: 0.2s ease-in-out;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .categoryItempreview {
    padding: 20px;
  }
}
.categoryItempreview:hover, .categoryItempreview:focus, .categoryItempreview:active {
  text-decoration: none;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  color: var(--main-color-black);
}
.categoryItempreview:hover .categoryItempreview__headline,
.categoryItempreview:hover .categoryItempreview__count, .categoryItempreview:focus .categoryItempreview__headline,
.categoryItempreview:focus .categoryItempreview__count, .categoryItempreview:active .categoryItempreview__headline,
.categoryItempreview:active .categoryItempreview__count {
  color: var(--main-color-primary);
}
.categoryItempreview__headline {
  text-decoration: none;
  font-weight: var(--main-font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: 0.2s ease-in-out;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  .categoryItempreview__headline {
    margin-bottom: 20px;
    font-size: var(--main-font-size-base);
  }
}
.categoryItempreview__count {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: var(--main-font-weight-bold);
  line-height: 1;
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .categoryItempreview__count {
    font-size: 2.4rem;
  }
}
.categoryItempreview__itemImage {
  overflow: hidden;
}
.categoryItempreview__item img {
  scale: 1;
  transition: 0.2s ease-in-out;
  aspect-ratio: 1/1;
}
.categoryItempreview__item:first-child {
  grid-column: 1/span 3;
}
.categoryItempreview__items {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr auto;
  flex-grow: 1;
}
@media (min-width: 768px) {
  .categoryItempreview__items {
    grid-gap: 10px;
  }
}

.itembox {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--main-color-white);
  position: relative;
  transition: 0.1s ease-in-out;
}
.itembox__badges {
  position: absolute;
  left: 25px;
  top: 25px;
  z-index: 1;
}
@media (max-width: 767px) {
  .itembox__badges {
    left: 10px;
    top: 10px;
  }
}
.itembox__actions {
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 5px;
}
@media (min-width: 768px) {
  .itembox__actions {
    right: 20px;
    top: 20px;
  }
}
.itembox__name {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  flex-direction: column;
  font-size: 14px;
  font-weight: var(--main-font-weight-bold);
}
@media (min-width: 768px) {
  .itembox__name {
    font-size: 16px;
  }
}
.itembox__rating {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itembox__rating .rating__label {
  margin-left: 5px;
}
.itembox__prices {
  margin-top: 16px;
}
@media (max-width: 767px) {
  .itembox__prices {
    font-size: 14px;
    margin-top: 8px;
  }
}
.itembox__prices .prices {
  justify-content: center;
}
.itembox__image {
  background-color: var(--main-color-gray-background);
}
.itembox__image img {
  aspect-ratio: 63/59;
  width: 100%;
  display: block;
}
.itembox__imageSrc {
  opacity: 1;
  transition: 0.2s opacity ease-in-out;
}
.itembox__imageSrc--hover {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100% !important;
  object-fit: contain;
  transition: 0.2s opacity ease-in-out;
}
.itembox__head {
  position: relative;
}
.itembox__content {
  flex-grow: 1;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .itembox__content {
    padding: 10px 0;
  }
}
.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 {
  position: relative;
  width: 100%;
  background: var(--main-color-white);
  padding: 0 20px 20px 20px;
  z-index: 2;
}
@media (max-width: 767px) {
  .itembox__addon {
    padding: 0;
  }
}
.itembox .inventoryWrapper {
  font-size: 1.1rem;
  justify-content: center;
}
.itembox .orderButtonWrapper + .inventoryWrapper {
  margin-top: 10px;
}
.itembox .priceNotice {
  text-align: center;
}
.itembox .orderButtonWrapper {
  gap: 0;
  align-items: center;
  justify-content: center;
}
.itembox .orderButtonWrapper .orderButton {
  flex-grow: 0;
  padding: 8px 12px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0;
  border-left: 1px solid var(--main-color-gray-base);
  border-color: var(--main-color-gray-base);
}
.itembox .orderButtonWrapper .orderButton .icon {
  font-size: 20px;
  right: unset;
}
.itembox .orderButtonWrapper .orderButton > span {
  display: none;
}
.itembox .orderButtonWrapper .orderButton:hover, .itembox .orderButtonWrapper .orderButton:focus, .itembox .orderButtonWrapper .orderButton:active {
  background: var(--main-color-secondary-medium);
  border-color: var(--main-color-secondary-medium);
}
.itembox .orderButtonWrapper .orderButton:hover .icon, .itembox .orderButtonWrapper .orderButton:focus .icon, .itembox .orderButtonWrapper .orderButton:active .icon {
  color: var(--main-color-white);
}
.itembox .orderButtonWrapper .orderButton.disabled {
  background: var(--main-color-white);
}
@media (max-width: 767px) {
  .itembox .orderButtonWrapper .orderButton {
    min-width: 40px;
  }
}
.itembox .orderButtonWrapper.inactive {
  cursor: not-allowed;
  opacity: 0.5;
}
.itembox.hoverintent.has-hover-image .itembox__imageSrc {
  opacity: 0;
}
.itembox.hoverintent.has-hover-image .itembox__imageSrc--hover {
  opacity: 1;
}
.itembox .priceNotice, .itembox .inventoryWrapper {
  display: none;
}
.itembox__detailButton {
  display: none;
  margin: 10px auto 0 auto;
}
.itembox__detailButton > .button--action {
  font-weight: 500;
  letter-spacing: 0.5px;
}
.itembox__detailButton > .button--action .icon {
  font-size: 10px;
  font-weight: 600;
}

.itemboxList {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media (min-width: 768px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
@media (min-width: 1024px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }
}
@media (min-width: 1250px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  }
}
@media (min-width: 1540px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}
@media (max-width: 481px) {
  .itemboxList {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    grid-row-gap: 20px;
  }
}

.itemboxList.swiper {
  max-width: 1840px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0px;
  padding-bottom: 0px;
  display: block;
  margin-top: -10px;
  margin-bottom: -10px;
}
.itemboxList.swiper > .swiper-wrapper {
  align-items: stretch;
  margin-left: -5px;
}
.itemboxList.swiper > .swiper-wrapper > * {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  height: auto;
  padding: 5px;
}
.itemboxList.swiper .swiper-slide:not(.swiper-slide-visible) {
  opacity: 0;
}
.itemboxList.swiper .itembox {
  height: 100%;
}
.itemboxList.swiper.itemboxList--5 {
  padding-top: 70px;
  margin-top: -80px;
}
.itemboxList.swiper.itemboxList--5 .swiper-button-prev {
  top: 20px;
  right: 50px;
  left: unset;
}
.itemboxList.swiper.itemboxList--5 .swiper-button-next {
  top: 20px;
  right: 0;
}
@media (max-width: 1023px) {
  .itemboxList.swiper.itemboxList--5 {
    margin-right: -20px;
    padding-top: 0;
    margin-top: -20px;
  }
  .itemboxList.swiper.itemboxList--5 .swiper-button-prev, .itemboxList.swiper.itemboxList--5 .swiper-button-next {
    display: none;
  }
}
.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: 33.3333333333%;
  }
}
@media (min-width: 1540px) {
  .itemboxList.swiper.itemboxList--5:not(.swiper-initialized) > .swiper-wrapper > * {
    width: 25%;
  }
}
.itemboxList.swiper.itemboxList--cta:not(.swiper-initialized) > .swiper-wrapper, .itemboxList.swiper.itemboxList--highlight:not(.swiper-initialized) > .swiper-wrapper {
  display: flex;
}
.itemboxList.swiper.itemboxList--cta .itembox__prices, .itemboxList.swiper.itemboxList--highlight .itembox__prices {
  margin-bottom: 16px;
}
.itemboxList.swiper.itemboxList--cta .itembox__button, .itemboxList.swiper.itemboxList--highlight .itembox__button {
  max-width: max-content;
}
.itemboxList.swiper.itemboxList--cta .itembox__content, .itemboxList.swiper.itemboxList--highlight .itembox__content {
  align-items: center;
}
@media (max-width: 1023px) {
  .itemboxList.swiper.itemboxList--cta, .itemboxList.swiper.itemboxList--highlight {
    padding-bottom: 30px;
  }
  .itemboxList.swiper.itemboxList--cta .swiper-scrollbar, .itemboxList.swiper.itemboxList--highlight .swiper-scrollbar {
    display: block;
    margin-top: 24px;
  }
}
.itemboxList.swiper.itemboxList--preview {
  padding-top: 70px;
  margin-top: -80px;
}
.itemboxList.swiper.itemboxList--preview .swiper-button-prev {
  top: 20px;
  right: 90px;
  left: unset;
}
.itemboxList.swiper.itemboxList--preview .swiper-button-next {
  top: 20px;
  right: 40px;
}
@media (max-width: 1023px) {
  .itemboxList.swiper.itemboxList--preview {
    margin-right: -20px;
    padding-top: 0;
    margin-top: 0;
  }
  .itemboxList.swiper.itemboxList--preview .swiper-button-prev, .itemboxList.swiper.itemboxList--preview .swiper-button-next {
    display: none;
  }
}
.itemboxList.swiper.itemboxList--highlight .swiper-button-prev {
  right: 50px;
}
.itemboxList.swiper.itemboxList--highlight .swiper-button-next {
  right: 0;
}
.itemboxList.swiper.itemboxList--highlight .itembox__content {
  position: relative;
  padding-top: 90px;
}
.itemboxList.swiper.itemboxList--highlight .itembox__image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 400px;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.itemboxList.swiper.itemboxList--highlight .itembox__image .itembox__imageSrc {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 12px;
  margin-bottom: -70px;
  z-index: 1;
}
.itemboxList.swiper.itemboxList--highlight .itembox__name {
  width: calc(100% - 70px);
}
.itemboxList.swiper.itemboxList--highlight .itembox__actions {
  top: 84px;
  right: 5px;
}
@media (max-width: 1249px) {
  .itemboxList.swiper.itemboxList--highlight .itembox__content {
    padding-top: 80px;
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__image {
    height: 300px;
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__image .itembox__imageSrc {
    width: 220px;
    margin-bottom: -60px;
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__name {
    width: calc(100% - 60px);
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__actions {
    top: 72px;
  }
}
@media (max-width: 767px) {
  .itemboxList.swiper.itemboxList--highlight .itembox__content {
    padding-top: 70px;
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__image {
    height: 280px;
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__image .itembox__imageSrc {
    width: 190px;
    margin-bottom: -50px;
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__name {
    width: calc(100% - 60px);
  }
  .itemboxList.swiper.itemboxList--highlight .itembox__actions {
    top: 62px;
  }
}
.itemboxList.swiper.itemboxList--carousel {
  max-width: 700px;
  padding-top: 0;
}
.itemboxList.swiper.itemboxList--carousel:not(.swiper-initialized) > .swiper-wrapper {
  display: flex;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide {
  opacity: 0 !important;
  width: 340px;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox {
  background: transparent;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__image {
  background: transparent;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__image img {
  aspect-ratio: 1;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__content {
  align-items: center;
  position: relative;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__prices {
  margin-bottom: 16px;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__actions {
  top: 14px;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__name {
  width: calc(100% - 60px);
  margin: 0 auto;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__button {
  max-width: max-content;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev, .itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next {
  opacity: 1 !important;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev .itembox__content, .itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next .itembox__content {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  display: none;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev .itembox {
  transform: translateX(50px);
  margin-top: -10px;
}
@media screen and (max-width: 481px) {
  .itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev .itembox {
    transform: translateX(35px);
  }
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next .itembox {
  transform: translateX(-50px);
  margin-top: -10px;
}
@media screen and (max-width: 481px) {
  .itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next .itembox {
    transform: translateX(-35px);
  }
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-active .itembox {
  opacity: 1;
}
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-active .itembox .itembox__content {
  background: var(--main-color-white);
  display: flex;
}
@media (max-width: 1249px) {
  .itemboxList.swiper.itemboxList--carousel {
    margin-left: 40%;
  }
}
@media (max-width: 1023px) {
  .itemboxList.swiper.itemboxList--carousel {
    max-width: 500px;
  }
  .itemboxList.swiper.itemboxList--carousel .swiper-slide {
    width: 320px;
  }
}
@media (max-width: 767px) {
  .itemboxList.swiper.itemboxList--carousel {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .itemboxList.swiper.itemboxList--carousel .swiper-slide {
    width: 250px;
  }
}

.swiper-scrollbar {
  height: 2px !important;
}

.row--flexsub .itemboxList .swiper-wrapper {
  height: 100%;
}

@media (max-width: 1023px) {
  .itemboxListWithImage picture {
    margin-bottom: 40px;
    max-height: 500px;
    padding-right: 20px;
  }
  .itemboxListWithImage picture img {
    object-fit: cover;
    object-position: top;
  }
}
@media (max-width: 767px) {
  .itemboxListWithImage picture {
    max-height: 350px;
  }
}
@media (max-width: 481px) {
  .itemboxListWithImage picture {
    max-height: 250px;
  }
}

.itemBasketBox {
  position: relative;
  display: grid;
  padding-top: 20px;
  padding-bottom: 20px;
  grid-gap: 10px;
  grid-template-columns: auto 1fr auto;
  color: var(--main-color-black);
  text-decoration: none;
  grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxQuantity itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxSumPrice itemBasketBoxAddon";
}
.itemBasketBox:not(:last-child) {
  border-bottom: 1px solid var(--main-color-middle-gray);
}
@media (min-width: 768px) {
  .itemBasketBox {
    grid-gap: 10px;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
}
@media (min-width: 1024px) and (max-width: 1249px) {
  .itemBasketBox {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInfo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
}
@media (min-width: 1250px) {
  .itemBasketBox {
    grid-gap: 20px;
    align-items: center;
    grid-template-columns: auto 1fr auto auto auto auto;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon";
  }
}
.itemBasketBox a {
  color: var(--main-color-black);
  text-decoration: none;
}
.itemBasketBox a:hover, .itemBasketBox a:focus, .itemBasketBox a:active {
  text-decoration: none;
  color: var(--main-color-primary);
}
.itemBasketBox__img {
  flex-shrink: 0;
  grid-area: itemBasketBoxImg;
  padding-right: 10px;
  width: 70px;
}
@media (min-width: 768px) {
  .itemBasketBox__img {
    width: 90px;
  }
}
.itemBasketBox__img img {
  background: var(--main-color-gray-background);
}
.itemBasketBox__badges {
  margin-bottom: 10px;
}
.itemBasketBox__description {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
  display: block;
}
@media (min-width: 768px) {
  .itemBasketBox__description {
    font-size: var(--main-font-size-big);
  }
}
.itemBasketBox__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.itemBasketBox__info {
  grid-area: itemBasketBoxInfo;
}
@media (min-width: 768px) {
  .itemBasketBox__info {
    padding-top: 5px;
  }
}
.itemBasketBox__price {
  display: flex;
  align-items: baseline;
  grid-area: itemBasketBoxPrice;
  text-align: right;
}
@media (min-width: 768px) {
  .itemBasketBox__price {
    padding-top: 5px;
  }
}
@media (min-width: 1250px) {
  .itemBasketBox__price {
    width: 120px;
  }
}
@media (min-width: 1540px) {
  .itemBasketBox__price {
    justify-content: flex-end;
  }
}
@media (min-width: 1250px) {
  .itemBasketBox__price .prices {
    justify-content: flex-end;
    flex-direction: column;
  }
}
.itemBasketBox__price .basePrice {
  font-weight: var(--main-font-weight);
}
.itemBasketBox__actions {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  grid-area: itemBasketBoxActions;
}
.itemBasketBox__quantityWrapper {
  display: flex;
  align-items: center;
}
.itemBasketBox__quantity {
  grid-area: itemBasketBoxQuantity;
  width: 140px;
}
.itemBasketBox__quantity .quantity--small {
  border-radius: 8px;
  border-right: 1px solid var(--main-color-gray-base);
}
.itemBasketBox__sumPrice {
  font-weight: var(--main-font-weight-bold);
  grid-area: itemBasketBoxSumPrice;
  font-size: var(--main-font-size-big);
}
@media (min-width: 768px) {
  .itemBasketBox__sumPrice {
    padding-top: 5px;
    width: 120px;
    text-align: right;
  }
}
@media (min-width: 1024px) {
  .itemBasketBox__sumPrice {
    padding-top: 0;
    align-self: center;
  }
}
.itemBasketBox__addon {
  grid-area: itemBasketBoxAddon;
  width: 40px;
  text-align: center;
}
.itemBasketBox__addon .actionIcon {
  background: transparent;
  font-size: 14px;
}

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);
}

/*
Orderbutton

Markup:
<div class="orderButtonWrapper {{modifier_class}}">
    <div class="quantity">
        <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
        <div class="quantity__spinner">
            <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
                <i class="icon icon-spinner-up"></i>
            </div>
            <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
                <i class="icon icon-spinner-down"></i>
            </div>
        </div>
    </div>
    <button type="submit" class="button button--primary orderButton">
          <span>Warenkorb</span><i class="icon icon-basket"></i>
    </button>
</div>
<div class="orderButtonWrapper {{modifier_class}}">
    <div class="quantity">
        <input type="number" name="name" value="0" min="1" max="99" step="1" {{modifier_class}}>
        <div class="quantity__spinner">
            <div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
                <i class="icon icon-spinner-up"></i>
            </div>
            <div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
                <i class="icon icon-spinner-down"></i>
            </div>
        </div>
    </div>
    <button type="submit" class="button button--primary orderButton orderButton--customizable">
          <span>Individualisieren</span><i class="icon icon-basket"></i>
    </button>
</div>

.orderButtonWrapper--inactive - Inactive

Styleguide Shop.Orderbutton
*/
.orderButtonWrapper {
  display: flex;
  width: 100%;
  gap: 10px;
}
@media (min-width: 768px) {
  .orderButtonWrapper {
    gap: 20px;
  }
}
.orderButtonWrapper .quantity {
  flex-shrink: 0;
}
.orderButtonWrapper .orderButton {
  min-width: 0;
  flex-grow: 1;
  position: relative;
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orderButtonWrapper .orderButton .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transform: translateY(-50%);
  background: transparent;
  margin: 0;
}
@media (min-width: 768px) {
  .orderButtonWrapper .orderButton .icon {
    font-size: 26px;
  }
}
.orderButtonWrapper .orderButton > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orderButtonWrapper .orderButton:hover, .orderButtonWrapper .orderButton:focus {
  background: var(--main-color-primary-dark);
}
.orderButtonWrapper .orderButton:active {
  background: var(--main-color-primary-darken);
}
.orderButtonWrapper .orderButton.disabled {
  pointer-events: none;
}

.orderButton--customizable .icon:before {
  content: var(--base-icon-edit);
}

.itemcardBuybox .orderButtonWrapper .orderButton {
  justify-content: center;
  font-weight: var(--main-font-weight-bold);
  align-items: center;
  padding-right: 16px;
}
.itemcardBuybox .orderButtonWrapper .orderButton .icon {
  position: relative;
  font-size: 22px;
  right: unset;
  height: unset;
  width: unset;
  top: unset;
  transform: unset;
}
.itemcardBuybox .orderButtonWrapper .orderButton:hover, .itemcardBuybox .orderButtonWrapper .orderButton:focus, .itemcardBuybox .orderButtonWrapper .orderButton:active {
  background: var(--main-color-secondary-dark);
}
.itemcardBuybox .orderButtonWrapper .alert {
  transition: all 0.3s ease-in-out;
  position: absolute;
  bottom: 30px;
}

/*
Amount Lines

Markup:
<div class="amountLines">
    <div class="amountLine">
        <div class="amountLine__label">
            Zwischensumme:
        </div>
        <div class="amountLine__value">
            0,00&nbsp;€
        </div>
    </div>
    <div class="amountLine">
        <div class="amountLine__label">
            Versand:
        </div>
        <div class="amountLine__value">
            0,00&nbsp;€
        </div>
    </div>
    <div class="amountLine amountLine--big">
        <div class="amountLine__label">
            Gutschein
            <span class="tag">Code<i class="icon icon-close"></i></span>
        </div>
        <div class="amountLine__value">
            2,00&nbsp;€
        </div>
    </div>
</div>

Styleguide Shop.Amount Lines
*/
.amountLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  padding-bottom: 5px;
}
.amountLine__label {
  margin-right: 5px;
}
.amountLine__label .tag {
  margin-left: 10px;
}
.amountLine--big {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}

.order_sum,
.vat_table {
  border: 0;
}
.order_sum td,
.vat_table td {
  padding: 4px 0;
  border: 0;
}
.order_sum tr:first-child td,
.order_sum tr:first-child th,
.vat_table tr:first-child td,
.vat_table tr:first-child th {
  border-top: 0;
}
.order_sum .order_price_total_label,
.order_sum .order_price_total,
.vat_table .order_price_total_label,
.vat_table .order_price_total {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}

.orderboxSummary table {
  background-color: var(--main-color-gray-background);
}
.orderboxSummary table td {
  padding-left: 10px;
  padding-right: 10px;
}

/*
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;
    background: var(--main-color-gray-background);
  }
}
@media (min-width: 1024px) {
  .orderboxSummary {
    padding: 30px;
  }
}
.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: 10px;
  border-top: 1px solid var(--main-color-gray-base);
}
@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);
}
.orderboxSummary .infieldInputGroup #input_coupon_code {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.orderboxSummary .infieldInputGroup .inputGroup__addon {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.orderboxSummary .infieldInputGroup .inputGroup__addon:hover {
  color: var(--main-color-white);
}
.orderboxSummary .amountLine.coupon .amountLine__label {
  display: flex;
  align-items: center;
}
.orderboxSummary .amountLine.coupon .amountLine__value {
  text-align: right;
}

@media (min-width: 1250px) {
  .orderBoxContainer {
    margin-left: 50px;
  }
}

.backToShop .linkWithIcon .icon {
  font-size: 14px;
}

/*
Sorting

Markup:
<div class="customSelect js-customSelect customSelect--small sortingSelect ">
                            <select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by">
                                <option value="item_no">Artikelnummer</option>
                                <option value="description">Artikelbezeichnung</option>
                                <option value="creation_date">Neueste</option>
                                <option value="sorting">Empfehlung</option>
                                <option value="base_price_asc">Preis aufsteigend</option>
                                <option value="base_price_desc" selected="">Preis absteigend</option>
                            </select>
                            <div class="customSelect__selected">Preis absteigend</div>
                            <div class="customSelect__dropdown">
                                <div class="customSelect__dropdownClose">
                                    <i class="icon icon-close"></i>
                                </div>
                                <div class="customSelect__dropdownHeader d-block d-sm-none">
                                    <div class="customSelect__dropdownTitle">
                                        Sortierung
                                    </div>
                                </div>
                                <div class="customSelect__dropdownBody">
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
                                        <div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
                                        <div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="creation_date">
                                        <div class="customSelect__dropdownItemHeadline">Neueste</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
                                        <div class="customSelect__dropdownItemHeadline">Empfehlung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="base_price_asc">
                                        <div class="customSelect__dropdownItemHeadline">Preis aufsteigend</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="base_price_desc">
                                        <div class="customSelect__dropdownItemHeadline">Preis absteigend</div>
                                    </div>
                                </div>
                            </div>
                        </div>

Styleguide Shop.Sorting
*/
.sortingSelect.customSelect .customSelect__selected {
  padding-right: 25px;
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-medium);
}
.sortingSelect.customSelect .customSelect__selected:after {
  content: var(--base-icon-angle-down-light);
  font-size: 12px;
}
.sortingSelect.customSelect.is-active .customSelect__selected:after {
  content: var(--base-icon-angle-down-light);
}

.sortSelectColumn > form {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.sortSelectColumn > form .sortingLabel {
  font-weight: var(--main-font-weight-medium);
  flex-shrink: 0;
}

/*
Filter

Markup:
<div class="filterBox">
    <div class="filterBox__mobileButton">Filter</div>
    <div class="filterBox__content">
        <div class="filterBox__contentHeader">
            <div class="filterBox__contentTitle">Filter</div>
            <div class="filterBox__close">
                <i class="icon icon-close"></i>
            </div>
        </div>
        <div class="filterBox__filter">
            <div class="row gridGap--small">
                <div class="col-12 col-lg-9 filtersColumn">
                    <div class="row gridGap--small">
                        <div class="col-12 col-sm-4 col-md-3 marginBottom">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="callaway">filter-Marke-8</option>
                                        <option value="titleist">filter-Marke-8</option>
                                        <option value="taylormade">filter-Marke-8</option>
                                    </select>
                                    <div class="customSelect__selected">Marke</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Marke
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?marke=callaway&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Callaway
                                                </div>
                                            </a>
                                            <a href="?marke=titleist&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Titleist
                                                </div>
                                            </a>
                                            <a href="?marke=taylormade&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    TaylorMade
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <form method="get" class="customSelect js-customSelect customSelect--multiple">
                                <input class="customSelect__hiddenFormField" name="farbe" value="">
                                <input class="customSelect__hiddenFormField" name="sort_by" value="base_price_desc">
                                <div class="customSelect__selected">
                                    Farbe <span class="customSelect__selectedCount"></span>
                                </div>
                                <div class="customSelect__dropdown js-searchWrapper">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader">
                                        <div class="customSelect__dropdownTitle">
                                            Farbe
                                        </div>
                                        <div class="inputGroup searchBar">
                                            <input class="js-searchInput" data-wrapper="js-searchWrapper" data-item="js-searchItem" type="text" placeholder="Filter suchen">
                                            <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/silber">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Silber</div>
                                        </div>
                                        <div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/rot">
                                            <div class="customSelect__dropdownItemHeadline">Schwarz/ Rot</div>
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownFooter">
                                        <button type="submit" class="button button--action button--sm">
                                            Anwenden
                                        </button>
                                        <br>
                                        <button class="linkWithIcon customSelectReset">
                                            <i class="icon icon-retoure"></i><span>Zurücksetzen</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div><div class="col-12 col-sm-4 col-md-3 marginBottom">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="regular">filter-Flex-4</option>
                                    <option value="stiff">filter-Flex-4</option>
                                </select>
                                <div class="customSelect__selected">Flex</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Flex
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?flex=regular&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Regular (R)
                                            </div>
                                        </a>
                                        <a href="?flex=stiff&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Stiff (S)
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                            <div class="inputGroup is-filled">
                                <div class="customSelect js-customSelect">
                                    <select class="customSelect__hiddenFormField">
                                        <option value="60.00">filter-Lie-Winkel-6</option>
                                        <option value="58.50">filter-Lie-Winkel-6</option>
                                    </select>
                                    <div class="customSelect__selected">Lie-Winkel</div>
                                    <div class="customSelect__dropdown">
                                        <div class="customSelect__dropdownClose">
                                            <i class="icon icon-close"></i>
                                        </div>
                                        <div class="customSelect__dropdownHeader d-block d-sm-none">
                                            <div class="customSelect__dropdownTitle">
                                                Lie-Winkel
                                            </div>
                                        </div>
                                        <div class="customSelect__dropdownBody">
                                            <a href="?lie=60.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    60
                                                </div>
                                            </a>
                                            <a href="?lie=58.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    58.50
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
                        <div class="inputGroup is-filled">
                            <div class="customSelect js-customSelect">
                                <select class="customSelect__hiddenFormField">
                                    <option value="10.00">filter-Loft-7</option>
                                    <option value="11.50">filter-Loft-7</option>
                                    <option value="10.50">filter-Loft-7</option>
                                    <option value="9.00">filter-Loft-7</option>
                                </select>
                                <div class="customSelect__selected">Loft</div>
                                <div class="customSelect__dropdown">
                                    <div class="customSelect__dropdownClose">
                                        <i class="icon icon-close"></i>
                                    </div>
                                    <div class="customSelect__dropdownHeader d-block d-sm-none">
                                        <div class="customSelect__dropdownTitle">
                                            Loft
                                        </div>
                                    </div>
                                    <div class="customSelect__dropdownBody">
                                        <a href="?loft=10.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10
                                            </div>
                                        </a>
                                        <a href="?loft=11.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                11.50
                                            </div>
                                        </a>
                                        <a href="?loft=10.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10.50
                                            </div>
                                        </a>
                                        <a href="?loft=9.00&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                9
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="filterBox__toggleFilterColumn marginBottom">
                            <span class="link filterBox__showHiddenFilters">+ Mehr Filter</span>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-4 col-lg-3 marginBottom sortSelectColumn">
                    <form method="get" class="inputGroup is-filled">
                        <div class="customSelect js-customSelect customSelect--small sortingSelect ">
                            <select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by">
                                <option value="item_no">Artikelnummer</option>
                                <option value="description">Artikelbezeichnung</option>
                                <option value="creation_date">Neueste</option>
                                <option value="sorting">Empfehlung</option>
                                <option value="base_price_asc">Preis aufsteigend</option>
                                <option value="base_price_desc" selected="">Preis absteigend</option>
                            </select>
                            <div class="customSelect__selected">Preis absteigend</div>
                            <div class="customSelect__dropdown">
                                <div class="customSelect__dropdownClose">
                                    <i class="icon icon-close"></i>
                                </div>
                                <div class="customSelect__dropdownHeader d-block d-sm-none">
                                    <div class="customSelect__dropdownTitle">
                                        Sortierung
                                    </div>
                                </div>
                                <div class="customSelect__dropdownBody">
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
                                        <div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
                                        <div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="creation_date">
                                        <div class="customSelect__dropdownItemHeadline">Neueste</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
                                        <div class="customSelect__dropdownItemHeadline">Empfehlung</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="base_price_asc">
                                        <div class="customSelect__dropdownItemHeadline">Preis aufsteigend</div>
                                    </div>
                                    <div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="base_price_desc">
                                        <div class="customSelect__dropdownItemHeadline">Preis absteigend</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide Shop.Filter
*/
.filterForm {
  width: 100%;
}

.filterReset {
  padding: 8px;
  line-height: 1;
  font-size: 14px;
  font-weight: var(--main-font-weight-bold);
  background: var(--main-color-secondary-light);
  border-color: var(--main-color-secondary-light);
  text-decoration: none;
  padding-right: 30px !important;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.filterReset .icon, .filterReset:before {
  position: absolute;
  font-size: 12px;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  transition: right 0.2s ease-in-out;
}
.filterReset:before {
  content: var(--base-icon-trash);
  font-family: "icons", Helvetica, Arial, sans-serif;
  right: -50%;
}
.filterReset:hover, .filterReset:focus, .filterReset:active {
  background: var(--main-color-secondary-medium);
  border-color: var(--main-color-secondary-medium);
  color: var(--main-color-white);
  text-decoration: none;
}
.filterReset:hover .icon, .filterReset:focus .icon, .filterReset:active .icon {
  right: -50%;
}
.filterReset:hover:before, .filterReset:focus:before, .filterReset:active:before {
  right: 8px;
}

.filterBox__mobileButton {
  margin-bottom: 0;
  display: flex;
  position: relative;
  padding: 5px 10px 5px 25px;
  line-height: 24px;
}
.filterBox__mobileButton:before {
  content: var(--base-icon-filter);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 2rem;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
@media (min-width: 768px) {
  .filterBox__mobileButton {
    display: none;
  }
}
.filterBox__filter .customSelect {
  width: 100%;
}
.filterBox__filter .customSelect__selected {
  border: 0;
  padding-left: 0;
}
.filterBox__filter .selectBody select, .filterBox__filter .customSelect__selected select {
  border: 0;
  padding-left: 0;
  padding-right: 35px;
}
@media (max-width: 1023px) {
  .filterBox__filter .selectBody select, .filterBox__filter .customSelect__selected select {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.filterBox__filter .selectBody:after, .filterBox__filter .customSelect__selected:after {
  font-size: 12px;
}
@media (max-width: 481px) {
  .filterBox__filter .selectBody:after, .filterBox__filter .customSelect__selected:after {
    right: 0;
  }
}
.filterBox__filter .specialcheckboxSwitch {
  padding-left: 0;
  padding-right: 55px;
  font-size: 1.6rem;
  font-weight: var(--main-font-weight-medium);
}
.filterBox__filter .specialcheckboxSwitch i {
  left: unset;
  right: 0;
}
.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: center;
  justify-content: flex-end;
  gap: 20px;
}
.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: 46px;
  }
}
.filterBox__filter > .row > div {
  width: auto;
}
@media (max-width: 1249px) {
  .filterBox__filter > .row {
    justify-content: flex-start;
    gap: 0;
  }
}
@media (max-width: 481px) {
  .filterBox__filter > .row > div {
    width: 100%;
  }
}
@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;
}
@media (min-width: 768px) {
  .sortSelectColumn {
    min-height: 46px;
    flex-wrap: nowrap;
  }
}
@media (max-width: 767px) {
  .sortSelectColumn .inputGroup,
  .sortSelectColumn .customSelect {
    width: 100%;
  }
  .sortSelectColumn .customSelect__selected {
    width: 100%;
    padding: 5px 35px 5px 10px;
    line-height: 24px;
    display: flex;
  }
  .sortSelectColumn .customSelect__selected:after {
    right: 0;
  }
}

.filterSortLine {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
}
.filterSortLine:has(.categoryInfo) {
  justify-content: space-between;
}
@media (min-width: 768px) {
  .filterSortLine {
    margin-bottom: 30px;
  }
}
@media (max-width: 1249px) {
  .filterSortLine {
    flex-direction: column;
    row-gap: 10px;
  }
}
.filterSortLine .categoryInfo__description {
  margin-bottom: 0;
}

.filterSortingWrapper {
  display: flex;
  align-items: baseline;
  gap: 40px;
  flex-grow: 1;
}
.filterSortingWrapper .filterBox {
  flex-grow: 1;
}
@media (max-width: 1249px) {
  .filterSortingWrapper {
    justify-content: space-between;
    width: 100%;
  }
}

.rangeSlider {
  position: relative;
  padding-bottom: 45px;
}
.rangeSlider__track {
  width: 100%;
  height: 3px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  margin-top: 2px;
}
.rangeSlider__inputs {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 200px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.rangeSlider__inputs span {
  flex-grow: 1;
}
.rangeSlider__inputs input {
  text-align: center;
}
.rangeSlider__ranges {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
}
.rangeSlider input[type=range] {
  appearance: none;
  width: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  background-color: transparent;
  pointer-events: none;
  line-height: 0;
  padding: 0;
  border: 0;
  z-index: 1;
}
.rangeSlider input[type=range]::-webkit-slider-runnable-track, .rangeSlider input[type=range]::-moz-range-track, .rangeSlider input[type=range]::-ms-track {
  height: 5px;
}
.rangeSlider input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}
.rangeSlider input[type=range]::-moz-range-track {
  -moz-appearance: none;
}
.rangeSlider input[type=range]::-ms-track {
  appearance: none;
}
.rangeSlider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background-color: var(--main-color-black);
  cursor: pointer;
  margin-top: -6px;
  pointer-events: auto;
  border-radius: 50%;
}
.rangeSlider input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.rangeSlider input[type=range]::-ms-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--main-color-black);
  pointer-events: auto;
}
.rangeSlider input[type=range]:active::-webkit-slider-thumb {
  background-color: var(--main-color-primary);
}

.customSelect__dropdownBody .rangeSlider {
  padding-left: 10px;
  padding-right: 10px;
}
.customSelect__dropdownBody .rangeSlider__ranges {
  left: 10px;
  max-width: calc(100% - 20px);
  max-width: -moz-calc(100% - 20px);
  max-width: -webkit-calc(100% - 20px);
  max-width: -o-calc(100% - 20px);
}

/*
Variantselection

Markup:
<div class="variantSelection">
  <a class="variantSelection__item" data-tooltip="Label">
    <img src="kss-assets/sample.png" alt="Text" />
  </a>
</div>

Styleguide Shop.Variantselection
*/
.variantSelection {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 5px;
}
.variantSelection__item {
  border: 2px solid var(--main-color-middle-gray);
  border-radius: 8px;
  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: 70px;
}
.variantSelection .swiper {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.variantSelection .swiper:not(.swiper-initialized) .swiper-wrapper {
  grid-gap: 5px;
}

/*
Shop Attributes Icons

Markup:
<div class="attributesIcons">
    <div class="attributesIcons__img image">
        <img src="kss-assets/sample.png" alt="" width="70px" height="70px">
    </div>
    <div class="attributesIcons__img image">
        <img src="kss-assets/sample.png" alt="" width="70px" height="70px">
    </div>
</div>

Styleguide Shop.Attributes Icons
*/
.attributesIcons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 8px;
}
.attributesIcons__img {
  max-width: 40px;
}
@media (min-width: 768px) {
  .attributesIcons__img {
    max-width: 70px;
  }
}

.itemcardBadges {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.itemcardImagesAttributes {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  max-width: 50%;
  justify-content: flex-end;
}

.itemcardImagesMain {
  overflow: hidden;
  position: relative;
}
.itemcardImagesMain .itemcardImages__img {
  height: 100% !important;
  aspect-ratio: 4/3;
}
.itemcardImagesMain .itemcardImages__img > video,
.itemcardImagesMain .itemcardImages__img > img {
  aspect-ratio: 4/3;
  width: auto;
}
.itemcardImagesMain .itemcardImages__img .viewer360Wrapper .viewer360Images img {
  aspect-ratio: 4/3;
}
.itemcardImagesMain .itemcardImages__item {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  background: var(--main-color-white);
}

.itemcardImagesThumbs img {
  pointer-events: none;
  user-select: None;
}
.itemcardImagesThumbs .itemcardImages__img {
  pointer-events: none;
}
.itemcardImagesThumbs .itemcardImages__img > video,
.itemcardImagesThumbs .itemcardImages__img > img {
  width: auto;
  object-fit: cover;
  height: 100% !important;
}
.itemcardImagesThumbs .itemcardImages__item {
  width: 70px;
  display: flex;
  cursor: pointer;
  padding: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .itemcardImagesThumbs .itemcardImages__item {
    width: 78px;
  }
}
.itemcardImagesThumbs .swiper-container {
  flex-grow: 1;
}
@media (max-width: 767px) {
  .itemcardImagesThumbs .swiper-wrapper {
    justify-content: center;
  }
}
.itemcardImagesThumbs .swiper-slide {
  cursor: pointer;
  transition: 0.2s ease-in-out;
  display: flex;
  height: auto;
  width: 70px;
  background: var(--main-color-white);
}
@media (min-width: 768px) {
  .itemcardImagesThumbs .swiper-slide {
    width: 78px;
  }
}
.itemcardImagesThumbs .swiper-slide .itemcardImages__item {
  border: 1px solid var(--main-color-primary);
}
.itemcardImagesThumbs .swiper-slide:not(.swiper-slide-thumb-active) .itemcardImages__item {
  border-color: var(--main-color-gray-base);
}
.itemcardImagesThumbs .swiper-slide:hover {
  opacity: 1;
}
.itemcardImagesThumbs.swiper {
  position: relative;
}
.itemcardImagesThumbs.swiper .swiper-button-prev,
.itemcardImagesThumbs.swiper .swiper-button-next {
  top: auto;
  bottom: auto;
  left: 50%;
  right: auto;
  margin: 0;
  transform: translateX(-50%) rotate(90deg);
}
.itemcardImagesThumbs.swiper .swiper-button-prev.swiper-button-disabled,
.itemcardImagesThumbs.swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0;
}
.itemcardImagesThumbs.swiper .swiper-button-prev {
  top: 0;
}
.itemcardImagesThumbs.swiper .swiper-button-next {
  bottom: 0;
}
@media (max-width: 767px) {
  .itemcardImagesThumbs .swiper-slide {
    width: 16px;
    background: transparent;
    border-radius: 50%;
    border: 4px solid transparent;
  }
  .itemcardImagesThumbs .swiper-slide .itemcardImages__item {
    border: 0;
    background: var(--main-color-gray-base);
    padding: 0;
    height: 8px;
    width: 8px;
    border-radius: 50%;
  }
  .itemcardImagesThumbs .swiper-slide.swiper-slide-thumb-active {
    border: 4px solid var(--main-color-white);
  }
  .itemcardImagesThumbs .swiper-slide.swiper-slide-thumb-active .itemcardImages__item {
    background: var(--main-color-primary);
  }
  .itemcardImagesThumbs .itemcardImages__img {
    display: none;
  }
  .itemcardImagesThumbs .swiper .swiper-button-prev,
  .itemcardImagesThumbs .swiper .swiper-button-next {
    display: none;
  }
}

.itemcardImages {
  position: relative;
  width: 100%;
}
.itemcardImages:before {
  content: var(--base-icon-loading);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: 80px;
  z-index: 106;
  color: var(--main-color-middle-gray);
  animation: rotation 1s infinite ease-in-out;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .itemcardImages:before {
    font-size: 120px;
  }
}
.itemcardImages > * {
  transition: opacity 0.2s ease-in-out;
}
.itemcardImages.is-loading:before {
  opacity: 1;
}
.itemcardImages.initialized:before {
  display: none;
}
.itemcardImages:not(.initialized) > * {
  opacity: 0;
}
.itemcardImages .itemcardImagesThumbs {
  margin-top: -20px;
  margin-bottom: 30px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .itemcardImages.thumbsLeft {
    display: flex;
  }
  .itemcardImages.thumbsLeft .itemcardImagesMain {
    order: 1;
    flex-grow: 1;
  }
  .itemcardImages.thumbsLeft .itemcardImagesThumbs {
    width: 78px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    flex-shrink: 0;
    position: absolute;
    top: 30px;
    z-index: 2;
  }
}
@media (min-width: 768px) and (min-width: 1250px) {
  .itemcardImages.thumbsLeft .itemcardImagesThumbs {
    margin-right: 30px;
    top: 145px;
  }
}
@media (min-width: 768px) {
  .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-slide {
    width: 100%;
    height: 100px !important;
  }
  .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-wrapper {
    flex-direction: column;
  }
  .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
    height: 20%;
    padding-bottom: 20px;
  }
  .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-wrapper .swiper-slide:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
    display: none;
  }
}
@media (max-width: 767px) {
  .itemcardImages .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) {
    margin-left: -5px;
    margin-right: -5px;
  }
  .itemcardImages .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-slide {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.itemcardBuybox {
  background: var(--main-color-white);
}
.itemcardBuybox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.itemcardBuybox__head .itemcardActions {
  order: 1;
  margin-left: 20px;
}
@media (min-width: 768px) {
  .itemcardBuybox__head {
    margin-bottom: 100px;
  }
}
@media (min-width: 768px) {
  .itemcardBuybox__main {
    padding-bottom: 20px;
  }
}
.itemcardBuybox__bottom {
  padding-top: 60px;
  padding-bottom: 60px;
}
.itemcardBuybox__bottom .textcontent:has(.iconbox) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  margin-left: 0;
  border-right: 0;
}
.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox .icon {
  position: relative;
  margin-bottom: 24px;
}
.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:nth-child(1):before, .itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:nth-child(3):before {
  content: "";
  position: absolute;
  right: -15px;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: var(--main-color-gray-base);
}
.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:first-child:after, .itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:nth-child(2):after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--main-color-gray-base);
}
@media (min-width: 1250px) {
  .itemcardBuybox__bottom {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .itemcardBuybox__bottom > .textcontent {
    gap: 60px;
  }
  .itemcardBuybox__bottom > .textcontent .iconbox {
    padding-left: 30px;
    padding-right: 30px;
  }
  .itemcardBuybox__bottom > .textcontent .iconbox:nth-child(1):before, .itemcardBuybox__bottom > .textcontent .iconbox:nth-child(3):before {
    right: -30px;
  }
  .itemcardBuybox__bottom > .textcontent .iconbox:first-child:after, .itemcardBuybox__bottom > .textcontent .iconbox:nth-child(2):after {
    bottom: -30px;
  }
}
.itemcardBuybox__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .itemcardBuybox__actions {
    margin-top: 40px;
    margin-bottom: 20px;
  }
}
.itemcardBuybox__actions .button--primary {
  flex-grow: 1;
}
.itemcardBuybox__trustSection {
  padding: 20px 40px;
}
.itemcardBuybox__trustSection .trustInfobar img {
  max-height: 30px;
  width: 50px !important;
}
.itemcardBuybox .inventoryWrapper {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .itemcardBuybox .inventoryWrapper {
    padding-bottom: 30px;
  }
}
.itemcardBuybox .prices .basePrice {
  margin-bottom: 0;
  font-weight: var(--main-font-weight-bold);
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .itemcardBuybox .prices .basePrice {
    font-size: 1.8rem;
  }
}
@media (min-width: 1024px) {
  .itemcardBuybox .prices .basePrice {
    font-size: 2rem;
  }
}
.itemcardBuybox .amountLine:not(:last-child) {
  border-bottom: 1px solid var(--main-color-light-gray);
}
.itemcardBuybox .amountLine__label {
  color: var(--main-color-dark-gray);
  font-size: var(--main-font-size-small);
}
.itemcardBuybox .amountLines {
  margin-bottom: 20px;
}
.itemcardBuybox .orderButtonWrapper {
  margin-top: 20px;
}
.itemcardBuybox .orderButtonWrapper .quantity--small {
  border-radius: 8px;
  border-right: 1px solid var(--main-color-gray-base);
  height: 46px;
}
@media (max-width: 767px) {
  .itemcardBuybox .contentTabs .contentTabs__header {
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    scrollbar-width: thin;
    padding-bottom: 1px;
  }
  .itemcardBuybox .contentTabs .contentTabs__header::-webkit-scrollbar {
    height: 2px;
  }
}
.itemcardBuybox .orderbox_button {
  position: relative;
}
.itemcardBuybox #shippingModalLink {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (max-width: 767px) {
  .itemcardBuybox #shippingModalLink {
    bottom: 0;
    right: unset;
    left: 0;
  }
}

.itemcardOrderSections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.itemcardOrderSections .itemcardOrderSections__section {
  border-radius: 8px;
  border: 1px solid var(--main-color-middle-gray);
  padding: 16px;
}
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .inventoryWrapper,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .orderButtonWrapper,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .priceNotice,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .itemcardOrderSections__sectionOptions {
  display: none;
}
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .prices .basePrice {
  font-size: var(--main-font-size-base);
}
.itemcardOrderSections .itemcardOrderSections__section.is-active {
  border-width: 2px;
  border-color: var(--main-color-primary);
}

.itemcardHeadline:last-child {
  margin-bottom: 0;
}
.itemcardHeadline + .itemcardRating {
  margin-top: -20px;
}

.itemcardBreadcrumbs .breadcrumbWrapper {
  margin-bottom: 60px;
  gap: 10px;
}
@media (max-width: 767px) {
  .itemcardBreadcrumbs .breadcrumbWrapper {
    margin-bottom: 20px;
  }
}

.itemcardActions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.itemcardBrand .image, .itemcardBrand .imageCover, .itemcardBrand .itemcardImagesMain .itemcardImages__img, .itemcardImagesMain .itemcardBrand .itemcardImages__img, .itemcardBrand .itemcardImagesThumbs .itemcardImages__img, .itemcardImagesThumbs .itemcardBrand .itemcardImages__img {
  max-width: 80px;
}
.itemcardBrand .image img, .itemcardBrand .imageCover img, .itemcardBrand .itemcardImagesMain .itemcardImages__img img, .itemcardImagesMain .itemcardBrand .itemcardImages__img img, .itemcardBrand .itemcardImagesThumbs .itemcardImages__img img, .itemcardImagesThumbs .itemcardBrand .itemcardImages__img img {
  aspect-ratio: 4/3;
  object-position: left center;
}

.itemNo {
  color: var(--main-color-middle-gray);
  margin-bottom: 10px;
}

.itemcardAttributesTable td {
  padding: 5px;
}
@media (min-width: 768px) {
  .itemcardAttributesTable td {
    padding: 10px;
  }
}
.itemcardAttributesTable td:first-child {
  font-weight: var(--main-font-weight-bold);
}

.itemcardFaq {
  display: grid;
  gap: 20px;
  grid-template-columns: 0.6fr 1fr;
}
@media (max-width: 767px) {
  .itemcardFaq {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.itemcardBuybox .orderButtonWrapper {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .itemcardBuybox .orderButtonWrapper {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .itemcardBuybox .orderButtonWrapper {
    display: none;
  }
}
@media (max-width: 767px) {
  .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .priceNotice span {
    display: none;
  }
}
.itemcardBuyboxMobile {
  display: none;
}
@media (max-width: 767px) {
  .itemcardBuyboxMobile {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--main-color-white);
    padding: 20px;
    z-index: 99;
    border-radius: 20px 20px 0 0;
    box-shadow: 4px 0 14px 0 rgba(0, 0, 0, 0.1);
    display: block;
  }
  .itemcardBuyboxMobile .alert {
    transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
  }
}
.itemcardBuyboxMobile #shippingModalLink,
.itemcardBuyboxMobile .inventoryWrapper {
  display: none;
}
.itemcardBuyboxMobile .orderButtonWrapper {
  margin-top: 16px;
}
.itemcardBuyboxMobile .quantity {
  border-radius: 8px;
  border-right: 1px solid var(--main-color-gray-base);
  height: 46px;
}
.itemcardBuyboxMobile .orderButton {
  justify-content: center;
  font-weight: var(--main-font-weight-bold);
  align-items: center;
  padding-right: 16px;
}
.itemcardBuyboxMobile .orderButton .icon {
  position: relative;
  font-size: 22px;
  right: unset;
  height: unset;
  width: unset;
  top: unset;
  transform: unset;
}

.itemcardMedia {
  grid-area: cardMedia;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .itemcardMedia {
    position: sticky;
    top: 100px;
  }
}

.itemcardSide {
  grid-area: cardSide;
}

.itemcardComments {
  grid-area: cardComments;
}

.itemcardAttributes {
  grid-area: cardAttributes;
}

.itemcardDescriptions {
  grid-area: cardDescriptions;
  display: flex;
  flex-direction: column;
  grid-gap: 10px;
}
.itemcardDescriptions table {
  min-width: 100%;
}

.itemcardCrossseller h3 {
  text-align: center;
  margin-bottom: 40px;
}
.itemcardCrossseller .itemboxList.swiper {
  max-width: 100%;
}
@media (max-width: 1023px) {
  .itemcardCrossseller h3 {
    text-align: left;
  }
  .itemcardCrossseller .itemboxList.swiper {
    padding-bottom: 20px;
    max-width: calc(100% + 40px);
    margin-left: 0;
  }
  .itemcardCrossseller .swiper-scrollbar {
    display: block;
  }
  .itemcardCrossseller .swiper-pagination {
    display: none !important;
  }
}

.itemcardMain {
  display: grid;
  width: 100%;
  grid-template-columns: 100%;
  grid-column-gap: 10px;
  grid-template-areas: "cardMedia" "cardSide" "cardDescriptions" "cardAttributes" "cardComments";
}
.itemcardMain > * {
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .itemcardMain {
    grid-template-columns: 1fr 50%;
    grid-template-areas: "cardMedia cardMedia" "cardSide cardSide" "cardSide cardSide" "cardComments cardComments";
  }
}
@media (min-width: 1024px) {
  .itemcardMain {
    grid-template-columns: 1fr 50%;
    grid-template-areas: "cardMedia cardSide" "cardDescriptions cardSide" "cardAttributes cardSide" "cardComments cardSide";
  }
  .itemcardMain .itemcardSide {
    margin-bottom: 0;
  }
}
@media (min-width: 1250px) {
  .itemcardMain {
    grid-template-columns: 1fr 43%;
  }
  .itemcardMain > * {
    margin-bottom: 10px;
  }
}
@media (min-width: 1540px) {
  .itemcardMain {
    grid-column-gap: 80px;
  }
}

.itemcardGiftWrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--main-color-primary-light);
  padding: 20px 30px;
  border-radius: 8px;
  margin-bottom: 60px;
}
.itemcardGiftWrapper .icon {
  flex-shrink: 0;
  color: var(--main-color-primary);
  font-size: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--main-color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1249px) {
  .itemcardGiftWrapper {
    padding: 20px;
    flex-direction: column;
    gap: 5px;
  }
}

.itemcardGift__description {
  display: flex;
  gap: 30px;
  align-self: center;
  align-items: center;
}
.itemcardGift__description .headline {
  font-size: 2rem;
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.itemcardGift__description .subline {
  margin-bottom: 10px;
}
.itemcardGift__description .price {
  font-weight: var(--main-font-weight-bold);
}
@media (max-width: 1249px) {
  .itemcardGift__description {
    gap: 20px;
  }
}
.itemcardGift__image {
  width: 220px;
  flex-shrink: 0;
  margin-left: 40px;
}

.itemcardBanner {
  position: sticky;
  bottom: 150px;
  max-width: 1840px;
  width: 100%;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1024px) {
  .itemcardBanner {
    bottom: 40px;
  }
}
.itemcardBanner .banner {
  height: 850px;
}
@media screen and (max-width: 1024px) {
  .itemcardBanner .banner {
    height: 520px;
  }
}
.itemcardBanner .banner .button {
  border-color: var(--main-color-white);
  color: var(--main-color-white);
  background: transparent;
  display: inline-flex;
}
.itemcardBanner .banner .button:after {
  content: var(--base-icon-angle-right-bold);
  font-family: "icons", Helvetica, Arial, sans-serif;
  color: var(--main-color-white);
  font-size: 12px;
  margin-left: 8px;
}
@media screen and (min-width: 1024px) {
  .itemcardBanner .banner .banner2 .contentText .textcontent {
    max-width: 50%;
  }
}
@media screen and (width: 1024px) {
  .itemcardBanner .banner .banner2 .contentText__headline {
    font-size: 3rem;
  }
  .itemcardBanner .banner .banner2 .contentText__text {
    font-size: 1.8rem;
  }
}
.itemcardBanner .banner .contentImage {
  border-radius: 20px;
}
@media screen and (max-width: 1024px) {
  .itemcardBanner .banner .contentImage {
    max-height: 520px;
  }
}
.itemcardBannerPlaceholder {
  height: 850px;
  width: 100%;
  display: block;
}
@media screen and (max-width: 1024px) {
  .itemcardBannerPlaceholder {
    height: 380px;
  }
}

.container:has(+ .itemcardBanner) {
  position: relative;
  z-index: 2;
  background: var(--main-color-white);
}

/*
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 .orderboxSummary__headline, .gp.accountBox .itemcardHeadline, .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 .orderboxSummary__headline .icon, .gp.accountBox .itemcardHeadline .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: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .accountBox {
    min-height: 120px;
  }
}
.accountBox__actions {
  margin-left: 10px;
  margin-right: -5px;
}
.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 {
  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 .orderboxSummary__headline, .gp.accountBox .itemcardHeadline {
  margin-bottom: 10px;
}

.accountBoxForm {
  width: 100%;
  display: flex;
}

@media (min-width: 768px) {
  .shipmentAddressList .accountBox {
    min-height: 185px;
  }
}

@media (min-width: 768px) {
  .iconbarHover--basket {
    width: 380px;
    z-index: 103;
    right: calc(50% + 50px);
  }
}
.iconbarHover--basket:before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 35px;
  background: transparent;
  border-color: transparent;
  pointer-events: auto;
  display: block;
}
.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;
  border-radius: 4px;
}
.iconbarHover--basket .itemBasketBox__img img {
  background: var(--main-color-gray-background);
}
.iconbarHover--basket .itemBasketBox__description {
  font-size: inherit;
}
.iconbarHover--basket .itemBasketBox .linkWithIcon {
  font-size: var(--main-font-size-small);
  gap: 2px;
}

.availability_message {
  margin-top: 32px;
}
.availability_message .availability_message_button {
  display: inline-block;
  margin-bottom: 16px;
}
.availability_message .availability_message_button .icon {
  padding-right: 16px;
}
.availability_message .availability_message_box {
  background-color: var(--main-color-white);
  margin-bottom: 32px;
}
.availability_message .availability_message_box .button {
  width: 100%;
  max-width: 200px;
}
@media (max-width: 767px) {
  .availability_message .availability_message_box {
    padding: 16px;
  }
  .availability_message .availability_message_box .button {
    max-width: 100%;
  }
}

#itemcard_availability_message .form-group {
  display: flex;
  gap: 20px;
}
#itemcard_availability_message .form-group .infieldInputGroup {
  flex-grow: 1;
}
@media (max-width: 767px) {
  #itemcard_availability_message .form-group {
    flex-direction: column;
    gap: 10px;
  }
}

.itemcardBuybox:has(#availability_registration_wrapper) .orderButtonWrapper.inactive {
  display: none;
}
.itemcardBuybox:has(#availability_registration_wrapper) #availability_registration_wrapper {
  margin-top: 60px;
}

.js-itemBasketList.is-loading,
.js-basketOrderBox.is-loading {
  cursor: wait;
  pointer-events: none;
}
.js-itemBasketList.is-loading input,
.js-itemBasketList.is-loading .quantity,
.js-basketOrderBox.is-loading input,
.js-basketOrderBox.is-loading .quantity {
  opacity: 0.5;
}

.archiveFilterbox {
  margin-bottom: 40px;
}
.archiveFilterbox > .inner {
  container-type: inline-size;
}
.archiveFilterbox .filterGrid {
  display: grid;
  gap: 32px;
}
.archiveFilterbox .filterGrid__left {
  display: grid;
  gap: 16px;
}
.archiveFilterbox .filterGrid__right {
  display: flex;
  gap: 16px;
}

@container (inline-size > 540px) {
  .archiveFilterbox .filterGrid__left {
    grid-template-columns: 1fr 1fr;
  }
  .archiveFilterbox .filterGrid.col4 .filterGrid__left {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@container (inline-size > 890px) {
  .archiveFilterbox .filterGrid {
    grid-template-columns: 1fr auto;
  }
  .archiveFilterbox .filterGrid__left {
    grid-template-columns: 1fr 1fr;
  }
  .archiveFilterbox .filterGrid__right {
    align-items: flex-end;
  }
}
.archiveTable {
  margin-bottom: 48px;
}
.archiveTable .button {
  min-width: 0;
}
.archiveTable__label {
  color: var(--main-color-gray-base);
  display: block;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .archiveTable {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .archiveTable__row {
    display: table-row;
  }
  .archiveTable__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 16px;
    border-top: 1px solid var(--main-color-middle-gray);
    width: 120px;
  }
  .archiveTable__cell--auto {
    width: auto;
  }
  .archiveTable__cell:first-child {
    padding-left: 0;
  }
  .archiveTable__cell:last-child {
    padding-right: 0;
    width: auto;
  }
  .archiveTable__infoLine {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .archiveTable__label {
    display: none;
  }
  .archiveTable__header .archiveTable__cell {
    border-top: 0;
  }
}
@media (min-width: 1250px) {
  .archiveTable__cell {
    width: 180px;
  }
}
@media (max-width: 767px) {
  .archiveTable__header {
    display: none;
  }
  .archiveTable__cell {
    text-align: left;
    margin-bottom: 16px;
  }
  .archiveTable__cell:last-child {
    margin-bottom: 0;
  }
  .archiveTable__row {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--main-color-middle-gray);
  }
  .archiveTable__label {
    color: var(--main-color-black);
  }
  .archiveTable__statusLine {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 15px;
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 0;
  }
  .archiveTable__statusLine span {
    margin: 0;
  }
  .archiveTable__statusLine:before {
    content: var(--base-icon-angle-right);
    font-family: "icons";
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%) rotate(0);
    font-size: 1.1rem;
    margin-top: 0.5px;
    transition: all 0.2s ease-in-out;
  }
  .archiveTable__statusLine.is-active:before {
    transform: translateY(-50%) rotate(90deg);
  }
  .archiveTable__infoLine {
    display: none;
    padding-left: 15px;
    margin-top: 10px;
  }
  .archiveTable__actionLine {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 5px;
  }
}

@media (min-width: 768px) {
  .archiveTableInTable {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .archiveTableInTable__row {
    display: table-row;
  }
  .archiveTableInTable__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 8px 16px;
    width: 120px;
  }
  .archiveTableInTable__cell--auto {
    width: auto;
  }
  .archiveTableInTable__cell:first-child {
    padding-left: 0;
  }
  .archiveTableInTable__cell:last-child {
    padding-right: 0;
    width: auto;
  }
}
@media (min-width: 1250px) {
  .archiveTableInTable__cell {
    width: 180px;
  }
}
@media (max-width: 767px) {
  .archiveTableInTable__cell {
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .archiveTableInTable__cell:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .toggleTableRow {
    padding-left: 32px;
  }
}

.itemSharing__item {
  margin-top: 10px;
}
.itemSharing__btn {
  position: relative;
  padding-left: 24px;
  display: inline-block;
  cursor: pointer;
  color: var(--main-color-black);
}
.itemSharing__btn .icon {
  text-align: center;
  font-size: 1.2em;
  color: var(--main-color-primary);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.itemSharing__btn:hover {
  color: var(--main-link-color-hover);
}

.itemtable_list {
  display: table;
  width: 100%;
  table-layout: auto;
}
.itemtable_row {
  display: table-row;
}
@media (min-width: 768px) {
  .itemtable_row:last-child .itemtable_cell {
    border-bottom: 1px solid var(--main-color-middle-gray);
  }
}
.itemtable_cell {
  display: table-cell;
  vertical-align: top;
  padding: 32px;
  border-top: 1px solid var(--main-color-middle-gray);
}
.itemtable_cell .description {
  font-weight: var(--main-font-weight-bold);
}
.itemtable_cell .description > a {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
}
.itemtable_cell .description > a:hover {
  color: var(--main-color-primary);
}
.itemtable_cell .basket_delete {
  margin-top: 32px;
  display: inline-block;
}
.itemtable_cell .order_price {
  font-weight: var(--main-font-weight-bold);
}
.itemtable_label {
  display: none;
  color: var(--main-color-gray-base);
  font-weight: var(--main-font-weight);
  font-size: var(--main-font-size-base);
  margin-bottom: 5px;
}
.itemtable_header .itemtable_cell {
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 0;
}
@media (min-width: 768px) {
  .itemtable_cell.image_line {
    width: 140px;
  }
  .itemtable_cell.quantity_line {
    width: 150px;
  }
  .itemtable_cell.price_line, .itemtable_cell.line_amount_line {
    width: 150px;
  }
}
@media (max-width: 767px) {
  .itemtable_list {
    display: block;
  }
  .itemtable_row {
    border-top: 1px solid var(--main-color-middle-gray);
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
  }
  .itemtable_row:after {
    content: "";
    display: block;
    clear: both;
  }
  .itemtable_row:last-child {
    border-bottom: 1px solid var(--main-color-middle-gray);
  }
  .itemtable_header {
    display: none;
  }
  .itemtable_cell {
    padding: 5px 10px;
    border: 0;
    text-align: left;
    width: 100%;
    width: calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: -o-calc(100% - 80px);
    float: right;
  }
  .itemtable_cell.image_line {
    width: 80px;
    float: left;
  }
  .itemtable_label {
    display: block;
  }
}

.orderOptionList__image {
  width: 80px;
  padding-right: 32px;
}
.orderOptionList__headline {
  font-weight: var(--main-font-weight-bold);
  font-size: 16px;
  margin-bottom: 16px;
}
.orderOptionList__item {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
  color: var(--main-color-black);
  padding: 32px;
  border: 2px solid var(--main-color-light-gray);
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: relative;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  margin-bottom: 10px;
}
.orderOptionList__item input {
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
}
.orderOptionList__item:hover {
  border-color: var(--main-color-primary);
}
.orderOptionList__item.selected {
  border-color: var(--main-color-primary);
}
.orderOptionList > .row > div {
  display: flex;
}

.order_price_total,
.order_price_total_label {
  font-size: 16px;
  font-weight: var(--main-font-weight-bold);
}

.orderSummaryHead {
  margin-bottom: 16px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}
.orderSummaryHead__text {
  font-size: 1.6rem;
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-black);
}

@media (max-width: 767px) {
  .order_prices_box {
    display: block;
  }
  .order_prices_box .order_prices_box_left {
    width: 100%;
    border-bottom: 0;
  }
  .order_prices_box .order_prices_box_right {
    width: 100%;
  }
}
/*
Checkout Buttons

Markup:
<div id="AmazonPayButton" class="checkoutButton checkoutButton--amazon">
    <img class="checkoutButton__logo" src="/userdata/checkout/amazonCheckoutLogo.svg" alt="Amazon" />
    <div class="checkoutButton__text"><span>Pay with</span> Amazon</div>
</div>
<a href="#" class="checkoutButton checkoutButton--paypal">
    <img class="checkoutButton__logo" src="/userdata/checkout/paypalCheckoutLogo.svg" alt="PayPal">
    <div class="checkoutButton__text"><span>Pay with</span> Paypal</div>
</a>

Styleguide Shop.Checkout Buttons
*/
.checkoutButton {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--main-color-black);
  cursor: pointer;
  background: var(--main-color-light-gray);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 5px 10px;
  font-weight: var(--main-font-weight-bold);
  min-height: 40px;
}
@media (min-width: 768px) {
  .checkoutButton {
    min-height: 50px;
    padding: 10px;
  }
}
.checkoutButton:hover {
  background: var(--main-color-gray-base);
  color: var(--main-color-black) !important;
  text-decoration: none;
}
.checkoutButton:active {
  background: var(--main-color-gray-base);
  color: var(--main-color-black) !important;
  text-decoration: none;
}
.checkoutButton__logo {
  aspect-ratio: 1;
  width: 24px;
  height: 24px !important;
  object-fit: contain;
}

.checkoutButton--amazon .amazonpay-button-inner-image {
  display: none;
}
.checkoutButton--amazon .checkoutButton__text span {
  color: #FF9900;
}

.checkoutButton--paypal .checkoutButton__text span {
  color: #179BD7;
}

.shipmentAddressList {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

/*
SpotPrices

Markup:
<div class="spotPrices">
<div class="spotPriceItem">
<div class="spotPriceItem--headline gold">Gold</div>
<p>1 oz: 2.891,20 &euro;</p>
<span class="arrow up">▲</span> <span class="change">+1,90 %</span>
</div>
<div class="spotPriceItem">
<div class="spotPriceItem--headline silver">Silber</div>
<p>1 oz: 32,02 &euro;</p>
<span class="arrow up">▲</span><span class="change">+3,80 %</span>
</div>
<div class="spotPriceItem">
<div class="spotPriceItem--headline platinum">Platin</div>
<p>1 oz: 1.119,19 &euro;</p>
<span class="arrow down">▼</span> <span class="change">-1,04 %</span>
</div>
  <div class="spotPriceItem">
  <div class="spotPriceItem--headline palladium">Palladium</div>
  <p>1 oz: 1.059,90 &euro;</p>
  <span class="arrow down">▼</span> <span class="change">-2,01 %</span>
  </div>
</div>


Styleguide Siteparts.Spot Prices
*/
.spotPrices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 70px;
  border-bottom: 1px solid var(--main-color-gray-base);
}
@media (max-width: 1023px) {
  .spotPrices {
    gap: 10px;
    padding-bottom: 35px;
  }
}
@media (max-width: 767px) {
  .spotPrices {
    white-space: nowrap;
    overflow-x: auto;
    margin-right: -20px;
    border-bottom: none;
    padding-bottom: 20px;
  }
}

.spotPriceItem {
  text-align: left;
  font-size: 1.8rem;
  min-width: 150px;
}
.spotPriceItem--headline {
  line-height: 1.2;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .spotPriceItem--headline {
    font-size: 3.8rem;
    margin-bottom: 15px;
  }
}
.spotPriceItem p {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 5px;
}
.spotPriceItem .gold {
  background: linear-gradient(90deg, #A18646 0%, #BE9F56 50%, #CBB278 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spotPriceItem .silver {
  background: linear-gradient(90deg, #8B8B8B 0%, #B9B9B9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spotPriceItem .platinum {
  background: linear-gradient(90deg, #B8B8B8 0%, #D4D4D4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spotPriceItem .palladium {
  background: linear-gradient(90deg, #A7A7A7 0%, #D0D0D0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spotPriceItem .arrow.up {
  color: var(--main-color-success);
}
.spotPriceItem .arrow.up + span {
  color: var(--main-color-success);
}
.spotPriceItem .arrow.down {
  color: var(--main-color-danger);
}
.spotPriceItem .arrow.down + span {
  color: var(--main-color-danger);
}
.spotPriceItem .change {
  font-weight: var(--main-font-weight-bold);
}

.js-countdownButton {
  cursor: help;
  z-index: 999;
}
.js-countdownButton:hover .countdownSpanWrapper .iconbarIcon__icon {
  color: var(--main-color-white);
}
@media (max-width: 767px) {
  .js-countdownButton {
    position: absolute;
    right: 0;
    top: 35px;
  }
}

.countdownSpanWrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-radius: 6px;
  padding: 0 10px;
  gap: 5px;
  margin-left: 10px;
}
.countdownSpanWrapper .iconbarIcon__icon {
  width: 24px;
}
.countdownSpanWrapper .countdownSpan {
  width: 50px;
  font-size: 1.6rem;
}
@media (max-width: 767px) {
  .countdownSpanWrapper {
    border-radius: 4px;
    margin-left: 0;
    margin-right: -20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 22px;
    padding-left: 6px;
    padding-right: 12px;
  }
  .countdownSpanWrapper .iconbarIcon__icon {
    font-size: 14px;
    width: 14px;
  }
  .countdownSpanWrapper .countdownSpan {
    width: 30px;
    font-size: 10px;
  }
}

.countdownHover {
  position: absolute;
  top: 100%;
  right: -10px;
  width: 500px;
  padding: 24px;
  background: var(--main-color-white);
  border-radius: 8px;
  color: var(--main-color-black);
  text-align: left;
  font-size: 1.6rem;
  margin-top: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(25px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
  cursor: default;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.countdownHover h4, .countdownHover .h4 {
  font-size: 2rem;
  font-weight: var(--main-font-weight-bold);
}
.countdownHover .iconbarHover__close {
  display: flex;
  font-size: 14px;
  transition: background 0.2s ease;
  border-radius: 50%;
  cursor: pointer;
}
.countdownHover .iconbarHover__close:hover {
  background: rgba(0, 0, 0, 0.05);
}
.countdownHover.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 767px) {
  .countdownHover {
    margin-top: 0;
    border-radius: 0;
    width: 100%;
    position: fixed;
    right: 0;
    left: 0;
    height: auto;
    transform: translateY(0);
  }
}

.purchaseHistoryListExtendItem {
  padding-top: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--main-color-light-gray);
}
.purchaseHistoryListExtendItem__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.purchaseHistoryListExtendItem__headerText {
  font-weight: var(--main-font-weight-bold);
}
@media (min-width: 768px) {
  .purchaseHistoryListExtendItem__headerText {
    font-size: var(--main-font-size-big);
  }
}
@media (max-width: 481px) {
  .purchaseHistoryListExtendItem__headerTextDescription {
    display: flex;
    flex-direction: column;
  }
}

.purchaseHistoryDetailsItem {
  border-bottom: 1px solid var(--main-color-middle-gray);
}
.purchaseHistoryDetailsItem__header, .purchaseHistoryDetailsItem__body {
  display: grid;
  grid-template-columns: 140px 1fr 120px 100px 150px;
  gap: 20px;
}
.purchaseHistoryDetailsItem__header .lineItem, .purchaseHistoryDetailsItem__body .lineItem {
  padding: 10px 5px;
}
.purchaseHistoryDetailsItem__header .lineItem.purchaseTotal, .purchaseHistoryDetailsItem__body .lineItem.purchaseTotal {
  font-weight: var(--main-font-weight-bold);
}
.purchaseHistoryDetailsItem__header {
  font-weight: var(--main-font-weight-bold);
  font-size: 1.4rem;
}
.purchaseHistoryDetailsItem__body:nth-child(odd) {
  background: var(--main-color-light-gray);
}
.purchaseHistoryDetailsItem__body .lineItem {
  display: flex;
  align-items: flex-start;
}
.purchaseHistoryDetailsItem__body .lineItem.text-center {
  justify-content: center;
}
.purchaseHistoryDetailsItem__body .lineItem.text-end {
  justify-content: flex-end;
}
.purchaseHistoryDetailsItem__body .lineItem .lineItemLabel {
  font-weight: var(--main-font-weight-bold);
  color: var(--main-color-dark-gray);
  display: none;
}
.purchaseHistoryDetailsItem__body .lineItem.purchaseQuantity {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .purchaseHistoryDetailsItem__header {
    display: none;
  }
  .purchaseHistoryDetailsItem__body {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .purchaseHistoryDetailsItem__body .lineItem {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 0 10px;
    text-align: right;
  }
  .purchaseHistoryDetailsItem__body .lineItem .lineItemLabel {
    display: block;
  }
  .purchaseHistoryDetailsItem__body .lineItem.text-center, .purchaseHistoryDetailsItem__body .lineItem.text-end {
    justify-content: space-between;
  }
  .purchaseHistoryDetailsItem__body .lineItem > div {
    text-align: right;
  }
  .purchaseHistoryDetailsItem__body .lineItem > div:empty {
    display: none;
  }
  .purchaseHistoryDetailsItem__body .lineItem:empty {
    display: none;
  }
}

.purchaseHistory.orderboxSummary {
  background: var(--main-color-gray-background);
  padding: 20px;
}
.purchaseHistory .order_sum {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.purchaseHistory .order_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2px 0;
}
.purchaseHistory .order_sum_1 {
  flex: 1;
}
.purchaseHistory .order_sum_2 {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.purchaseHistory .order_total {
  border-bottom: 4px double var(--main-color-dark-gray);
  padding-bottom: 10px;
}

.disclaimer {
  font-size: 1.4rem;
  margin-top: 20px;
  margin-bottom: 20px;
  color: var(--main-color-dark-gray);
}

@media (max-width: 767px) {
  .purchaseHistorySummary > .row .purchaseHistoryOrderboxSummary {
    order: -1;
  }
}

.campaignBanner {
  padding: 20px 40px;
  background: var(--main-color-light-gray);
}

.campaignBannerImg {
  margin-bottom: 20px;
}

.campaignBadge--icon {
  width: 50px;
}
.campaignBadge--icon img {
  display: block;
  object-fit: contain;
  object-position: center;
}

.campaignBadges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.promotion--campaign {
  background: var(--main-color-danger);
  color: var(--main-color-danger-contrast);
}
.promotion--campaign.promotion--clickable:hover {
  background: var(--main-color-danger-dark);
  color: var(--main-color-danger-dark-contrast);
}

.itemcard .promotionText {
  margin-bottom: 80px;
}

.dcOrderSelectedBackground img {
  aspect-ratio: 100/56;
  object-fit: cover;
  width: 100%;
}

.dcOrderBackgroundSelect {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  width: 20%;
  cursor: pointer;
  position: relative;
  opacity: 0.7;
}
.dcOrderBackgroundSelect:before, .dcOrderBackgroundSelect:after {
  content: "";
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--main-color-white);
  position: absolute;
  right: 10px;
  top: 5px;
  border-radius: 50%;
  font-size: 24px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}
@media (max-width: 767px) {
  .dcOrderBackgroundSelect:before, .dcOrderBackgroundSelect:after {
    right: 15px;
    width: 20px;
    height: 20px;
    font-size: 16px;
  }
}
.dcOrderBackgroundSelect:after {
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  opacity: 0;
}
.dcOrderBackgroundSelect img {
  aspect-ratio: 100/56;
  object-fit: cover;
  width: 100%;
}
.dcOrderBackgroundSelect:hover {
  opacity: 1;
}
.dcOrderBackgroundSelect:hover:after {
  opacity: 0.5;
}
.dcOrderBackgroundSelect.is-active {
  opacity: 1;
}
.dcOrderBackgroundSelect.is-active:after {
  opacity: 1;
}

.dcOrderBackgroundSelects {
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
}
@media (max-width: 767px) {
  .dcOrderBackgroundSelects {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .dcOrderBackgroundSelects > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: calc(50% - 16px);
    width: -moz-calc(50% - 16px);
    width: -webkit-calc(50% - 16px);
    width: -o-calc(50% - 16px);
    padding-left: 8px;
    padding-right: 8px;
  }
}

.dcOrderTags {
  justify-content: space-between;
}
@media (max-width: 767px) {
  .dcOrderTags {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .dcOrderTags > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
  .dcOrderTags .tag {
    padding: 15px 10px;
  }
}

.giftPackageElement {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: var(--main-color-black);
}
.giftPackageElement:hover, .giftPackageElement:focus, .giftPackageElement:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.giftPackageElement:hover .button, .giftPackageElement:focus .button, .giftPackageElement:active .button {
  background: var(--main-color-secondary-dark);
  border-color: var(--main-color-secondary-dark);
  color: var(--main-color-white);
}
.giftPackageElement:hover img, .giftPackageElement:focus img, .giftPackageElement:active img {
  transform: scale(1.05);
}
.giftPackageElement__image {
  background-color: var(--main-color-gray-background);
}
.giftPackageElement__image img {
  aspect-ratio: 63/59;
  object-fit: contain;
  object-position: center center;
  transition: transform 0.3s ease-in-out;
}
.giftPackageElement__description {
  font-weight: var(--main-font-weight-bold);
}
.giftPackageElement__summary {
  margin-top: 10px;
}
.giftPackageElement__content {
  flex-grow: 1;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
.giftPackageElement__addon {
  text-align: center;
}

.giftPackageList {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
@media (min-width: 768px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (min-width: 1024px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (min-width: 1250px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (min-width: 1540px) {
  .giftPackageList {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

.headerLogo {
  max-width: 60px;
  flex-shrink: 0;
}
@media (min-width: 374px) {
  .headerLogo {
    max-width: 61px;
  }
}
@media (min-width: 768px) {
  .headerLogo {
    max-width: 90px;
  }
}
@media (min-width: 1024px) {
  .headerLogo {
    max-width: 210px;
  }
}
@media (min-width: 1250px) {
  .headerLogo {
    max-width: 350px;
  }
}
.headerLogo a, .headerLogo img {
  display: block;
  aspect-ratio: 350/60;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 1023px) {
  .headerLogo a, .headerLogo img {
    aspect-ratio: 61/38;
  }
}

.headerTrust {
  background: var(--main-color-white);
  color: var(--main-color-primary-contrast);
  font-size: var(--main-font-size-small);
  border-bottom: 1px solid var(--main-color-gray-base);
}
.headerTrust a {
  color: var(--main-color-primary-contrast);
  text-decoration: underline;
}
.headerTrust a:hover {
  color: var(--main-color-primary-dark-contrast);
}

.headerTopRight {
  display: flex;
  justify-content: flex-end;
  gap: 60px;
}

.headerTop {
  background: var(--main-color-white);
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--main-font-size-small);
  line-height: 20px;
  position: relative;
  z-index: 1;
}
@media (min-width: 1250px) {
  .headerTop {
    padding-top: 40px;
    padding-bottom: 28px;
  }
}
.headerTop .container {
  max-width: 1840px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.headerTop .headerNavToggler {
  display: none;
  margin-right: 10px;
}
@media (max-width: 1249px) {
  .headerTop .headerNavToggler {
    display: block;
  }
}
@media (min-width: 768px) {
  .headerTop .headerNavToggler {
    position: absolute;
    z-index: 2;
  }
}
@media (max-width: 767px) {
  .headerTop .container {
    flex-wrap: wrap;
    gap: 10px;
  }
  .headerTop .headerTopLeft {
    order: 99;
    flex-grow: 1;
    width: 100%;
  }
}

.headerTopMiddle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
}
@media (max-width: 1249px) {
  .headerTopMiddle {
    top: 20px;
  }
}
@media (max-width: 1023px) {
  .headerTopMiddle {
    top: 5px;
  }
}
@media (max-width: 767px) {
  .headerTopMiddle {
    top: 10px;
  }
}

.headerMain {
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--main-color-white);
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media (min-width: 768px) {
  .headerMain {
    padding-top: 14px;
    padding-bottom: 35px;
  }
}
@media (max-width: 1249px) {
  .headerMain {
    padding: 5px;
  }
}
@media (max-width: 1023px) {
  .headerMain {
    padding: 0;
  }
}
.headerMain > .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1840px;
  justify-content: center;
}
@media (max-width: 1249px) {
  .headerMain > .container {
    justify-content: flex-end;
  }
}
@media (min-width: 768px) {
  .headerMain > .container {
    flex-wrap: nowrap;
  }
}
.headerMain .headerLogo {
  margin-right: 10px;
}
@media (min-width: 1024px) {
  .headerMain .headerLogo {
    margin-right: 20px;
  }
}
@media (min-width: 1250px) {
  .headerMain .headerLogo {
    margin-right: 40px;
  }
}
@media (max-width: 1249px) {
  .headerMain .headerMainNavigation {
    display: none;
  }
}
.headerMain .headerCMSNavigation {
  padding-left: 30px;
}
@media (max-width: 1249px) {
  .headerMain .headerCMSNavigation {
    display: none;
  }
}
@media (min-width: 1540px) {
  .headerMain .searchBar {
    width: 380px;
  }
}
.headerMain .headerSearch {
  margin-left: 10px;
}
@media (min-width: 1024px) {
  .headerMain .headerSearch {
    margin-left: 20px;
  }
}
@media (min-width: 1250px) {
  .headerMain .headerSearch {
    margin-left: 40px;
  }
}
@media (max-width: 1249px) {
  .headerMain .headerSearch {
    flex-grow: 1;
  }
}
@media (max-width: 767px) {
  .headerMain .headerSearch {
    width: 100%;
    margin-left: 0;
    order: 4;
    margin-top: 10px;
  }
}
.headerMain .headerAccount {
  justify-content: flex-end;
  margin-left: 20px;
}
@media (min-width: 1540px) {
  .headerMain .headerAccount {
    margin-left: 40px;
  }
}
@media (max-width: 767px) {
  .headerMain .headerAccount {
    flex-grow: 1;
  }
}

#header {
  position: relative;
  opacity: 1;
  z-index: 100;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease, color 0.3s ease;
  will-change: transform, opacity;
  top: 0;
  width: 100%;
}
#header.sticky-visible, #header.sticky-hidden {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: var(--main-color-white) !important;
}
#header.sticky-visible > *:not(.headerTrust), #header.sticky-hidden > *:not(.headerTrust) {
  color: var(--main-color-black) !important;
  box-shadow: none;
  background: var(--main-color-white) !important;
}
#header.sticky-visible .mainnav li.is-active-tree > a, #header.sticky-hidden .mainnav li.is-active-tree > a {
  color: var(--main-color-black) !important;
}
#header.sticky-visible .navToggler__bar, #header.sticky-hidden .navToggler__bar {
  background-color: var(--main-color-black);
}
#header.sticky-visible .searchBar .inputGroup__addon,
#header.sticky-visible .searchBar input, #header.sticky-hidden .searchBar .inputGroup__addon,
#header.sticky-hidden .searchBar input {
  background: transparent;
  border-color: var(--main-color-black);
  color: var(--main-color-black);
}
#header.sticky-visible .dynamicPlaceholders__container > .inner, #header.sticky-hidden .dynamicPlaceholders__container > .inner {
  color: var(--main-color-black);
}
#header.sticky-visible {
  transform: translateY(0);
  opacity: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#header.sticky-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.footerTrust {
  background: var(--main-color-black);
  color: var(--main-color-white);
}

.footerTop {
  background: var(--main-color-light-gray);
  padding-top: 30px;
  padding-bottom: 30px;
}

.footerMain .borderTop {
  border-top: 1px solid var(--main-color-black);
  padding-bottom: 130px;
}
.footerMain .footerMainWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 60px;
}
@media (max-width: 767px) {
  .footerMain .footerMainWrapper {
    padding-bottom: 0;
  }
}
.footerMain .footerMainLeft {
  max-width: 630px;
}
.footerMain .footerMainRight {
  max-width: 620px;
  flex-grow: 1;
  display: flex;
  gap: 40px;
}
.footerMain .footerMainRight .textcontent {
  flex-grow: 1;
}

.footerBottom {
  font-size: var(--main-font-size-small);
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
}
.footerBottom .container {
  max-width: 1840px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.footerBottom .footerBottomTop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}
.footerBottom .footerBottomBottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 32px;
}
.footerBottom .footerLogoWrapper {
  display: flex;
  column-gap: 140px;
  align-items: flex-end;
  flex-wrap: wrap;
  row-gap: 40px;
}
.footerBottom .footerBottomLeft {
  margin-right: 10px;
}
.footerBottom .footerBottomRight {
  flex-shrink: 0;
}
.footerBottom .footerBottomLeft,
.footerBottom .footerBottomRight {
  margin-bottom: 40px;
}
.footerBottom .nav a, .footerBottom .nav button {
  color: var(--main-color-white);
}
.footerBottom .nav button {
  padding: 0;
  font-size: var(--main-font-size-small);
  text-decoration: none;
  font-weight: var(--main-font-weight);
}
.footerBottom .nav button:hover, .footerBottom .nav button:focus, .footerBottom .nav button:active {
  color: var(--main-color-primary);
}

.footerContact .textcontent > a {
  display: block;
  text-decoration: none;
  color: var(--main-color-dark-gray);
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.footerContact .textcontent > a:hover, .footerContact .textcontent > a:focus, .footerContact .textcontent > a:active {
  color: var(--main-color-primary);
}
.footerContact .textcontent .contact-col-2 {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}
.footerContact .textcontent .marginBottom {
  width: 50%;
}
.footerContact strong {
  color: var(--main-color-dark-gray);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 5px;
}

@media (max-width: 767px) {
  .footerBottom {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .footerBottom .footerBottomLeft, .footerBottom .footerBottomRight {
    margin-bottom: 30px;
  }
}

@media (max-width: 1539px) {
  .footerMain .footerMainLeft {
    max-width: 500px;
  }
}
@media (max-width: 1249px) {
  .footerMain .footerMainLeft {
    max-width: 400px;
  }
  .footerMain .borderTop {
    padding-bottom: 50px;
  }
}
@media (max-width: 1023px) {
  .footerMain .footerMainLeft, .footerMain .footerMainRight {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .footerMain .footerMainRight {
    flex-direction: column;
    gap: 60px;
  }
}

.mobileMenu {
  position: fixed;
  top: 0;
  width: 0;
  max-width: 481px;
  height: 100%;
  z-index: 105;
  background: linear-gradient(0deg, #FFF 86.54%, rgba(255, 255, 255, 0) 97.69%);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  display: none;
  flex-direction: column;
  left: -500px;
  opacity: 0;
  transition: 0.2s ease-in-out;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobileMenu__close {
  width: 30px;
  height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  right: 0;
  top: 0;
}
.mobileMenu__header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px 40px;
}
.mobileMenu__subHeader {
  margin-bottom: 10px;
  font-weight: var(--main-font-weight-bold);
  font-size: 22px !important;
  padding-top: 5px !important;
}
.mobileMenu__subHeader .navigation__viewAll {
  font-size: 14px;
  font-weight: var(--main-font-weight-medium);
}
.mobileMenu__subHeader .navigation__viewAll .icon {
  font-size: 10px;
}
.mobileMenu__backLink {
  all: unset;
  justify-content: flex-start !important;
  font-size: 14px !important;
  font-weight: var(--main-font-weight-bold);
  display: inline-flex !important;
  position: relative;
  padding: 15px 0;
}
.mobileMenu__backLink:hover, .mobileMenu__backLink:focus, .mobileMenu__backLink:active {
  all: unset;
  padding: 15px 0;
}
.mobileMenu__backLink:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-left-light);
  font-size: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mobileMenu__backLink:after {
  content: "";
  display: block;
  height: 1px;
  background: var(--main-color-dark-gray);
  position: absolute;
  right: 0;
  left: 20px;
  bottom: 15px;
}
.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: 15px 0;
  font-weight: var(--main-font-weight-bold);
  font-size: 18px;
}
.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;
  border-bottom: 1px solid var(--main-color-gray-base);
}
.mobileMenu__navigation li.is-active > a, .mobileMenu__navigation li.is-active_tree > a {
  color: var(--main-color-primary);
  font-weight: var(--main-font-weight-bold);
}
.mobileMenu__navigation li:has(> .mobileMenu__backLink) {
  border-bottom: 0;
}
.mobileMenu__navigation li:has(> .mobileMenu__subHeader) {
  border-bottom: 0;
}
.mobileMenu__navigation ul {
  margin: 0;
  padding: 0 20px;
  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 > ul > li > a > .navigationImage {
  display: none;
}
.mobileMenu__navigation li.hasChildren > a:after {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-right-light);
  font-size: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.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 li.hasChildren.is-open > ul .groupNavigationWrapper {
  margin-bottom: 30px;
}
.mobileMenu__navigation li.hasChildren.is-open > ul .groupNavigationWrapper > .groupNavigation {
  border-bottom: 0;
}
.mobileMenu__navigation li.hasChildren.is-open > ul .groupNavigationWrapper > .groupNavigation > ul {
  pointer-events: auto;
  opacity: 1;
  left: 0;
  z-index: 1;
  position: relative;
  height: auto;
  padding: 0;
}
.mobileMenu__navigation li.hasChildren.is-open > ul .groupNavigationWrapper > .groupNavigation > ul > li {
  border-bottom: 0;
}
.mobileMenu__navigation li.hasChildren.is-open > ul .groupNavigationWrapper > .groupNavigation > ul > li a {
  padding: 8px 0;
  font-weight: var(--main-font-weight);
}
.mobileMenu__navigation li.hasChildren.is-open > ul .groupNavigationWrapper .groupNavigationTitle {
  margin-bottom: 10px;
  font-weight: 600;
}
.mobileMenu__navigation--cms .textcontent > ul {
  left: 0;
  opacity: 1;
  pointer-events: auto;
  position: static;
  height: auto;
}
.mobileMenu__navigation--cms li.level_3 > a {
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.mobileMenu__navigation--cms li.level_3 > a .navigationName {
  min-height: auto;
}
.mobileMenu__navigation--cms li.level_3 > a .navigationImage {
  display: none;
}
.mobileMenu__section {
  border-top: 1px solid var(--main-color-gray-base);
  padding: 30px 20px 30px 30px;
}
.mobileMenu__content > a {
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.mobileMenu__content > a .categoryIcon {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 8px;
}
.mobileMenu__body {
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 85px);
  max-height: calc(100dvh - 85px);
  max-height: calc(100svh - 85px);
  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 {
  left: 0;
  opacity: 1;
  pointer-events: auto;
  display: flex;
  width: 100%;
}
.mobileMenu .searchBar--small {
  max-width: none;
}

body.is-mobilemenuopen {
  overflow: hidden;
}

body:has(.headerTrust) .mobileMenu__header {
  padding: 52px 20px 40px;
}

@media print {
  a[href]:after {
    content: none !important;
  }
}
/*# sourceMappingURL=main.css.map */