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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:root {
  --base-icon-360: "";
  --base-icon-academy: "";
  --base-icon-address: "";
  --base-icon-addressbook: "";
  --base-icon-aichat: "";
  --base-icon-angle-down: "";
  --base-icon-angle-left: "";
  --base-icon-angle-right: "";
  --base-icon-angle-up: "";
  --base-icon-arrow-down: "";
  --base-icon-arrow-left: "";
  --base-icon-arrow-right: "";
  --base-icon-arrow-up: "";
  --base-icon-basket: "";
  --base-icon-bike: "";
  --base-icon-book-light-full: "";
  --base-icon-books-light-full: "";
  --base-icon-chart: "";
  --base-icon-chat: "";
  --base-icon-check-circle: "";
  --base-icon-check: "";
  --base-icon-circle-book-open-light-full: "";
  --base-icon-circle-book-open-thin-full: "";
  --base-icon-clock: "";
  --base-icon-close: "";
  --base-icon-columns: "";
  --base-icon-copy: "";
  --base-icon-date: "";
  --base-icon-document-archive: "";
  --base-icon-download: "";
  --base-icon-drag-drop: "";
  --base-icon-edit: "";
  --base-icon-exclamation-circle: "";
  --base-icon-exclamation: "";
  --base-icon-expand: "";
  --base-icon-facebook: "";
  --base-icon-file-doc: "";
  --base-icon-file-document: "";
  --base-icon-file-image: "";
  --base-icon-file-pdf: "";
  --base-icon-file-powerpoint: "";
  --base-icon-file-video: "";
  --base-icon-file-xls: "";
  --base-icon-filter: "";
  --base-icon-gift: "";
  --base-icon-heart-filled: "";
  --base-icon-heart: "";
  --base-icon-home: "";
  --base-icon-image-light-full: "";
  --base-icon-info: "";
  --base-icon-instagram: "";
  --base-icon-invoice: "";
  --base-icon-language: "";
  --base-icon-lightbulb-on-light-full: "";
  --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-light-full: "";
  --base-icon-map-pin-light-full: "";
  --base-icon-map-pin: "";
  --base-icon-marketing: "";
  --base-icon-minus: "";
  --base-icon-mobile-light-full: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment: "";
  --base-icon-pen-to-square: "";
  --base-icon-phone: "";
  --base-icon-pinterest: "";
  --base-icon-play: "";
  --base-icon-plus: "";
  --base-icon-print: "";
  --base-icon-question: "";
  --base-icon-quickorder: "";
  --base-icon-register: "";
  --base-icon-reload: "";
  --base-icon-retoure: "";
  --base-icon-rma: "";
  --base-icon-school-light-full: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-settings: "";
  --base-icon-share-nodes-light-full: "";
  --base-icon-share: "";
  --base-icon-shipping: "";
  --base-icon-sorting: "";
  --base-icon-stairs-light-full: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star: "";
  --base-icon-subscriptions: "";
  --base-icon-tiktok: "";
  --base-icon-trash: "";
  --base-icon-twitter: "";
  --base-icon-upload: "";
  --base-icon-user: "";
  --base-icon-users: "";
  --base-icon-voice: "";
  --base-icon-volume-high-light-full: "";
  --base-icon-whatsapp: "";
  --base-icon-xing: "";
  --base-icon-youtube: "";
  --base-icon-zoom: "";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-circle-book-open-light-full:before {
  content: var(--base-icon-circle-book-open-light-full);
}

.icon-circle-book-open-thin-full:before {
  content: var(--base-icon-circle-book-open-thin-full);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-books-light-full'></i>

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

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

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

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

<i class='icon icon-circle-book-open-light-full'></i>

<i class='icon icon-circle-book-open-thin-full'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-image-light-full'></i>

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

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

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

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

<i class='icon icon-lightbulb-on-light-full'></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-light-full'></i>

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

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

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

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

<i class='icon icon-mobile-light-full'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-school-light-full'></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-nodes-light-full'></i>

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

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

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

<i class='icon icon-stairs-light-full'></i>

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

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

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

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

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

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

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

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

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

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

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

<i class='icon icon-volume-high-light-full'></i>

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

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

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

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

*/
:root {
  --main-color-white: #ffffff;
  --main-color-black: #333333;
  --main-color-gray-base: #738B97;
  --main-color-middle-gray: #DBE2E7;
  --main-color-dark-gray: #333333;
  --main-color-light-gray: #e5e5e5;
  --main-color-primary: #b70e0c;
  --main-color-primary-dark: #b70e0c;
  --main-color-primary-darken: #b70e0c;
  --main-color-secondary: #00101e;
  --main-color-secondary-dark: #00101e;
  --main-color-secondary-darken: #00101e;
  --main-color-tertiary: #004684;
  --main-color-tertiary-dark: #004684;
  --main-color-tertiary-darken: #004684;
  --main-color-action: #b70e0c;
  --main-color-danger: #b70e0c;
  --main-color-danger-dark: #b70e0c;
  --main-color-danger-darken: #b70e0c;
  --main-color-warning: #e6a500;
  --main-color-warning-dark: #e6a500;
  --main-color-warning-darken: #e6a500;
  --main-color-success: #1d7f3c;
  --main-color-success-dark: #1d7f3c;
  --main-color-success-darken: #1d7f3c;
  --main-color-info: #e5e5e5;
  --main-color-primary-contrast: #ffffff;
  --main-color-primary-dark-contrast: #ffffff;
  --main-color-primary-darken-contrast: #ffffff;
  --main-color-secondary-contrast: #ffffff;
  --main-color-secondary-dark-contrast: #ffffff;
  --main-color-secondary-darken-contrast: #ffffff;
  --main-color-tertiary-contrast: #ffffff;
  --main-color-tertiary-dark-contrast: #ffffff;
  --main-color-tertiary-darken-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: #333333;
  --main-color-warning-dark-contrast: #333333;
  --main-color-warning-darken-contrast: #333333;
  --main-color-success-contrast: #ffffff;
  --main-color-success-dark-contrast: #ffffff;
  --main-color-success-darken-contrast: #ffffff;
  --main-color-info-contrast: #333333;
  --main-font-family: Roboto, Helvetica, Arial, sans-serif;
  --main-font-weight-light: 300;
  --main-font-weight: 400;
  --main-font-weight-medium: 500;
  --main-font-weight-semibold: 600;
  --main-font-weight-bold: 700;
  --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: #b70e0c;
  --main-link-color-hover: #b70e0c;
  --main-link-color-contrast: #ffffff;
  --main-link-color-active: #333333;
  --main-link-color-active-contrast: #b70e0c;
}

.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: 1670px) {
  .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-addressbook);
}

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

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

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

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

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/roboto-v50-latin-300.woff2") format("woff2"), url("../fonts/roboto-v50-latin-300.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v50-latin-400.woff2") format("woff2"), url("../fonts/roboto-v50-latin-400.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/roboto-v50-latin-500.woff2") format("woff2"), url("../fonts/roboto-v50-latin-500.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/roboto-v50-latin-600.woff2") format("woff2"), url("../fonts/roboto-v50-latin-600.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/roboto-v50-latin-700.woff2") format("woff2"), url("../fonts/roboto-v50-latin-700.woff") format("woff");
}
@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;
}

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

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

hr {
  border: 0;
  border-top: 1px solid var(--main-color-light-gray);
  margin-top: 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>
<h2 class="highlighted">h2.highlighted</h2>
<h3 class="highlighted">h3.highlighted</h3>
<h4 class="highlighted">h4.highlighted</h4>
<h5 class="highlighted">h5.highlighted</h5>
<h6 class="highlighted">h6.highlighted</h6>

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

h1, .h1 {
  margin-bottom: clamp(10px, 1em, 30px);
  font-size: 2.4rem;
}
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3rem;
  }
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 3.12rem;
  }
}
@media (min-width: 1250px) {
  h1, .h1 {
    font-size: 3.24rem;
  }
}
@media (min-width: 1670px) {
  h1, .h1 {
    font-size: 3.6rem;
  }
}
h1.highlighted, .h1.highlighted {
  font-size: 3.4rem;
}
@media (min-width: 768px) {
  h1.highlighted, .h1.highlighted {
    font-size: 4.4rem;
  }
}
@media (min-width: 1024px) {
  h1.highlighted, .h1.highlighted {
    font-size: 4.6rem;
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .h1.highlighted {
    font-size: 4.8rem;
  }
}
@media (min-width: 1670px) {
  h1.highlighted, .h1.highlighted {
    font-size: 5.4rem;
  }
}

h2, .h2 {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  h2, .h2 {
    font-size: 2.5rem;
  }
}
@media (min-width: 1024px) {
  h2, .h2 {
    font-size: 2.56rem;
  }
}
@media (min-width: 1250px) {
  h2, .h2 {
    font-size: 2.62rem;
  }
}
@media (min-width: 1670px) {
  h2, .h2 {
    font-size: 2.8rem;
  }
}
h2.highlighted, .h2.highlighted {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  h2.highlighted, .h2.highlighted {
    font-size: 3.2rem;
  }
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted {
    font-size: 3.6rem;
  }
}
@media (min-width: 1670px) {
  h2.highlighted, .h2.highlighted {
    font-size: 4.2rem;
  }
}

h3, .h3 {
  font-size: 2rem;
}
@media (min-width: 768px) {
  h3, .h3 {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  h3, .h3 {
    font-size: 2rem;
  }
}
@media (min-width: 1250px) {
  h3, .h3 {
    font-size: 2rem;
  }
}
@media (min-width: 1670px) {
  h3, .h3 {
    font-size: 2rem;
  }
}

h4, .h4 {
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  h4, .h4 {
    font-size: 1.8rem;
  }
}
@media (min-width: 1024px) {
  h4, .h4 {
    font-size: 1.8rem;
  }
}
@media (min-width: 1250px) {
  h4, .h4 {
    font-size: 1.8rem;
  }
}
@media (min-width: 1670px) {
  h4, .h4 {
    font-size: 1.8rem;
  }
}

h5, .h5 {
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  h5, .h5 {
    font-size: 1.6rem;
  }
}
@media (min-width: 1024px) {
  h5, .h5 {
    font-size: 1.6rem;
  }
}
@media (min-width: 1250px) {
  h5, .h5 {
    font-size: 1.6rem;
  }
}
@media (min-width: 1670px) {
  h5, .h5 {
    font-size: 1.6rem;
  }
}

h6, .h6 {
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  h6, .h6 {
    font-size: 1.4rem;
  }
}
@media (min-width: 1024px) {
  h6, .h6 {
    font-size: 1.4rem;
  }
}
@media (min-width: 1250px) {
  h6, .h6 {
    font-size: 1.4rem;
  }
}
@media (min-width: 1670px) {
  h6, .h6 {
    font-size: 1.4rem;
  }
}

h1 > strong, h1 b, .h1 > strong, .h1 b {
  color: var(--main-color-primary);
  font-style: italic;
  letter-spacing: 1px;
}

.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: 1670px) {
  .d-xlg-none {
    display: none !important;
  }
}
@media (min-width: 1670px) {
  .d-xlg-block {
    display: block !important;
  }
}
@media (min-width: 1670px) {
  .d-xlg-inline {
    display: inline !important;
  }
}
@media (min-width: 1670px) {
  .d-xlg-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1670px) {
  .d-xlg-flex {
    display: flex !important;
  }
}
@media (min-width: 1670px) {
  .d-xlg-inline-flex {
    display: inline-flex !important;
  }
}
/*
Background

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

Styleguide Colors.Background
*/
/*
Border

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

Styleguide Colors.Border
*/
/*
Font

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

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

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

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

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

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

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

.bg--gray-base {
  background-color: #738B97;
  color: #333333;
}
.bg--gray-base a:not(.button), .bg--gray-base .link {
  color: #333333;
}

.border--gray-base {
  border-color: #738B97;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg--secondary {
  background-color: #00101e;
  color: #ffffff;
}
.bg--secondary a:not(.button), .bg--secondary .link {
  color: #ffffff;
}

.border--secondary {
  border-color: #00101e;
}

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

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

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

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

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

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

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

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

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

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

.bg--success {
  background-color: #1d7f3c;
  color: #ffffff;
}
.bg--success a:not(.button), .bg--success .link {
  color: #ffffff;
}

.border--success {
  border-color: #1d7f3c;
}

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

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

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

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

.bg--black .button--action {
  background: var(--main-color-white);
  color: var(--main-color-black);
}

.bg--action .button--action {
  background: var(--main-color-white);
  color: var(--main-color-black);
}

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

.color--tertiary {
  color: #004684;
}

.bg--secondary {
  border-radius: 4px;
}
.bg--secondary-light-10 {
  background: #EBF7E8;
  color: var(--main-color-black);
}
.bg--secondary-light-20 {
  background: #F0F9FF;
  color: var(--main-color-black);
}
.bg--secondary small {
  color: var(--main-color-black);
}

.bg--special {
  background: radial-gradient(circle at 20% 30%, rgba(183, 14, 12, 0.95) 0%, rgba(183, 14, 12, 0) 55%), radial-gradient(circle at 70% 40%, rgba(0, 70, 132, 0.9) 0%, rgba(0, 70, 132, 0) 60%), radial-gradient(circle at 55% 85%, rgb(0, 15, 31) 0%, rgba(0, 15, 31, 0) 65%), #000F1F;
  color: var(--main-color-white);
}

/*
Button

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

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

Styleguide Base.Buttons
*/
.weekly:hover .weekly__cta, .weekly:focus .weekly__cta, .weekly:active .weekly__cta, 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-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}

