@charset "UTF-8";
:root,
.dark {
  --main-color-white: #FFFFFF;
  --main-color-black: #111111;
  --main-color-dark-gray: #252525;
  --main-color-middle-gray: #6A6A6A;
  --main-color-gray-base: #B3B3B3;
  --main-color-light-gray: #E8E8E8;
  --main-color-primary: #B8ED00;
  --main-color-primary-dark: #a4d400;
  --main-color-primary-darken: #90ba00;
  --main-color-secondary: #FF2BA9;
  --main-color-action: #B8ED00;
  --main-color-danger: #D50000;
  --main-color-danger-dark: #bc0000;
  --main-color-warning: #EF7410;
  --main-color-warning-dark: #d7680e;
  --main-color-success: #7BBB31;
  --main-color-success-dark: #6ea72c;
  --main-color-info: #252525;
  --main-color-primary-contrast: #111111;
  --main-color-primary-dark-contrast: #111111;
  --main-color-primary-darken-contrast: #111111;
  --main-color-secondary-contrast: #FFFFFF;
  --main-color-action-contrast: #111111;
  --main-color-danger-contrast: #FFFFFF;
  --main-color-danger-dark-contrast: #FFFFFF;
  --main-color-warning-contrast: #111111;
  --main-color-warning-dark-contrast: #ffffff;
  --main-color-success-contrast: #111111;
  --main-color-success-dark-contrast: #111111;
  --main-color-info-contrast: #FFFFFF;
  --color-bg: #111111;
  --color-surface: #252525;
  --color-text: #FFFFFF;
  --color-text-muted: #B3B3B3;
  --color-border: #6A6A6A;
}

.light {
  --color-bg: #FFFFFF;
  --color-surface: #E8E8E8;
  --color-text: #111111;
  --color-text-muted: #6A6A6A;
  --color-border: #B3B3B3;
}

:root {
  --main-font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  --main-font-weight: 400;
  --main-font-weight-semi-bold: 500;
  --main-font-weight-bold: 600;
  --main-font-size-base: 1.5rem;
  --main-font-size-small: 1.3rem;
  --main-font-size-big: 1.8rem;
  --main-line-height: 1.4;
  --main-link-color: #FFFFFF;
  --main-link-color-hover: #FFFFFF;
}

/*
Icons

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

<div class="kss-icons">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</div>

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

:root {
  --base-icon-360: "";
  --base-icon-academy: "";
  --base-icon-address: "";
  --base-icon-addressbook: "";
  --base-icon-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-chart: "";
  --base-icon-chat: "";
  --base-icon-check-circle: "";
  --base-icon-check: "";
  --base-icon-clock: "";
  --base-icon-close: "";
  --base-icon-columns: "";
  --base-icon-copy: "";
  --base-icon-date: "";
  --base-icon-document-archive: "";
  --base-icon-download-2: "";
  --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-info: "";
  --base-icon-instagram: "";
  --base-icon-invoice: "";
  --base-icon-language: "";
  --base-icon-linkedin: "";
  --base-icon-list: "";
  --base-icon-loading: "";
  --base-icon-lock: "";
  --base-icon-logged: "";
  --base-icon-login: "";
  --base-icon-logout: "";
  --base-icon-mail: "";
  --base-icon-map-pin: "";
  --base-icon-marketing: "";
  --base-icon-minus: "";
  --base-icon-password-hide: "";
  --base-icon-password-show: "";
  --base-icon-pause: "";
  --base-icon-payment: "";
  --base-icon-pen-to-square: "";
  --base-icon-phone: "";
  --base-icon-pinterest: "";
  --base-icon-play: "";
  --base-icon-plus: "";
  --base-icon-print: "";
  --base-icon-question: "";
  --base-icon-quickorder: "";
  --base-icon-register: "";
  --base-icon-reload: "";
  --base-icon-retoure: "";
  --base-icon-rma: "";
  --base-icon-search: "";
  --base-icon-send: "";
  --base-icon-service: "";
  --base-icon-settings: "";
  --base-icon-share-node: "";
  --base-icon-share: "";
  --base-icon-shipping: "";
  --base-icon-sorting: "";
  --base-icon-star-filled: "";
  --base-icon-star-half: "";
  --base-icon-star: "";
  --base-icon-subscriptions: "";
  --base-icon-tiktok: "";
  --base-icon-trash: "";
  --base-icon-twitter: "";
  --base-icon-upload: "";
  --base-icon-user: "";
  --base-icon-users: "";
  --base-icon-voice: "";
  --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-chart:before {
  content: var(--base-icon-chart);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-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-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-chart'></i>

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

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

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

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

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

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

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

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

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

<i class='icon icon-download-2'></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-info'></i>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*/
body,
#container {
  background-color: var(--color-bg);
  color: var(--color-text);
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-black);
  text-decoration: none;
}