button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--main-color-black);
  border-radius: 4px;
  color: var(--main-color-black);
  cursor: pointer;
  background: transparent;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  font-size: var(--main-font-size-base);
  padding: 5px 15px 5px 15px;
  transition: ease-in-out 0.1s;
  position: relative;
  gap: 10px;
}
@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: 5px 15px 5px 15px;
  }
}
.button_disabled .icon,
.btn-disabled .icon,
button .icon,
.button .icon {
  font-size: 1.4em;
  line-height: 1;
  position: relative;
  margin-top: -1px;
}
.button_disabled .icon:first-child,
.btn-disabled .icon:first-child,
button .icon:first-child,
.button .icon:first-child {
  margin-left: -5px;
}
.button_disabled .icon:last-child,
.btn-disabled .icon:last-child,
button .icon:last-child,
.button .icon:last-child {
  margin-right: -5px;
}
.button_disabled:active,
.btn-disabled:active,
button:active,
.button:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}
button--primary,
.button--primary {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-color: var(--main-color-primary);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: transparent;
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
button--primary:active,
.button--primary:active {
  background: transparent;
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
button--action,
.button--action {
  background: var(--main-color-action);
  color: var(--main-color-white);
  border-color: var(--main-color-action);
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
  background: transparent;
  border-color: var(--main-color-action);
  color: var(--main-color-action);
}
button--action:active,
.button--action:active {
  background: transparent;
  border-color: var(--main-color-action);
  color: var(--main-color-action);
}
button--bordered,
.button--bordered {
  background: transparent;
  color: var(--main-color-black);
  border-color: var(--main-color-black);
}
button--bordered:hover,
button--bordered:focus,
.button--bordered:hover,
.button--bordered:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
}
button--bordered:active,
.button--bordered:active {
  background: transparent;
  border-color: var(--main-color-primary);
  color: var(--main-color-primary);
}
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: transparent;
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
button--danger:active,
.button--danger:active {
  background: transparent;
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
button--sm,
.button--sm {
  line-height: 1;
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 5;
    padding-bottom: 5;
    line-height: 1;
  }
}
.is-loading.button_disabled,
.is-loading.btn-disabled,
.is-success.button_disabled,
.is-success.btn-disabled,
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-loading,
button.is-success,
button.is-error,
.button.is-loading,
.button.is-success,
.button.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
  padding-right: 40px;
  padding-left: 10px;
}
.is-loading.button_disabled .icon,
.is-loading.btn-disabled .icon,
.is-success.button_disabled .icon,
.is-success.btn-disabled .icon,
.is-error.button_disabled .icon,
.is-error.btn-disabled .icon,
button.is-loading .icon,
button.is-success .icon,
button.is-error .icon,
.button.is-loading .icon,
.button.is-success .icon,
.button.is-error .icon {
  opacity: 0;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-loading:after,
button.is-success:after,
button.is-error:after,
.button.is-loading:after,
.button.is-success:after,
.button.is-error:after {
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: 0 -50%;
  font-size: 24px;
}
.is-loading.button_disabled,
.is-loading.btn-disabled,
button.is-loading,
.button.is-loading {
  cursor: wait;
  color: var(--main-color-black) !important;
}
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
button.is-loading:after,
.button.is-loading:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.is-success.button_disabled,
.is-success.btn-disabled,
button.is-success,
.button.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-black) !important;
}
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
button.is-success:after,
.button.is-success:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-error,
.button.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-white) !important;
}
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-error:after,
.button.is-error:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled] {
  background: var(--main-color-light-gray);
  color: var(--main-color-black);
  border-color: var(--main-color-light-gray);
  cursor: not-allowed;
}
button.disabled:hover, button.disabled:focus, button.disabled:active,
.button_disabled:hover,
.button_disabled:focus,
.button_disabled:active,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active,
.button[disabled]:hover,
.button[disabled]:focus,
.button[disabled]:active {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  color: var(--main-color-black);
}

@keyframes scaleRequestIconBtn {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
  min-height: 40px;
}
.button_disabled .icon:first-child,
.btn-disabled .icon:first-child,
button .icon:first-child,
.button .icon:first-child {
  margin-left: 0;
}
.button_disabled .icon:last-child,
.btn-disabled .icon:last-child,
button .icon:last-child,
.button .icon:last-child {
  margin-right: 0;
}
button--white,
.button--white {
  border-color: var(--main-color-white);
  background: transparent;
  color: var(--main-color-white);
}
button--white:hover,
button--white:active,
button--white:focus,
.button--white:hover,
.button--white:active,
.button--white:focus {
  border-color: var(--main-color-primary);
  background: var(--main-color-primary);
  color: var(--main-color-white);
}

/*
Button Link

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

Styleguide Base.Button Link
*/
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: underline;
}
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 {
  right: 0;
}

.buttonLink {
  display: inline-flex;
  color: var(--main-color-black);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  padding: 0;
  padding-right: 30px;
  border: 0;
  text-decoration: underline;
}
.buttonLink:after {
  content: var(--base-icon-angle-right);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: 0.1s ease-in-out;
}
/*
Inputs

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

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

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

input,
select,
textarea,
.customSelect__selected,
.selectBody__fakeOption {
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 1px solid var(--main-color-light-gray);
  border-radius: 4px;
  box-shadow: none;
  display: block;
  width: 100%;
  line-height: 1;
  font-size: clamp(16px, var(--main-font-size-base), 20px);
  padding: 5px 15px 5px 15px;
}
@media (min-width: 768px) {
  input,
  select,
  textarea,
  .customSelect__selected,
  .selectBody__fakeOption {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 5px 15px 5px 15px;
  }
}
input:not(:disabled):active, input:not(:disabled):focus,
select:not(:disabled):active,
select:not(:disabled):focus,
textarea:not(:disabled):active,
textarea:not(:disabled):focus,
.customSelect__selected:not(:disabled):active,
.selectBody__fakeOption:not(:disabled):active,
.customSelect__selected:not(:disabled):focus,
.selectBody__fakeOption:not(:disabled):focus {
  border-color: var(--main-color-black);
}
input.error,
select.error,
textarea.error,
.error.customSelect__selected,
.error.selectBody__fakeOption {
  border-color: var(--main-color-danger);
}
input:disabled,
select:disabled,
textarea:disabled,
.customSelect__selected:disabled,
.selectBody__fakeOption:disabled {
  background-color: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}

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

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

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

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

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

.selectBody:after, .customSelect__selected:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 15px;
  top: 50%;
  font-size: 18px;
  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__fakeOption {
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selectBody select, .customSelect__selected select {
  color: var(--main-color-black);
  border-color: var(--main-color-light-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-black);
}
.selectBody.disabled select, .disabled.customSelect__selected select {
  cursor: default;
}

form {
  margin: 0;
}

input,
select,
.customSelect__selected,
.selectBody__fakeOption {
  min-height: 40px;
}

textarea {
  min-height: 80px;
}

/*
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-light-gray);
  border-radius: 4px;
  box-shadow: none;
  width: 100%;
  line-height: 1;
  font-size: clamp(16px, var(--main-font-size-base), 20px);
  padding: 5px 15px 5px 15px;
  min-height: 13px;
  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: 5px 15px 5px 15px;
    min-height: 32px;
  }
}
.fileBody input:not(:disabled):active + span, .fileBody input:not(:disabled):focus + span {
  border-color: var(--main-color-black);
}
.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: 13px;
  min-height: 13px;
  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: 32px;
    width: 32px;
  }
}

/*
Radioboxes

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

Styleguide Form.Radioboxes
*/
/*
Radioboxes Switch

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

Styleguide Form.Radioboxes Switch
*/
/*
Checkboxes

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

Styleguide Form.Checkboxes
*/
/*
Checkboxes Switch

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

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

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

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

.specialcheckbox input {
  width: 40px;
  height: 40px;
}

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

picture {
  max-width: 100%;
}

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

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

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

.banner .contentImage, .contentBox.contentBox--textinbox {
  position: relative;
  overflow: hidden;
}
.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;
}

video {
  display: block;
}
video.has-border {
  border: 2px solid var(--main-color-secondary);
  border-radius: 8px;
}

body.is-bg--special video.has-border {
  border-color: transparent;
}

/*
Tables

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


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

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

tr:first-child td, tr:first-child th {
  border-top: 1px solid var(--main-color-light-gray);
}

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

table {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
table tr td, table tr th {
  border: 1px solid var(--main-color-gray-base) !important;
  padding: 5px;
}
@media (max-width: 1249px) {
  table tr td, table tr th {
    font-size: var(--main-font-size-small);
  }
}
@media (min-width: 1250px) {
  table tr td, table tr th {
    font-size: var(--main-font-size-base);
    padding: 10px;
  }
}
table tr:first-child td, table tr:first-child th {
  font-weight: var(--main-font-weight-medium);
  background: var(--main-color-middle-gray);
}

/*
Fake Tables

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


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

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

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

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

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

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

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

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

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

/*
Embeds

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

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

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

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

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

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

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

/*
Paddings

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767.98px) {
  .p--large {
    padding: 30px;
  }
  .pt--large {
    padding-top: 30px;
  }
  .pr--large {
    padding-right: 30px;
  }
  .pb--large {
    padding-bottom: 30px;
  }
  .pl--large {
    padding-left: 30px;
  }
  .padding--large {
    padding: 30px;
  }
  .paddingTop--large {
    padding-top: 30px;
  }
  .paddingRight--large {
    padding-right: 30px;
  }
  .paddingBottom--large {
    padding-bottom: 30px;
  }
  .paddingLeft--large {
    padding-left: 30px;
  }
}
@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: 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 (max-width: 767.98px) {
  .xs-padding {
    padding-bottom: 30px;
  }
  .xs-padding-base {
    padding-bottom: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sm-padding {
    padding-bottom: 30px;
  }
  .sm-padding-base {
    padding-bottom: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .md-padding {
    padding-bottom: 30px;
  }
  .md-padding-base {
    padding-bottom: 10px;
  }
}
@media (min-width: 1250px) and (max-width: 1669.98px) {
  .lg-padding {
    padding-bottom: 30px;
  }
  .lg-padding-base {
    padding-bottom: 10px;
  }
}
@media (min-width: 1670px) {
  .xlg-padding {
    padding-bottom: 30px;
  }
  .xlg-padding-base {
    padding-bottom: 10px;
  }
}
/*
Margins

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

.container {
  max-width: 1670px;
}

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

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

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

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

.container,
.container-fluid,
.container--full {
  padding-right: 30px;
  padding-left: 30px;
}

/*
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: -15px;
  margin-left: -15px;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.row > *.marginBottom, .row > *.mb--base {
  margin-bottom: 30px;
}

.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: 1670px) {
  .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: 1670px) {
  .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: -7.5px;
  margin-right: -7.5px;
}
.row.gridGap--small > * {
  padding-left: 7.5px;
  padding-right: 7.5px;
}
.row.gridGap--small > *.marginBottom {
  margin-bottom: 15px;
}

@media (min-width: 1860px) {
  .row.gridGap--large {
    margin-left: -30px;
    margin-right: -30px;
  }
  .row.gridGap--large > * {
    padding-left: 30px;
    padding-right: 30px;
  }
  .row.gridGap--large > *.marginBottom {
    margin-bottom: 60px;
  }
}

.row.gridGap--xlarge {
  margin-left: -30px;
  margin-right: -30px;
}
.row.gridGap--xlarge > * {
  padding-left: 30px;
  padding-right: 30px;
}
@media (min-width: 1920px) {
  .row.gridGap--xlarge {
    margin-left: -60px;
    margin-right: -60px;
  }
  .row.gridGap--xlarge > * {
    padding-left: 60px;
    padding-right: 60px;
  }
  .row.gridGap--xlarge > *.marginBottom {
    margin-bottom: 60px;
  }
}

@media (min-width: 1370px) {
  .container--small > .row.gridGap--large {
    margin-left: -30px;
    margin-right: -30px;
  }
  .container--small > .row.gridGap--large > * {
    padding-left: 30px;
    padding-right: 30px;
  }
  .container--small > .row.gridGap--large > *.marginBottom {
    margin-bottom: 60px;
  }
}

@media (min-width: 1144px) {
  .container--xsmall > .row.gridGap--large {
    margin-left: -30px;
    margin-right: -30px;
  }
  .container--xsmall > .row.gridGap--large > * {
    padding-left: 30px;
    padding-right: 30px;
  }
  .container--xsmall > .row.gridGap--large > *.marginBottom {
    margin-bottom: 60px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fullwidth {
  width: 100%;
}

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

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

.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.10
 * 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: June 28, 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: 32px;
  width: 32px;
  height: 32px;
  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;
}

.lottieContainer {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/*
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: 4px;
  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: #b70e0c;
  color: #ffffff;
}
.alert--secondary {
  background: #00101e;
  color: #ffffff;
}
.alert--action {
  background: #b70e0c;
  color: #ffffff;
}
.alert--danger {
  background: #b70e0c;
  color: #ffffff;
}
.alert--warning {
  background: #e6a500;
  color: #333333;
}
.alert--success {
  background: #1d7f3c;
  color: #ffffff;
}

.buttonRow, .buttonRowTop, .buttonRowBottom {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: -5px;
  margin-right: -5px;
}
.buttonRow .button, .buttonRowTop .button, .buttonRowBottom .button,
.buttonRow .buttonLink,
.buttonRowTop .buttonLink,
.buttonRowBottom .buttonLink {
  margin: 10px 5px;
}
@media (max-width: 481px) {
  .buttonRow, .buttonRowTop, .buttonRowBottom {
    text-align: center;
  }
  .buttonRow .pull-left, .buttonRowTop .pull-left, .buttonRowBottom .pull-left,
  .buttonRow .pull-right,
  .buttonRowTop .pull-right,
  .buttonRowBottom .pull-right {
    float: none !important;
  }
  .buttonRow .buttonLink, .buttonRowTop .buttonLink, .buttonRowBottom .buttonLink,
  .buttonRow .button,
  .buttonRowTop .button,
  .buttonRowBottom .button {
    min-width: 220px;
  }
}

.buttonRowBottom {
  margin-bottom: 0;
}
.buttonRowBottom .buttonLink,
.buttonRowBottom .button {
  margin-bottom: 0;
}

.buttonRowTop {
  margin-top: 0;
}
.buttonRowTop .buttonLink,
.buttonRowTop .button {
  margin-top: 0;
}

.linklist .button {
  min-width: 0;
}
.linklist.table_area .table_row .table_cell {
  padding-top: 10px;
  padding-bottom: 10px;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover {
  cursor: pointer;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover .table_cell {
  background-color: var(--main-color-light-gray);
}

@media (max-width: 767px) {
  .linklist .read_more {
    margin-top: 8px;
  }
  .linklist.table_area .table_row {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .linklist.table_area .table_row:first-child {
    padding-top: 0;
  }
  .linklist.table_area .table_row .table_cell {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/*
Lists

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

.checkList - Checklist

Styleguide Base.Lists
*/
ul,
ol {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}
ul li,
ol li {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}

ul.checkList {
  list-style: none;
  padding-left: 25px;
}
ul.checkList li {
  position: relative;
}
ul.checkList li:before {
  content: var(--base-icon-check);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: -25px;
  font-size: 20px;
  margin-top: -4px;
}

#overlay {
  display: none;
  background-color: rgba(0, 16, 30, 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;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  margin-left: 5px;
  margin-right: 5px;
  color: var(--main-color-black);
  cursor: not-allowed;
  background: var(--main-color-white);
  padding: 0;
  border: 0;
  border-radius: 0;
}
.pagination__item--active {
  background: var(--main-color-primary);
  color: var(--main-color-white) !important;
}
.pagination .icon {
  font-size: 24px;
}

button.pagination__item,
a.pagination__item {
  color: var(--main-color-black);
  cursor: pointer;
}
button.pagination__item:hover, button.pagination__item:focus, button.pagination__item:active,
a.pagination__item:hover,
a.pagination__item:focus,
a.pagination__item:active {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}

.pagination--bottom {
  display: flex;
  flex-direction: column;
}
.pagination--bottom .pagination {
  order: 2;
}

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

.stickyButton {
  position: absolute;
  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: 99;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -ms-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  animation: pulsieren 1.1s ease-in-out 10;
  left: 30px;
  bottom: 30px;
  border-radius: 50%;
}
@media (min-width: 1250px) {
  .stickyButton {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 1249px) {
  .stickyButton {
    left: 15px;
    bottom: 15px;
  }
}
.stickyButton .icon {
  font-size: 4rem;
}
@media (min-width: 1250px) {
  .stickyButton .icon {
    font-size: 6rem;
  }
}
.stickyButton:hover {
  background-color: var(--main-color-primary-darken);
}

@keyframes pulsieren {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
.tabs {
  margin-bottom: 20px;
}
.tabs .tabs_item {
  float: left;
  padding: 5px 20px;
  border: 1px solid var(--main-color-light-gray);
}
.tabs .tabs_item:hover {
  background-color: var(--main-color-light-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: " ";
}

/*
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-primary);
  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-white);
  border-radius: 4px;
  line-height: 1;
  text-align: center;
}
.tag:hover, .tag.is-active {
  background: var(--main-color-white);
  color: var(--main-color-primary);
  text-decoration: none;
}
.tag:focus, .tag:active {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}
.tag .icon {
  font-size: 1.4em;
  margin-left: 5px;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.tag.is-loading, .tag.is-success, .tag.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  color: var(--main-color-black) !important;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.tag.is-loading .icon, .tag.is-success .icon, .tag.is-error .icon {
  opacity: 0;
}
.tag.is-loading:after, .tag.is-success:after, .tag.is-error:after {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: -50% -50%;
  font-size: 20px;
}
.tag.is-loading {
  cursor: wait;
  color: var(--main-color-middle-gray) !important;
}
.tag.is-loading:after {
  content: var(--base-icon-loading);
  color: var(--main-color-black);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.tag.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-success) !important;
}
.tag.is-success:after {
  content: var(--base-icon-check);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.tag.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-danger) !important;
}
.tag.is-error:after {
  content: var(--base-icon-close);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

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

.tag {
  background: var(--main-color-white);
  border-color: var(--main-color-secondary);
  color: var(--main-color-secondary);
  border: 1px solid var(--main-color-secondary);
  border-radius: 4px;
  padding: 5px;
  font-size: 12px;
  font-weight: var(--main-font-weight);
}
.tag:hover, .tag:active, .tag:focus {
  border-color: var(--main-color-primary);
  background: var(--main-color-primary);
  color: var(--main-color-white);
}

.tags {
  max-height: 200px;
  overflow-y: auto;
  gap: 5px;
}
@media (max-width: 1249px) {
  .tags {
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media (max-width: 1023px) {
  .tags {
    max-height: 100%;
  }
}
.tags::-webkit-scrollbar {
  width: 4px;
}
.tags::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--main-color-light-gray);
}

/*
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;
}
.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: #DBE2E7;
  color: #333333;
  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: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.iconbarIcon__count.is-action {
  display: flex !important;
  animation: scaleRequestIconBigger 0.5s forwards ease-in-out;
}

.iconbar {
  display: flex;
  align-items: flex-end;
}
@media (min-width: 1250px) {
  .iconbar {
    margin-left: -10px;
    margin-right: -10px;
  }
  .iconbar .iconbarIcon {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.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: 20px 30px;
  display: none;
  flex-direction: column;
  width: 250px;
  max-width: 100vw;
  position: absolute;
  top: 100%;
  bottom: auto;
  right: 50%;
  max-height: 70vh;
  border-radius: 4px;
  transform: translateX(5%);
  margin-top: 20px;
  filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.1));
}
.iconbarHover:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent var(--main-color-white) transparent;
  border-style: solid;
  position: absolute;
  right: 30px;
  bottom: 100%;
}
@media (max-width: 767px) {
  .iconbarHover {
    display: none;
  }
}
.iconbarHover--bigger {
  width: 320px;
  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;
  border-bottom: 1px solid var(--main-color-light-gray);
}
.iconbarHover__navigation li:last-child {
  border-bottom: 0;
}
.iconbarHover__navigation li > span,
.iconbarHover__navigation li > a {
  display: flex;
  align-items: center;
  color: var(--main-color-black);
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}
.iconbarHover__navigation li > span:hover, .iconbarHover__navigation li > span:focus, .iconbarHover__navigation li > span:active, .iconbarHover__navigation li > span.is-active,
.iconbarHover__navigation li > a:hover,
.iconbarHover__navigation li > a:focus,
.iconbarHover__navigation li > a:active,
.iconbarHover__navigation li > a.is-active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.iconbarHover__navigation li > span .icon,
.iconbarHover__navigation li > a .icon {
  font-size: 1.4em;
  margin-right: 10px;
}
.iconbarHover__headline {
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.iconbarHover__body {
  overflow: hidden;
  overflow-y: auto;
  padding-right: 10px;
  margin-right: -10px;
}
.iconbarHover__footer {
  padding-top: 20px;
}

.iconbarItem {
  position: relative;
}
@media (min-width: 768px) {
  .iconbarItem.hoverintent .iconbarHover, .iconbarItem.showIconbarHover .iconbarHover {
    display: flex;
  }
}

/*
Iconlist

Markup:
<div class="iconList">
  <a href="#"><i class="icon icon-facebook"></i></a>
  <a href="#"><i class="icon icon-twitter"></i></a>
  <a href="#"><i class="icon icon-youtube"></i></a>
  <a href="#"><i class="icon icon-tiktok"></i></a>
  <a href="#"><i class="icon icon-instagram"></i></a>
  <a href="#"><i class="icon icon-pinterest"></i></a>
</div>

Styleguide Components.Iconlist
*/
.iconList {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-bottom: -5px;
}
.iconList a {
  color: var(--main-color-black);
  text-decoration: none;
  margin-right: 5px;
  margin-bottom: 5px;
}
.iconList a:hover, .iconList a:focus, .iconList a:active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.iconList .icon {
  font-size: 32px;
  line-height: 1;
  display: block;
}

/*
Iconbox

Markup:
<div class="iconbox">
    <i class="icon icon-shipping"></i>Kostenloser Versand ab 50 €
    <small>Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €</small>
</div>

Styleguide Components.Iconbox
*/
.iconbox {
  position: relative;
  padding-top: 40px;
}
@media (min-width: 768px) {
  .iconbox {
    padding-left: 50px;
    padding-top: 0;
  }
}
.iconbox .icon {
  font-size: 28px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 768px) {
  .iconbox .icon {
    font-size: 38px;
    width: 40px;
    height: 40px;
  }
}
.iconbox small {
  display: block;
  color: var(--main-color-dark-gray);
}

/*
Input Groups

Markup:
<div class="inputGroup {{modifier_class}}">
  <input type="text" />
</div>

.is-focus - Focus

Styleguide Form.Input Groups
*/
/*
Input Groups Addons

Markup:
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
  <input type="text" />
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <button type="submit" class="inputGroup__addon"><i class="icon icon-search"></i></button>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon {{modifier_class}}">
  <input type="text" />
  <span class="inputGroup__addon inputGroup__addon--clickable"><i class="icon icon-search"></i></span>
</div>

.is-focus - Focus
.is-inactive - Inactive

Styleguide Form.Input Groups Addons
*/
.inputGroup {
  display: flex;
  width: 100%;
  transition: 0.2s ease-in-out;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  position: relative;
}
.inputGroup input,
.inputGroup .input {
  flex-grow: 1;
  transition: 0.2s ease-in-out;
}
.inputGroup input:not(:last-child),
.inputGroup .input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputGroup__addon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--main-color-light-gray);
  overflow: hidden;
  text-decoration: none;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .inputGroup__addon {
    height: 32px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.inputGroup__addon:first-child {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputGroup__addon:last-child {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon .button {
  min-width: 0;
  border-radius: 0;
  margin: -1px;
  min-height: 0;
}
.inputGroup__addon .icon {
  line-height: 1;
  display: block;
  font-size: 20px;
}
@media (min-width: 768px) {
  .inputGroup__addon .icon {
    font-size: 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: 13px;
  background: transparent;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .inputGroup button.inputGroup__addon {
    min-width: 32px;
  }
}
.inputGroup button.inputGroup__addon:hover, .inputGroup button.inputGroup__addon:focus, .inputGroup button.inputGroup__addon:active {
  background: var(--main-color-primary);
  color: var(--main-color-primary-darken);
}
.inputGroup button.inputGroup__addon i {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inputGroup--infieldAddon .inputGroup__addon {
  position: absolute;
  height: 100%;
  border: 0;
  background: transparent !important;
}
.inputGroup--infieldAddon .inputGroup__addon:first-child {
  left: 0;
}
.inputGroup--infieldAddon .inputGroup__addon:last-child {
  right: 0;
}
.inputGroup--infieldAddon > input:first-child {
  padding-right: 13px;
  border-radius: 0;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:first-child {
    padding-right: 32px;
  }
}
.inputGroup--infieldAddon > input:last-child {
  padding-left: 13px;
  border-radius: 0;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:last-child {
    padding-left: 32px;
  }
}
.inputGroup.is-focus {
  border-color: var(--main-color-black);
}
.inputGroup.is-focus > input,
.inputGroup.is-focus > .input,
.inputGroup.is-focus select {
  background: var(--main-color-white);
  border-color: var(--main-color-black);
}
.inputGroup.is-focus .inputGroup__addon {
  background: var(--main-color-white);
  border-color: var(--main-color-black);
}
.inputGroup.is-inactive .inputGroup__addon {
  display: none;
}

/*
Infield Input Groups

Markup:
<div class="infieldInputGroup">
  <label for="id">Label</label>
  <div class="inputGroup {{modifier_class}}">
    <input type="text" id="id" />
  </div>
</div><br/>
<strong>Filled</strong><br/><br/>
<div class="infieldInputGroup is-filled">
  <label for="id">Label</label>
  <div class="inputGroup {{modifier_class}}">
    <input type="text" id="id" value="Text" />
  </div>
</div>

Styleguide Form.Infield Input Groups
*/
.infieldInputGroup {
  position: relative;
}
.infieldInputGroup > label {
  position: absolute;
  top: 50%;
  transform: translate(0, calc(-50% - 1px));
  left: 15px;
  margin-top: 1px;
  line-height: 1;
  transition: 0.2s ease-in-out;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
}
@media (min-width: 768px) {
  .infieldInputGroup > label {
    left: 15px;
    line-height: 20px;
    max-width: calc(100% - 30px);
  }
}
.infieldInputGroup:has(.inputGroup--infieldAddon) > label {
  left: 52px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon) > label {
    left: 59.5px;
  }
}
.infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
  left: 15px;
}
@media (min-width: 768px) {
  .infieldInputGroup:has(.inputGroup--infieldAddon).is-filled > label, .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus > label {
    left: 15px;
  }
}
.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%;
}

.mb-0 {
  margin-bottom: 0;
}

.infieldInputGroup label[for=input_message] {
  top: 25px;
}

/*
Action Icon

Markup:
<button class="actionIcon {{modifier_class}}"><i class="icon icon-favorites"></i></button>

:hover - Hover
:focus - Focus
.is-loading - Loading
.is-success - Success
.is-error - Error

Styleguide Components.Action Icon
*/
.actionIcon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  color: var(--main-color-black);
  text-decoration: none;
  position: relative;
  border: 0;
  background: var(--main-color-white);
  border-radius: 50%;
  padding: 0;
  margin: 0;
}
.actionIcon:hover {
  background: var(--main-color-white);
  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: var(--main-color-white);
  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;
}

/*
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: 8px;
    overflow: hidden;
    transform: translateY(-20%);
  }
}
@media (min-width: 1250px) {
  .modal__dialog {
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.2);
  }
}
.modal__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease-in;
  opacity: 1;
}
.modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.6;
  text-decoration: none;
  color: var(--main-color-black);
  border-radius: 50%;
  text-align: center;
}
.modal__close:hover, .modal__close:focus {
  color: var(--main-color-black);
  text-decoration: none;
  background: var(--main-color-middle-gray);
}
.modal__close i {
  display: block;
}
.modal__close i:before {
  line-height: 1;
  display: block;
}
.modal__header {
  padding: 20px 40px 0 20px;
}
@media (min-width: 768px) {
  .modal__header {
    padding: 30px 50px 0 30px;
  }
}
.modal__body {
  padding: 20px;
}
@media (min-width: 768px) {
  .modal__body {
    padding: 30px;
    padding-top: 0;
  }
}
.modal__footer {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media (min-width: 768px) {
  .modal__footer {
    padding: 30px;
  }
}
.modal__footer:not(.modal__footer--bg) {
  padding-top: 0;
}
.modal__title {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
  margin-bottom: 1em;
}
.modal__title small {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight);
}
.modal--info .modal__header, .modal--error .modal__header, .modal--success .modal__header {
  padding: 0;
}
.modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
  text-align: center;
  max-width: 420px;
  padding-top: 50px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
    padding-top: 130px;
  }
}
.modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
  content: var(--base-icon-exclamation);
  font-family: "icons", Helvetica, Arial, sans-serif;
  border: 2px solid var(--main-color-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  border-radius: 50%;
  color: var(--main-color-warning);
  transform: translateX(-50%);
  line-height: 1;
  top: 20px;
  font-size: 24px;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
    top: 40px;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
}
.modal--error .modal__dialog:before {
  content: var(--base-icon-exclamation);
  border-color: var(--main-color-danger);
  color: var(--main-color-danger);
}
.modal--success .modal__dialog:before {
  content: var(--base-icon-check);
  border-color: var(--main-color-success);
  color: var(--main-color-success);
}
.modal--flyout {
  padding: 0;
  width: 320px;
  transition: all 0.3s ease;
}
.modal--flyout .modal__dialog {
  height: 100%;
  height: 100svh;
  overflow: hidden;
  overflow-y: auto;
  transform: none;
}
.modal--flyoutRight {
  position: fixed;
  right: -320px;
  left: auto;
}
.modal--flyoutRight.open {
  right: 0;
}
.modal--flyoutRight .modal__dialog {
  margin-left: auto;
  margin-right: 0;
}
.modal--flyoutLeft {
  position: fixed;
  left: -320px;
  margin-right: auto;
  margin-left: 0;
  right: auto;
}
.modal--flyoutLeft.open {
  left: 0;
}
.modal--flyoutLeft .modal__dialog {
  margin-right: auto;
  margin-left: 0;
}
.modal--loading .modal__title {
  opacity: 0;
}
.modal--loading .modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.modal--loading .modal__body .icon {
  font-size: 60px;
  animation: rotation 1s infinite linear;
}
.modal--lg .modal__dialog {
  max-width: 1200px;
}
.modal--md .modal__dialog {
  max-width: 900px;
}
.modal--sm .modal__dialog {
  max-width: 600px;
}
.modal--xs .modal__dialog {
  max-width: 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(0, 16, 30, 0.95);
  z-index: 106;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

body.modal-open,
html.modal-open {
  overflow: hidden;
}
@media (min-width: 1024px) {
  body.modal-open,
  html.modal-open {
    padding-right: 6px;
  }
}

/*
Radio List

Markup:
<div class="radioList {{modifier_class}}">
        <label for="radio1" class="radioListItem">
            <input type="radio" name="radio" id="radio1" value="1" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
        <label for="radio2" class="radioListItem">
            <input type="radio" name="radio" id="radio2" value="2" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
</div>

radioList--small - Small

Styleguide Components.Radio List
*/
.radioListItem {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 10px 10px 60px;
  border: 1px solid var(--main-color-light-gray);
  border-radius: 4px;
  cursor: pointer;
  min-height: 65px;
}
.radioListItem:hover, .radioListItem:focus, .radioListItem:active {
  border-color: var(--main-color-black);
  z-index: 1;
}
.radioListItem:has(input:focus) {
  border-color: var(--main-color-black);
}
.radioListItem__image {
  padding-left: 20px;
}
.radioListItem__image img {
  aspect-ratio: 4/3;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.radioListItem__headline {
  font-size: var(--main-font-size-base);
}
.radioListItem__summary {
  display: block;
  margin-top: 5px;
}
.radioListItem__text {
  flex-grow: 1;
}
.radioListItem input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.radioListItem input + i {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--main-color-white);
  border: 1px solid var(--main-color-light-gray);
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.radioListItem input + i:after {
  content: "";
  background: var(--main-color-primary);
  pointer-events: none;
  position: absolute;
  width: 10px;
  height: 10px;
  left: 4px;
  top: 4px;
  opacity: 0;
  transition: opacity 0.1s ease-in;
  background-color: var(--main-color-black);
  border-radius: 50%;
  display: block;
}
.radioListItem input:focus + i {
  border-color: var(--main-color-black);
}
.radioListItem input:checked + i:after {
  opacity: 1;
}

.radioList {
  margin-bottom: -20px;
}
.radioList .radioListItem {
  margin-bottom: 20px;
}
.radioList--small {
  margin: 0;
}
.radioList--small .radioListItem {
  margin-bottom: 0;
  border-radius: 0;
  padding: 5px 10px 5px 40px;
  min-height: 53px;
  margin-top: -1px;
}
.radioList--small .radioListItem:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-top: 0;
}
.radioList--small .radioListItem:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.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: 0;
  margin-right: 5px;
}
.linkWithIcon .icon:last-child {
  margin: 0;
  margin-left: 5px;
}
.linkWithIcon:hover, .linkWithIcon:focus, .linkWithIcon:active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}
.linkWithIcon.is-loading, .linkWithIcon.is-success, .linkWithIcon.is-error {
  color: var(--main-color-middle-gray) !important;
  cursor: not-allowed;
  position: relative;
  pointer-events: none;
  background: transparent !important;
}
.linkWithIcon.is-loading:after, .linkWithIcon.is-success:after, .linkWithIcon.is-error:after {
  display: none;
}
.linkWithIcon.is-loading:before, .linkWithIcon.is-success:before, .linkWithIcon.is-error:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 20px;
  margin-top: -10px;
}
.linkWithIcon.is-loading .icon, .linkWithIcon.is-success .icon, .linkWithIcon.is-error .icon {
  opacity: 0;
}
.linkWithIcon.is-loading {
  cursor: wait;
}
.linkWithIcon.is-loading:before {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.linkWithIcon.is-success {
  color: var(--main-color-success) !important;
}
.linkWithIcon.is-success:before {
  content: var(--base-icon-check);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}
.linkWithIcon.is-error {
  color: var(--main-color-danger) !important;
}
.linkWithIcon.is-error:before {
  content: var(--base-icon-close);
  animation: scaleRequestIcon 1s forwards ease-in-out;
}

button.linkWithIcon {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--main-color-black);
  text-decoration: none;
  cursor: pointer;
}
button.linkWithIcon:hover, button.linkWithIcon:focus, button.linkWithIcon:active {
  text-decoration: none;
  color: var(--main-link-color-hover);
}