button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  color: var(--main-color-black);
  cursor: pointer;
  background: var(--main-color-light-gray);
  text-align: center;
  text-decoration: none;
  line-height: 16px;
  font-size: var(--main-font-size-small);
  padding: 10px 20px 10px 20px;
  transition: ease-in-out 0.1s;
  position: relative;
  gap: 10px;
}
@media (min-width: 768px) {
  button,
  .button {
    line-height: 21px;
    font-size: 1.4rem;
    padding: 10px 20px 10px 20px;
  }
}
button .icon,
.button .icon {
  font-size: 1.4em;
  line-height: 1;
  position: relative;
  margin-top: -1px;
}
button .icon:first-child,
.button .icon:first-child {
  margin-left: -5px;
}
button .icon:last-child,
.button .icon:last-child {
  margin-right: -5px;
}
button:active,
.button:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-decoration: none;
}
button--primary,
.button--primary {
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  border-color: var(--main-color-primary);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-dark-contrast);
}
button--primary:active,
.button--primary:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
button--action,
.button--action {
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-black);
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
button--action:active,
.button--action:active {
  background: var(--main-color-primary-dark);
  border-color: var(--main-color-primary-dark);
  color: var(--main-color-primary-contrast);
}
button--bordered,
.button--bordered {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
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-primary-contrast);
}
button--bordered:active,
.button--bordered:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
button--danger,
.button--danger {
  background: var(--main-color-danger);
  color: var(--main-color-danger-contrast);
  border-color: var(--main-color-danger);
}
button--danger:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
  background: var(--main-color-danger-dark);
  border-color: var(--main-color-danger-dark);
  color: var(--main-color-danger-dark-contrast);
}
button--danger:active,
.button--danger:active {
  background: var(--main-color-danger-darken);
  border-color: var(--main-color-danger-darken);
  color: var(--main-color-danger-darken-contrast);
}
button--sm,
.button--sm {
  line-height: 16px;
  font-size: var(--main-font-size-small);
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 16px;
  }
}
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;
}
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;
}
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;
}
button.is-loading,
.button.is-loading {
  cursor: wait;
  color: var(--main-color-black) !important;
}
button.is-loading:after,
.button.is-loading:after {
  content: var(--base-icon-loading);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
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;
}
button.is-success:after,
.button.is-success:after {
  content: var(--base-icon-check);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
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;
}
button.is-error:after,
.button.is-error:after {
  content: var(--base-icon-close);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

.button--primary {
  background: rgba(217, 217, 217, 0.4);
  border: none;
  border-radius: 40px;
  color: var(--main-color-white);
  font-size: 1.4rem;
  font-weight: var(--main-font-weight-semi-bold);
  text-transform: uppercase;
  padding: 6px 7px 6px 20px;
  gap: 14px;
  line-height: 1.85;
}
.button--primary::after {
  content: var(--base-icon-arrow-right);
  font-family: "icons", Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--main-color-black);
  flex-shrink: 0;
  font-size: 1.4rem;
  transform: rotate(-45deg);
  transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
}
.button--primary:hover, .button--primary:focus {
  background: rgba(217, 217, 217, 0.6);
  border-color: transparent;
  color: var(--main-color-white);
}
.button--primary:hover::after, .button--primary:focus::after {
  background: var(--main-color-white);
  color: var(--main-color-black);
  transform: rotate(0deg);
}
/*
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: var(--main-font-weight);
  line-height: 120%;
  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);
  line-height: 1;
}

h1, .h1 {
  margin-bottom: clamp(10px, 1em, 30px);
  font-size: 2.8rem;
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 6rem;
  }
}
h1.highlighted, .h1.highlighted {
  font-size: 3.4rem;
}
@media (min-width: 1024px) {
  h1.highlighted, .h1.highlighted {
    font-size: 4rem;
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .h1.highlighted {
    font-size: 10rem;
  }
}

h2, .h2 {
  font-size: 2.2rem;
}
@media (min-width: 1024px) {
  h2, .h2 {
    font-size: 4rem;
  }
}
h2.highlighted, .h2.highlighted {
  font-size: 2.8rem;
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted {
    font-size: 4.7rem;
  }
}

h3, .h3 {
  font-weight: var(--main-font-weight-semi-bold);
  font-size: 2.2rem;
}
@media (min-width: 1024px) {
  h3, .h3 {
    font-size: 3.2rem;
  }
}

h4, .h4 {
  font-weight: var(--main-font-weight-semi-bold);
  font-size: 1.8rem;
}
@media (min-width: 1024px) {
  h4, .h4 {
    font-size: 2.4rem;
  }
}

h5, .h5 {
  font-size: 2.4rem;
}

h6, .h6 {
  font-weight: var(--main-font-weight-semi-bold);
  font-size: 2rem;
}

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

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

/*
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: 14px;
}
.marginTop {
  margin-top: 14px;
}
.marginRight {
  margin-right: 14px;
}
.marginBottom {
  margin-bottom: 14px;
}
.marginLeft {
  margin-left: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767.98px) {
  .p--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 (min-width: 768px) and (max-width: 1023.98px) {
  .p--large {
    padding: 72px;
  }
  .pt--large {
    padding-top: 72px;
  }
  .pr--large {
    padding-right: 72px;
  }
  .pb--large {
    padding-bottom: 72px;
  }
  .pl--large {
    padding-left: 72px;
  }
  .padding--large {
    padding: 72px;
  }
  .paddingTop--large {
    padding-top: 72px;
  }
  .paddingRight--large {
    padding-right: 72px;
  }
  .paddingBottom--large {
    padding-bottom: 72px;
  }
  .paddingLeft--large {
    padding-left: 72px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .p--large {
    padding: 72px;
  }
  .pt--large {
    padding-top: 72px;
  }
  .pr--large {
    padding-right: 72px;
  }
  .pb--large {
    padding-bottom: 72px;
  }
  .pl--large {
    padding-left: 72px;
  }
  .padding--large {
    padding: 72px;
  }
  .paddingTop--large {
    padding-top: 72px;
  }
  .paddingRight--large {
    padding-right: 72px;
  }
  .paddingBottom--large {
    padding-bottom: 72px;
  }
  .paddingLeft--large {
    padding-left: 72px;
  }
}
@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: 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 (min-width: 1024px) and (max-width: 1249.98px) {
  .p--xlarge {
    padding: 120px;
  }
  .pt--xlarge {
    padding-top: 120px;
  }
  .pr--xlarge {
    padding-right: 120px;
  }
  .pb--xlarge {
    padding-bottom: 120px;
  }
  .pl--xlarge {
    padding-left: 120px;
  }
  .padding--xlarge {
    padding: 120px;
  }
  .paddingTop--xlarge {
    padding-top: 120px;
  }
  .paddingRight--xlarge {
    padding-right: 120px;
  }
  .paddingBottom--xlarge {
    padding-bottom: 120px;
  }
  .paddingLeft--xlarge {
    padding-left: 120px;
  }
}
@media (max-width: 767.98px) {
  .xs-padding {
    padding-bottom: 40px;
  }
  .xs-padding-base {
    padding-bottom: 14px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sm-padding {
    padding-bottom: 40px;
  }
  .sm-padding-base {
    padding-bottom: 14px;
  }
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
  .md-padding {
    padding-bottom: 40px;
  }
  .md-padding-base {
    padding-bottom: 14px;
  }
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
  .lg-padding {
    padding-bottom: 40px;
  }
  .lg-padding-base {
    padding-bottom: 14px;
  }
}
@media (min-width: 1540px) {
  .xlg-padding {
    padding-bottom: 40px;
  }
  .xlg-padding-base {
    padding-bottom: 14px;
  }
}
.headerLogo {
  max-width: 160px;
  flex-shrink: 0;
}
@media (min-width: 1250px) {
  .headerLogo {
    max-width: 200px;
  }
}
.headerLogo a, .headerLogo img {
  display: block;
  aspect-ratio: unset;
  object-fit: contain;
  object-position: left center;
}

.headerWrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  z-index: 100;
  background: linear-gradient(0deg, rgba(17, 17, 17, 0) 8.57%, rgba(17, 17, 17, 0.9) 100%);
  backdrop-filter: blur(3px);
}
@media (min-width: 768px) {
  .headerWrapper {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (min-width: 1250px) {
  .headerWrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.headerWrapper > .container {
  display: grid;
  grid-template-columns: 1fr 166px 1fr;
  gap: 40px;
  align-items: center;
}
.headerWrapper .headerLogo {
  margin-right: 0;
}
.headerWrapper .headerNavToggler {
  display: none;
  margin-left: 10px;
}
@media (max-width: 1023px) {
  .headerWrapper .headerNavToggler {
    display: block;
  }
}
@media (max-width: 1023px) {
  .headerWrapper .headerMainNavigation,
  .headerWrapper .button--pill,
  .headerWrapper .button--primary {
    display: none;
  }
}

.headerRight {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 40px;
}
@media (max-width: 1023px) {
  .headerRight {
    grid-gap: 0px;
  }
  .headerRight .langSwitch {
    display: none;
  }
}

.headerLogo img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
}

.headerLeft,
.headerRight {
  position: relative;
  z-index: 2;
}

@media (min-width: 1250px) {
  body.home #header {
    --header-scroll-progress: 0;
  }
  body.home .headerWrapper {
    min-height: calc(var(--header-height-max, 263px) * (1 - var(--header-scroll-progress, 0)) + 50px * var(--header-scroll-progress, 0));
    padding-top: calc(var(--header-padding-max, 100px) * (1 - var(--header-scroll-progress, 0)) + 20px * var(--header-scroll-progress, 0));
    padding-bottom: calc(35px * (1 - var(--header-scroll-progress, 0)) + 20px * var(--header-scroll-progress, 0));
    background: none;
    backdrop-filter: blur(calc(3px * var(--header-scroll-progress, 0)));
  }
  body.home .headerWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(17, 17, 17, 0) 8.57%, rgba(17, 17, 17, 0.9) 100%);
    opacity: 1;
    pointer-events: none;
    z-index: -1;
  }
  body.home .headerWrapper > .container {
    overflow: visible;
  }
  body.home .headerLogo {
    overflow: visible;
  }
  body.home .headerLogo img {
    width: 166px !important;
    height: 28px !important;
  }
  body.home .headerLogo a {
    height: 28px;
    aspect-ratio: unset;
    overflow: visible;
    transform: scale(calc(var(--header-logo-scale-max, 8.675) * (1 - var(--header-scroll-progress, 0)) + 1 * var(--header-scroll-progress, 0)));
    transform-origin: center center;
  }
  body.home .headerLeft,
  body.home .headerRight {
    transform: translateY(calc(var(--header-nav-ty-max, 121px) * (1 - var(--header-scroll-progress, 0))));
  }
}
body:not(.home) .mainContent {
  margin-top: calc(var(--header-offset, 70px) + 20px);
}
@media (min-width: 1250px) {
  body:not(.home) .mainContent {
    margin-top: calc(var(--header-offset, 90px) + 20px);
  }
}

body.noBreadcrumb .mainContent {
  margin-top: 0;
}
@media (min-width: 1250px) {
  body.noBreadcrumb .mainContent {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1250px) {
  body.home #header {
    --header-scroll-progress: 1;
  }
}
.footer {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  padding-top: 80px;
}

.footer__sphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.footer__blob {
  position: absolute;
  width: clamp(140px, 30vw, 300px);
  height: clamp(140px, 30vw, 300px);
  border-radius: 50%;
  filter: blur(clamp(60px, 8vw, 100px));
}

.footer__blob--pink {
  background: #FF2BA9;
  top: -107px;
  left: 84px;
  animation: blobFloat1 17s ease-in-out infinite;
}

.footer__blob--green {
  background: #B8ED00;
  top: 356px;
  left: 484px;
  animation: blobFloat2 20s ease-in-out infinite;
}

.footer__glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(16, 16, 16, 0.1) 0, rgba(25, 25, 25, 0.1) 72px, transparent 72px, transparent 144px);
  backdrop-filter: blur(100px);
}

.footer__inner {
  position: relative;
  z-index: 2;
}

.footerMain {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-top: 0;
  align-items: center;
  justify-items: center;
}
@media (min-width: 1024px) {
  .footerMain {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 80px;
    justify-items: start;
  }
}

.footerMain__social {
  display: flex;
  gap: 16px;
  align-items: center;
}
@media (min-width: 1024px) {
  .footerMain__social {
    justify-self: end;
  }
}
.footerMain__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  transition: border-color 0.2s, color 0.2s;
}
.footerMain__social a:hover {
  border-color: #B8ED00;
  color: #B8ED00;
}

.footerBottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  padding-bottom: 40px;
  font-size: var(--main-font-size-small);
}
@media (min-width: 768px) {
  .footerBottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footerBottom__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: center;
}
.footerBottom__nav a {
  text-decoration: none;
  color: var(--main-color-white);
}
.footerBottom__nav a:hover, .footerBottom__nav a:focus, .footerBottom__nav a:active {
  color: var(--main-color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--main-color-white);
}
.footerBottom__nav a.is-active, .footerBottom__nav a.is-active-tree {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--main-color-white);
}

@keyframes blobFloat1 {
  0%, 100% {
    translate: 0 0;
  }
  33% {
    translate: 55vw 15vw;
  }
  66% {
    translate: 4vw 32vw;
  }
}
@keyframes blobFloat2 {
  0%, 100% {
    translate: 0 0;
  }
  40% {
    translate: -22vw -7vw;
  }
  70% {
    translate: 37vw -25vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer__blob {
    animation-play-state: paused;
  }
}
.specialradiobox,
.specialcheckbox,
.specialcheckboxSwitch {
  color: var(--color-text);
}
.specialradiobox i,
.specialcheckbox i,
.specialcheckboxSwitch i {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}
.specialradiobox:has(input:disabled) i,
.specialcheckbox:has(input:disabled) i,
.specialcheckboxSwitch:has(input:disabled) i {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

.specialcheckbox i {
  border-radius: 0;
  background-color: transparent;
  border-color: var(--color-border);
}
.specialcheckbox i:after {
  color: var(--color-text);
}
.specialcheckbox:has(input:checked) i {
  background-color: var(--color-text);
  border-color: var(--color-text);
}
.specialcheckbox:has(input:checked) i:after {
  color: var(--color-bg);
  opacity: 1;
}
.specialcheckbox:has(input:focus) i {
  border-color: var(--main-color-primary);
}
.specialcheckbox:has(input:disabled) i {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

.specialcheckboxSwitch i {
  background: var(--color-border);
}
.specialcheckboxSwitch i:after {
  background: var(--color-text-muted);
}
.specialcheckboxSwitch:has(input:checked) i:after {
  background: var(--color-bg);
}

input,
select,
.selectBody__fakeOption {
  background: transparent;
  color: var(--color-text);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  font-size: max(16px, 1.4rem);
}
input::placeholder,
select::placeholder,
.selectBody__fakeOption::placeholder {
  color: var(--color-text-muted);
}
input:not(:disabled):active, input:not(:disabled):focus, input:not(:disabled):focus-within,
select:not(:disabled):active,
select:not(:disabled):focus,
select:not(:disabled):focus-within,
.selectBody__fakeOption:not(:disabled):active,
.selectBody__fakeOption:not(:disabled):focus,
.selectBody__fakeOption:not(:disabled):focus-within {
  border-color: var(--main-color-primary);
  outline: 0;
}
input:not(:disabled):focus-visible,
select:not(:disabled):focus-visible,
.selectBody__fakeOption:not(:disabled):focus-visible {
  outline: 0;
}
input.error,
select.error,
.selectBody__fakeOption.error {
  border-bottom-color: var(--main-color-danger);
}
input:disabled,
select:disabled,
.selectBody__fakeOption:disabled {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-bg) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

select {
  color-scheme: dark;
}

.light select {
  color-scheme: light;
}

option {
  background-color: var(--color-bg);
  color: var(--color-text);
}
option:disabled {
  color: var(--color-text-muted);
}

textarea {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 0;
  min-height: 120px;
  font-size: max(16px, 1.4rem);
}
textarea:not(:disabled):active, textarea:not(:disabled):focus, textarea:not(:disabled):focus-within {
  border-color: var(--main-color-primary);
  outline: 0;
}
textarea.error {
  border-color: var(--main-color-danger);
}
textarea:disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.selectBody {
  background: transparent;
}
.selectBody:after {
  color: var(--color-text);
}
.selectBody select {
  color: var(--color-text);
  border-color: var(--color-border);
}
.selectBody.focus select,
.selectBody select:focus {
  border-color: var(--main-color-primary);
}

.inputGroup.is-focus > input,
.inputGroup.is-focus > .input,
.inputGroup.is-focus select {
  background: transparent;
  border-color: var(--main-color-primary);
}
.inputGroup.is-focus .inputGroup__addon {
  background: transparent;
  border-color: var(--main-color-primary);
}
.inputGroup__addon {
  color: var(--color-text);
}

.infieldInputGroup.marginBottom--small {
  margin-bottom: 32px;
}
.infieldInputGroup > label {
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: var(--main-font-weight-semi-bold);
  letter-spacing: 0.02em;
}
.infieldInputGroup--select > label, .infieldInputGroup.is-focus > label, .infieldInputGroup.is-filled > label {
  top: 0;
  left: 0;
  transform: translate(0, -100%);
  color: var(--color-text-muted);
  background: transparent;
  font-size: 13px;
  line-height: 1;
  padding-left: 0;
  padding-right: 0;
  margin-top: -4px;
}
.infieldInputGroup:has(textarea):not(.is-focus):not(.is-filled) > label {
  top: 10px;
  transform: none;
}

.modal__dialog {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .modal__dialog {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  }
}
.modal__close {
  color: var(--color-text);
  opacity: 0.7;
}
.modal__close:hover, .modal__close:focus {
  color: var(--main-color-primary);
  background: var(--color-border);
  opacity: 1;
}
.modal__title {
  color: var(--color-text);
  font-weight: var(--main-font-weight-bold);
}

@media (min-width: 768px) {
  .modal--projectRequest .modal__body {
    padding-top: 8px;
  }
}
.modal--projectRequest .projectRequestModal__intro {
  margin: 0 0 44px;
  color: var(--color-text-muted);
  font-size: max(16px, var(--main-font-size-base));
  line-height: 1.5;
}
.modal--projectRequest .contactformular form {
  margin: 0;
}

.linkWithIcon {
  color: var(--color-text);
}
.linkWithIcon.is-loading, .linkWithIcon.is-success, .linkWithIcon.is-error {
  color: var(--color-text-muted) !important;
}

button.linkWithIcon {
  color: var(--color-text);
  background-color: transparent;
}

.breadcrumbWrapper {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #FFFFFF;
  font-family: var(--main-font-family);
  font-size: 12px;
  line-height: 1;
}
@media (min-width: 768px) {
  .breadcrumbWrapper {
    margin-top: 20px;
    margin-bottom: 40px;
  }
}
.breadcrumbWrapper a {
  color: #FFFFFF;
  text-decoration: none;
}
.breadcrumbWrapper a:hover {
  color: #B8ED00;
  text-decoration: none;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
@media (max-width: 767px) {
  .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
  }
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb .current {
  color: #FFFFFF;
}
.breadcrumb .current a,
.breadcrumb .current span {
  color: #FFFFFF;
}
.breadcrumb > li:first-child a {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  line-height: 0;
  color: rgba(255, 255, 255, 0.7);
}
.breadcrumb > li:first-child a::before {
  content: var(--base-icon-home);
  font-family: "icons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
}
.breadcrumb > li:first-child a:hover::before {
  color: #B8ED00;
}
.breadcrumb > i.icon {
  width: 3px;
  height: 3px;
  margin: 0;
  font-size: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  flex-shrink: 0;
}
.breadcrumb > i.icon::before {
  content: none;
}

.breadcrumbBackbutton {
  color: #FFFFFF;
}
.breadcrumbBackbutton:hover {
  color: #B8ED00;
  text-decoration: none;
}

.mainnav {
  display: flex;
  align-items: center;
}
.mainnav ul {
  margin: 0;
  padding: 0;
}
.mainnav li {
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
}
.mainnav a {
  color: var(--main-color-text-base);
  text-decoration: none;
  font-size: 1.4rem;
}
.mainnav li:hover > a, .mainnav li:focus > a, .mainnav li:active > a {
  color: var(--main-color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--main-color-white);
}
.mainnav li.is-active > a, .mainnav li.is-active-tree > a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--main-color-white);
}
.mainnav li.is-active > a:after, .mainnav li.is-active-tree > a:after {
  display: none;
}
.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-link-color-hover);
}
.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-link-color-hover);
}
.mainnav > ul {
  display: flex;
  gap: 20px;
  font-size: var(--main-font-size-base);
}
@media (min-width: 1540px) {
  .mainnav > ul {
    gap: 40px;
    font-size: 1.4rem;
  }
}
.mainnav > ul > li > a, .mainnav > ul > li span {
  font-weight: var(--main-font-weight-semi-bold);
  cursor: pointer;
}
.mainnav > ul.nav--content > li > a {
  font-weight: var(--main-font-weight-semi-bold);
}
.mainnav > ul.nav--showMore {
  margin-left: 20px;
}
@media (min-width: 1540px) {
  .mainnav > ul.nav--showMore {
    margin-left: 40px;
  }
}
.mainnav > ul > li.hoverintent .megaMenu,
.mainnav > ul > li.hoverintent > ul {
  display: block;
}

.megaMenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 101;
  background: var(--main-color-white);
  width: 100%;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
  padding-top: 10px;
  padding-bottom: 30px;
}
.megaMenu li {
  padding-top: 5px;
  padding-bottom: 5px;
}
.megaMenu a {
  font-weight: var(--main-font-weight);
  display: block;
}
.megaMenu__navigation > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.megaMenu__navigation > ul > li {
  width: 25%;
}
.megaMenu__navigation > ul > li > a {
  font-size: var(--main-font-size-base);
  font-weight: var(--main-font-weight-bold);
  margin-bottom: 10px;
}
.megaMenu .container {
  font-size: var(--main-font-size-base);
  display: flex;
  padding-top: 20px;
}
.megaMenu .container .megaMenu__navigation {
  flex-grow: 1;
}
.megaMenu .container .megaMenu__content {
  flex-shrink: 0;
  padding-left: 40px;
  width: 25%;
  display: none;
}
@media (min-width: 1250px) {
  .megaMenu .container .megaMenu__content {
    display: block;
  }
}

.mainnav > ul > li:has(> ul) {
  align-self: center;
  padding: 16px;
  padding-right: 33px;
  border-radius: 6px 6px 0 0;
}
.mainnav > ul > li:has(> ul) > a,
.mainnav > ul > li:has(> ul) > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--main-font-weight-semi-bold);
}
.mainnav > ul > li:has(> ul) > a:after,
.mainnav > ul > li:has(> ul) > span:after {
  font-family: "icons";
  content: var(--base-icon-angle-down);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  position: absolute;
  right: 10px;
}
.mainnav > ul > li > ul {
  top: 100%;
  margin-left: 0;
  margin-top: 0;
  min-width: auto;
  box-shadow: none;
  filter: none;
  border-radius: 0 0 6px 6px;
  padding: 8px 16px 16px;
  background: var(--main-color-white);
}
.mainnav > ul > li > ul::before, .mainnav > ul > li > ul::after {
  display: none;
}
.mainnav > ul > li > ul > li {
  padding: 0;
}
.mainnav > ul > li > ul > li:not(:last-child) {
  margin-bottom: 18px;
}
.mainnav > ul > li > ul > li a {
  font-size: 1.4rem;
  color: var(--main-color-black);
  white-space: nowrap;
}
.mainnav > ul > li > ul > li a:hover {
  color: var(--main-color-black);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--main-color-secondary);
}
.mainnav > ul > li > ul > li a.is-active {
  color: var(--main-color-secondary);
}
.mainnav > ul > li.hoverintent:has(> ul) {
  background: var(--main-color-white);
}
.mainnav > ul > li.hoverintent:has(> ul) > a,
.mainnav > ul > li.hoverintent:has(> ul) > span {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-semi-bold);
}
.mainnav > ul > li.hoverintent:has(> ul) > a::after,
.mainnav > ul > li.hoverintent:has(> ul) > span::after {
  transform: rotate(180deg);
}
.mainnav > ul > li.hoverintent:has(> ul) > ul {
  left: 0;
  min-width: 100%;
}

.langSwitch {
  position: relative;
  align-self: center;
  border-radius: 6px 6px 0 0;
}
.langSwitch__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--main-color-white);
  font-size: 1.4rem;
  font-weight: var(--main-font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 16px 33px 16px 16px;
  cursor: pointer;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.langSwitch__trigger:hover {
  background: transparent;
  text-decoration: underline;
  color: var(--main-color-white);
}
.langSwitch__trigger:focus-visible {
  outline: none;
}
.langSwitch.is-open .langSwitch__trigger:hover, .langSwitch.is-open .langSwitch__trigger:focus {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.langSwitch__arrow {
  position: absolute;
  right: 10px;
  flex-shrink: 0;
  line-height: 1;
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}
.langSwitch__arrow::before {
  font-family: "icons";
  content: var(--base-icon-angle-down);
  display: block;
  line-height: 1;
}
.langSwitch.is-open {
  border-radius: 6px 6px 0 0;
}
.langSwitch.is-open .langSwitch__trigger {
  border-radius: 6px 6px 0 0;
}
.langSwitch.is-open .langSwitch__arrow {
  transform: rotate(180deg);
}
.langSwitch.is-open .langSwitch__trigger {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.langSwitch__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 8px 16px 16px;
  background: var(--main-color-white);
  border-radius: 0 0 6px 6px;
  opacity: 0;
  visibility: hidden;
  z-index: 101;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.langSwitch.is-open .langSwitch__dropdown {
  opacity: 1;
  visibility: visible;
}
.langSwitch__option {
  display: block;
  padding: 4px 0;
  color: var(--main-color-black);
  font-size: 1.4rem;
  font-weight: var(--main-font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.langSwitch__option:hover, .langSwitch__option:focus-visible {
  color: var(--main-color-black);
  text-decoration: underline;
  outline: none;
}
.langSwitch__option.is-active {
  color: var(--main-color-black);
  font-weight: var(--main-font-weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--main-color-black);
}

.bannerWithFilter {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1440/760;
  max-height: 800px;
}
.bannerWithFilter__nav {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  height: 50px;
  background: rgba(217, 217, 217, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.bannerWithFilter__indicator {
  position: absolute;
  top: 9px;
  left: 9px;
  height: 32px;
  width: 0;
  background: #111;
  border-radius: 60px;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.bannerWithFilter__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  cursor: pointer;
  transition: color 0.2s ease;
}
.bannerWithFilter__tab:hover, .bannerWithFilter__tab:focus {
  background: transparent;
  color: var(--main-color-black);
}
.bannerWithFilter__tab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.bannerWithFilter__tab.is-active {
  color: var(--main-color-white);
}
.bannerWithFilter__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.bannerWithFilter__bg.is-active {
  opacity: 1;
  visibility: visible;
}
.bannerWithFilter__bg img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}
.bannerWithFilter__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bannerWithFilter__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.5) 100%);
}
.bannerWithFilter__panels {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bannerWithFilter__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.bannerWithFilter__panel.is-active {
  opacity: 1;
  visibility: visible;
}
.bannerWithFilter__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: clamp(24px, 4.86vw, 70px);
}
.bannerWithFilter__textWrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 50%;
}
.bannerWithFilter__headline {
  font-size: clamp(36px, 6.94vw, 100px);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  margin: 0;
  white-space: pre-line;
}
.bannerWithFilter__subtext {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.bannerWithFilter__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
  align-self: flex-end;
}
.bannerWithFilter__cta:hover .bannerWithFilter__ctaBtn::before {
  width: 52px;
  height: 52px;
  background-color: var(--main-color-black);
}
.bannerWithFilter__ctaLabel {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bannerWithFilter__ctaBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border: 1px solid #fff;
  border-radius: 100px;
  background: transparent;
}
.bannerWithFilter__ctaBtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  background: #111;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  z-index: 0;
}
.bannerWithFilter__ctaBtn .icon {
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: #fff;
}
@media (max-width: 1249px) {
  .bannerWithFilter__textWrap {
    max-width: 60%;
    gap: 24px;
  }
}
@media (max-width: 1023px) {
  .bannerWithFilter {
    aspect-ratio: 16/9;
    max-height: none;
  }
  .bannerWithFilter__textWrap {
    max-width: 70%;
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .bannerWithFilter {
    aspect-ratio: 4/5;
    max-height: 580px;
    min-height: 480px;
  }
  .bannerWithFilter__nav {
    top: 20px;
    max-width: calc(100% - 32px);
    height: 44px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bannerWithFilter__nav::-webkit-scrollbar {
    display: none;
  }
  .bannerWithFilter__indicator {
    top: 8px;
    height: 28px;
  }
  .bannerWithFilter__tab {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
  }
  .bannerWithFilter__content {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }
  .bannerWithFilter__textWrap {
    max-width: 100%;
    gap: 12px;
  }
  .bannerWithFilter__subtext {
    font-size: 14px;
  }
  .bannerWithFilter__cta {
    align-self: flex-end;
    gap: 14px;
  }
  .bannerWithFilter__ctaLabel {
    display: none;
  }
  .bannerWithFilter__ctaBtn {
    width: 52px;
    height: 52px;
  }
  .bannerWithFilter__ctaBtn::before {
    width: 52px;
    height: 52px;
  }
  .bannerWithFilter__ctaBtn .icon {
    font-size: 18px;
  }
  .bannerWithFilter__cta:hover .bannerWithFilter__ctaBtn::before {
    width: 36px;
    height: 36px;
  }
}

a.bannerWithFilter__cta:hover, a.bannerWithFilter__cta:focus {
  text-decoration: none !important;
}
a.bannerWithFilter__cta:hover .bannerWithFilter__ctaBtn, a.bannerWithFilter__cta:focus .bannerWithFilter__ctaBtn {
  text-decoration: none;
}

.horizontalScrolling {
  position: relative;
  background: var(--main-color-black);
  color: var(--main-color-white);
  overflow: clip;
}
.horizontalScrolling__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
}
.horizontalScrolling__track {
  position: relative;
  width: var(--track-w, 100vw);
  height: 100%;
}
.horizontalScrolling__stage {
  position: absolute;
  left: 0;
  top: calc((100% - 663px * var(--scale, 1)) / 2);
  height: 663px;
  width: max-content;
  display: flex;
  align-items: stretch;
  gap: 60px;
  padding-inline: 70px;
  transform-origin: top left;
  transform: scale(var(--scale, 1));
}
.horizontalScrolling__panel {
  position: relative;
  flex: 0 0 auto;
  height: 663px;
  width: 862px;
}
.horizontalScrolling__panel:has(.horizontalScrolling__text) {
  width: calc(862px + 60px + 472px);
}
.horizontalScrolling__panel:not(:has(.horizontalScrolling__headline)):not(:has(.horizontalScrolling__text)) {
  width: 520px;
  height: 520px;
  align-self: center;
}
.horizontalScrolling__media {
  position: absolute;
  left: 0;
  top: 0;
  width: 862px;
  height: 100%;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.horizontalScrolling__media img,
.horizontalScrolling__media picture,
.horizontalScrolling__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.horizontalScrolling__panel:not(:has(.horizontalScrolling__headline)):not(:has(.horizontalScrolling__text)) .horizontalScrolling__media {
  width: 100%;
}
.horizontalScrolling__headline {
  position: absolute;
  left: var(--hl-left, 270px);
  z-index: 2;
  margin: 0;
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  --fs: 60px;
  font-size: calc(var(--fs) / var(--scale, 1));
  width: calc(var(--fs) * 6 / var(--scale, 1));
  line-height: 120%;
  letter-spacing: 0.01em;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  --hl: var(--main-color-white);
  --reveal: 0;
}
.horizontalScrolling__headline--top {
  top: 80px;
}
.horizontalScrolling__headline--center {
  top: 50%;
  transform: translateY(-50%);
}
.horizontalScrolling__headlineBase {
  display: block;
  color: var(--main-color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.horizontalScrolling__headlineFill {
  position: absolute;
  inset: 0;
  color: var(--hl);
  -webkit-text-stroke: 0.4px var(--hl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  clip-path: inset(0 calc((1 - var(--reveal, 0)) * 100%) 0 0);
  will-change: clip-path;
}
.horizontalScrolling__text {
  position: absolute;
  left: calc(862px + 60px);
  top: 480px;
  z-index: 2;
  margin: 0;
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  --fs: 15px;
  font-size: calc(var(--fs) / var(--scale, 1));
  width: calc(472px / var(--scale, 1));
  line-height: 150%;
  color: var(--main-color-white);
}
.horizontalScrolling__text .textcontent {
  background: none;
}
.horizontalScrolling__text p,
.horizontalScrolling__text ul,
.horizontalScrolling__text ol {
  margin: 0;
}
.horizontalScrolling__text > :first-child {
  margin-top: 0;
}
.horizontalScrolling__text > :last-child {
  margin-bottom: 0;
}
.horizontalScrolling__text strong {
  font-weight: var(--main-font-weight-bold);
}
.horizontalScrolling.is-pinned {
  height: calc(100vh + var(--travel, 0px));
}
@supports (animation-timeline: scroll()) {
  .horizontalScrolling.is-pinned {
    view-timeline-name: --hs;
    view-timeline-axis: block;
  }
  .horizontalScrolling.is-pinned .horizontalScrolling__track {
    animation: horizontalScrolling-translate linear both;
    animation-timeline: --hs;
    animation-range: contain 0% contain 100%;
  }
}
@supports not (animation-timeline: scroll()) {
  .horizontalScrolling.is-pinned .horizontalScrolling__track {
    will-change: transform;
  }
}
.horizontalScrolling.is-scroll {
  height: auto;
  overflow: visible;
  --panel-w: min(86vw, 480px);
  --hl-clear: clamp(36px, 11vw, 56px);
  --media-w: calc(var(--panel-w) - var(--hl-clear));
  --media-h: calc(var(--media-w) * 663 / 862);
  --tile-w: min(55vw, 300px);
  --gap: clamp(20px, 6vw, 40px);
  --edge: max(clamp(16px, 5vw, 40px), calc((100vw - var(--panel-w)) / 2));
}
.horizontalScrolling.is-scroll .horizontalScrolling__pin {
  position: static;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}
.horizontalScrolling.is-scroll .horizontalScrolling__track {
  width: max-content;
  height: auto;
  animation: none !important;
}
.horizontalScrolling.is-scroll .horizontalScrolling__stage {
  position: static;
  transform: none;
  height: auto;
  align-items: flex-start;
  gap: var(--gap);
  padding-inline: var(--edge) 0;
  padding-block: 40px 48px;
}
.horizontalScrolling.is-scroll .horizontalScrolling__stage::after {
  content: "";
  flex: 0 0 max(1px, var(--edge) - var(--gap));
}
.horizontalScrolling.is-scroll .horizontalScrolling__panel {
  width: var(--panel-w);
  height: auto;
  scroll-snap-align: center;
}
.horizontalScrolling.is-scroll .horizontalScrolling__panel:has(.horizontalScrolling__text),
.horizontalScrolling.is-scroll .horizontalScrolling__panel:has(.horizontalScrolling__headline) {
  width: var(--panel-w);
  padding-right: var(--hl-clear);
}
.horizontalScrolling.is-scroll .horizontalScrolling__panel:not(:has(.horizontalScrolling__headline)):not(:has(.horizontalScrolling__text)) {
  width: var(--tile-w);
  height: auto;
  align-self: flex-start;
  margin-top: calc((var(--media-h) - var(--tile-w)) / 2);
}
.horizontalScrolling.is-scroll .horizontalScrolling__media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 862/663;
}
.horizontalScrolling.is-scroll .horizontalScrolling__panel:not(:has(.horizontalScrolling__headline)):not(:has(.horizontalScrolling__text)) .horizontalScrolling__media {
  aspect-ratio: 1/1;
}
.horizontalScrolling.is-scroll .horizontalScrolling__headline {
  --fs: clamp(28px, 7.5vw, 40px);
}
.horizontalScrolling.is-scroll .horizontalScrolling__headline--top {
  top: clamp(16px, 5vw, 40px);
}
.horizontalScrolling.is-scroll .horizontalScrolling__headline--center {
  top: calc(var(--media-h) / 2);
}
.horizontalScrolling.is-scroll .horizontalScrolling__text {
  position: static;
  width: auto;
  max-width: 60ch;
  margin-top: clamp(14px, 4vw, 20px);
  --fs: 15px;
}
.horizontalScrolling__hint {
  display: none;
}
.horizontalScrolling.is-scroll .horizontalScrolling__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px auto 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--main-color-white);
  transition: opacity 0.3s ease;
  animation: horizontalScrolling-hint 1.8s ease-in-out infinite;
}
.horizontalScrolling.is-scroll .horizontalScrolling__hint .icon {
  font-size: 20px;
  line-height: 1;
}
.horizontalScrolling.is-scroll .horizontalScrolling__hint.is-hidden {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .horizontalScrolling .horizontalScrolling__track {
    animation: none !important;
  }
  .horizontalScrolling .horizontalScrolling__hint {
    animation: none;
  }
}

@keyframes horizontalScrolling-translate {
  to {
    transform: translateX(calc(-1 * var(--travel, 0px)));
  }
}
@keyframes horizontalScrolling-hint {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}
.usp {
  --usp-cols: 4;
  --usp-gap: 40px;
  --usp-pad: 30px;
  --usp-icon-size: 40px;
  --usp-border: 1px dashed #A4A4A4;
  display: grid;
  grid-template-columns: repeat(var(--usp-cols), minmax(0, 1fr));
  border-top: var(--usp-border);
  border-left: var(--usp-border);
}
.usp--cols-2 {
  --usp-cols: 2;
}
.usp--cols-3 {
  --usp-cols: 3;
}
.usp--cols-4 {
  --usp-cols: 4;
}
.usp__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: var(--usp-gap);
  padding: var(--usp-pad);
  border-right: var(--usp-border);
  border-bottom: var(--usp-border);
}
.usp__icon {
  display: flex;
  align-items: flex-start;
  height: var(--usp-icon-size);
}
.usp__icon picture {
  width: auto !important;
  height: 100%;
  display: block;
}
.usp__icon img,
.usp__icon svg {
  width: auto !important;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.usp__headline {
  margin: 0;
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight-semi-bold);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--main-color-white);
  margin-bottom: 0;
}
.usp__text {
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--main-color-white);
}
.usp__text .textcontent {
  background: none;
}
.usp__text p,
.usp__text ul,
.usp__text ol {
  margin: 0;
}
.usp__text > :first-child {
  margin-top: 0;
}
.usp__text > :last-child {
  margin-bottom: 0;
}
.usp__text strong {
  font-weight: var(--main-font-weight-bold);
}
@supports not (grid-template-rows: subgrid) {
  .usp__card {
    display: flex;
    flex-direction: column;
  }
  .usp__headline {
    min-height: 2.4em;
  }
}
@media (max-width: 1023px) {
  .usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --usp-gap: 24px;
    --usp-pad: 24px;
  }
}
@media (max-width: 767px) {
  .usp {
    grid-template-columns: minmax(0, 1fr);
    --usp-gap: 16px;
    --usp-pad: 20px;
  }
}

.stickyContact {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 102;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stickyContact.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.stickyContact__inner {
  display: inline-flex;
  align-items: center;
  max-width: calc(100vw - 24px * 2);
  border-radius: 999px;
  background: #FF2BA9;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.25s ease;
}
@media (max-width: 1249px) {
  .stickyContact__inner {
    border-radius: 30px;
  }
}
.stickyContact:hover .stickyContact__inner, .stickyContact:focus-within .stickyContact__inner, .stickyContact.is-open .stickyContact__inner {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.stickyContact__toggle {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stickyContact__toggle:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: -6px;
}
.stickyContact__toggle:hover, .stickyContact__toggle:focus {
  background: #FF2BA9;
  border-color: var(--main-color-secondary);
  color: var(--main-color-white);
}
@media (max-width: 1249px) {
  .stickyContact__toggle {
    width: 60px;
    height: 60px;
  }
}
.stickyContact__icon {
  display: block;
  width: 50px;
  height: 50px;
}
@media (max-width: 1249px) {
  .stickyContact__icon {
    width: 38px;
    height: 38px;
  }
}
.stickyContact__chat {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 80%;
  animation: stickyContactWiggle 4s ease-in-out infinite;
}
.stickyContact__dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: stickyContactDot 1.05s ease-in-out infinite;
}
.stickyContact__dot--2 {
  animation-delay: 0.13s;
}
.stickyContact__dot--3 {
  animation-delay: 0.26s;
}
.stickyContact__panel {
  display: grid;
  grid-template-columns: 0fr;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1), grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.stickyContact:hover .stickyContact__panel, .stickyContact:focus-within .stickyContact__panel, .stickyContact.is-open .stickyContact__panel {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1), grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease 0.1s;
}
.stickyContact__panelInner {
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(-10px);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1249px) {
  .stickyContact__panelInner {
    gap: 4px;
  }
}
.stickyContact:hover .stickyContact__panelInner, .stickyContact:focus-within .stickyContact__panelInner, .stickyContact.is-open .stickyContact__panelInner {
  transform: none;
}
.stickyContact__block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 26px;
}
@media (max-width: 1249px) {
  .stickyContact__block {
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
    padding-right: 20px;
  }
  .stickyContact__block:first-child {
    padding-top: 16px;
  }
  .stickyContact__block:last-child {
    padding-bottom: 16px;
  }
}
.stickyContact__label {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}
.stickyContact__value {
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
  text-decoration: underline;
}
.stickyContact__value:hover, .stickyContact__value:focus-visible {
  color: #FFFFFF;
  text-decoration-color: var(--main-color-primary);
  outline: none;
}

@keyframes stickyContactWiggle {
  0%, 88%, 100% {
    transform: rotate(0deg);
  }
  91% {
    transform: rotate(-9deg);
  }
  94% {
    transform: rotate(7deg);
  }
  97% {
    transform: rotate(-4deg);
  }
}
@keyframes stickyContactDot {
  0%, 55%, 100% {
    y: 23.05px;
    height: 3.9px;
  }
  22% {
    y: 17.5px;
    height: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stickyContact {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .stickyContact__panel {
    transition: opacity 0.2s ease;
  }
  .stickyContact__panelInner {
    transform: none;
    transition: none;
  }
  .stickyContact__chat, .stickyContact__dot {
    animation: none;
  }
}
.ansprechpartner {
  background-color: #111111;
  color: #FFFFFF;
  font-family: var(--main-font-family);
  padding: 80px 0;
}
@media (max-width: 1023px) {
  .ansprechpartner {
    padding: 48px 0;
  }
}
.ansprechpartner__navRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
}
.ansprechpartner__nav {
  position: sticky;
  top: 100px;
  z-index: 5;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  height: 50px;
  background: rgba(217, 217, 217, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.ansprechpartner__indicator {
  position: absolute;
  top: 9px;
  left: 9px;
  height: 32px;
  width: 0;
  background: #111;
  border-radius: 60px;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.ansprechpartner__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  cursor: pointer;
}
.ansprechpartner__tab:hover, .ansprechpartner__tab:focus, .ansprechpartner__tab:active {
  background: transparent;
  border: 0;
  color: #fff;
}
.ansprechpartner__tab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.ansprechpartner__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.ansprechpartner__vertrieb {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ansprechpartner__vertrieb[hidden] {
  display: none;
}
.ansprechpartner__map {
  margin: 0;
  max-width: 598px;
  width: 100%;
}
.ansprechpartner__map img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .ansprechpartner__map img {
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - 190px);
    margin-inline: auto;
  }
}
.ansprechpartner__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.ansprechpartner__filter {
  position: relative;
  width: 193px;
  max-width: 100%;
  align-self: flex-end;
}
.ansprechpartner:not(.is-vertrieb) .ansprechpartner__filter[data-filter-field=region] {
  display: none;
}
.ansprechpartner:not(.is-zentrale) .ansprechpartner__filter[data-filter-field=department] {
  display: none;
}
.ansprechpartner__navRow .ansprechpartner__filter {
  align-self: center;
}
.ansprechpartner__filterLabel {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.ansprechpartner__filterTrigger {
  position: relative;
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.85;
  padding: 0 0 10px;
  cursor: pointer;
}
.ansprechpartner__filterTrigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #FFFFFF;
  border-radius: 100px;
}
.ansprechpartner__filterTrigger .icon {
  font-size: 16px;
  transition: transform 0.25s ease;
}
.ansprechpartner__filterTrigger:hover, .ansprechpartner__filterTrigger:focus, .ansprechpartner__filterTrigger:active {
  background: transparent;
  border: 0;
  color: #FFFFFF;
}
.ansprechpartner__filterTrigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.ansprechpartner__filterList {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.ansprechpartner__filterList::-webkit-scrollbar {
  width: 10px;
}
.ansprechpartner__filterList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.ansprechpartner__filterOption {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.ansprechpartner__filterOption:hover, .ansprechpartner__filterOption:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
  outline: none;
}
.ansprechpartner__filterOption.is-active {
  background: rgba(184, 237, 0, 0.14);
  color: #B8ED00;
  font-weight: var(--main-font-weight-semi-bold);
}
.ansprechpartner__filter.is-open .ansprechpartner__filterList {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ansprechpartner__filter.is-open .ansprechpartner__filterTrigger .icon {
  transform: rotate(180deg);
}
.ansprechpartner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 60px 14px;
}
@media (max-width: 1023px) {
  .ansprechpartner__grid {
    gap: 32px 14px;
  }
}
@media (max-width: 767px) {
  .ansprechpartner__grid {
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  }
}
.ansprechpartner__empty {
  grid-column: 1/-1;
  margin: 0;
  padding: 24px 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.ansprechpartner__empty[hidden] {
  display: none;
}
.ansprechpartner__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 280/373;
  padding: 0;
  overflow: hidden;
  background-color: #252525;
}
.ansprechpartner__card[hidden] {
  display: none;
}
.ansprechpartner__cardMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #111111;
}
.ansprechpartner__cardMedia::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ap-photo-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ansprechpartner__cardMedia::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 45%, rgb(17, 17, 17) 92%, rgb(17, 17, 17) 100%);
}
.ansprechpartner__cardImg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto !important;
  filter: grayscale(1) contrast(1.03);
}
.ansprechpartner.has-photo-bg .ansprechpartner__cardImg {
  object-fit: contain;
  object-position: center bottom;
  filter: none;
}
.ansprechpartner.has-photo-bg .ansprechpartner__cardMedia {
  background-color: #252525;
}
.ansprechpartner.has-photo-bg .ansprechpartner__card:hover .ansprechpartner__cardMedia::before {
  opacity: 0;
}
.ansprechpartner__cardBody {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
}
.ansprechpartner__cardTop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 24px 18px;
}
.ansprechpartner__cardBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
  justify-content: center;
}
.ansprechpartner__cardBadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 100px;
  background: rgba(50, 50, 50, 0.42);
  color: var(--main-color-white);
  font-size: 11px;
  line-height: 1.6;
  font-weight: var(--main-font-weight-semi-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ansprechpartner__cardName {
  font-size: 18px;
  line-height: 1.35;
  font-weight: var(--main-font-weight-semi-bold);
  margin: 0;
  color: #FFFFFF;
}
.ansprechpartner__cardPosition {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.ansprechpartner__cardContact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
}
.ansprechpartner__cardLink {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  transition: color 0.2s ease;
}
.ansprechpartner__cardLink:hover {
  text-decoration-color: var(--main-color-secondary);
}
.ansprechpartner.is-vertrieb .ansprechpartner__layout {
  grid-template-columns: minmax(0, 598px) max-content;
  justify-content: space-between;
  gap: 60px;
}
.ansprechpartner.is-vertrieb .ansprechpartner__vertrieb {
  position: sticky;
  top: 170px;
  align-self: start;
}
.ansprechpartner.is-vertrieb .ansprechpartner__grid {
  grid-template-columns: repeat(2, 280px);
  gap: 60px 14px;
}
@media (min-width: 1540px) {
  .ansprechpartner.is-vertrieb .ansprechpartner__grid {
    grid-template-columns: repeat(3, 280px);
  }
}
@media (max-width: 1023px) {
  .ansprechpartner__nav {
    position: static;
    top: auto;
  }
  .ansprechpartner.is-vertrieb .ansprechpartner__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .ansprechpartner.is-vertrieb .ansprechpartner__vertrieb {
    position: static;
    top: auto;
    align-items: center;
  }
  .ansprechpartner.is-vertrieb .ansprechpartner__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ansprechpartner__map {
    max-width: 460px;
  }
  .ansprechpartner__filter {
    width: 100%;
    max-width: 320px;
  }
}
@media (max-width: 767px) {
  .ansprechpartner__map {
    max-width: 300px;
  }
  .ansprechpartner__filter {
    align-self: stretch;
    width: 100%;
    max-width: none;
  }
  .ansprechpartner__grid, .ansprechpartner.is-vertrieb .ansprechpartner__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ansprechpartner__card {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    aspect-ratio: auto;
    min-height: 132px;
    padding: 0;
    border-radius: 8px;
  }
  .ansprechpartner__cardMedia {
    position: relative;
    inset: auto;
    flex: 0 0 118px;
  }
  .ansprechpartner__cardMedia::after {
    display: none;
  }
  .ansprechpartner__card--noimg .ansprechpartner__cardMedia {
    display: none;
  }
  .ansprechpartner__cardBody {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 16px;
    gap: 10px;
  }
  .ansprechpartner__cardTop {
    padding: 0;
  }
  .ansprechpartner__cardContact {
    align-items: flex-start;
    padding: 0;
    background-color: transparent;
  }
  .ansprechpartner__cardLink {
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ansprechpartner__indicator,
  .ansprechpartner__filterList,
  .ansprechpartner__cardMedia::before,
  .ansprechpartner__filterTrigger .icon {
    transition: none;
  }
}
.downloads {
  --dl-page: #111111;
  --dl-surface: #1B1B1B;
  --dl-card: #252525;
  --dl-text: var(--main-color-white);
  --dl-text-muted: rgba(255, 255, 255, .6);
  --dl-border: rgba(255, 255, 255, .18);
  --dl-divider: rgba(255, 255, 255, .12);
  --dl-field-bg: rgba(255, 255, 255, .04);
  --dl-accent: #B8ED00;
  --dl-accent-contrast: #111111;
  --dl-seg-bg: rgba(255, 255, 255, .08);
  --dl-seg-indicator: #B8ED00;
  --dl-seg-active: #111111;
  background-color: var(--dl-page);
  color: var(--dl-text);
  font-family: var(--main-font-family);
  padding: 0 0 64px;
  overflow-anchor: none;
}
@media (max-width: 1023px) {
  .downloads {
    padding: 0 0 48px;
  }
}
@media (max-width: 767px) {
  .downloads {
    padding: 0 0 32px;
  }
}
.downloads * {
  box-sizing: border-box;
}
.downloads__hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 370px;
  margin-bottom: 40px;
  padding: 56px 0;
  background-color: #111;
  overflow: hidden;
}
@media (max-width: 767px) {
  .downloads__hero {
    min-height: 290px;
    padding: 36px 0;
    margin-bottom: 28px;
  }
}
.downloads__heroLayer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.downloads__heroLayer picture,
.downloads__heroLayer img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}
.downloads__heroLayer.is-visible {
  opacity: 1;
}
.downloads__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.3) 0%, rgba(17, 17, 17, 0.55) 100%);
  pointer-events: none;
}
.downloads__hero .container {
  position: relative;
  z-index: 1;
}
.downloads__pricelist {
  padding-top: 24px;
  margin-bottom: 64px;
}
@media (max-width: 767px) {
  .downloads__pricelist {
    padding-top: 16px;
    margin-bottom: 40px;
  }
}
.downloads__pricelist > *:first-child {
  margin-top: 0;
}
.downloads__pricelist > *:last-child {
  margin-bottom: 0;
}
.downloads__pricelist h3 {
  margin-bottom: 32px;
}
.downloads__pricelist .filegallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}
@media (max-width: 1023px) {
  .downloads__pricelist .filegallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .downloads__pricelist .filegallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
.downloads__pricelist .filegallery > div {
  display: flex;
  margin: 0;
}
.downloads__pricelist .filegalleryFile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  padding: 16px;
  background: var(--dl-card);
  border: 1px solid var(--dl-border);
  border-radius: 14px;
  color: var(--dl-text);
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease, background 0.18s ease;
}
.downloads__pricelist .filegalleryFile:hover {
  transform: translateY(-2px);
  border-color: var(--dl-white);
  color: var(--dl-text);
  text-decoration: none;
}
.downloads__pricelist .filegalleryFile:focus-visible {
  outline: 2px solid var(--dl-white);
  outline-offset: 2px;
}
.downloads__pricelist .filegalleryFile__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 128px;
  width: 128px;
  height: 181px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dl-field-bg);
}
.downloads__pricelist .filegalleryFile .icon {
  font-size: 28px;
  line-height: 1;
  color: var(--dl-text-muted);
  opacity: 0.5;
}
.downloads__pricelist .filegalleryFile__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #fff;
}
.downloads__pricelist .filegalleryFile__media.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(127, 127, 127, 0.08) 30%, rgba(127, 127, 127, 0.18) 50%, rgba(127, 127, 127, 0.08) 70%);
  background-size: 200% 100%;
  animation: downloads-shimmer 1.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.downloads__pricelist .filegalleryFile span {
  display: block;
  flex: 1 1 auto;
  align-self: flex-start;
  padding-right: 40px;
  font-size: 16px;
  font-weight: var(--main-font-weight);
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.downloads__pricelist .filegalleryFile::after {
  content: var(--base-icon-download-2);
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  line-height: 1;
  border-radius: 100px;
  background: var(--dl-text);
  border: 1px solid var(--dl-text);
  color: var(--dl-accent-contrast);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.downloads__pricelist .filegalleryFile:hover::after {
  transform: translateY(-1px);
  background: var(--dl-accent-contrast);
  color: var(--dl-text);
}
.downloads__heading {
  margin: 0 0 24px;
  text-align: center;
  color: #fff;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.2;
  font-weight: var(--main-font-weight);
}
@media (max-width: 767px) {
  .downloads__heading {
    margin-bottom: 18px;
  }
}
.downloads__searchWrap {
  max-width: 424px;
  margin: 0 auto;
}
.downloads__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 100px;
  cursor: text;
}
.downloads__searchIcon {
  font-size: 18px;
  color: #fff;
  flex: 0 0 auto;
}
.downloads__searchInput {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.downloads__searchInput::placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
.downloads__searchInput:focus {
  outline: none;
}
.downloads__searchInput::-webkit-search-decoration, .downloads__searchInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.downloads__bereich {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  height: 50px;
  margin: 0 auto 40px;
  max-width: 100%;
  background: rgba(217, 217, 217, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.downloads__bereichIndicator {
  position: absolute;
  top: 9px;
  left: 9px;
  height: 32px;
  width: 0;
  background: #111;
  border-radius: 60px;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.downloads__bereichTab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.downloads__bereichTab:hover, .downloads__bereichTab:focus {
  background: transparent;
  border: 0;
  color: var(--main-color-black);
}
.downloads__bereichTab.is-active {
  color: #FFFFFF;
}
.downloads__bereichTab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.downloads__bereichIcon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.downloads__bereichIcon--masked {
  background-color: currentColor;
  -webkit-mask-image: var(--dl-bereich-icon);
  mask-image: var(--dl-bereich-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.downloads__layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.downloads__sidebar {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: var(--dl-surface);
  overflow: hidden;
}
.downloads__sidebarHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.downloads__filterHeading {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: var(--main-font-weight);
  color: var(--dl-text);
}
.downloads__filterToggle {
  display: none;
  align-items: center;
  gap: 8px;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--dl-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--main-font-weight-semi-bold);
  cursor: pointer;
}
.downloads__filterToggle .icon {
  font-size: 14px;
  transition: transform 0.25s ease;
}
.downloads__filterBody {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dl-border) transparent;
}
.downloads__filterBody::-webkit-scrollbar {
  width: 8px;
}
.downloads__filterBody::-webkit-scrollbar-thumb {
  background: var(--dl-border);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.downloads__filterGroup + .downloads__filterGroup {
  padding-top: 20px;
}
.downloads__filterGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  cursor: pointer;
  padding-left: 0;
  color: var(--dl-text);
}
.downloads__filterGroupHead:hover .downloads__filterGroupTitle, .downloads__filterGroupHead:hover .downloads__filterGroupIcon {
  color: var(--dl-accent);
}
.downloads__filterGroupHead:after {
  content: none;
}
.downloads__filterGroupTitle {
  font-size: 16px;
  line-height: 1.2;
  font-weight: var(--main-font-weight-semi-bold);
  color: var(--dl-text);
  transition: color 0.2s ease;
}
.downloads__filterGroupIcon {
  font-size: 18px;
  color: var(--dl-text);
  flex: 0 0 auto;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.downloads .slidecontentItem__content {
  display: none;
  padding-left: 0;
}
.slidecontentItem.is-active .downloads__filterGroupIcon {
  transform: rotate(180deg);
}
.downloads__serienList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.downloads__serienItem[hidden] {
  display: none;
}
.downloads__serie {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.downloads__serie:hover {
  background: rgba(17, 17, 17, 0.05);
}
.downloads__serieCheckbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.downloads__serieIcon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: var(--dl-text);
}
.downloads__serieIcon--masked {
  background-color: currentColor;
  -webkit-mask-image: var(--dl-serie-icon);
  mask-image: var(--dl-serie-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.downloads__serieText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.downloads__serieName {
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--main-font-weight-bold);
  color: var(--dl-text);
}
.downloads__serieSubtitle {
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--dl-text-muted);
}
.downloads__serieCheckbox:checked + .downloads__serieIcon {
  color: var(--dl-white);
}
.downloads__serieCheckbox:checked + .downloads__serieIcon + .downloads__serieText .downloads__serieName {
  color: var(--dl-white);
}
.downloads__serie:hover {
  background: rgba(255, 255, 255, 0.06);
}
.downloads__serie:has(.downloads__serieCheckbox:checked) {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(214, 214, 214, 0.35);
}
.downloads__serieCheckbox:focus-visible + .downloads__serieIcon {
  outline: 2px solid var(--dl-white);
  outline-offset: 2px;
}
.downloads__typList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.downloads__typ {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 8px 10px;
  padding-left: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.downloads__typ > i {
  position: relative;
}
.downloads__typ:hover {
  background: rgba(255, 255, 255, 0.06);
}
.downloads__typName {
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--main-font-weight-bold);
  color: var(--dl-text);
  transition: color 0.18s ease;
}
.downloads__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.downloads__filesHeading {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: var(--main-font-weight);
  color: var(--dl-text);
}
.downloads__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}
@media (max-width: 767px) {
  .downloads__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
.downloads__empty {
  grid-column: 1/-1;
  margin: 0;
  padding: 24px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dl-text-muted);
}
.downloads__empty[hidden] {
  display: none;
}
.downloads__card {
  display: flex;
  align-items: center;
  gap: 20px;
}
.downloads__card[hidden] {
  display: none;
}
.downloads__cardMedia {
  flex: 0 0 100px;
  width: 100px;
  height: 142px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.downloads__cardImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  aspect-ratio: auto !important;
  display: block;
}
.downloads__cardCanvas {
  object-fit: contain;
}
.downloads__cardMedia.is-loading {
  position: relative;
}
.downloads__cardMedia.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(127, 127, 127, 0.08) 30%, rgba(127, 127, 127, 0.18) 50%, rgba(127, 127, 127, 0.08) 70%);
  background-size: 200% 100%;
  animation: downloads-shimmer 1.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.downloads__cardPlaceholder {
  color: var(--dl-text-muted);
  font-size: 28px;
  opacity: 0.5;
}
.downloads__cardBody {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.downloads__cardTitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: var(--main-font-weight-bold);
  color: var(--dl-text);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.downloads__cardActions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.downloads__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
  gap: 0;
  border-radius: 100px;
  cursor: pointer;
  appearance: none;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.downloads__action:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.downloads__action:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 2px;
}
.downloads__action .icon {
  font-size: 13px;
  line-height: 1;
  color: inherit;
}
.downloads__action--download {
  background: var(--dl-text);
  border: 1px solid var(--dl-text);
  color: var(--dl-accent-contrast);
}
.downloads__action--download:hover {
  background: var(--dl-accent-contrast);
  color: var(--dl-text);
}
.downloads__action--share {
  background: transparent;
  border: 1px solid var(--dl-text);
  color: var(--dl-text);
}
.downloads__action--share:hover {
  background: var(--dl-text);
  color: var(--dl-accent-contrast);
  border-color: var(--dl-text);
}
.downloads__toast {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--dl-accent);
  color: var(--dl-accent-contrast);
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
}
.downloads__toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.downloads__sentinel {
  height: 1px;
  width: 100%;
}
@media (max-width: 1023px) {
  .downloads__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .downloads__sidebar {
    position: static;
    max-height: none;
    gap: 0;
  }
  .downloads__filterToggle {
    display: inline-flex;
  }
  .downloads__filterBody {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin-top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (max-width: 1023px) {
  .downloads.is-filter-open .downloads__filterBody {
    max-height: 70vh;
    overflow-y: auto;
    opacity: 1;
    margin-top: 16px;
  }
  .downloads.is-filter-open .downloads__filterToggle .icon {
    transform: rotate(180deg);
  }
}
@media (max-width: 767px) {
  .downloads__searchWrap {
    max-width: none;
  }
  .downloads__bereich {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .downloads__bereich::-webkit-scrollbar {
    display: none;
  }
}

@keyframes downloads-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .downloads__bereichIndicator,
  .downloads__filterBody,
  .downloads__action,
  .downloads__toast {
    transition: none;
  }
  .downloads__cardMedia.is-loading::after {
    animation: none;
  }
}
.headerNavToggler .navToggler__bar {
  background-color: var(--main-color-white);
}

.mobileMenu {
  background-color: var(--main-color-dark-gray);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.mobileMenu__close {
  color: var(--main-color-white);
  cursor: pointer;
}
.mobileMenu__close:hover, .mobileMenu__close:focus {
  color: var(--main-color-primary);
}
.mobileMenu__header {
  margin-bottom: 12px;
}
.mobileMenu__subHeader {
  color: var(--main-color-white);
}
.mobileMenu__backLink {
  color: var(--main-color-gray-base);
}
.mobileMenu__backLink:hover, .mobileMenu__backLink:focus {
  color: var(--main-color-primary);
}
.mobileMenu__seperator {
  background: var(--main-color-middle-gray);
}
.mobileMenu__navigation a {
  color: var(--main-color-white);
}
.mobileMenu__navigation a:hover, .mobileMenu__navigation a:focus, .mobileMenu__navigation a:active {
  color: var(--main-color-primary);
  text-decoration: none;
}
.mobileMenu__navigation li > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--main-color-white);
  cursor: pointer;
}
.mobileMenu__navigation li > span:hover, .mobileMenu__navigation li > span:focus, .mobileMenu__navigation li > span.is-active {
  color: var(--main-color-primary);
}
.mobileMenu__navigation li.hasChildren > span: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.is-active > a, .mobileMenu__navigation li.is-active_tree > a {
  color: var(--main-color-primary);
  font-weight: var(--main-font-weight-bold);
}
.mobileMenu__navigation ul {
  background-color: var(--main-color-black);
}
.mobileMenu__navigation--service {
  margin-top: 10px;
  border-top: 1px solid var(--main-color-middle-gray);
}
.mobileMenu__section {
  border-color: var(--main-color-middle-gray);
}
.mobileMenu__section--cta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobileMenu__section--cta .button {
  width: 100%;
  justify-content: space-between;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  font-size: var(--main-font-size-small);
  line-height: 1.4;
  text-decoration: none;
  transition: ease-in-out 0.15s;
}
.tag:hover, .tag:focus, .tag:active {
  background: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-decoration: none;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.pagination li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination .pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  width: auto;
  padding: 0 6px;
  margin: 0;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: var(--color-text);
  font-size: var(--main-font-size-small);
  font-weight: var(--main-font-weight-semi-bold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: ease-in-out 0.15s;
}
.pagination .pagination__item:hover, .pagination .pagination__item:focus, .pagination .pagination__item:active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  text-decoration: none;
}
.pagination .pagination__item--active {
  background: var(--main-color-white);
  color: var(--main-color-black) !important;
  cursor: default;
  pointer-events: none;
}
.pagination .pagination__item--active:hover, .pagination .pagination__item--active:focus, .pagination .pagination__item--active:active {
  background: var(--main-color-white);
  color: var(--main-color-black) !important;
}
.pagination .pagination__item--prev, .pagination .pagination__item--next {
  background: rgba(255, 255, 255, 0.08);
}
.pagination .pagination__item--prev:hover, .pagination .pagination__item--prev:focus, .pagination .pagination__item--prev:active, .pagination .pagination__item--next:hover, .pagination .pagination__item--next:focus, .pagination .pagination__item--next:active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-text);
}
.pagination .pagination__item--seperator {
  min-width: auto;
  padding: 0 4px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.pagination .pagination__item--seperator:hover, .pagination .pagination__item--seperator:focus, .pagination .pagination__item--seperator:active {
  background: transparent;
  color: var(--color-text-muted);
}
.pagination .icon {
  font-size: 20px;
  line-height: 1;
}
/*# sourceMappingURL=child.css.map */