.linkWithIcon > span {
  color: var(--main-link-color);
  text-decoration: none;
}
.linkWithIcon:hover, .linkWithIcon:active, .linkWithIcon:focus {
  color: var(--main-link-color-hover);
}
.linkWithIcon:hover > span, .linkWithIcon:active > span, .linkWithIcon:focus > span {
  text-decoration: underline;
}

.tooltip {
  --tooltip-zindex: 104;
  --tooltip-max-width: 320px;
  --tooltip-padding-x: 10px;
  --tooltip-padding-y: 10px;
  --tooltip-margin: ;
  --tooltip-font-size: var(--main-font-size-base);
  --tooltip-color: var(--main-color-white);
  --tooltip-bg: var(--main-color-primary);
  --tooltip-border-radius: 4px;
  --tooltip-opacity: 1;
  --tooltip-arrow-width: 0.8rem;
  --tooltip-arrow-height: 0.4rem;
  z-index: var(--tooltip-zindex);
  display: block;
  margin: var(--tooltip-margin);
  font-family: var(--main-font-family);
  font-style: normal;
  font-weight: var(--main-font-weight);
  line-height: var(--main-line-height);
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--tooltip-arrow-width);
  height: var(--tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.tooltip-top .tooltip-arrow, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-top .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--tooltip-bg);
}

/* rtl:begin:ignore */
.tooltip-end .tooltip-arrow, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * var(--tooltip-arrow-height));
  width: var(--tooltip-arrow-height);
  height: var(--tooltip-arrow-width);
}
.tooltip-end .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-bottom .tooltip-arrow, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-bottom .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
  border-bottom-color: var(--tooltip-bg);
}

/* rtl:begin:ignore */
.tooltip-start .tooltip-arrow, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * var(--tooltip-arrow-height));
  width: var(--tooltip-arrow-height);
  height: var(--tooltip-arrow-width);
}
.tooltip-start .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--tooltip-arrow-width) * 0.5) 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
  border-left-color: var(--tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  color: var(--tooltip-color);
  text-align: center;
  background-color: var(--tooltip-bg);
  border-radius: var(--tooltip-border-radius);
}

.tooltip {
  display: inline-block;
  opacity: 1;
  cursor: pointer;
}
.tooltip > span {
  color: var(--main-link-color);
  text-decoration: none;
}
.tooltip > i {
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.tooltip:hover, .tooltip:active, .tooltip:focus {
  color: var(--main-link-color-hover);
}
.tooltip:hover > span, .tooltip:active > span, .tooltip:focus > span {
  text-decoration: underline;
}

.sectionWelcome {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--main-color-secondary);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: var(--main-color-white);
  padding: 0 10px;
  line-height: 40px;
  height: 40px;
  font-size: var(--main-font-size-big);
  margin-bottom: 40px;
  white-space: nowrap;
}
@media (max-width: 1249px) {
  .sectionWelcome {
    top: 300px;
    font-size: var(--main-font-size-base);
  }
}
@media (max-width: 767px) {
  .sectionWelcome {
    top: 150px;
    font-size: var(--main-font-size-small);
    height: 30px;
    line-height: 30px;
  }
}

figure figcaption {
  font-size: var(--main-font-size-small);
  font-weight: var(--main-font-weight);
  color: var(--main-color-gray-base);
}

/*
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: 4px;
  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: 2rem;
}
.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);
}

.contentBox {
  border-radius: 8px;
}
.contentBox .contentText h1, .contentBox .contentText .h1, .contentBox .contentText h2, .contentBox .contentText .h2, .contentBox .contentText h3, .contentBox .contentText .h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

/*
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-angle-right"></i>
    <li>
    <a href="#">Level 2</a>
    </li>
    <i class="icon icon-angle-right"></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: 1249px) {
  .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 4px;
}
.breadcrumb a i {
  display: block;
  margin: 0;
  font-size: 1.2em;
}
.breadcrumb .current {
  color: var(--main-color-primary);
}
.breadcrumb .current a {
  color: var(--main-color-primary);
}

.breadcrumbBackbutton {
  color: var(--main-color-black);
  display: inline-flex;
  align-items: center;
}
.breadcrumbBackbutton:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}
.breadcrumbBackbutton i {
  margin-right: 4px;
}
@media (max-width: 1249px) {
  .breadcrumbBackbutton {
    margin-top: 10px;
  }
}

.breadcrumbWrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: var(--main-font-size-base);
  line-height: 1;
}
@media (min-width: 1250px) {
  .breadcrumbWrapper {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.breadcrumbWrapper a {
  color: var(--main-color-black);
  text-decoration: none;
}
.breadcrumbWrapper a:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}

.breadcrumbWrapper {
  margin-top: 15px;
  margin-bottom: 15px;
}
@media (min-width: 1250px) {
  .breadcrumbWrapper {
    margin-bottom: 30px;
  }
}

/*
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-white);
  border-radius: 0;
  position: absolute;
  left: 7px;
  width: calc(100% - 14px);
  width: -moz-calc(100% - 14px);
  width: -webkit-calc(100% - 14px);
  width: -o-calc(100% - 14px);
  transition: 0.2s linear;
}
.navToggler__bar:first-child {
  top: 12px;
}
.navToggler__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.navToggler__bar:last-child {
  bottom: 12px;
}
.navToggler.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;
}

.navToggler {
  width: 25px;
  height: 50px;
}
.navToggler__bar {
  height: 1px;
  left: 0;
  width: 100%;
}
.navToggler__bar:first-child {
  top: 18px;
}
.navToggler__bar:last-child {
  bottom: 18px;
}
.navToggler.is-active .navToggler__bar:first-child {
  top: 24px;
}
.navToggler.is-active .navToggler__bar:last-child {
  bottom: 24px;
}

.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-white);
  text-decoration: none;
}
.nav a:hover, .nav a:focus, .nav a:active, .nav a.active, .nav a.active_tree {
  color: var(--main-color-white);
  text-decoration: underline;
}
.nav li:hover > a, .nav li:focus > a, .nav li:active > a, .nav li.active > a, .nav li.active_tree > a {
  color: var(--main-color-white);
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
@media (min-width: 768px) {
  .nav ul {
    margin-left: -30px;
    margin-right: -30px;
  }
}
.nav ul > li {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .nav ul > li {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.nav > a {
  margin-right: 30px;
}
@media (min-width: 768px) {
  .nav > a {
    margin-right: 60px;
  }
}

/*
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: -30px;
}
.navgroup li > span,
.navgroup a {
  color: var(--main-color-white);
  display: block;
  margin-bottom: 30px;
  text-decoration: none;
}
.navgroup a:hover, .navgroup a:focus, .navgroup a:active {
  color: var(--main-color-white);
  text-decoration: none;
}
.navgroup li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.navgroup li:hover > a {
  color: var(--main-color-white);
}
.navgroup ul {
  margin: 0;
  padding: 0;
}
.navgroup > ul > li > span,
.navgroup > ul > li > a {
  font-weight: var(--main-font-weight);
}
.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: -30px;
  margin-right: -30px;
  margin-bottom: -60px;
}
.navgroup--col-2 > ul > li, .navgroup--col-3 > ul > li, .navgroup--col-4 > ul > li, .navgroup--col-5 > ul > li {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 60px;
}
@media (min-width: 768px) {
  .navgroup--col-2 > ul > li {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-3 > ul > li {
    width: 33.3333333333%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-4 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-4 > ul > li {
    width: 25%;
  }
}
@media (min-width: 768px) {
  .navgroup--col-5 > ul > li {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .navgroup--col-5 > ul > li {
    width: 25%;
  }
}
@media (min-width: 1250px) {
  .navgroup--col-5 > ul > li {
    width: 20%;
  }
}
@media (max-width: 767px) {
  .navgroup--collapse-mobile a {
    margin-bottom: 10px;
    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: 10px;
    border-bottom: 1px solid var(--main-color-white);
  }
  .navgroup--collapse-mobile > ul > li > ul {
    display: none;
  }
  .navgroup--collapse-mobile > ul > li.open > ul {
    display: block;
  }
}

.mainnav > ul > li {
  position: relative;
}
.mainnav > ul > li > ul {
  position: absolute;
  z-index: 101;
  background: var(--main-color-white);
  min-width: 100%;
  min-width: calc(100% + 40px);
  min-width: -moz-calc(100% + 40px);
  min-width: -webkit-calc(100% + 40px);
  min-width: -o-calc(100% + 40px);
  margin-left: -20px;
  padding: 20px;
  display: none;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.1));
}
.mainnav > ul > li > ul:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent var(--main-color-white) transparent;
  border-style: solid;
  position: absolute;
  left: 30px;
  bottom: 100%;
}
.mainnav > ul > li > ul:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 100%;
  height: 20px;
  width: 100%;
}
.mainnav > ul > li > ul > li:not(:last-child) {
  margin-bottom: 10px;
}
.mainnav > ul > li > ul a {
  display: block;
  white-space: nowrap;
}

/*
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: 15px;
  margin-right: 15px;
}
@media (min-width: 1250px) {
  .mainnav__seperator {
    margin-left: 30px;
    margin-right: 30px;
  }
}
.mainnav ul {
  margin: 0;
  padding: 0;
}
.mainnav li {
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
}
.mainnav a {
  color: var(--main-color-white);
  text-decoration: none;
}
.mainnav li:hover > a, .mainnav li:focus > a, .mainnav li:active > a {
  color: var(--main-color-white);
}
.mainnav li.is-active > a, .mainnav li.is-active-tree > a {
  color: var(--main-color-white);
}
.mainnav li.is-active > a:after, .mainnav li.is-active-tree > a:after {
  height: 0;
  background: var(--main-color-white);
}
.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-white);
}
.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-white);
}
.mainnav > ul {
  display: flex;
  gap: 15px;
  font-size: var(--main-font-size-base);
}
@media (min-width: 1670px) {
  .mainnav > ul {
    gap: 30px;
    font-size: var(--main-font-size-big);
  }
}
.mainnav > ul > li > a {
  font-weight: var(--main-font-weight);
  position: relative;
  display: block;
}
.mainnav > ul > li > a:after {
  content: "";
  width: 100%;
  height: 0;
  background: transparent;
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
}
.mainnav > ul.nav--content > li > a {
  font-weight: var(--main-font-weight);
}
.mainnav > ul.nav--showMore {
  margin-left: 15px;
}
@media (min-width: 1670px) {
  .mainnav > ul.nav--showMore {
    margin-left: 30px;
  }
}
.mainnav > ul > li.hoverintent .megaMenu,
.mainnav > ul > li.hoverintent > ul {
  display: block;
}

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

/*
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-light-gray);
    border-radius: 4px;
    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-light-gray);
  border-radius: 4px;
  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;
}

/*
Scrollingbanner

Markup:
<div class="scrollingBanner">
    <div class="contentImage">
        <div class="textcontent">
            <img alt="Banner 2" src="/userdata/images/website/home/Banner-Animation.png" style="width: 1920px; height: 720px;">
        </div>
    </div>
    <div class="contentText">
        <div class="textcontent">
            CRONUS AG
        </div>
    </div>
</div>

Styleguide Components.Scrollingbanner
*/
.scrollingBanner {
  overflow: hidden;
  position: relative;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.scrollingBanner .contentImage img {
  aspect-ratio: 1;
  object-fit: cover;
}
@media (min-width: 768px) {
  .scrollingBanner .contentImage img {
    aspect-ratio: 1.5;
  }
}
@media (min-width: 1024px) {
  .scrollingBanner .contentImage img {
    aspect-ratio: 2;
  }
}
@media (min-width: 1250px) {
  .scrollingBanner .contentImage img {
    aspect-ratio: 2.3;
  }
}
.scrollingBanner .contentText {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  line-height: 1;
  color: var(--main-color-white);
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-size: 150px;
}
@media (min-width: 768px) {
  .scrollingBanner .contentText {
    font-size: 300px;
  }
}
@media (min-width: 1024px) {
  .scrollingBanner .contentText {
    font-size: 400px;
  }
}
@media (min-width: 1250px) {
  .scrollingBanner .contentText {
    font-size: 600px;
  }
}

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

.searchBar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}
.searchBar input {
  border-width: 2px;
  background: var(--main-color-white);
  border-radius: 4px !important;
  outline: none;
}
.searchBar input:active, .searchBar input:focus {
  border-color: var(--main-color-primary);
  background: var(--main-color-white);
  color: var(--main-color-black);
}

.headerSearch {
  flex-grow: 1;
  max-width: 480px;
}

.headerSearchSuggestions {
  flex-grow: 1;
  max-width: 320px;
  border-left: 1px solid var(--main-color-white);
  padding-left: 60px;
}
@media (max-width: 1249px) {
  .headerSearchSuggestions {
    padding-left: 30px;
  }
}
.headerSearchSuggestions ul li a {
  color: var(--main-color-white);
}

.ticker {
  color: var(--main-color-white);
  text-decoration: none;
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(183, 14, 12, 0.95) 0%, rgba(183, 14, 12, 0) 55%), radial-gradient(circle at 70% 40%, rgba(0, 70, 132, 0.9) 0%, rgba(0, 70, 132, 0) 60%), radial-gradient(circle at 55% 85%, rgb(0, 15, 31) 0%, rgba(0, 15, 31, 0) 65%), #000F1F;
  display: flex;
  align-items: center;
  height: 60px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 30px;
  font-weight: var(--main-font-weight-bold);
}
@media (max-width: 1249px) {
  .ticker {
    height: 50px;
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .ticker {
    height: 40px;
    font-size: 20px;
  }
}
.ticker__text {
  padding-left: 100%;
  display: inline-flex;
  align-items: center;
  animation: scroll 60s linear infinite;
}
.ticker__text i {
  font-size: 20px;
}
.ticker:hover, .ticker:active, .ticker:focus {
  text-decoration: none;
  color: var(--main-color-white);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
small {
  font-size: var(--main-font-size-small);
  font-weight: var(--main-font-weight);
  color: var(--main-color-gray-base);
}

.speech-bubble {
  flex-shrink: 0;
  width: 320px;
  text-align: left;
  position: static;
  padding: 15px;
  background: var(--main-color-white);
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: 0.2s all ease-in-out;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow-y: auto;
  transform: scale(0);
}
@media (max-width: 1249px) {
  .speech-bubble {
    width: 100%;
    max-height: 100%;
  }
}
.speech-bubble::-webkit-scrollbar {
  width: 4px;
}
.speech-bubble::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--main-color-light-gray);
}
.speech-bubble.show {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

.accordion p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}
.accordion span {
  display: block;
}
.accordion.open p {
  overflow: auto;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  display: unset;
}

.info-btn {
  cursor: pointer;
  transition: 0.2s all ease-in-out;
  fill: rgba(0, 0, 0, 0.1);
  stroke: rgba(0, 0, 0, 0.15);
}
.info-btn:hover, .info-btn:active, .info-btn:focus, .info-btn.active {
  fill: rgba(0, 0, 0, 0.2);
  stroke: rgba(0, 0, 0, 0.2);
}

/*
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 h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
  margin-top: 0;
  line-height: 1.1;
  margin-bottom: clamp(10px, 0.5em, 20px);
  font-size: 2.6rem;
}
@media (min-width: 768px) {
  .banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText__headline {
    font-size: 3.6rem;
  }
}

.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText__text {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  .banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText__text {
    font-size: 2.4rem;
  }
}

.banner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.banner .contentImage {
  display: flex;
  width: 100%;
  flex-grow: 1;
  height: 100%;
}
.banner .contentImage .textcontent {
  width: 100%;
}
.banner .contentImage video,
.banner .contentImage img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  min-height: 100%;
  width: 100%;
  height: 100% !important;
  max-width: none;
  max-height: none;
  flex: 1;
}
@media (max-width: 767px) {
  .banner .contentImage {
    aspect-ratio: 1;
    max-height: 380px;
  }
}
.banner .contentText {
  color: var(--main-color-white);
}
.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted) {
  margin-bottom: 10px;
}
.banner .contentText h3:not(.highlighted), .banner .contentText .h3:not(.highlighted) {
  margin-bottom: 10px;
}
.banner .contentText h1:last-child, .banner .contentText .h1:last-child,
.banner .contentText h2:last-child, .banner .contentText .h2:last-child,
.banner .contentText h3:last-child, .banner .contentText .h3: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%;
}
@media (min-width: 768px) {
  .banner .contentText .textcontent {
    width: 50%;
  }
}
.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: 30px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1250px) {
  .banner .contentText {
    padding: 60px;
  }
}
.banner .contentText.contentText--left {
  align-items: flex-start;
}
.banner .contentText.contentText--right {
  align-items: flex-end;
}
.banner .contentText.contentText--vertTop {
  justify-content: flex-start;
}
.banner .contentText.contentText--vertBottom {
  justify-content: flex-end;
}
.banner.banner--hasNoText .contentImage:after {
  display: none;
}

a.banner {
  color: var(--main-color-black);
}
.banner:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #00101E 0%, rgba(0, 16, 30, 0.1) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media (max-width: 767px) {
  .banner .contentImage {
    aspect-ratio: auto;
    max-height: none;
  }
}
.banner .contentImage video,
.banner .contentImage img {
  position: relative;
  max-height: 400px;
  object-fit: cover;
  max-width: 100%;
}
@media (max-width: 1249px) {
  .banner .contentImage video,
  .banner .contentImage img {
    max-height: 300px;
  }
}
@media (max-width: 767px) {
  .banner .contentImage video,
  .banner .contentImage img {
    max-height: 150px;
  }
}
.banner .contentText {
  padding: 30px;
}
.banner .contentText img {
  max-width: 43%;
}
@media (max-width: 767px) {
  .banner--big {
    flex-direction: column;
  }
}
.banner--big:before {
  background: linear-gradient(0deg, rgba(0, 16, 30, 0.9) 0%, rgba(0, 16, 30, 0.9) 100%);
}
@media (max-width: 767px) {
  .banner--big:before {
    display: none;
  }
}
.banner--big .contentImage video,
.banner--big .contentImage img {
  max-height: 800px;
}
@media (max-width: 1249px) {
  .banner--big .contentImage video,
  .banner--big .contentImage img {
    max-height: 600px;
  }
}
@media (max-width: 767px) {
  .banner--big .contentImage video,
  .banner--big .contentImage img {
    max-height: 300px;
  }
}
@media (max-width: 767px) {
  .banner--big .contentText {
    position: static;
    color: var(--main-color-black);
  }
}
.banner--big .contentText .textcontent {
  width: fit-content;
}

body.home.pg_start .banner {
  margin-bottom: 90px;
}
@media (max-width: 767px) {
  body.home.pg_start .banner {
    margin-bottom: 60px;
  }
}

/*
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: 1750px) {
  .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;
}

.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: 4px;
  transition: 0.2s ease-in-out;
}
.dcCookieBar__button:hover {
  background-color: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
.dcCookieBar__button:active, .dcCookieBar__button:focus {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
@media (max-width: 1024px) {
  .dcCookieBar__button {
    font-size: var(--main-font-size-base);
  }
}
.dcCookieBar__buttonaction {
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  background-color: var(--main-color-primary);
}
.dcCookieBar__buttonaction:hover {
  background-color: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
.dcCookieBar__buttonaction:active, .dcCookieBar__buttonaction:focus {
  background-color: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
.dcCookieBar__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 7.5px;
}
.dcCookieBar__buttons .dcCookieBar__button {
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  flex-basis: 100% !important;
}
.dcCookieBar__main {
  text-align: center;
}
.dcCookieBar__text {
  padding-left: 7.5px;
  padding-right: 7.5px;
  padding-bottom: 15px;
  text-align: left;
}
.dcCookieBar__links {
  text-align: right;
  font-size: var(--main-font-size-small);
}
.dcCookieBar__links a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}
.dcCookieBar__center {
  text-align: center;
  margin-top: 15px;
}
.dcCookieBar__center a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7.5px;
  margin-right: 7.5px;
}

.dcCookieModal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(204, 204, 204, 0.7);
  color: var(--main-color-black);
  display: none;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 6001;
  font-size: var(--main-font-size-base);
}
@media (min-width: 441px) {
  .dcCookieModal.dcCookieTopPadding {
    padding-top: 150px;
  }
}
.dcCookieModal__dialog {
  background-color: #ffffff;
  padding: 30px;
  width: 600px;
  max-width: 100%;
  margin: 15px auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
@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: var(--main-color-white);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--main-color-black);
}
.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;
}

.dcCookieBar {
  padding-left: 15px;
}

/*
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: -10px;
}

.filegalleryFile {
  margin-bottom: 10px;
  color: var(--main-color-black);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  text-decoration: none;
}
.filegalleryFile .icon {
  margin-right: 5px;
  font-size: 2em;
  line-height: 1;
  margin-top: -2px;
}
.filegalleryFile span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.filegalleryFile:hover {
  color: var(--main-color-primary);
  text-decoration: none;
}

/*
Image Gallery

Markup:
<div class="imageGallery swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="imageGalleryItem" data-original="/userdata/gallery/resize/30_1920x1080.jpeg">
          <div class="imageGalleryItem__content">
              <img class="imageGalleryItem__img" src="/userdata/gallery/thumbnail/30_1920x1080.jpeg" alt="1920x1080.jpeg" width="600px" height="400px">
          </div>
      </div>
    </div>
  </div>
  <div class="swiper-button-prev"><i class="icon icon-angle-left"></i></div>
  <div class="swiper-button-next"><i class="icon icon-angle-right"></i></div>
</div>

//Styleguide Siteparts.Image Gallery
*/
.imageGalleryItem {
  overflow: hidden;
  cursor: pointer;
}
.imageGalleryItem__content {
  position: relative;
}
.imageGalleryItem__content:after {
  content: var(--base-icon-search);
  font-family: "icons", Helvetica, Arial, sans-serif;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--main-color-white);
  opacity: 0;
  transition: 0.2s opacity ease-in-out;
}
.imageGalleryItem__img {
  transition: 0.2s ease-in-out;
  scale: 1;
}
.imageGalleryItem:hover .imageGalleryItem__content:after {
  opacity: 1;
}
.imageGalleryItem:hover .imageGalleryItem__img {
  scale: 1.1;
}

.imageGalleryItem {
  border-radius: 4px;
}
.imageGalleryItem__img {
  display: block;
}

body.is-bg--special .icon-angle-left:before,
body.is-bg--special .icon-angle-right:before {
  color: var(--main-color-white);
}

.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: 1750px) {
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
    color: var(--main-color-black);
  }
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
    left: -50px;
  }
  .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
    right: -50px;
  }
}

.container .scrollbar {
  margin-left: -20px;
  margin-right: -20px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
  color: var(--main-color-white);
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
  left: 10px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
  right: 10px;
}

/*
Slidecontent

Markup:
<div class="slidecontent">
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
    <div class="slidecontentItem">
        <div class="slidecontentItem__headline">Headline</div>
        <div class="slidecontentItem__content">Content</div>
    </div>
</div>

Styleguide Siteparts.Slidecontent
*/
.slidecontentItem {
  border-bottom: 1px solid var(--main-color-light-gray);
}
.slidecontentItem:not(:last-child) {
  margin-bottom: 20px;
}
.slidecontentItem__headline {
  position: relative;
  font-size: 1.6rem;
  color: var(--main-color-black);
  padding: 10px;
  padding-left: 30px;
  cursor: pointer;
}
.slidecontentItem__headline:after {
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 0;
  top: 50%;
  font-size: 20px;
  width: 20px;
  text-align: center;
  transition: 0.2s ease-in-out;
  translate: 0 -50%;
}
.slidecontentItem__headline:hover, .slidecontentItem__headline:active, .slidecontentItem__headline:focus {
  color: var(--main-color-primary);
}
.slidecontentItem__content {
  display: none;
  padding: 10px 10px 20px 30px;
}
.slidecontentItem.is-active .slidecontentItem__headline:after {
  rotate: 180deg;
}

.slidecontentItem__headline {
  padding-right: 30px;
  padding-left: 0;
}
.slidecontentItem__headline:after {
  right: 0;
  left: auto;
}
.slidecontentItem__content {
  padding-left: 0;
  padding-right: 30px;
}
.slidecontentItem.is-active .slidecontentItem__headline {
  color: var(--main-color-primary);
}

.newsletterFooterForm .newsletterForm {
  display: flex;
  width: 100%;
}
.newsletterFooterForm .newsletterForm .infieldInputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup {
  margin: 0;
  flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.newsletterFooterForm .newsletterForm button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-color: var(--main-color-primary);
}

.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-primary);
  color: var(--main-color-white);
  border-color: var(--main-color-primary);
}

.banner .textcontent + .newsletterBanner {
  margin-top: 20px;
}

.sectionNewsletter a {
  display: flex;
}

.fullscreenSwiper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 106;
  background-color: var(--main-color-white);
  display: flex;
  flex-direction: column;
}
.fullscreenSwiper:before {
  content: var(--base-icon-loading);
  font-family: "icons", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: 80px;
  z-index: 106;
  color: var(--main-color-middle-gray);
  animation: rotation 1s infinite ease-in-out;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .fullscreenSwiper:before {
    font-size: 120px;
  }
}
.fullscreenSwiper.is-loading:before {
  opacity: 1;
}
.fullscreenSwiper.is-loading .fullscreenSwiperImage,
.fullscreenSwiper.is-loading .fullscreenSwiperThumbs {
  opacity: 0;
}
.fullscreenSwiperImage {
  width: 100%;
  flex-grow: 1;
  padding: 60px 100px;
  display: flex;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}
.fullscreenSwiperImage:before, .fullscreenSwiperImage:after {
  display: none;
}
.fullscreenSwiperImage::before, .fullscreenSwiperImage::after {
  display: none;
}
.fullscreenSwiperImage .swiper-slide {
  position: relative;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.fullscreenSwiperImage .swiper-slide > * {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
.fullscreenSwiperImage .swiper-slide picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullscreenSwiperImage .swiper-slide iframe {
  width: 100%;
  height: 100%;
}
.fullscreenSwiperImage .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.fullscreenSwiperImage .swiper-button-prev,
.fullscreenSwiperImage .swiper-button-next {
  font-size: 40px;
  border: 2px solid transparent;
  color: var(--main-color-gray-base);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-top: -30px;
  cursor: pointer;
}
.fullscreenSwiperImage .swiper-button-prev:hover,
.fullscreenSwiperImage .swiper-button-next:hover {
  color: var(--main-color-action);
  border-color: var(--main-color-action);
}
.fullscreenSwiperImage .swiper-button-prev.swiper-button-lock,
.fullscreenSwiperImage .swiper-button-next.swiper-button-lock {
  display: none;
}
.fullscreenSwiperImage .swiper-button-prev {
  left: 20px;
}
.fullscreenSwiperImage .swiper-button-next {
  right: 20px;
}
@media (max-width: 767px) {
  .fullscreenSwiperImage {
    padding: 10px;
  }
  .fullscreenSwiperImage .swiper-button-prev,
  .fullscreenSwiperImage .swiper-button-next {
    display: none;
  }
}

.fullscreenSwiperThumbs {
  flex-shrink: 0;
  height: 100px;
  padding-bottom: 20px;
  transition: opacity 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs {
    height: 70px;
    padding-bottom: 10px;
  }
}
.fullscreenSwiperThumbs .swiper-wrapper {
  justify-content: center;
}
.fullscreenSwiperThumbs .swiper-slide {
  width: 80px;
  cursor: pointer;
  opacity: 0.4;
  transition: 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .fullscreenSwiperThumbs .swiper-slide {
    width: 60px;
  }
}
.fullscreenSwiperThumbs .swiper-slide img,
.fullscreenSwiperThumbs .swiper-slide video,
.fullscreenSwiperThumbs .swiper-slide picture {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.fullscreenSwiperThumbs .swiper-slide:hover, .fullscreenSwiperThumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.fullscreenSwiperThumbs .swiper-button-disabled {
  opacity: 0;
}

.fullscreenSwiperClose {
  position: fixed;
  right: 20px;
  top: 20px;
  font-size: 40px;
  border: 2px solid transparent;
  color: var(--main-color-black);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: 0.2s ease-in-out;
}
.fullscreenSwiperClose:hover {
  color: var(--main-color-action);
  border-color: var(--main-color-action);
}
@media (max-width: 767px) {
  .fullscreenSwiperClose {
    top: 10px;
    right: 10px;
    font-size: 30px;
    border-width: 1px;
    width: 40px;
    height: 40px;
  }
}

body.fullscreen-gallery-opened {
  overflow: hidden;
}

.highlightPicture {
  display: flex;
  flex-direction: column;
}
.highlightPicture__image {
  align-self: center;
  position: relative;
}

.highlightBullet {
  position: absolute;
}
.highlightBullet__button {
  width: 32px;
  height: 32px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: var(--main-color-action);
  color: var(--main-color-white);
  position: relative;
  cursor: pointer;
  z-index: 1;
}
.highlightBullet__button:before {
  font-size: 22px;
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-plus);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--main-color-white);
  transition: 0.1s all ease-in-out;
}
.highlightBullet__button:hover {
  background: var(--main-color-secondary);
}
.highlightBullet__content {
  position: absolute;
  padding: 10px;
  display: none;
  background: var(--main-color-white);
  font-size: var(--main-font-size-base);
  line-height: var(--main-line-height);
  min-width: 150px;
}
@media (min-width: 768px) {
  .highlightBullet__content {
    min-width: 200px;
  }
}
.highlightBullet a {
  color: var(--main-color-black);
  text-decoration: none;
  font-size: var(--main-font-size-base);
  line-height: var(--main-line-height);
}
.highlightBullet a:hover .highlightBullet__description {
  text-decoration: underline;
}
.highlightBullet__headline {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .highlightBullet__headline {
    white-space: nowrap;
  }
}
.highlightBullet__itemNo {
  font-size: var(--main-font-size-small);
}
.highlightBullet__description {
  line-height: 1.2;
}
.highlightBullet__inventory {
  margin-top: 5px;
}
.highlightBullet__inventory p {
  white-space: nowrap;
}
.highlightBullet--left .highlightBullet__content {
  top: 50%;
  right: 16px;
  padding-right: 26px;
  transform: translateY(-50%);
}
.highlightBullet--right .highlightBullet__content {
  top: 50%;
  left: 16px;
  padding-left: 26px;
  transform: translateY(-50%);
}
.highlightBullet.active .highlightBullet__button {
  background: var(--main-color-secondary);
}
.highlightBullet.active .highlightBullet__button:before {
  content: var(--base-icon-minus);
}

body[data-site_code=catalog] .highlightBullet__price {
  display: none;
}

.weekly {
  position: relative;
  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);
}
.weekly.is-loading {
  transition: 0.2s all ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.weekly.is-loading .weekly__loader {
  display: flex;
}
.weekly:hover, .weekly:focus, .weekly:active {
  color: var(--main-color-black);
  text-decoration: none;
}
.weekly:hover .weekly__image .weekly__overlay, .weekly:focus .weekly__image .weekly__overlay, .weekly:active .weekly__image .weekly__overlay {
  transform: scaleY(0);
}
.weekly__image {
  display: flex;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.weekly__image > img {
  object-fit: cover;
  aspect-ratio: 18/9;
}
.weekly__group {
  position: absolute;
  color: var(--main-color-white);
  background: var(--main-color-primary);
  font-weight: var(--main-font-weight);
  z-index: 2;
  padding: 5px 10px;
  top: 0;
  left: 0;
  border-bottom-right-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  font-size: var(--main-font-size-base);
}
@media (max-width: 1249px) {
  .weekly__group {
    font-size: var(--main-font-size-small);
  }
}
.weekly__group > i {
  font-size: 2rem;
}
.weekly__group--full {
  font-size: var(--main-font-size-big);
  position: static;
  border-radius: 4px;
  display: inline-flex;
}
.weekly__textbook {
  position: absolute;
  color: var(--main-color-white);
  background: var(--main-color-primary);
  font-weight: var(--main-font-weight);
  z-index: 2;
  padding: 5px 10px;
  top: 0;
  right: 0;
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  font-size: var(--main-font-size-base);
}
@media (max-width: 1249px) {
  .weekly__textbook {
    font-size: var(--main-font-size-small);
  }
}
.weekly__textbook > i {
  font-size: 2rem;
}
.weekly__textbook_chapter ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}
.weekly__textbook_chapter ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-grow: 1;
}
.weekly__textbook_chapter ul li:before {
  content: var(--base-icon-book-light-full);
  font-family: "icons", Helvetica, Arial, sans-serif;
}
.weekly__overlay {
  overflow: hidden;
  position: absolute;
  background: rgba(0, 16, 30, 0.8);
  backdrop-filter: blur(2px);
  width: 101%;
  height: 101%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  inset: 0;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 200ms ease;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.weekly__logo {
  position: relative;
  line-height: 1;
}
.weekly__date {
  color: var(--main-color-white);
  font-size: 12px;
  font-weight: var(--main-font-weight);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 22px;
  margin-left: -15px;
}
.weekly__details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
  gap: 15px;
}
.weekly__description {
  flex-grow: 1;
  gap: 5px;
  display: flex;
  flex-direction: column;
}
.weekly__filter > div {
  line-height: 1.2;
  gap: 10px;
  font-size: 1.3rem;
  display: grid;
  align-items: center;
  grid-template-columns: 20px 1fr;
}
.weekly__filter .icon {
  font-size: 20px;
}
.weekly__cta {
  align-self: flex-start;
}
@media (max-width: 1249px) {
  .weekly__cta {
    font-size: var(--main-font-size-small);
    min-height: 30px;
    padding: 5px;
  }
}
.weekly__content > span {
  font-weight: var(--main-font-weight);
  color: var(--main-link-color);
  text-decoration: none;
  cursor: pointer;
}
.weekly__content > span:hover, .weekly__content > span:active, .weekly__content > span:focus {
  color: var(--main-link-color-hover);
  text-decoration: underline;
}
.weekly__content--list {
  line-height: 1.2;
}
.weekly__content--list > span {
  font-size: var(--main-font-size-small);
}
.weekly__content--full > span {
  font-size: var(--main-font-size-big);
  font-weight: var(--main-font-weight-medium);
}
.weekly__gradient {
  background: linear-gradient(180deg, #00101E 0%, #FFF 100%);
  height: 200px;
  margin-bottom: -27px;
}
@media (max-width: 1249px) {
  .weekly__gradient {
    margin-bottom: -22px;
  }
}
@media (max-width: 1023px) {
  .weekly__gradient {
    margin-bottom: -20px;
    height: 100px;
  }
}
@media (max-width: 767px) {
  .weekly__gradient {
    margin-bottom: -15px;
  }
}
.weekly__headline {
  font-size: var(--main-font-size-big);
  font-weight: var(--main-font-weight);
  color: var(--main-color-black);
}
.weekly__headline--full {
  font-size: 5.4rem;
  font-weight: var(--main-font-weight-medium);
  color: var(--main-color-secondary);
  top: 100%;
  line-height: 1;
}
@media (max-width: 1249px) {
  .weekly__headline--full {
    font-size: 4.4rem;
  }
}
@media (max-width: 767px) {
  .weekly__headline--full {
    font-size: 3.4rem;
  }
}
.weekly__subheadline {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .weekly__subheadline {
    gap: 15px;
  }
}
.weekly__category {
  padding-left: 15px;
  border-left: 2px solid var(--main-color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.weekly__category > a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.weekly__category > a:hover, .weekly__category > a:active, .weekly__category > a:focus {
  text-decoration: none;
}
.weekly__category > a > i {
  color: var(--main-color-primary);
  font-size: 2.5rem;
  line-height: 1;
}
.weekly__quote {
  color: var(--main-color-primary);
  font-weight: var(--main-font-weight-medium);
  font-size: calc(var(--main-font-size-base) * 1.5);
  text-align: left;
}
.weekly__initial-tasks ol, .weekly__processing-tasks ol, .weekly__conclusion-tasks ol {
  list-style: none;
  counter-reset: item calc(var(--start, 1) - 1);
  padding-left: 40px;
}
.weekly__initial-tasks ol > li, .weekly__processing-tasks ol > li, .weekly__conclusion-tasks ol > li {
  counter-increment: item;
  margin-bottom: 1em;
}
.weekly__initial-tasks ol > li:before, .weekly__processing-tasks ol > li:before, .weekly__conclusion-tasks ol > li:before {
  content: counter(item);
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  padding: 5px;
  width: 30px;
  height: 30px;
  line-height: 1;
  margin-right: 10px;
  font-size: 14px;
  font-weight: var(--main-font-weight-medium);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-left: -40px;
  position: absolute;
}
.weekly__initial-tasks ol > li > ul, .weekly__initial-tasks ol > li ol, .weekly__processing-tasks ol > li > ul, .weekly__processing-tasks ol > li ol, .weekly__conclusion-tasks ol > li > ul, .weekly__conclusion-tasks ol > li ol {
  margin-top: 0.5em;
}
.weekly__stickyBox {
  background: var(--main-color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
}
.weekly__stickyBox .slidecontent .slidecontentItem {
  border-bottom: 0;
}
.weekly__stickyBox .slidecontent .slidecontentItem__headline {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 1023px) {
  .weekly__stickyBox .slidecontent .slidecontentItem__headline {
    pointer-events: none;
  }
}
@media (max-width: 1023px) {
  .weekly__stickyBox .slidecontent .slidecontentItem__headline:after {
    display: none;
  }
}
.weekly__stickyBox .slidecontent .slidecontentItem__content {
  padding-top: 15px;
  padding-right: 0;
  padding-bottom: 0;
}
@media (max-width: 1023px) {
  .weekly__stickyBox .slidecontent .slidecontentItem__content {
    display: block;
  }
}
.weekly__initial-info .textcontent, .weekly__processing-1-info .textcontent, .weekly__processing-2-info .textcontent, .weekly__processing-3-info .textcontent, .weekly__conclusion-1-info .textcontent, .weekly__conclusion-2-info .textcontent {
  text-align: left !important;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  background: var(--main-color-middle-gray);
  padding: 80px 30px 30px 30px;
}
@media (max-width: 767px) {
  .weekly__initial-info .textcontent, .weekly__processing-1-info .textcontent, .weekly__processing-2-info .textcontent, .weekly__processing-3-info .textcontent, .weekly__conclusion-1-info .textcontent, .weekly__conclusion-2-info .textcontent {
    padding: 65px 15px 15px 15px;
  }
}
.weekly__initial-info .textcontent h3, .weekly__initial-info .textcontent .h3, .weekly__processing-1-info .textcontent h3, .weekly__processing-1-info .textcontent .h3, .weekly__processing-2-info .textcontent h3, .weekly__processing-2-info .textcontent .h3, .weekly__processing-3-info .textcontent h3, .weekly__processing-3-info .textcontent .h3, .weekly__conclusion-1-info .textcontent h3, .weekly__conclusion-1-info .textcontent .h3, .weekly__conclusion-2-info .textcontent h3, .weekly__conclusion-2-info .textcontent .h3 {
  position: absolute;
  background: var(--main-color-gray-base);
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  color: var(--main-color-white);
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
}
.weekly__audio {
  display: none;
  height: 40px;
}
.weekly__audio audio {
  height: 100%;
}
.weekly__audio.is-active {
  display: block;
}
.weekly__survey iframe {
  width: 100%;
  height: 100dvh;
  aspect-ratio: 1;
  overflow: hidden;
}
.weekly__infografik {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
@media (max-width: 1249px) {
  .weekly__infografik {
    flex-direction: column;
    gap: 15px;
  }
}
.weekly__infografik figure {
  width: 100%;
  flex-grow: 1;
}
.weekly__infografik figure figcaption {
  margin-top: -15px;
}
@media (max-width: 1023px) {
  .weekly__nav {
    position: fixed;
    top: 50px;
    background: var(--main-color-white);
    left: 0;
    width: 100%;
    z-index: 10;
    margin-bottom: 0;
    padding: 0 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    transition: 0.2s all ease-in-out;
    opacity: 0;
    pointer-events: none;
  }
}
.weekly__nav > ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
@media (max-width: 1023px) {
  .weekly__nav > ul {
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 15px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .weekly__nav > ul::-webkit-scrollbar {
    height: 2px;
  }
  .weekly__nav > ul::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--main-color-light-gray);
  }
}
.weekly__nav > ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.weekly__nav > ul > li > span {
  white-space: nowrap;
  cursor: pointer;
  color: var(--main-color-black);
  text-decoration: none;
  font-weight: var(--main-font-weight);
  font-size: var(--main-font-size-base);
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
}
@media (max-width: 1023px) {
  .weekly__nav > ul > li > span {
    padding-left: 10px;
  }
}
.weekly__nav > ul > li > span:before {
  content: "";
  background: var(--main-color-primary);
  width: 2px;
  height: 0;
  display: flex;
  align-items: center;
  position: absolute;
  left: -15px;
  opacity: 0;
  top: 0;
  transition: 0.2s all ease-in-out;
}
@media (max-width: 1023px) {
  .weekly__nav > ul > li > span:before {
    left: 0;
  }
}
.weekly__nav > ul > li > span:hover:before, .weekly__nav > ul > li > span:focus:before, .weekly__nav > ul > li > span:active:before, .weekly__nav > ul > li > span.is-active:before {
  opacity: 1;
  height: 100%;
}
@media (max-width: 1023px) {
  .weekly__nav.is-scrolled {
    opacity: 1;
    pointer-events: all;
  }
}
.weekly__actions {
  margin-top: -10px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .weekly__actions {
    position: fixed;
    bottom: 15px;
    gap: 10px;
    left: 30px;
    z-index: 100;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 1023px) {
  .weekly__actions > a {
    padding: 5px;
    width: 40px;
  }
}
.weekly__loader {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 16, 30, 0.9);
  z-index: 10;
}
.weekly__loader:before {
  content: "";
  width: 30px;
  height: 30px;
  border: 2px solid var(--main-color-light-gray);
  border-top-color: var(--main-color-primary);
  border-radius: 50%;
  animation: weeklySpin 0.8s linear infinite;
}

.collection.preview.login .weekly__details {
  pointer-events: none;
}
.collection.preview:not(.login) .swiper {
  overflow: visible;
}
.collection.preview .swiper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.collection.preview .swiper .swiper-wrapper {
  display: flex;
}
.collection.preview .swiper .swiper-wrapper .swiper-slide {
  display: flex;
  /*&:not(.swiper-slide-fully-visible){
    &:not(.swiper-slide-active){
      opacity: 0.5;
      pointer-events: none;
    }
  }*/
}
.collection.preview .swiper .swiper-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.collection.preview .swiper .swiper-navigation .swiper-button-prev, .collection.preview .swiper .swiper-navigation .swiper-button-next {
  position: static;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s all ease-in-out;
  border: 1px solid var(--main-color-primary);
  margin-top: 0;
  font-size: 25px;
}
.collection.preview .swiper .swiper-navigation .swiper-button-prev:hover, .collection.preview .swiper .swiper-navigation .swiper-button-prev:active, .collection.preview .swiper .swiper-navigation .swiper-button-prev:focus, .collection.preview .swiper .swiper-navigation .swiper-button-next:hover, .collection.preview .swiper .swiper-navigation .swiper-button-next:active, .collection.preview .swiper .swiper-navigation .swiper-button-next:focus {
  background: transparent;
  color: var(--main-color-primary);
}
.collection strong {
  font-weight: var(--main-font-weight-medium);
}
.collection img,
.collection svg {
  border-radius: 4px;
}
.collection .textcontent h3, .collection .textcontent .h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.collection .textcontent h3 > span, .collection .textcontent .h3 > span {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  border-radius: 4px;
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-medium);
  line-height: 1;
  aspect-ratio: 4/3;
}

.collectionArea {
  display: flex;
  flex-direction: column;
}
.collectionArea #items {
  order: 2;
}
.collectionArea .collectionFilter {
  order: 1;
}

@keyframes weeklySpin {
  to {
    transform: rotate(360deg);
  }
}
.collectionFilters {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.filters {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 1669px) {
  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 1023px) {
  .filters {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .filters {
    grid-template-columns: 1fr;
  }
}
.filters__sorting {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}
@media (min-width: 1670px) {
  .filters__sorting .selectBody, .filters__sorting .customSelect__selected {
    width: auto;
  }
}
.filters__active {
  display: flex;
  gap: 15px;
  align-items: center;
}
@media (max-width: 767px) {
  .filters__active {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

.filter {
  position: relative;
  display: flex;
}
@media (max-width: 1669px) {
  .filter {
    flex-grow: 1;
  }
}
.filter__toggle {
  min-width: 200px;
  flex-grow: 1;
  background: var(--main-color-white);
  padding: 5px 15px;
  border-radius: 4px;
  border: 1px solid var(--main-color-light-gray);
  gap: 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.2s all ease-in-out;
  position: relative;
}
.filter__toggle:after {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s all ease-in-out;
  content: var(--base-icon-angle-down);
  font-family: "icons", Helvetica, Arial, sans-serif;
  font-size: 20px;
}
.filter__toggle:hover, .filter__toggle:active, .filter__toggle:focus {
  border: 1px solid var(--main-color-black);
}
.filter .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 20px;
  height: 20px;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--main-font-weight-medium);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s all ease-in-out;
}
.filter__panel {
  display: none;
  flex-direction: column;
  gap: 15px;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  max-height: 320px;
  overflow: auto;
  background: var(--main-color-white);
  border: 1px solid var(--main-color-light-gray);
  border-radius: 4px;
  padding: 15px;
  z-index: 100;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  scrollbar-width: thin;
  scrollbar-color: var(--main-color-light-gray) transparent;
}
.filter__panel::-webkit-scrollbar {
  width: 4px;
}
.filter__panel::-webkit-scrollbar-thumb {
  background: var(--main-color-light-gray);
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: content-box;
}
.filter--open .filter__toggle:after {
  transform: translateY(-50%) rotate(180deg);
}
.filter--open .filter__panel {
  display: flex;
  animation: filterPanelIn 0.14s ease-out;
  transform-origin: top left;
}
.filter__panel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #eaecf0;
  border-top: 1px solid #eaecf0;
  transform: rotate(45deg);
}
.filter__item {
  margin-bottom: 0;
  white-space: nowrap;
  display: flex;
  gap: 15px;
}
@media (max-width: 480px) {
  .filter__panel {
    min-width: 220px;
    left: 0;
  }
}
.filter.is-filtered .count {
  opacity: 1;
  pointer-events: all;
}

.option-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--main-color-black);
  white-space: nowrap;
}

#active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  min-height: 30px;
}
@media (max-width: 767px) {
  #active-filters {
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 15px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  #active-filters::-webkit-scrollbar {
    height: 2px;
  }
  #active-filters::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--main-color-light-gray);
  }
}
#active-filters div {
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-radius: 4px;
  font-size: var(--main-font-size-small);
}
#active-filters div .icon {
  font-size: 20px;
}

.item {
  transition: opacity 0.22s ease, transform 0.22s ease;
  will-change: opacity, transform;
}
.item--hiding {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}
.item--hidden {
  display: none !important;
}

@keyframes filterPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#reset-filters {
  align-self: flex-start;
}

header .sticky-helper {
  display: none;
}

.headerMain {
  background: transparent;
  transition: 0.2s all ease-in-out;
  margin: 0 auto;
  z-index: 100;
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.headerMain:hover, .headerMain.sticky {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  background: var(--main-color-secondary);
  position: fixed;
}
.headerMain:hover .headerNavigation > nav > ul > li > a, .headerMain.sticky .headerNavigation > nav > ul > li > a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.headerMain:hover .headerNavigation > nav > ul > li > a:after, .headerMain.sticky .headerNavigation > nav > ul > li > a:after {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.headerMain--login {
  position: absolute !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 767px) {
  .headerMain--login {
    background: var(--main-color-secondary) !important;
  }
}
.headerMain--login .headerLogo {
  flex-grow: 1;
}

.headerWrapper {
  max-width: 1920px;
  flex-grow: 1;
  height: 60px;
  display: flex;
  padding: 0 30px;
  gap: 0 30px;
  flex-wrap: wrap;
}
@media (max-width: 1249px) {
  .headerWrapper {
    height: 50px;
    gap: 0 15px;
  }
}

.headerLogo {
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  .headerLogo {
    flex-grow: 1;
  }
}
.headerLogo .textcontent {
  height: 60px !important;
  width: auto !important;
}
@media (max-width: 1249px) {
  .headerLogo .textcontent {
    height: 50px !important;
  }
}
.headerLogo .textcontent a {
  display: inline-flex;
  height: 60px !important;
  width: auto !important;
}
@media (max-width: 1249px) {
  .headerLogo .textcontent a {
    height: 50px !important;
  }
}

.headerNavigation {
  flex-grow: 1;
}
.headerNavigation > nav {
  display: flex;
  height: 100%;
}
.headerNavigation > nav ul {
  padding: 0;
  margin: 0;
  display: flex;
}
.headerNavigation > nav ul > li {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  display: flex;
}
.headerNavigation > nav ul > li:nth-child(1) > a:before {
  content: var(--base-icon-home);
}
.headerNavigation > nav ul > li:nth-child(2) > a:before {
  content: var(--base-icon-academy);
}
.headerNavigation > nav ul > li:nth-child(3) > a:before {
  content: var(--base-icon-info);
}
.headerNavigation > nav ul > li:nth-child(4) > a:before {
  content: var(--base-icon-image-light-full);
}
.headerNavigation > nav ul > li:nth-child(5) > a:before {
  content: var(--base-icon-reload);
}
.headerNavigation > nav ul > li > a {
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color-white);
  font-weight: var(--main-font-weight);
  font-size: var(--main-font-size-big);
  text-decoration: none;
  height: 100%;
  position: relative;
  padding: 15px;
  background: transparent;
  overflow: hidden;
}
@media (max-width: 1669px) {
  .headerNavigation > nav ul > li > a {
    font-size: var(--main-font-size-base);
  }
}
@media (max-width: 1249px) {
  .headerNavigation > nav ul > li > a {
    padding: 10px;
    font-size: var(--main-font-size-small);
  }
}
@media (max-width: 1023px) {
  .headerNavigation > nav ul > li > a {
    padding: 5px;
    gap: 5px;
  }
}
.headerNavigation > nav ul > li > a:before {
  font-size: 2rem;
  font-family: "icons", Helvetica, Arial, sans-serif;
  line-height: var(--main-line-height);
}
@media (max-width: 1249px) {
  .headerNavigation > nav ul > li > a:before {
    font-size: var(--main-font-size-base);
  }
}
.headerNavigation > nav ul > li > a:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--main-color-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms ease;
  z-index: -1;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.headerNavigation > nav ul > li > a:hover, .headerNavigation > nav ul > li > a:active, .headerNavigation > nav ul > li > a:focus, .headerNavigation > nav ul > li > a.is-active, .headerNavigation > nav ul > li > a.is-active-tree {
  color: var(--main-color-white);
  text-decoration: none;
}
.headerNavigation > nav ul > li > a:hover:after, .headerNavigation > nav ul > li > a:active:after, .headerNavigation > nav ul > li > a:focus:after, .headerNavigation > nav ul > li > a.is-active:after, .headerNavigation > nav ul > li > a.is-active-tree:after {
  transform: scaleY(1);
}

.headerAccount > nav {
  display: flex;
  height: 100%;
}
.headerAccount > nav > ul {
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
}
@media (max-width: 1249px) {
  .headerAccount > nav > ul {
    gap: 15px;
  }
}
.headerAccount > nav > ul > li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.headerAccount > nav > ul > li > a, .headerAccount > nav > ul > li > span, .headerAccount > nav > ul > li > div {
  color: var(--main-color-white);
  position: relative;
  cursor: pointer;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--main-font-weight);
  font-size: var(--main-font-size-big);
  text-decoration: none;
  height: 100%;
  padding: 15px 0;
}
@media (max-width: 1669px) {
  .headerAccount > nav > ul > li > a, .headerAccount > nav > ul > li > span, .headerAccount > nav > ul > li > div {
    font-size: var(--main-font-size-base);
  }
}
@media (max-width: 1249px) {
  .headerAccount > nav > ul > li > a, .headerAccount > nav > ul > li > span, .headerAccount > nav > ul > li > div {
    padding: 10px 0;
  }
}
@media (max-width: 1023px) {
  .headerAccount > nav > ul > li > a, .headerAccount > nav > ul > li > span, .headerAccount > nav > ul > li > div {
    gap: 5px;
    font-size: var(--main-font-size-small);
    padding: 5px 0;
  }
}
.headerAccount > nav > ul > li > a:after, .headerAccount > nav > ul > li > span:after, .headerAccount > nav > ul > li > div:after {
  background: var(--main-color-white);
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: 0.1s all ease-in-out;
}
.headerAccount > nav > ul > li > a > i, .headerAccount > nav > ul > li > span > i, .headerAccount > nav > ul > li > div > i {
  font-size: 2rem !important;
  font-family: "icons", Helvetica, Arial, sans-serif;
  margin: 0 !important;
  line-height: var(--main-line-height);
}
@media (max-width: 1249px) {
  .headerAccount > nav > ul > li > a > i, .headerAccount > nav > ul > li > span > i, .headerAccount > nav > ul > li > div > i {
    font-size: 2.2rem !important;
  }
}
.headerAccount > nav > ul > li > a > span, .headerAccount > nav > ul > li > span > span, .headerAccount > nav > ul > li > div > span {
  color: var(--main-color-white);
  padding: 0;
  text-decoration: none;
}
.headerAccount > nav > ul > li > a > span:after, .headerAccount > nav > ul > li > span > span:after, .headerAccount > nav > ul > li > div > span:after {
  opacity: 0;
  z-indeX: 100;
}
.headerAccount > nav > ul > li > a:hover, .headerAccount > nav > ul > li > a:active, .headerAccount > nav > ul > li > a:focus, .headerAccount > nav > ul > li > a.is-active, .headerAccount > nav > ul > li > span:hover, .headerAccount > nav > ul > li > span:active, .headerAccount > nav > ul > li > span:focus, .headerAccount > nav > ul > li > span.is-active, .headerAccount > nav > ul > li > div:hover, .headerAccount > nav > ul > li > div:active, .headerAccount > nav > ul > li > div:focus, .headerAccount > nav > ul > li > div.is-active {
  color: var(--main-color-white);
  text-decoration: none;
}
.headerAccount > nav > ul > li > a:hover > span, .headerAccount > nav > ul > li > a:active > span, .headerAccount > nav > ul > li > a:focus > span, .headerAccount > nav > ul > li > a.is-active > span, .headerAccount > nav > ul > li > span:hover > span, .headerAccount > nav > ul > li > span:active > span, .headerAccount > nav > ul > li > span:focus > span, .headerAccount > nav > ul > li > span.is-active > span, .headerAccount > nav > ul > li > div:hover > span, .headerAccount > nav > ul > li > div:active > span, .headerAccount > nav > ul > li > div:focus > span, .headerAccount > nav > ul > li > div.is-active > span {
  color: var(--main-color-white);
  text-decoration: none;
}
.headerAccount > nav > ul > li > a:hover:after, .headerAccount > nav > ul > li > a:active:after, .headerAccount > nav > ul > li > a:focus:after, .headerAccount > nav > ul > li > a.is-active:after, .headerAccount > nav > ul > li > span:hover:after, .headerAccount > nav > ul > li > span:active:after, .headerAccount > nav > ul > li > span:focus:after, .headerAccount > nav > ul > li > span.is-active:after, .headerAccount > nav > ul > li > div:hover:after, .headerAccount > nav > ul > li > div:active:after, .headerAccount > nav > ul > li > div:focus:after, .headerAccount > nav > ul > li > div.is-active:after {
  opacity: 1;
}
.headerAccount > nav > ul > li > a.hoverintent .headerPanel, .headerAccount > nav > ul > li > span.hoverintent .headerPanel, .headerAccount > nav > ul > li > div.hoverintent .headerPanel {
  background: var(--main-color-secondary);
  opacity: 1;
  pointer-events: all;
}

body.home .headerNavigation > nav > ul > li:first-child > a {
  color: var(--main-color-white);
  text-decoration: none;
}
body.home .headerNavigation > nav > ul > li:first-child > a:after {
  transform: scaleY(1);
}

.headerPanel {
  z-index: 100;
  transition: 0.2s all ease-in-out;
  background: transparent;
  color: var(--main-color-white);
  top: 100%;
  width: 100%;
  height: auto;
  padding: 30px 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  left: 0;
}
@media (max-width: 1249px) {
  .headerPanel {
    padding: 15px 0;
  }
}

.headerPanelWrapper {
  display: flex;
  gap: 60px;
  justify-content: flex-end;
  position: relative;
}
@media (max-width: 1249px) {
  .headerPanelWrapper {
    gap: 30px;
  }
}

footer {
  background: var(--main-color-black);
}

.footerWrapper {
  min-height: 50px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
}
@media (max-width: 1023px) {
  .footerWrapper {
    flex-direction: column-reverse;
    padding: 15px 0;
    gap: 15px;
  }
}

.footerCopyright {
  color: var(--main-color-white);
}
@media (max-width: 767px) {
  .footerCopyright {
    text-align: center;
  }
}

.footerNavigation > nav > ul {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
@media (max-width: 1249px) {
  .footerNavigation > nav > ul {
    gap: 15px;
  }
}
@media (max-width: 1023px) {
  .footerNavigation > nav > ul {
    justify-content: center;
    gap: 7.5px 15px;
  }
}
.footerNavigation > nav > ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footerNavigation > nav > ul > li > a {
  cursor: pointer;
  color: var(--main-color-white);
  font-weight: var(--main-font-weight);
  text-decoration: none;
  font-size: var(--main-font-size-base);
  position: relative;
  padding-bottom: 2px;
}
.footerNavigation > nav > ul > li > a:after {
  background: var(--main-color-white);
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: 0.1s all ease-in-out;
}
.footerNavigation > nav > ul > li > a:hover, .footerNavigation > nav > ul > li > a:active, .footerNavigation > nav > ul > li > a:focus, .footerNavigation > nav > ul > li > a.is-active {
  color: var(--main-color-white);
  text-decoration: none;
}
.footerNavigation > nav > ul > li > a:hover:after, .footerNavigation > nav > ul > li > a:active:after, .footerNavigation > nav > ul > li > a:focus:after, .footerNavigation > nav > ul > li > a.is-active:after {
  opacity: 1;
}

main {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 1920px;
}

body.is-bg--special header {
  background: transparent;
}
@media (max-width: 767px) {
  body.is-bg--special header .headerMain--login {
    background: transparent !important;
  }
}
body.is-bg--special #container {
  background: radial-gradient(circle at 20% 30%, rgba(183, 14, 12, 0.95) 0%, rgba(183, 14, 12, 0) 55%), radial-gradient(circle at 70% 40%, rgba(0, 70, 132, 0.9) 0%, rgba(0, 70, 132, 0) 60%), radial-gradient(circle at 55% 85%, rgb(0, 15, 31) 0%, rgba(0, 15, 31, 0) 65%), #000F1F;
  color: var(--main-color-white);
}
body.is-bg--special footer {
  background: transparent;
}

.mobileMenu {
  position: fixed;
  top: 0;
  width: 320px;
  height: 100%;
  z-index: 105;
  background-color: var(--main-color-white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  right: -340px;
  opacity: 0;
  transition: 0.2s ease-in-out;
  pointer-events: none;
}
.mobileMenu__close {
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
}
.mobileMenu__header {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px 0 30px;
  height: 45px;
}
.mobileMenu__subHeader {
  margin-bottom: 20px;
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}
.mobileMenu__backLink {
  justify-content: flex-start !important;
  margin-bottom: 20px;
  font-size: var(--main-font-size-small);
  display: inline-flex !important;
}
.mobileMenu__backLink:before {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-left);
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobileMenu__seperator {
  height: 1px;
  width: 100%;
  background: var(--main-color-gray-base);
  display: block;
}
.mobileMenu__navigation a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--main-color-black);
  padding: 10px 0;
}
.mobileMenu__navigation a:hover, .mobileMenu__navigation a:focus, .mobileMenu__navigation a:active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.mobileMenu__navigation li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.mobileMenu__navigation li.is-active > a, .mobileMenu__navigation li.is-active_tree > a {
  font-weight: var(--main-font-weight-bold);
}
.mobileMenu__navigation ul {
  margin: 0;
  padding: 15px 20px 15px 30px;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: var(--main-color-white);
  transition: 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.mobileMenu__navigation > ul {
  left: 0;
  opacity: 1;
  pointer-events: auto;
  position: static;
  height: auto;
}
.mobileMenu__navigation li.hasChildren > a:after {
  font-family: "icons", Helvetica, Arial, sans-serif;
  content: var(--base-icon-angle-right);
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobileMenu__navigation li.hasChildren.is-open {
  overflow: hidden;
}
.mobileMenu__navigation li.hasChildren.is-open > ul {
  pointer-events: auto;
  opacity: 1;
  left: 0;
  z-index: 1;
  overflow-y: auto;
}
.mobileMenu__navigation--main > ul > li > a {
  font-weight: var(--main-font-weight-bold);
  font-size: var(--main-font-size-big);
}
.mobileMenu__section {
  border-top: 1px solid var(--main-color-gray-base);
  padding: 30px 20px 30px 30px;
}
.mobileMenu__body {
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 45px);
  max-height: calc(100dvh - 45px);
  max-height: calc(100svh - 45px);
  overflow-y: auto;
  padding: 0;
  width: 100%;
  flex-grow: 1;
}
.mobileMenu__body:has(li.hasChildren.is-open) {
  max-height: none;
  overflow-y: hidden;
}
.mobileMenu.is-open {
  right: 0;
  opacity: 1;
  pointer-events: auto;
}
.mobileMenu .searchBar--small {
  max-width: none;
}

body.is-mobilemenuopen {
  overflow: hidden;
}

.mobileMenu {
  width: 100%;
  right: -100%;
  background: radial-gradient(circle at 20% 30%, rgba(183, 14, 12, 0.95) 0%, rgba(183, 14, 12, 0) 55%), radial-gradient(circle at 70% 40%, rgba(0, 70, 132, 0.9) 0%, rgba(0, 70, 132, 0) 60%), radial-gradient(circle at 55% 85%, rgb(0, 15, 31) 0%, rgba(0, 15, 31, 0) 65%), #000F1F;
}
.mobileMenu__header {
  padding: 15px 30px 0 30px;
}
.mobileMenu__close {
  font-size: 3.2rem;
  color: var(--main-color-white);
}
.mobileMenu__navigation {
  padding: 0 30px;
}
.mobileMenu__navigation > ul {
  background: transparent;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
@media (max-width: 767px) {
  .mobileMenu__navigation > ul {
    grid-template-columns: 1fr 1fr;
  }
}
.mobileMenu__navigation > ul > li:nth-child(1) > a:before {
  content: var(--base-icon-home);
}
.mobileMenu__navigation > ul > li:nth-child(2) > a:before {
  content: var(--base-icon-academy);
}
.mobileMenu__navigation > ul > li:nth-child(3) > a:before {
  content: var(--base-icon-info);
}
.mobileMenu__navigation > ul > li:nth-child(4) > a:before {
  content: var(--base-icon-image-light-full);
}
.mobileMenu__navigation > ul > li:nth-child(5) > a:before {
  content: var(--base-icon-reload);
}
.mobileMenu__navigation > ul > li > a {
  line-height: 1;
  gap: 15px;
  justify-content: center;
  align-items: center;
  font-weight: var(--main-font-weight);
  font-size: 2rem;
  padding: 15px;
  border-radius: 4px;
  color: var(--main-color-white);
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .mobileMenu__navigation > ul > li > a {
    font-size: var(--main-font-size-big);
  }
}
.mobileMenu__navigation > ul > li > a:before {
  font-size: 4rem;
  font-family: "icons", Helvetica, Arial, sans-serif;
}
@media (max-width: 767px) {
  .mobileMenu__navigation > ul > li > a:before {
    font-size: 2.8rem;
  }
}
.mobileMenu__navigation > ul > li > a:active, .mobileMenu__navigation > ul > li > a:focus, .mobileMenu__navigation > ul > li > a:active, .mobileMenu__navigation > ul > li > a.is-active, .mobileMenu__navigation > ul > li > a.is-active-tree {
  font-weight: var(--main-font-weight);
  color: var(--main-color-primary);
  background: var(--main-color-white);
}

body.home .mobileMenu__navigation > ul > li:first-child > a {
  color: var(--main-color-primary);
  text-decoration: none;
  background: var(--main-color-white);
}

@media print {
  a[href]:after {
    content: none !important;
  }
}
/*# sourceMappingURL=child.css.map */