@charset "UTF-8";
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "“" "”" "‘" "’";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type=checkbox],
input[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type=search] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
Icons
Markup:
icon icon-360
icon icon-academy
icon icon-address
icon icon-addressbook
icon icon-angle-down
icon icon-angle-left
icon icon-angle-right
icon icon-angle-up
icon icon-arrow-down
icon icon-arrow-left
icon icon-arrow-right
icon icon-arrow-up
icon icon-at
icon icon-basket
icon icon-brakes
icon icon-camper
icon icon-car
icon icon-cart-add
icon icon-cart
icon icon-chart
icon icon-chassis
icon icon-chat
icon icon-check-circle-full
icon icon-check-circle
icon icon-check
icon icon-circle-info
icon icon-clock
icon icon-close
icon icon-columns
icon icon-copy
icon icon-date
icon icon-docs
icon icon-document-archive
icon icon-download-fill
icon icon-download
icon icon-drag-drop
icon icon-edit
icon icon-email
icon icon-engine
icon icon-exclamation-circle
icon icon-exclamation
icon icon-facebook
icon icon-fax
icon icon-file-doc
icon icon-file-document
icon icon-file-image
icon icon-file-pdf
icon icon-file-powerpoint
icon icon-file-video
icon icon-file-xls
icon icon-filter
icon icon-flatbed
icon icon-gift
icon icon-heart-filled
icon icon-heart
icon icon-home-fill
icon icon-home
icon icon-info
icon icon-instagram
icon icon-invoice
icon icon-key-fill
icon icon-key
icon icon-language
icon icon-lift-supports
icon icon-linkedin
icon icon-list
icon icon-loading
icon icon-lock
icon icon-logged
icon icon-logi-fill
icon icon-login
icon icon-logout
icon icon-mail
icon icon-map-pin
icon icon-marketing
icon icon-minibus
icon icon-minus
icon icon-mute
icon icon-offroad
icon icon-password-hide
icon icon-password-show
icon icon-pause
icon icon-payment
icon icon-pen-to-square
icon icon-phone
icon icon-piggybank
icon icon-pinterest
icon icon-pipe-cleaning
icon icon-play
icon icon-plow
icon icon-plus-circle-fill
icon icon-plus
icon icon-print
icon icon-question-fill
icon icon-question
icon icon-quickorder
icon icon-register
icon icon-reload
icon icon-retoure
icon icon-rma
icon icon-rotate
icon icon-rotate3d
icon icon-search
icon icon-send
icon icon-service
icon icon-settings
icon icon-share
icon icon-shipping
icon icon-sign-up
icon icon-sort
icon icon-sorting
icon icon-star-fill
icon icon-star-filled
icon icon-star-half
icon icon-star
icon icon-subscriptions
icon icon-suspension
icon icon-tiktok
icon icon-tool
icon icon-trailer
icon icon-trash
icon icon-truck
icon icon-twitter
icon icon-upload-fill
icon icon-upload
icon icon-user-fill
icon icon-user
icon icon-users
icon icon-volume
icon icon-whatsapp
icon icon-wheel
icon icon-xing
icon icon-youtube
icon icon-zoom
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;
}
.icon-360:before {
content: "\e001";
}
.icon-academy:before {
content: "\e002";
}
.icon-address:before {
content: "\e003";
}
.icon-addressbook:before {
content: "\e004";
}
.icon-angle-down:before {
content: "\e005";
}
.icon-angle-left:before {
content: "\e006";
}
.icon-angle-right:before {
content: "\e007";
}
.icon-angle-up:before {
content: "\e008";
}
.icon-arrow-down:before {
content: "\e009";
}
.icon-arrow-left:before {
content: "\e00a";
}
.icon-arrow-right:before {
content: "\e00b";
}
.icon-arrow-up:before {
content: "\e00c";
}
.icon-at:before {
content: "\e00d";
}
.icon-basket:before {
content: "\e00e";
}
.icon-brakes:before {
content: "\e00f";
}
.icon-camper:before {
content: "\e010";
}
.icon-car:before {
content: "\e011";
}
.icon-cart-add:before {
content: "\e012";
}
.icon-cart:before {
content: "\e013";
}
.icon-chart:before {
content: "\e014";
}
.icon-chassis:before {
content: "\e015";
}
.icon-chat:before {
content: "\e016";
}
.icon-check-circle-full:before {
content: "\e017";
}
.icon-check-circle:before {
content: "\e018";
}
.icon-check:before {
content: "\e019";
}
.icon-circle-info:before {
content: "\e01a";
}
.icon-clock:before {
content: "\e01b";
}
.icon-close:before {
content: "\e01c";
}
.icon-columns:before {
content: "\e01d";
}
.icon-copy:before {
content: "\e01e";
}
.icon-date:before {
content: "\e01f";
}
.icon-docs:before {
content: "\e020";
}
.icon-document-archive:before {
content: "\e021";
}
.icon-download-fill:before {
content: "\e022";
}
.icon-download:before {
content: "\e023";
}
.icon-drag-drop:before {
content: "\e024";
}
.icon-edit:before {
content: "\e025";
}
.icon-email:before {
content: "\e026";
}
.icon-engine:before {
content: "\e027";
}
.icon-exclamation-circle:before {
content: "\e028";
}
.icon-exclamation:before {
content: "\e029";
}
.icon-facebook:before {
content: "\e02a";
}
.icon-fax:before {
content: "\e02b";
}
.icon-file-doc:before {
content: "\e02c";
}
.icon-file-document:before {
content: "\e02d";
}
.icon-file-image:before {
content: "\e02e";
}
.icon-file-pdf:before {
content: "\e02f";
}
.icon-file-powerpoint:before {
content: "\e030";
}
.icon-file-video:before {
content: "\e031";
}
.icon-file-xls:before {
content: "\e032";
}
.icon-filter:before {
content: "\e033";
}
.icon-flatbed:before {
content: "\e034";
}
.icon-gift:before {
content: "\e035";
}
.icon-heart-filled:before {
content: "\e036";
}
.icon-heart:before {
content: "\e037";
}
.icon-home-fill:before {
content: "\e038";
}
.icon-home:before {
content: "\e039";
}
.icon-info:before {
content: "\e03a";
}
.icon-instagram:before {
content: "\e03b";
}
.icon-invoice:before {
content: "\e03c";
}
.icon-key-fill:before {
content: "\e03d";
}
.icon-key:before {
content: "\e03e";
}
.icon-language:before {
content: "\e03f";
}
.icon-lift-supports:before {
content: "\e040";
}
.icon-linkedin:before {
content: "\e041";
}
.icon-list:before {
content: "\e042";
}
.icon-loading:before {
content: "\e043";
}
.icon-lock:before {
content: "\e044";
}
.icon-logged:before {
content: "\e045";
}
.icon-logi-fill:before {
content: "\e046";
}
.icon-login:before {
content: "\e047";
}
.icon-logout:before {
content: "\e048";
}
.icon-mail:before {
content: "\e049";
}
.icon-map-pin:before {
content: "\e04a";
}
.icon-marketing:before {
content: "\e04b";
}
.icon-minibus:before {
content: "\e04c";
}
.icon-minus:before {
content: "\e04d";
}
.icon-mute:before {
content: "\e04e";
}
.icon-offroad:before {
content: "\e04f";
}
.icon-password-hide:before {
content: "\e050";
}
.icon-password-show:before {
content: "\e051";
}
.icon-pause:before {
content: "\e052";
}
.icon-payment:before {
content: "\e053";
}
.icon-pen-to-square:before {
content: "\e054";
}
.icon-phone:before {
content: "\e055";
}
.icon-piggybank:before {
content: "\e056";
}
.icon-pinterest:before {
content: "\e057";
}
.icon-pipe-cleaning:before {
content: "\e058";
}
.icon-play:before {
content: "\e059";
}
.icon-plow:before {
content: "\e05a";
}
.icon-plus-circle-fill:before {
content: "\e05b";
}
.icon-plus:before {
content: "\e05c";
}
.icon-print:before {
content: "\e05d";
}
.icon-question-fill:before {
content: "\e05e";
}
.icon-question:before {
content: "\e05f";
}
.icon-quickorder:before {
content: "\e060";
}
.icon-register:before {
content: "\e061";
}
.icon-reload:before {
content: "\e062";
}
.icon-retoure:before {
content: "\e063";
}
.icon-rma:before {
content: "\e064";
}
.icon-rotate:before {
content: "\e065";
}
.icon-rotate3d:before {
content: "\e066";
}
.icon-search:before {
content: "\e067";
}
.icon-send:before {
content: "\e068";
}
.icon-service:before {
content: "\e069";
}
.icon-settings:before {
content: "\e06a";
}
.icon-share:before {
content: "\e06b";
}
.icon-shipping:before {
content: "\e06c";
}
.icon-sign-up:before {
content: "\e06d";
}
.icon-sort:before {
content: "\e06e";
}
.icon-sorting:before {
content: "\e06f";
}
.icon-star-fill:before {
content: "\e070";
}
.icon-star-filled:before {
content: "\e071";
}
.icon-star-half:before {
content: "\e072";
}
.icon-star:before {
content: "\e073";
}
.icon-subscriptions:before {
content: "\e074";
}
.icon-suspension:before {
content: "\e075";
}
.icon-tiktok:before {
content: "\e076";
}
.icon-tool:before {
content: "\e077";
}
.icon-trailer:before {
content: "\e078";
}
.icon-trash:before {
content: "\e079";
}
.icon-truck:before {
content: "\e07a";
}
.icon-twitter:before {
content: "\e07b";
}
.icon-upload-fill:before {
content: "\e07c";
}
.icon-upload:before {
content: "\e07d";
}
.icon-user-fill:before {
content: "\e07e";
}
.icon-user:before {
content: "\e07f";
}
.icon-users:before {
content: "\e080";
}
.icon-volume:before {
content: "\e081";
}
.icon-whatsapp:before {
content: "\e082";
}
.icon-wheel:before {
content: "\e083";
}
.icon-xing:before {
content: "\e084";
}
.icon-youtube:before {
content: "\e085";
}
.icon-zoom:before {
content: "\e086";
}
:root {
--main-color-white: #F8F8F8;
--main-color-pure-white: #ffffff;
--main-color-black: #1A1B19;
--main-color-gray-base: #E8E9EB;
--main-color-middle-gray: #d9dddd;
--main-color-dark-gray: #404040;
--main-color-light-gray: #E8E9EB;
--main-color-blue-gray: #CDDAEA;
--main-color-primary: #003399;
--main-color-primary-dark: rgb(0, 42.5, 127.5);
--main-color-primary-darken: #002266;
--main-color-primary-lightblue: #0088CB;
--main-color-primary-lightblue-dark: rgb(0, 118.9162561576, 177.5);
--main-color-primary-lightblue-darken: rgb(0, 101.8325123153, 152);
--main-color-primary-pastelblue: #7399C3;
--main-color-primary-pastelblue-dark: rgb(97.15, 139.995, 187.35);
--main-color-primary-pastelblue-darken: rgb(79.3, 126.99, 179.7);
--main-color-secondary: #0088CB;
--main-color-action: #1A1B19;
--main-color-danger: #DD3953;
--main-color-danger-dark: rgb(190.5708661417, 39.9291338583, 39.9291338583);
--main-color-warning: #ED6C43;
--main-color-warning-dark: rgb(232.5, 138.3928571429, 0);
--main-color-success: #5CBE67;
--main-color-success-dark: rgb(73.7697368421, 182.7302631579, 86);
--main-color-info: #E8E9EB;
--main-color-primary-contrast: #ffffff;
--main-color-primary-dark-contrast: #ffffff;
--main-color-primary-darken-contrast: #ffffff;
--main-color-primary-lightblue-contrast: #ffffff;
--main-color-primary-lightblue-dark-contrast: #ffffff;
--main-color-primary-lightblue-darken-contrast: #ffffff;
--main-color-primary-pastelblue-contrast: #1A1B19;
--main-color-primary-pastelblue-dark-contrast: #ffffff;
--main-color-primary-pastelblue-contrast-darken: #ffffff;
--main-color-secondary-contrast: #ffffff;
--main-color-action-contrast: #ffffff;
--main-color-danger-contrast: #ffffff;
--main-color-danger-dark-contrast: #ffffff;
--main-color-warning-contrast: #1A1B19;
--main-color-warning-dark-contrast: #1A1B19;
--main-color-success-contrast: #1A1B19;
--main-color-success-dark-contrast: #1A1B19;
--main-color-info-contrast: #1A1B19;
--main-font-family: Montserrat,Helvetica, Arial, sans-serif;
--main-font-weight: 400;
--main-font-weight-semi-bold: 600;
--main-font-weight-bold: 700;
--main-font-size-base: 1.6rem;
--main-font-size-small: 1.4rem;
--main-font-size-xsmall: 1.2rem;
--main-font-size-big: 1.8rem;
--main-line-height: 1.4;
--main-link-color: #003399;
--main-link-color-hover: rgb(0, 42.5, 127.5);
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-x-visible {
overflow-x: visible;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-y-visible {
overflow-y: visible;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.shadow {
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
}
.shadow-sm {
box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
}
.shadow-lg {
box-shadow: 0 0 80px rgba(0, 0, 0, 0.08);
}
.shadow-none {
box-shadow: none;
}
.position-static {
position: static;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.position-fixed {
position: fixed;
}
.position-sticky {
position: sticky;
}
.translate-middle {
transform: translate(-50%, -50%);
}
.translate-middle-x {
transform: translateX(-50%);
}
.translate-middle-y {
transform: translateY(-50%);
}
.flex-fill {
flex: 1 1 auto;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-column-reverse {
flex-direction: column-reverse;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink-1 {
flex-shrink: 1;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-end {
justify-content: flex-end;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
.justify-content-evenly {
justify-content: space-evenly;
}
.align-items-start {
align-items: flex-start;
}
.align-items-end {
align-items: flex-end;
}
.align-items-center {
align-items: center;
}
.align-items-baseline {
align-items: baseline;
}
.align-items-stretch {
align-items: stretch;
}
.align-content-start {
align-content: flex-start;
}
.align-content-end {
align-content: flex-end;
}
.align-content-center {
align-content: center;
}
.align-content-between {
align-content: space-between;
}
.align-content-around {
align-content: space-around;
}
.align-content-stretch {
align-content: stretch;
}
.align-self-auto {
align-self: auto;
}
.align-self-start {
align-self: flex-start;
}
.align-self-end {
align-self: flex-end;
}
.align-self-center {
align-self: center;
}
.align-self-baseline {
align-self: baseline;
}
.align-self-stretch {
align-self: stretch;
}
.order-first {
order: -1;
}
.order-0 {
order: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
}
.order-last {
order: 6;
}
.text-start {
text-align: left;
}
.text-end {
text-align: right;
}
.text-center {
text-align: center;
}
.rounded {
border-radius: var(--dc-border-radius);
}
.rounded-0 {
border-radius: 0;
}
.rounded-1 {
border-radius: var(--dc-border-radius-sm);
}
.rounded-2 {
border-radius: var(--dc-border-radius);
}
.rounded-3 {
border-radius: var(--dc-border-radius-lg);
}
.rounded-4 {
border-radius: var(--dc-border-radius-xl);
}
.rounded-5 {
border-radius: var(--dc-border-radius-xxl);
}
.rounded-circle {
border-radius: 50%;
}
.rounded-pill {
border-radius: var(--dc-border-radius-pill);
}
.rounded-top {
border-top-left-radius: var(--dc-border-radius);
border-top-right-radius: var(--dc-border-radius);
}
.rounded-top-0 {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.rounded-top-1 {
border-top-left-radius: var(--dc-border-radius-sm);
border-top-right-radius: var(--dc-border-radius-sm);
}
.rounded-top-2 {
border-top-left-radius: var(--dc-border-radius);
border-top-right-radius: var(--dc-border-radius);
}
.rounded-top-3 {
border-top-left-radius: var(--dc-border-radius-lg);
border-top-right-radius: var(--dc-border-radius-lg);
}
.rounded-top-4 {
border-top-left-radius: var(--dc-border-radius-xl);
border-top-right-radius: var(--dc-border-radius-xl);
}
.rounded-top-5 {
border-top-left-radius: var(--dc-border-radius-xxl);
border-top-right-radius: var(--dc-border-radius-xxl);
}
.rounded-top-circle {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.rounded-top-pill {
border-top-left-radius: var(--dc-border-radius-pill);
border-top-right-radius: var(--dc-border-radius-pill);
}
.rounded-end {
border-top-right-radius: var(--dc-border-radius);
border-bottom-right-radius: var(--dc-border-radius);
}
.rounded-end-0 {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.rounded-end-1 {
border-top-right-radius: var(--dc-border-radius-sm);
border-bottom-right-radius: var(--dc-border-radius-sm);
}
.rounded-end-2 {
border-top-right-radius: var(--dc-border-radius);
border-bottom-right-radius: var(--dc-border-radius);
}
.rounded-end-3 {
border-top-right-radius: var(--dc-border-radius-lg);
border-bottom-right-radius: var(--dc-border-radius-lg);
}
.rounded-end-4 {
border-top-right-radius: var(--dc-border-radius-xl);
border-bottom-right-radius: var(--dc-border-radius-xl);
}
.rounded-end-5 {
border-top-right-radius: var(--dc-border-radius-xxl);
border-bottom-right-radius: var(--dc-border-radius-xxl);
}
.rounded-end-circle {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.rounded-end-pill {
border-top-right-radius: var(--dc-border-radius-pill);
border-bottom-right-radius: var(--dc-border-radius-pill);
}
.rounded-bottom {
border-bottom-right-radius: var(--dc-border-radius);
border-bottom-left-radius: var(--dc-border-radius);
}
.rounded-bottom-0 {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.rounded-bottom-1 {
border-bottom-right-radius: var(--dc-border-radius-sm);
border-bottom-left-radius: var(--dc-border-radius-sm);
}
.rounded-bottom-2 {
border-bottom-right-radius: var(--dc-border-radius);
border-bottom-left-radius: var(--dc-border-radius);
}
.rounded-bottom-3 {
border-bottom-right-radius: var(--dc-border-radius-lg);
border-bottom-left-radius: var(--dc-border-radius-lg);
}
.rounded-bottom-4 {
border-bottom-right-radius: var(--dc-border-radius-xl);
border-bottom-left-radius: var(--dc-border-radius-xl);
}
.rounded-bottom-5 {
border-bottom-right-radius: var(--dc-border-radius-xxl);
border-bottom-left-radius: var(--dc-border-radius-xxl);
}
.rounded-bottom-circle {
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.rounded-bottom-pill {
border-bottom-right-radius: var(--dc-border-radius-pill);
border-bottom-left-radius: var(--dc-border-radius-pill);
}
.rounded-start {
border-bottom-left-radius: var(--dc-border-radius);
border-top-left-radius: var(--dc-border-radius);
}
.rounded-start-0 {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.rounded-start-1 {
border-bottom-left-radius: var(--dc-border-radius-sm);
border-top-left-radius: var(--dc-border-radius-sm);
}
.rounded-start-2 {
border-bottom-left-radius: var(--dc-border-radius);
border-top-left-radius: var(--dc-border-radius);
}
.rounded-start-3 {
border-bottom-left-radius: var(--dc-border-radius-lg);
border-top-left-radius: var(--dc-border-radius-lg);
}
.rounded-start-4 {
border-bottom-left-radius: var(--dc-border-radius-xl);
border-top-left-radius: var(--dc-border-radius-xl);
}
.rounded-start-5 {
border-bottom-left-radius: var(--dc-border-radius-xxl);
border-top-left-radius: var(--dc-border-radius-xxl);
}
.rounded-start-circle {
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
}
.rounded-start-pill {
border-bottom-left-radius: var(--dc-border-radius-pill);
border-top-left-radius: var(--dc-border-radius-pill);
}
@media (min-width: 768px) {
.flex-sm-fill {
flex: 1 1 auto;
}
.flex-sm-row {
flex-direction: row;
}
.flex-sm-column {
flex-direction: column;
}
.flex-sm-row-reverse {
flex-direction: row-reverse;
}
.flex-sm-column-reverse {
flex-direction: column-reverse;
}
.flex-sm-grow-0 {
flex-grow: 0;
}
.flex-sm-grow-1 {
flex-grow: 1;
}
.flex-sm-shrink-0 {
flex-shrink: 0;
}
.flex-sm-shrink-1 {
flex-shrink: 1;
}
.flex-sm-wrap {
flex-wrap: wrap;
}
.flex-sm-nowrap {
flex-wrap: nowrap;
}
.flex-sm-wrap-reverse {
flex-wrap: wrap-reverse;
}
.justify-content-sm-start {
justify-content: flex-start;
}
.justify-content-sm-end {
justify-content: flex-end;
}
.justify-content-sm-center {
justify-content: center;
}
.justify-content-sm-between {
justify-content: space-between;
}
.justify-content-sm-around {
justify-content: space-around;
}
.justify-content-sm-evenly {
justify-content: space-evenly;
}
.align-items-sm-start {
align-items: flex-start;
}
.align-items-sm-end {
align-items: flex-end;
}
.align-items-sm-center {
align-items: center;
}
.align-items-sm-baseline {
align-items: baseline;
}
.align-items-sm-stretch {
align-items: stretch;
}
.align-content-sm-start {
align-content: flex-start;
}
.align-content-sm-end {
align-content: flex-end;
}
.align-content-sm-center {
align-content: center;
}
.align-content-sm-between {
align-content: space-between;
}
.align-content-sm-around {
align-content: space-around;
}
.align-content-sm-stretch {
align-content: stretch;
}
.align-self-sm-auto {
align-self: auto;
}
.align-self-sm-start {
align-self: flex-start;
}
.align-self-sm-end {
align-self: flex-end;
}
.align-self-sm-center {
align-self: center;
}
.align-self-sm-baseline {
align-self: baseline;
}
.align-self-sm-stretch {
align-self: stretch;
}
.order-sm-first {
order: -1;
}
.order-sm-0 {
order: 0;
}
.order-sm-1 {
order: 1;
}
.order-sm-2 {
order: 2;
}
.order-sm-3 {
order: 3;
}
.order-sm-4 {
order: 4;
}
.order-sm-5 {
order: 5;
}
.order-sm-last {
order: 6;
}
.text-sm-start {
text-align: left;
}
.text-sm-end {
text-align: right;
}
.text-sm-center {
text-align: center;
}
}
@media (min-width: 1024px) {
.flex-md-fill {
flex: 1 1 auto;
}
.flex-md-row {
flex-direction: row;
}
.flex-md-column {
flex-direction: column;
}
.flex-md-row-reverse {
flex-direction: row-reverse;
}
.flex-md-column-reverse {
flex-direction: column-reverse;
}
.flex-md-grow-0 {
flex-grow: 0;
}
.flex-md-grow-1 {
flex-grow: 1;
}
.flex-md-shrink-0 {
flex-shrink: 0;
}
.flex-md-shrink-1 {
flex-shrink: 1;
}
.flex-md-wrap {
flex-wrap: wrap;
}
.flex-md-nowrap {
flex-wrap: nowrap;
}
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse;
}
.justify-content-md-start {
justify-content: flex-start;
}
.justify-content-md-end {
justify-content: flex-end;
}
.justify-content-md-center {
justify-content: center;
}
.justify-content-md-between {
justify-content: space-between;
}
.justify-content-md-around {
justify-content: space-around;
}
.justify-content-md-evenly {
justify-content: space-evenly;
}
.align-items-md-start {
align-items: flex-start;
}
.align-items-md-end {
align-items: flex-end;
}
.align-items-md-center {
align-items: center;
}
.align-items-md-baseline {
align-items: baseline;
}
.align-items-md-stretch {
align-items: stretch;
}
.align-content-md-start {
align-content: flex-start;
}
.align-content-md-end {
align-content: flex-end;
}
.align-content-md-center {
align-content: center;
}
.align-content-md-between {
align-content: space-between;
}
.align-content-md-around {
align-content: space-around;
}
.align-content-md-stretch {
align-content: stretch;
}
.align-self-md-auto {
align-self: auto;
}
.align-self-md-start {
align-self: flex-start;
}
.align-self-md-end {
align-self: flex-end;
}
.align-self-md-center {
align-self: center;
}
.align-self-md-baseline {
align-self: baseline;
}
.align-self-md-stretch {
align-self: stretch;
}
.order-md-first {
order: -1;
}
.order-md-0 {
order: 0;
}
.order-md-1 {
order: 1;
}
.order-md-2 {
order: 2;
}
.order-md-3 {
order: 3;
}
.order-md-4 {
order: 4;
}
.order-md-5 {
order: 5;
}
.order-md-last {
order: 6;
}
.text-md-start {
text-align: left;
}
.text-md-end {
text-align: right;
}
.text-md-center {
text-align: center;
}
}
@media (min-width: 1250px) {
.flex-lg-fill {
flex: 1 1 auto;
}
.flex-lg-row {
flex-direction: row;
}
.flex-lg-column {
flex-direction: column;
}
.flex-lg-row-reverse {
flex-direction: row-reverse;
}
.flex-lg-column-reverse {
flex-direction: column-reverse;
}
.flex-lg-grow-0 {
flex-grow: 0;
}
.flex-lg-grow-1 {
flex-grow: 1;
}
.flex-lg-shrink-0 {
flex-shrink: 0;
}
.flex-lg-shrink-1 {
flex-shrink: 1;
}
.flex-lg-wrap {
flex-wrap: wrap;
}
.flex-lg-nowrap {
flex-wrap: nowrap;
}
.flex-lg-wrap-reverse {
flex-wrap: wrap-reverse;
}
.justify-content-lg-start {
justify-content: flex-start;
}
.justify-content-lg-end {
justify-content: flex-end;
}
.justify-content-lg-center {
justify-content: center;
}
.justify-content-lg-between {
justify-content: space-between;
}
.justify-content-lg-around {
justify-content: space-around;
}
.justify-content-lg-evenly {
justify-content: space-evenly;
}
.align-items-lg-start {
align-items: flex-start;
}
.align-items-lg-end {
align-items: flex-end;
}
.align-items-lg-center {
align-items: center;
}
.align-items-lg-baseline {
align-items: baseline;
}
.align-items-lg-stretch {
align-items: stretch;
}
.align-content-lg-start {
align-content: flex-start;
}
.align-content-lg-end {
align-content: flex-end;
}
.align-content-lg-center {
align-content: center;
}
.align-content-lg-between {
align-content: space-between;
}
.align-content-lg-around {
align-content: space-around;
}
.align-content-lg-stretch {
align-content: stretch;
}
.align-self-lg-auto {
align-self: auto;
}
.align-self-lg-start {
align-self: flex-start;
}
.align-self-lg-end {
align-self: flex-end;
}
.align-self-lg-center {
align-self: center;
}
.align-self-lg-baseline {
align-self: baseline;
}
.align-self-lg-stretch {
align-self: stretch;
}
.order-lg-first {
order: -1;
}
.order-lg-0 {
order: 0;
}
.order-lg-1 {
order: 1;
}
.order-lg-2 {
order: 2;
}
.order-lg-3 {
order: 3;
}
.order-lg-4 {
order: 4;
}
.order-lg-5 {
order: 5;
}
.order-lg-last {
order: 6;
}
.text-lg-start {
text-align: left;
}
.text-lg-end {
text-align: right;
}
.text-lg-center {
text-align: center;
}
}
@media (min-width: 1540px) {
.flex-xlg-fill {
flex: 1 1 auto;
}
.flex-xlg-row {
flex-direction: row;
}
.flex-xlg-column {
flex-direction: column;
}
.flex-xlg-row-reverse {
flex-direction: row-reverse;
}
.flex-xlg-column-reverse {
flex-direction: column-reverse;
}
.flex-xlg-grow-0 {
flex-grow: 0;
}
.flex-xlg-grow-1 {
flex-grow: 1;
}
.flex-xlg-shrink-0 {
flex-shrink: 0;
}
.flex-xlg-shrink-1 {
flex-shrink: 1;
}
.flex-xlg-wrap {
flex-wrap: wrap;
}
.flex-xlg-nowrap {
flex-wrap: nowrap;
}
.flex-xlg-wrap-reverse {
flex-wrap: wrap-reverse;
}
.justify-content-xlg-start {
justify-content: flex-start;
}
.justify-content-xlg-end {
justify-content: flex-end;
}
.justify-content-xlg-center {
justify-content: center;
}
.justify-content-xlg-between {
justify-content: space-between;
}
.justify-content-xlg-around {
justify-content: space-around;
}
.justify-content-xlg-evenly {
justify-content: space-evenly;
}
.align-items-xlg-start {
align-items: flex-start;
}
.align-items-xlg-end {
align-items: flex-end;
}
.align-items-xlg-center {
align-items: center;
}
.align-items-xlg-baseline {
align-items: baseline;
}
.align-items-xlg-stretch {
align-items: stretch;
}
.align-content-xlg-start {
align-content: flex-start;
}
.align-content-xlg-end {
align-content: flex-end;
}
.align-content-xlg-center {
align-content: center;
}
.align-content-xlg-between {
align-content: space-between;
}
.align-content-xlg-around {
align-content: space-around;
}
.align-content-xlg-stretch {
align-content: stretch;
}
.align-self-xlg-auto {
align-self: auto;
}
.align-self-xlg-start {
align-self: flex-start;
}
.align-self-xlg-end {
align-self: flex-end;
}
.align-self-xlg-center {
align-self: center;
}
.align-self-xlg-baseline {
align-self: baseline;
}
.align-self-xlg-stretch {
align-self: stretch;
}
.order-xlg-first {
order: -1;
}
.order-xlg-0 {
order: 0;
}
.order-xlg-1 {
order: 1;
}
.order-xlg-2 {
order: 2;
}
.order-xlg-3 {
order: 3;
}
.order-xlg-4 {
order: 4;
}
.order-xlg-5 {
order: 5;
}
.order-xlg-last {
order: 6;
}
.text-xlg-start {
text-align: left;
}
.text-xlg-end {
text-align: right;
}
.text-xlg-center {
text-align: center;
}
}
.icon-favorites:before {
content: "\e073";
}
.icon-favorites-filled:before {
content: "\e071";
}
.icon-spinner-up:before {
content: "\e05c";
}
.icon-spinner-down:before {
content: "\e04d";
}
.icon-account:before {
content: "\e07f";
}
.icon-customer:before {
content: "\e07f";
}
.icon-addresses:before {
content: "\e004";
}
.icon-history:before {
content: "\e03c";
}
.icon-digital-products:before {
content: "\e023";
}
.icon-digital-tickets:before {
content: "\e02d";
}
.icon-newsletter:before {
content: "\e049";
}
/* public-sans-regular - latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/public-sans-v14-latin-regular.woff2") format("woff2"), url("../fonts/public-sans-v14-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* public-sans-600 - latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-display: swap;
font-weight: bold;
src: url("../fonts/public-sans-v14-latin-600.woff2") format("woff2"), url("../fonts/public-sans-v14-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* public-sans-600 - latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../fonts/public-sans-v14-latin-600.woff2") format("woff2"), url("../fonts/public-sans-v14-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes scaleRequestIcon {
0% {
opacity: 0;
scale: 0;
}
50% {
opacity: 1;
scale: 1.2;
}
100% {
opacity: 1;
scale: 1;
}
}
@keyframes scaleRequestIconBigger {
0% {
opacity: 0;
scale: 0;
}
50% {
opacity: 1;
scale: 1.6;
}
100% {
opacity: 1;
scale: 1;
}
}
/*
Text
Markup:
Lorem ipsum dolor sit amet , consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Link
:hover - Hover
:focus - Focus
:active - Active
Styleguide Typo.Links
*/
html {
font-size: 9px;
}
@media (min-width: 1024px) {
html {
font-size: 10px;
}
}
body {
background-color: var(--main-color-gray-base);
font-size: var(--main-font-size-base);
font-weight: var(--main-font-weight);
line-height: var(--main-line-height);
font-family: var(--main-font-family);
color: var(--main-color-dark-gray);
min-width: 320px;
}
.leadtext {
font-size: calc(var(--main-font-size-base) + 0.2rem);
}
.smalltext {
font-size: calc(var(--main-font-size-base) - 0.2rem);
}
.team .contentBox .contentHoverOverlay a:not(.button):hover, .team .contentBox .contentHoverOverlay a:not(.button):focus, .team .contentBox .contentHoverOverlay a:not(.button):active, a:hover, a:focus, a:active, .link:hover, .link:focus, .link:active {
color: var(--main-link-color-hover);
text-decoration: underline;
outline: 0;
}
a, .link {
color: var(--main-link-color);
text-decoration: underline;
cursor: pointer;
}
*:focus {
outline: 0;
}
a:focus {
outline: 0;
}
b, strong {
font-weight: var(--main-font-weight-bold);
}
label {
font-size: var(--main-font-size-small);
display: inline-block;
}
hr {
border: 0;
border-top: 1px solid var(--main-color-light-gray);
margin-top: 30px;
margin-bottom: 30px;
}
.text-decoration-underline {
text-decoration: underline;
}
p {
margin-top: 0;
margin-bottom: 1em;
}
small {
font-size: var(--main-font-size-small);
}
/*
Headlines
Markup:
h1
h2
h3
h4
h5
h6
.h1
.h2
.h3
.h4
.h5
.h6
h1.highlighted
h2.highlighted
h3.highlighted
h4.highlighted
h5.highlighted
h6.highlighted
Styleguide Typo.Headlines
*/
h1, .h1, .categoryInfo .shopSiteHeadline, .orderboxSummary__headline,
h2, .h2,
h3, .h3, .itemcardBuybox .prices .basePrice,
h4, .h4,
h5, .h5,
h6, .h6 {
font-weight: var(--main-font-weight-semi-bold);
margin: 0;
margin-bottom: clamp(10px, 1em, 20px);
}
h1.highlighted, .h1.highlighted, .categoryInfo .highlighted.shopSiteHeadline, .highlighted.orderboxSummary__headline,
h2.highlighted, .h2.highlighted,
h3.highlighted, .h3.highlighted, .itemcardBuybox .prices .highlighted.basePrice,
h4.highlighted, .h4.highlighted,
h5.highlighted, .h5.highlighted,
h6.highlighted, .h6.highlighted {
font-weight: var(--main-font-weight-semi-bold);
line-height: 1.2;
}
h1, .h1, .categoryInfo .shopSiteHeadline, .orderboxSummary__headline {
margin-bottom: clamp(10px, 1em, 30px);
font-weight: var(--main-font-weight-bold);
font-size: 3.2rem;
}
@media (min-width: 1024px) {
h1, .h1, .categoryInfo .shopSiteHeadline, .orderboxSummary__headline {
font-size: 4rem;
}
}
@media (min-width: 1250px) {
h1, .h1, .categoryInfo .shopSiteHeadline, .orderboxSummary__headline {
font-size: 4.8rem;
}
}
h1.highlighted, .h1.highlighted, .categoryInfo .highlighted.shopSiteHeadline, .highlighted.orderboxSummary__headline {
font-size: 4rem;
}
@media (min-width: 1024px) {
h1.highlighted, .h1.highlighted, .categoryInfo .highlighted.shopSiteHeadline, .highlighted.orderboxSummary__headline {
font-size: 6.2rem;
}
}
@media (min-width: 1250px) {
h1.highlighted, .h1.highlighted, .categoryInfo .highlighted.shopSiteHeadline, .highlighted.orderboxSummary__headline {
font-size: 9.1rem;
}
}
h2, .h2 {
font-weight: var(--main-font-weight-bold);
font-size: 2.6rem;
}
@media (min-width: 1024px) {
h2, .h2 {
font-size: 3rem;
}
}
@media (min-width: 1250px) {
h2, .h2 {
font-size: 3.8rem;
}
}
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, .itemcardBuybox .prices .basePrice {
font-size: 2rem;
}
@media (min-width: 1024px) {
h3, .h3, .itemcardBuybox .prices .basePrice {
font-size: 2.2rem;
}
}
@media (min-width: 1250px) {
h3, .h3, .itemcardBuybox .prices .basePrice {
font-size: 2.8rem;
}
}
h4, .h4 {
font-size: 2rem;
}
h5, .h5 {
font-size: 1.6rem;
}
h6, .h6 {
font-size: 1.6rem;
}
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-xs-none {
display: none !important;
}
.d-xs-block {
display: block !important;
}
.d-xs-inline {
display: inline !important;
}
.d-xs-inline-block {
display: inline-block !important;
}
.d-xs-flex {
display: flex !important;
}
.d-xs-inline-flex {
display: inline-flex !important;
}
@media (min-width: 768px) {
.d-sm-none {
display: none !important;
}
}
@media (min-width: 768px) {
.d-sm-block {
display: block !important;
}
}
@media (min-width: 768px) {
.d-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) {
.d-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) {
.d-sm-flex {
display: flex !important;
}
}
@media (min-width: 768px) {
.d-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1024px) {
.d-md-none {
display: none !important;
}
}
@media (min-width: 1024px) {
.d-md-block {
display: block !important;
}
}
@media (min-width: 1024px) {
.d-md-inline {
display: inline !important;
}
}
@media (min-width: 1024px) {
.d-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1024px) {
.d-md-flex {
display: flex !important;
}
}
@media (min-width: 1024px) {
.d-md-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1250px) {
.d-lg-none {
display: none !important;
}
}
@media (min-width: 1250px) {
.d-lg-block {
display: block !important;
}
}
@media (min-width: 1250px) {
.d-lg-inline {
display: inline !important;
}
}
@media (min-width: 1250px) {
.d-lg-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1250px) {
.d-lg-flex {
display: flex !important;
}
}
@media (min-width: 1250px) {
.d-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1540px) {
.d-xlg-none {
display: none !important;
}
}
@media (min-width: 1540px) {
.d-xlg-block {
display: block !important;
}
}
@media (min-width: 1540px) {
.d-xlg-inline {
display: inline !important;
}
}
@media (min-width: 1540px) {
.d-xlg-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1540px) {
.d-xlg-flex {
display: flex !important;
}
}
@media (min-width: 1540px) {
.d-xlg-inline-flex {
display: inline-flex !important;
}
}
/*
Button Link
Markup:
Button Link Button Link
Styleguide Base.Button Link
*/
a.banner2:hover .buttonLink, .banner2 > .link:hover .buttonLink, a.banner:hover .buttonLink, .banner > .link:hover .buttonLink, .buttonLink:hover, .buttonLink:focus, .buttonLink:active {
background: transparent;
text-decoration: none;
}
a.banner2:hover .buttonLink:after, .banner2 > .link:hover .buttonLink:after, a.banner:hover .buttonLink:after, .banner > .link:hover .buttonLink:after, .buttonLink:hover:after, .buttonLink:focus:after, .buttonLink:active:after {
width: 100%;
}
.buttonLink {
display: inline-block;
color: var(--main-color-dark-gray);
cursor: pointer;
position: relative;
background-color: transparent;
padding: 5px 0 3px 0;
border: 0;
text-decoration: none;
}
.buttonLink:after {
content: "";
display: block;
width: 0;
position: absolute;
left: 0;
bottom: 0;
background: var(--main-color-dark-gray);
height: 2px;
transition: width 0.2s ease-in;
}
img,
svg {
height: auto !important;
max-width: 100%;
object-fit: contain;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.image, .itemcardImagesThumbs .itemcardImages__img, .itemcardImagesMain .itemcardImages__img, .imageCover {
max-width: 100%;
width: 100%;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.image > video, .itemcardImagesThumbs .itemcardImages__img > video, .itemcardImagesMain .itemcardImages__img > video, .imageCover > video,
.image > img,
.itemcardImagesThumbs .itemcardImages__img > img,
.itemcardImagesMain .itemcardImages__img > img,
.imageCover > img,
.image > svg,
.itemcardImagesThumbs .itemcardImages__img > svg,
.itemcardImagesMain .itemcardImages__img > svg,
.imageCover > svg {
object-fit: contain;
object-position: center center;
max-height: 100% !important;
aspect-ratio: 1;
width: 100%;
}
.imageCover > video,
.imageCover > img,
.imageCover > svg {
object-fit: cover;
min-width: 100%;
}
.imageRound {
border-radius: 50%;
overflow: hidden;
}
.imageRound > img {
min-width: 100%;
object-fit: cover;
}
.banner2 .contentImage, .banner .contentImage, .contentBox.contentBox--textinbox:not(.noOverlay), .categoryItem {
position: relative;
overflow: hidden;
}
.banner2 .contentImage:after, .banner .contentImage:after, .contentBox.contentBox--textinbox:not(.noOverlay):after, .categoryItem:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(0, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
position: absolute;
left: 0;
bottom: 0;
pointer-events: none;
}
video {
display: block;
max-width: 100%;
height: auto !important;
}
.videoplaywrapper {
position: relative;
}
.videoplaywrapper .playbtn,
.videoplaywrapper .mutebtn {
position: absolute;
left: 20px;
bottom: 20px;
}
.videoplaywrapper .mutebtn {
left: 60px;
}
@media (min-width: 768px) {
.videoplaywrapper .playbtn,
.videoplaywrapper .mutebtn {
left: 20px;
bottom: 20px;
}
.videoplaywrapper .mutebtn {
left: 70px;
}
}
@media (max-width: 767px) {
.videoplaywrapper--mobile-1-1 video {
aspect-ratio: 1;
object-fit: cover;
}
}
.banner--video .playbtn,
.banner--video .mutebtn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-pure-white);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 30px;
height: 30px;
font-size: 24px;
border-radius: 5px;
}
@media (min-width: 768px) {
.banner--video .playbtn,
.banner--video .mutebtn {
width: 40px;
height: 40px;
font-size: 28px;
border-radius: 8px;
}
}
.banner--video .playbtn:hover .icon,
.banner--video .mutebtn:hover .icon {
color: var(--main-color-black);
}
.banner--video .playbtn.active .icon:before {
content: "\e052";
}
.banner--video .mutebtn.active .icon:before {
content: "\e04e";
}
.banner--video.active .videoplaywrapper .playbtn,
.banner--video.active .videoplaywrapper .mutebtn {
display: inline-flex;
}
.banner--video:not(.active) .videoplaywrapper .playbtn,
.banner--video:not(.active) .videoplaywrapper .mutebtn {
display: none;
}
.banner.banner--video {
position: relative;
}
.banner.banner--video .bannerText,
.banner.banner--video .bannerTextRight {
max-width: none;
width: 100%;
}
.banner.banner--video .bannerText .cms_textcontent,
.banner.banner--video .bannerTextRight .cms_textcontent {
max-width: 600px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1024px) {
.banner.banner--video .bannerImage {
height: auto;
}
.banner.banner--video .bannerImage img {
position: static;
width: 100%;
height: auto !important;
transform: none;
}
.banner.banner--video .bannerImage .videoplaywrapper video {
position: static;
width: 100%;
height: auto !important;
transform: none;
}
}
.banner.banner--video .bannerTextRight {
position: absolute;
right: 0;
top: 0;
left: auto;
bottom: 0;
height: 100%;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
/*
Tables
Markup:
Header
Header
Header
Header
Header
Cell
Cell
Cell
Cell
Cell
Styleguide Base.Tables
*/
table {
font-size: var(--main-font-size-base);
}
td,
th {
padding: 10px 5px;
border-bottom: 0;
border-bottom: 1px solid var(--main-color-gray-base);
}
tr:first-child td, tr:first-child th {
border-top: 1px solid var(--main-color-gray-base);
}
.table_wrapper {
max-width: 100%;
overflow-x: scroll;
}
@media (max-width: 767px) {
.table_wrapper table {
font-size: var(--main-font-size-small);
}
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-thumb {
background: var(--main-color-gray-base);
border: 0 none transparent;
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
background: var(--main-color-black);
}
::-webkit-scrollbar-track {
background: transparent;
border: 0 none transparent;
border-radius: 0;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-track:active {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/*
Embeds
Markup:
//Styleguide Base.Embeds
*/
iframe,
embed,
object {
max-width: 100%;
border: 0;
}
.embedResponsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.embedResponsive > * {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100% !important;
width: 100% !important;
border: 0;
}
.embedResponsive--1by1 {
padding-bottom: 100%;
}
.embedResponsive--4by3 {
padding-bottom: 75%;
}
.embedResponsive--16by9 {
padding-bottom: 56.25%;
}
.embedResponsive--21by9 {
padding-bottom: 42.85%;
}
/*
Paddings
Markup:
Padding
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,
Padding Top
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,
Padding Right
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,
Padding Bottom
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,
Padding Left
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,
--xsmall - xSmall Padding
--small - Small Padding
--large - Large Padding
--xlarge - xLarge Padding
Styleguide Structure.Paddings
*/
.padding {
padding: 16px;
}
.paddingTop {
padding-top: 16px;
}
.paddingRight {
padding-right: 16px;
}
.paddingBottom {
padding-bottom: 16px;
}
.paddingLeft {
padding-left: 16px;
}
.padding--small {
padding: 32px;
}
.paddingTop--small {
padding-top: 32px;
}
.paddingRight--small {
padding-right: 32px;
}
.paddingBottom--small {
padding-bottom: 32px;
}
.paddingLeft--small {
padding-left: 32px;
}
.padding--large {
padding: 48px;
}
.paddingTop--large {
padding-top: 48px;
}
.paddingRight--large {
padding-right: 48px;
}
.paddingBottom--large {
padding-bottom: 48px;
}
.paddingLeft--large {
padding-left: 48px;
}
.padding--xlarge {
padding: 64px;
}
.paddingTop--xlarge {
padding-top: 64px;
}
.paddingRight--xlarge {
padding-right: 64px;
}
.paddingBottom--xlarge {
padding-bottom: 64px;
}
.paddingLeft--xlarge {
padding-left: 64px;
}
.padding--xsmall {
padding: 24px;
}
.paddingTop--xsmall {
padding-top: 24px;
}
.paddingRight--xsmall {
padding-right: 24px;
}
.paddingBottom--xsmall {
padding-bottom: 24px;
}
.paddingLeft--xsmall {
padding-left: 24px;
}
@media (max-width: 767.98px) {
.padding--large {
padding: 20px;
}
.paddingTop--large {
padding-top: 20px;
}
.paddingRight--large {
padding-right: 20px;
}
.paddingBottom--large {
padding-bottom: 20px;
}
.paddingLeft--large {
padding-left: 20px;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.padding--large {
padding: 40px;
}
.paddingTop--large {
padding-top: 40px;
}
.paddingRight--large {
padding-right: 40px;
}
.paddingBottom--large {
padding-bottom: 40px;
}
.paddingLeft--large {
padding-left: 40px;
}
}
@media (max-width: 767.98px) {
.padding--xlarge {
padding: 30px;
}
.paddingTop--xlarge {
padding-top: 30px;
}
.paddingRight--xlarge {
padding-right: 30px;
}
.paddingBottom--xlarge {
padding-bottom: 30px;
}
.paddingLeft--xlarge {
padding-left: 30px;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.padding--xlarge {
padding: 50px;
}
.paddingTop--xlarge {
padding-top: 50px;
}
.paddingRight--xlarge {
padding-right: 50px;
}
.paddingBottom--xlarge {
padding-bottom: 50px;
}
.paddingLeft--xlarge {
padding-left: 50px;
}
}
@media (max-width: 767.98px) {
.xs-padding {
padding-bottom: 32px;
}
.xs-padding-base {
padding-bottom: 16px;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.sm-padding {
padding-bottom: 32px;
}
.sm-padding-base {
padding-bottom: 16px;
}
}
@media (min-width: 1024px) and (max-width: 1249.98px) {
.md-padding {
padding-bottom: 32px;
}
.md-padding-base {
padding-bottom: 16px;
}
}
@media (min-width: 1250px) and (max-width: 1539.98px) {
.lg-padding {
padding-bottom: 32px;
}
.lg-padding-base {
padding-bottom: 16px;
}
}
@media (min-width: 1540px) {
.xlg-padding {
padding-bottom: 32px;
}
.xlg-padding-base {
padding-bottom: 16px;
}
}
/*
Margins
Markup:
Margin
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,
Margin Top
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,
Margin Right
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,
Margin Bottom
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,
Margin Left
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,
Dateien auswählen
:focus - Focus
:active - Active
:disabled - Disabled
.error - Error
Styleguide Form.File Input
*/
.fileBody {
display: block;
position: relative;
width: 100%;
}
.fileBody input {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
margin: 0;
padding: 0;
cursor: pointer;
}
.fileBody input + span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background-color: var(--main-color-pure-white);
color: var(--main-color-black);
border: 1px solid var(--main-color-gray-base);
border-radius: 10px;
box-shadow: none;
width: 100%;
line-height: 18px;
font-size: clamp(16px, var(--main-font-size-small), 20px);
padding: 10px 12px 10px 12px;
min-height: 40px;
cursor: pointer;
display: block;
padding-right: 50px;
}
@media (min-width: 768px) {
.fileBody input + span {
line-height: 24px;
font-size: var(--main-font-size-base);
padding: 12px 16px 12px 16px;
min-height: 50px;
}
}
.fileBody input:not(:disabled):active + span, .fileBody input:not(:disabled):focus + span {
outline: 0;
border-color: var(--main-color-primary);
}
.fileBody input.error + span {
border-color: var(--main-color-danger);
}
.fileBody input:disabled + span {
background-color: var(--main-color-light-gray);
border-color: var(--main-color-light-gray);
}
.fileBody .icon {
font-size: 2rem;
width: 40px;
min-height: 40px;
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
@media (min-width: 768px) {
.fileBody .icon {
min-height: 50px;
width: 50px;
}
}
/* montserrat regular - latin */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/montserrat-v26-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* motserrat 800 - latin */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-display: swap;
font-weight: bold;
src: url("../fonts/montserrat-v26-latin-bold.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat 500 - latin */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../fonts/montserrat-v26-latin-medium.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat 600 - latin */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../fonts/montserrat-v26-latin-600.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat 700 - latin */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../fonts/montserrat-v26-latin-700.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*
Button
Markup:
Button Button
.button--primary - Primary
.button--secondary - Secondary
.button--action - Action
.button--action2 - Action 2
.button--white - White
.button--gray - gray
.button--danger - Danger
:disabled - Disabled
Styleguide Base.Buttons
*/
.banner2 > .link:hover .button, a.banner:hover .contentText__button:not(.button--secondary), .banner > .link:hover .button, body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton:hover, button.disabled:hover,
.button_disabled:hover,
.btn-disabled:hover, body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton:focus, button.disabled:focus,
.button_disabled:focus,
.btn-disabled:focus,
button:hover,
button:focus,
.button:hover,
.button:focus {
background: var(--main-color-primary);
border-color: var(--main-color-primary);
color: var(--main-color-primary-contrast);
text-decoration: none;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton, button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
display: inline-block;
vertical-align: middle;
border: 2px solid var(--main-color-light-gray);
border-radius: 10px;
color: var(--main-color-black);
cursor: pointer;
background: var(--main-color-light-gray);
text-align: center;
text-decoration: none;
line-height: 18px;
font-size: var(--main-font-size-small);
font-weight: var(--main-font-weight-bold);
padding: 10px 25px 10px 25px;
transition: ease-in-out 0.1s;
position: relative;
}
@media (min-width: 1250px) {
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton, button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
line-height: 24px;
font-size: 20px;
padding: 12px 32px 12px 32px;
}
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton:active,
.button_disabled:active,
.btn-disabled:active,
button:active,
.button:active {
background: var(--main-color-primary);
border-color: var(--main-color-primary);
color: var(--main-color-primary-contrast);
text-decoration: none;
}
button--primary,
.button--primary {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
border-color: transparent;
border-width: 0;
line-height: 22px;
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
background: linear-gradient(90deg, #ff8a00, #da1b60);
border-color: transparent;
color: var(--main-color-primary-dark-contrast);
}
button--primary:active,
.button--primary:active {
background: linear-gradient(90deg, #ff8a00, #da1b60);
border-color: transparent;
color: var(--main-color-primary-darken-contrast);
}
@media (min-width: 768px) {
button--primary,
.button--primary {
line-height: 24px;
}
}
button--secondary,
.button--secondary {
background: transparent;
color: var(--main-color-primary);
border-color: var(--main-color-primary);
}
button--secondary:hover,
button--secondary:focus,
.button--secondary:hover,
.button--secondary:focus {
background: var(--main-color-pure-white);
border-color: #0088CB;
color: #0088CB;
}
button--secondary:active,
.button--secondary:active {
background: var(--main-color-white);
border-color: #0088CB;
color: #0088CB;
}
button--action,
.button--action {
background: linear-gradient(90deg, #ff8a00, #da1b60);
color: var(--main-color-white);
border-color: transparent;
border-width: 0;
line-height: 22px;
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
border-color: transparent;
color: var(--main-color-primary-contrast);
}
button--action:active,
.button--action:active {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
border-color: transparent;
color: var(--main-color-primary-contrast);
}
@media (min-width: 768px) {
button--action,
.button--action {
line-height: 24px;
}
}
button--action2,
.button--action2 {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
border-color: transparent;
border-width: 0;
line-height: 22px;
}
button--action2:hover,
button--action2:focus,
.button--action2:hover,
.button--action2:focus {
background: linear-gradient(90deg, #ff8a00, #da1b60);
border-color: transparent;
color: var(--main-color-primary-contrast);
}
button--action2:active,
.button--action2:active {
background: linear-gradient(90deg, #ff8a00, #da1b60);
border-color: transparent;
color: var(--main-color-primary-contrast);
}
@media (min-width: 768px) {
button--action2,
.button--action2 {
line-height: 24px;
}
}
button--danger,
.button--danger {
background: var(--main-color-danger);
color: var(--main-color-white);
border-color: var(--main-color-danger);
}
button--danger:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
background: var(--main-color-danger-dark);
border-color: var(--main-color-danger-dark);
color: var(--main-color-primary-contrast);
}
button--danger:active,
.button--danger:active {
background: var(--main-color-danger-dark);
border-color: var(--main-color-danger-dark);
color: var(--main-color-primary-contrast);
}
button--sm,
.button--sm {
padding-top: 10px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
line-height: 18px;
font-size: var(--main-font-size-small);
}
button--white,
.button--white {
border-color: var(--main-color-pure-white);
background-color: transparent;
color: var(--main-color-pure-white);
}
button--gray,
.button--gray {
background: transparent;
color: var(--main-color-black);
background: linear-gradient(white, white) padding-box, linear-gradient(to right, var(--main-color-dark-gray), var(--main-color-dark-gray)) border-box;
border: 2px solid transparent;
border-radius: 10px;
}
button--gray:hover,
button--gray:focus,
.button--gray:hover,
.button--gray:focus {
background: linear-gradient(white, white) padding-box, linear-gradient(270deg, #003399 0%, #0088CB 100%) border-box;
color: var(--main-color-primary);
border-color: transparent;
}
button--icon,
.button--icon {
padding: 10px 11px;
line-height: 1;
}
button--icon .icon,
.button--icon .icon {
font-size: 2.4rem;
display: flex;
line-height: 1;
}
button--gradient,
.button--gradient {
background: transparent;
color: var(--main-color-primary);
border-color: var(--main-color-primary);
transition: none;
}
button--gradient:hover,
button--gradient:focus,
.button--gradient:hover,
.button--gradient:focus {
background: var(--main-color-pure-white);
border-color: #0088CB;
color: #0088CB;
}
button--gradient:active,
.button--gradient:active {
background: var(--main-color-white);
border-color: #0088CB;
color: #0088CB;
}
button--full,
.button--full {
width: 100%;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .iti__selected-country.favoriteButton,
.iti__selected-country.button_disabled,
.iti__selected-country.btn-disabled,
button.iti__selected-country,
.button.iti__selected-country {
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .iti__selected-country.favoriteButton:hover,
.iti__selected-country.button_disabled:hover,
.iti__selected-country.btn-disabled:hover, body.favorites .itemlistElement__list:has(.favoriteButton.active) .iti__selected-country.favoriteButton:focus,
.iti__selected-country.button_disabled:focus,
.iti__selected-country.btn-disabled:focus, body.favorites .itemlistElement__list:has(.favoriteButton.active) .iti__selected-country.favoriteButton:active,
.iti__selected-country.button_disabled:active,
.iti__selected-country.btn-disabled:active,
button.iti__selected-country:hover,
button.iti__selected-country:focus,
button.iti__selected-country:active,
.button.iti__selected-country:hover,
.button.iti__selected-country:focus,
.button.iti__selected-country:active {
background: transparent;
color: var(--main-color-black);
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .iti__selected-country.favoriteButton .iti__selected-country-primary:hover,
.iti__selected-country.button_disabled .iti__selected-country-primary:hover,
.iti__selected-country.btn-disabled .iti__selected-country-primary:hover, body.favorites .itemlistElement__list:has(.favoriteButton.active) .iti__selected-country.favoriteButton .iti__selected-country-primary:focus,
.iti__selected-country.button_disabled .iti__selected-country-primary:focus,
.iti__selected-country.btn-disabled .iti__selected-country-primary:focus, body.favorites .itemlistElement__list:has(.favoriteButton.active) .iti__selected-country.favoriteButton .iti__selected-country-primary:active,
.iti__selected-country.button_disabled .iti__selected-country-primary:active,
.iti__selected-country.btn-disabled .iti__selected-country-primary:active,
button.iti__selected-country .iti__selected-country-primary:hover,
button.iti__selected-country .iti__selected-country-primary:focus,
button.iti__selected-country .iti__selected-country-primary:active,
.button.iti__selected-country .iti__selected-country-primary:hover,
.button.iti__selected-country .iti__selected-country-primary:focus,
.button.iti__selected-country .iti__selected-country-primary:active {
background: transparent;
}
@media (min-width: 768px) {
button--xl,
.button--xl {
padding-top: 18px;
padding-right: 30px;
padding-bottom: 18px;
padding-left: 30px;
line-height: 22px;
font-size: var(--main-font-size-big);
}
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-loading.favoriteButton,
.is-loading.button_disabled,
.is-loading.btn-disabled, body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-success.favoriteButton,
.is-success.button_disabled,
.is-success.btn-disabled, body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-error.favoriteButton,
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-loading,
button.is-success,
button.is-error,
.button.is-loading,
.button.is-success,
.button.is-error {
background: var(--main-color-middle-gray) !important;
border-color: var(--main-color-middle-gray) !important;
cursor: not-allowed;
pointer-events: none;
padding-right: 40px;
padding-left: 10px;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-loading.favoriteButton .icon,
.is-loading.button_disabled .icon,
.is-loading.btn-disabled .icon, body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-success.favoriteButton .icon,
.is-success.button_disabled .icon,
.is-success.btn-disabled .icon, body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-error.favoriteButton .icon,
.is-error.button_disabled .icon,
.is-error.btn-disabled .icon,
button.is-loading .icon,
button.is-success .icon,
button.is-error .icon,
.button.is-loading .icon,
.button.is-success .icon,
.button.is-error .icon {
opacity: 0;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-loading.favoriteButton:after,
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after, body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-success.favoriteButton:after,
.is-success.button_disabled:after,
.is-success.btn-disabled:after, body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-error.favoriteButton:after,
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-loading:after,
button.is-success:after,
button.is-error:after,
.button.is-loading:after,
.button.is-success:after,
.button.is-error:after {
position: absolute;
right: 15px;
top: 50%;
font-family: "icons", Helvetica, Arial, sans-serif;
translate: 0 -50%;
font-size: 24px;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-loading.favoriteButton,
.is-loading.button_disabled,
.is-loading.btn-disabled,
button.is-loading,
.button.is-loading {
cursor: wait;
color: var(--main-color-black) !important;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-loading.favoriteButton:after,
.is-loading.button_disabled:after,
.is-loading.btn-disabled:after,
button.is-loading:after,
.button.is-loading:after {
content: "\e043";
opacity: 1;
animation: rotation 1s infinite ease-in-out;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-success.favoriteButton,
.is-success.button_disabled,
.is-success.btn-disabled,
button.is-success,
.button.is-success {
background: var(--main-color-success) !important;
border-color: var(--main-color-success) !important;
color: var(--main-color-black) !important;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-success.favoriteButton:after,
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
button.is-success:after,
.button.is-success:after {
content: "\e019";
animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-error.favoriteButton,
.is-error.button_disabled,
.is-error.btn-disabled,
button.is-error,
.button.is-error {
background: var(--main-color-danger) !important;
border-color: var(--main-color-danger) !important;
color: var(--main-color-white) !important;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .is-error.favoriteButton:after,
.is-error.button_disabled:after,
.is-error.btn-disabled:after,
button.is-error:after,
.button.is-error:after {
content: "\e01c";
animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
button--icon-left,
.button--icon-left {
position: relative;
padding-left: 45px;
min-width: 0;
}
button--icon-left .icon,
.button--icon-left .icon {
position: absolute;
top: 50%;
line-height: 20px;
width: 20px;
margin-top: -10px;
left: 15px;
font-size: 22px;
text-align: center;
}
button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled] {
background: var(--main-color-light-gray);
color: var(--main-color-dark-gray);
border-color: var(--main-color-light-gray);
cursor: not-allowed;
border-width: 0;
}
button.disabled:hover, button.disabled:focus, button.disabled:active,
.button_disabled:hover,
.button_disabled:focus,
.button_disabled:active,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active,
.button[disabled]:hover,
.button[disabled]:focus,
.button[disabled]:active {
background: var(--main-color-light-gray);
border-color: var(--main-color-light-gray);
color: var(--main-color-dark-gray);
}
@keyframes scaleRequestIconBtn {
0% {
opacity: 0;
scale: 0;
}
50% {
opacity: 1;
scale: 1.2;
}
100% {
opacity: 1;
scale: 1;
}
}
/*
Button Link
Markup:
Button Link Button Link
Styleguide Base.Button Link
*/
a.banner2:hover .buttonLink, .banner2 > .link:hover .buttonLink, a.banner:hover .buttonLink, .banner > .link:hover .buttonLink, .buttonLink:hover, .buttonLink:focus, .buttonLink:active {
background: transparent;
text-decoration: underline;
}
a.banner2:hover .buttonLink:after, .banner2 > .link:hover .buttonLink:after, a.banner:hover .buttonLink:after, .banner > .link:hover .buttonLink:after, .buttonLink:hover:after, .buttonLink:focus:after, .buttonLink:active:after {
left: 5px;
}
.buttonLink {
display: inline-flex;
color: var(--main-color-primary);
font-weight: var(--main-font-weight-semi-bold);
cursor: pointer;
position: relative;
background-color: transparent;
padding: 0;
padding-left: 30px;
border: 0;
}
.buttonLink:after {
content: "\e00b";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
background: transparent !important;
left: 0;
top: 50%;
font-size: 1.8rem;
transform: translateY(-50%);
width: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: 0.1s ease-in-out;
margin-top: -1px;
}
a.banner2:hover .buttonLink, .banner2 > .link:hover .buttonLink, a.banner:hover .buttonLink, .banner > .link:hover .buttonLink, .buttonLink:hover, .buttonLink:focus, .buttonLink:active {
background: transparent;
text-decoration: none;
color: var(--main-color-dark-gray);
}
a.banner2:hover .buttonLink:after, .banner2 > .link:hover .buttonLink:after, a.banner:hover .buttonLink:after, .banner > .link:hover .buttonLink:after, .buttonLink:hover:after, .buttonLink:focus:after, .buttonLink:active:after {
width: auto;
}
.buttonLink:after {
background: var(--main-color-primary);
}
/*
Background
Markup:
Styleguide Colors.Background
*/
/*
Border
Markup:
Styleguide Colors.Border
*/
/*
Font
Markup:
Text
.color--white - White
.color--gray-base - Gray Base
.color--middle-gray - Middle Gray
.color--dark-gray - Dark Gray
.color--light-gray - Light Gray
.color--blue-gray - Blue Gray
.color--primary - Primary
.color--primary-lightblue - Primary Lightblue
.color--primary-pastelblue - Primary Pastelblue
.color--secondary - Secondary
.color--action - Action
.color--danger - Danger
.color--warning - Warning
.color--success - Success
Styleguide Colors.Font
*/
.bg--white {
background-color: #F8F8F8;
}
.border--white {
border-color: #F8F8F8;
}
.color--white {
color: #F8F8F8;
}
.color--white a:not(:hover):not(:focus):not(:active):not(.button), .color--white .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #F8F8F8;
}
.bg--pure-white {
background-color: #ffffff;
color: #1A1B19;
}
.bg--pure-white a:not(.button), .bg--pure-white .link {
color: #1A1B19;
}
.border--pure-white {
border-color: #ffffff;
}
.color--pure-white {
color: #ffffff;
}
.color--pure-white a:not(:hover):not(:focus):not(:active):not(.button), .color--pure-white .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #ffffff;
}
.bg--black {
background-color: #1A1B19;
color: #ffffff;
}
.bg--black a:not(.button), .bg--black .link {
color: #ffffff;
}
.border--black {
border-color: #1A1B19;
}
.color--black {
color: #1A1B19;
}
.color--black a:not(:hover):not(:focus):not(:active):not(.button), .color--black .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #1A1B19;
}
.bg--gray-base {
background-color: #E8E9EB;
color: #1A1B19;
}
.bg--gray-base a:not(.button), .bg--gray-base .link {
color: #1A1B19;
}
.border--gray-base {
border-color: #E8E9EB;
}
.color--gray-base {
color: #E8E9EB;
}
.color--gray-base a:not(:hover):not(:focus):not(:active):not(.button), .color--gray-base .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #E8E9EB;
}
.bg--middle-gray {
background-color: #d9dddd;
color: #1A1B19;
}
.bg--middle-gray a:not(.button), .bg--middle-gray .link {
color: #1A1B19;
}
.border--middle-gray {
border-color: #d9dddd;
}
.color--middle-gray {
color: #d9dddd;
}
.color--middle-gray a:not(:hover):not(:focus):not(:active):not(.button), .color--middle-gray .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #d9dddd;
}
.bg--dark-gray {
background-color: #404040;
color: #ffffff;
}
.bg--dark-gray a:not(.button), .bg--dark-gray .link {
color: #ffffff;
}
.border--dark-gray {
border-color: #404040;
}
.color--dark-gray {
color: #404040;
}
.color--dark-gray a:not(:hover):not(:focus):not(:active):not(.button), .color--dark-gray .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #404040;
}
.bg--light-gray {
background-color: #E8E9EB;
color: #1A1B19;
}
.bg--light-gray a:not(.button), .bg--light-gray .link {
color: #1A1B19;
}
.border--light-gray {
border-color: #E8E9EB;
}
.color--light-gray {
color: #E8E9EB;
}
.color--light-gray a:not(:hover):not(:focus):not(:active):not(.button), .color--light-gray .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #E8E9EB;
}
.bg--blue-gray {
background-color: #CDDAEA;
color: #1A1B19;
}
.bg--blue-gray a:not(.button), .bg--blue-gray .link {
color: #1A1B19;
}
.border--blue-gray {
border-color: #CDDAEA;
}
.color--blue-gray {
color: #CDDAEA;
}
.color--blue-gray a:not(:hover):not(:focus):not(:active):not(.button), .color--blue-gray .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #CDDAEA;
}
.bg--primary {
background-color: #003399;
color: #ffffff;
}
.bg--primary a:not(.button), .bg--primary .link {
color: #ffffff;
}
.border--primary {
border-color: #003399;
}
.color--primary {
color: #003399;
}
.color--primary a:not(:hover):not(:focus):not(:active):not(.button), .color--primary .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #003399;
}
.bg--primary-dark {
background-color: rgb(0, 42.5, 127.5);
color: #ffffff;
}
.bg--primary-dark a:not(.button), .bg--primary-dark .link {
color: #ffffff;
}
.border--primary-dark {
border-color: rgb(0, 42.5, 127.5);
}
.color--primary-dark {
color: rgb(0, 42.5, 127.5);
}
.color--primary-dark a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-dark .link:not(:hover):not(:focus):not(:active):not(.button) {
color: rgb(0, 42.5, 127.5);
}
.bg--primary-darken {
background-color: #002266;
color: #ffffff;
}
.bg--primary-darken a:not(.button), .bg--primary-darken .link {
color: #ffffff;
}
.border--primary-darken {
border-color: #002266;
}
.color--primary-darken {
color: #002266;
}
.color--primary-darken a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-darken .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #002266;
}
.bg--primary-lightblue {
background-color: #0088CB;
color: #ffffff;
}
.bg--primary-lightblue a:not(.button), .bg--primary-lightblue .link {
color: #ffffff;
}
.border--primary-lightblue {
border-color: #0088CB;
}
.color--primary-lightblue {
color: #0088CB;
}
.color--primary-lightblue a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-lightblue .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #0088CB;
}
.bg--primary-lightblue-dark {
background-color: rgb(0, 118.9162561576, 177.5);
color: #ffffff;
}
.bg--primary-lightblue-dark a:not(.button), .bg--primary-lightblue-dark .link {
color: #ffffff;
}
.border--primary-lightblue-dark {
border-color: rgb(0, 118.9162561576, 177.5);
}
.color--primary-lightblue-dark {
color: rgb(0, 118.9162561576, 177.5);
}
.color--primary-lightblue-dark a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-lightblue-dark .link:not(:hover):not(:focus):not(:active):not(.button) {
color: rgb(0, 118.9162561576, 177.5);
}
.bg--primary-lightblue-darken {
background-color: rgb(0, 101.8325123153, 152);
color: #ffffff;
}
.bg--primary-lightblue-darken a:not(.button), .bg--primary-lightblue-darken .link {
color: #ffffff;
}
.border--primary-lightblue-darken {
border-color: rgb(0, 101.8325123153, 152);
}
.color--primary-lightblue-darken {
color: rgb(0, 101.8325123153, 152);
}
.color--primary-lightblue-darken a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-lightblue-darken .link:not(:hover):not(:focus):not(:active):not(.button) {
color: rgb(0, 101.8325123153, 152);
}
.bg--primary-pastelblue {
background-color: #7399C3;
color: #1A1B19;
}
.bg--primary-pastelblue a:not(.button), .bg--primary-pastelblue .link {
color: #1A1B19;
}
.border--primary-pastelblue {
border-color: #7399C3;
}
.color--primary-pastelblue {
color: #7399C3;
}
.color--primary-pastelblue a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-pastelblue .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #7399C3;
}
.bg--primary-pastelblue-dark {
background-color: rgb(97.15, 139.995, 187.35);
color: #ffffff;
}
.bg--primary-pastelblue-dark a:not(.button), .bg--primary-pastelblue-dark .link {
color: #ffffff;
}
.border--primary-pastelblue-dark {
border-color: rgb(97.15, 139.995, 187.35);
}
.color--primary-pastelblue-dark {
color: rgb(97.15, 139.995, 187.35);
}
.color--primary-pastelblue-dark a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-pastelblue-dark .link:not(:hover):not(:focus):not(:active):not(.button) {
color: rgb(97.15, 139.995, 187.35);
}
.bg--primary-pastelblue-darken {
background-color: rgb(79.3, 126.99, 179.7);
color: #ffffff;
}
.bg--primary-pastelblue-darken a:not(.button), .bg--primary-pastelblue-darken .link {
color: #ffffff;
}
.border--primary-pastelblue-darken {
border-color: rgb(79.3, 126.99, 179.7);
}
.color--primary-pastelblue-darken {
color: rgb(79.3, 126.99, 179.7);
}
.color--primary-pastelblue-darken a:not(:hover):not(:focus):not(:active):not(.button), .color--primary-pastelblue-darken .link:not(:hover):not(:focus):not(:active):not(.button) {
color: rgb(79.3, 126.99, 179.7);
}
.bg--secondary {
background-color: #0088CB;
color: #ffffff;
}
.bg--secondary a:not(.button), .bg--secondary .link {
color: #ffffff;
}
.border--secondary {
border-color: #0088CB;
}
.color--secondary {
color: #0088CB;
}
.color--secondary a:not(:hover):not(:focus):not(:active):not(.button), .color--secondary .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #0088CB;
}
.bg--action {
background-color: #1A1B19;
color: #ffffff;
}
.bg--action a:not(.button), .bg--action .link {
color: #ffffff;
}
.border--action {
border-color: #1A1B19;
}
.color--action {
color: #1A1B19;
}
.color--action a:not(:hover):not(:focus):not(:active):not(.button), .color--action .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #1A1B19;
}
.bg--danger {
background-color: #DD3953;
color: #ffffff;
}
.bg--danger a:not(.button), .bg--danger .link {
color: #ffffff;
}
.border--danger {
border-color: #DD3953;
}
.color--danger {
color: #DD3953;
}
.color--danger a:not(:hover):not(:focus):not(:active):not(.button), .color--danger .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #DD3953;
}
.bg--warning {
background-color: #ED6C43;
color: #1A1B19;
}
.bg--warning a:not(.button), .bg--warning .link {
color: #1A1B19;
}
.border--warning {
border-color: #ED6C43;
}
.color--warning {
color: #ED6C43;
}
.color--warning a:not(:hover):not(:focus):not(:active):not(.button), .color--warning .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #ED6C43;
}
.bg--success {
background-color: #5CBE67;
color: #1A1B19;
}
.bg--success a:not(.button), .bg--success .link {
color: #1A1B19;
}
.border--success {
border-color: #5CBE67;
}
.color--success {
color: #5CBE67;
}
.color--success a:not(:hover):not(:focus):not(:active):not(.button), .color--success .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #5CBE67;
}
.bg--info {
background-color: #E8E9EB;
color: #1A1B19;
}
.bg--info a:not(.button), .bg--info .link {
color: #1A1B19;
}
.border--info {
border-color: #E8E9EB;
}
.color--info {
color: #E8E9EB;
}
.color--info a:not(:hover):not(:focus):not(:active):not(.button), .color--info .link:not(:hover):not(:focus):not(:active):not(.button) {
color: #E8E9EB;
}
.bg--black .button--action {
background: var(--main-color-white);
color: var(--main-color-black);
}
.bg--action .button--action {
background: var(--main-color-white);
color: var(--main-color-black);
}
.bg--primary .button:hover {
background: rgb(0, 42.5, 127.5);
}
.bg--primary .button--primary {
background: linear-gradient(90deg, #ff8a00, #da1b60);
color: var(--main-color-white);
}
.bg--primary-gradient {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-pure-white) !important;
}
.bg--primary-gradient .button:hover {
background: rgb(0, 42.5, 127.5);
}
.bg--primary-gradient .button--primary {
background: linear-gradient(90deg, #ff8a00, #da1b60);
color: var(--main-color-white);
transition: none;
}
.bg--primary-gradient .button--primary:hover, .bg--primary-gradient .button--primary:active, .bg--primary-gradient .button--primary:focus {
background: var(--main-color-white);
color: var(--main-color-primary);
}
.bg--primary-gradient .specialradiobox, .bg--primary-gradient .specialcheckbox, .bg--primary-gradient .specialcheckboxSwitch, .bg--primary-gradient h1, .bg--primary-gradient .h1, .bg--primary-gradient .categoryInfo .shopSiteHeadline, .categoryInfo .bg--primary-gradient .shopSiteHeadline, .bg--primary-gradient .orderboxSummary__headline, .bg--primary-gradient h2, .bg--primary-gradient .h2, .bg--primary-gradient h3, .bg--primary-gradient .h3, .bg--primary-gradient .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .bg--primary-gradient .basePrice, .bg--primary-gradient h4, .bg--primary-gradient .h4, .bg--primary-gradient a {
color: var(--main-color-pure-white) !important;
}
.bg--primary-gradient a:hover, .bg--primary-gradient a:focus, .bg--primary-gradient a:active {
color: var(--main-color-black) !important;
}
body::selection, body::-moz-selection {
background: var(--main-color-primary);
color: var(--main-color-pure-white);
}
.bg--primary.contentBox .color--white a:hover, .bg--primary.contentBox .color--white a:focus, .bg--primary.contentBox .color--white a:active {
color: var(--main-color-white);
text-decoration: underline;
text-underline-offset: 2px;
}
/*
Inputs
Markup:
Text E-Mail Number Date Textarea Select
Choose
Option 1
Option 2
Option 3
:focus - Focus
:active - Active
:disabled - Disabled
:valid - Valid
.error - Error
Styleguide Form.Inputs
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px var(--main-color-white) inset !important;
}
input,
select,
textarea,
.customMultiSelect--selected,
.customSelect__selected,
.sortingSelect.customSelect .customSelect__selected,
.filterReset {
background-color: var(--main-color-pure-white);
color: var(--main-color-black);
border: 1px solid var(--main-color-gray-base);
border-radius: 10px;
box-shadow: none;
display: block;
width: 100%;
line-height: 18px;
font-size: clamp(16px, var(--main-font-size-small), 20px);
padding: 10px 12px 10px 12px;
}
@media (min-width: 768px) {
input,
select,
textarea,
.customMultiSelect--selected,
.customSelect__selected,
.sortingSelect.customSelect .customSelect__selected,
.filterReset {
line-height: 24px;
font-size: var(--main-font-size-base);
padding: 12px 16px 12px 16px;
}
}
input:not(:disabled):active, input:not(:disabled):focus,
select:not(:disabled):active,
select:not(:disabled):focus,
textarea:not(:disabled):active,
textarea:not(:disabled):focus,
.customMultiSelect--selected:not(:disabled):active,
.customSelect__selected:not(:disabled):active,
.filterReset:not(:disabled):active,
.customMultiSelect--selected:not(:disabled):focus,
.customSelect__selected:not(:disabled):focus,
.filterReset:not(:disabled):focus {
outline: 0;
border-color: var(--main-color-primary);
}
input.error,
select.error,
textarea.error,
.error.customMultiSelect--selected,
.error.customSelect__selected,
.sortingSelect.customSelect .error.customSelect__selected,
.error.filterReset {
border-color: var(--main-color-danger);
}
input:disabled,
select:disabled,
textarea:disabled,
.customMultiSelect--selected:disabled,
.customSelect__selected:disabled,
.sortingSelect.customSelect .customSelect__selected:disabled,
.filterReset:disabled {
background-color: var(--main-color-middle-gray);
border-color: var(--main-color-middle-gray);
color: var(--main-color-dark-gray);
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=submit] {
width: auto;
}
input[type=number] {
-moz-appearance: textfield;
}
input[type=file] + .full {
flex-grow: 1;
padding-left: 15px;
padding-right: 15px !important;
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=file] + .full i {
font-size: 18px;
}
input[type=file]:hover + .full i {
color: var(--main-color-primary);
}
textarea {
resize: vertical;
}
.selectBody:after, .customMultiSelect--selected:after, .customSelect__selected:after {
content: "\e005";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: 24px;
top: 50%;
font-size: 18px;
pointer-events: none;
transform: translateY(-50%);
margin-top: -1px;
color: var(--main-color-black);
}
.selectBody, .customMultiSelect--selected, .customSelect__selected {
background-color: var(--main-color-pure-white);
cursor: pointer;
display: block;
position: relative;
overflow: hidden;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 10px;
}
.selectBody select, .customMultiSelect--selected select, .customSelect__selected select {
color: var(--main-color-black);
border-color: var(--main-color-gray-base);
cursor: pointer;
padding-right: 40px;
appearance: none;
display: block;
width: 100%;
}
.selectBody select::-ms-expand, .customMultiSelect--selected select::-ms-expand, .customSelect__selected select::-ms-expand {
display: none;
}
.selectBody.focus select, .focus.customMultiSelect--selected select, .focus.customSelect__selected select {
border-color: var(--main-color-primary);
}
.selectBody.disabled select, .disabled.customMultiSelect--selected select, .disabled.customSelect__selected select {
cursor: default;
}
form {
margin: 0;
}
/*
Radioboxes
Markup:
Styleguide Form.Radioboxes
*/ /*
Radioboxes Switch
Markup:
Styleguide Form.Radioboxes Switch
*/
/*
Checkboxes
Markup:
Styleguide Form.Checkboxes
*/
/*
Checkboxes Switch
Markup:
Styleguide Form.Checkboxes Switch
*/
.specialradiobox,
.specialcheckbox,
.specialcheckboxSwitch {
position: relative;
line-height: 24px;
display: inline-block;
cursor: pointer;
margin-bottom: 10px;
padding-left: 40px;
color: var(--main-color-black);
}
.specialradiobox i,
.specialcheckbox i,
.specialcheckboxSwitch i {
font-style: normal;
position: absolute;
left: 0;
width: 24px;
height: 24px;
background-color: var(--main-color-pure-white);
border: 2px solid var(--main-color-primary);
border-radius: 50%;
top: 0;
display: block;
pointer-events: none;
margin-bottom: 0;
font-family: var(--main-font-family);
}
.specialradiobox i:after,
.specialcheckbox i:after,
.specialcheckboxSwitch i:after {
content: " ";
pointer-events: none;
position: absolute;
width: 14px;
height: 14px;
left: 3px;
top: 3px;
opacity: 0;
transition: opacity 0.1s ease-in;
background-color: var(--main-color-primary);
border-radius: 50%;
display: block;
}
.specialradiobox input,
.specialcheckbox input,
.specialcheckboxSwitch input {
position: absolute;
width: 0;
opacity: 0;
cursor: pointer;
margin: 0;
}
.specialradiobox input:checked + i:after,
.specialcheckbox input:checked + i:after,
.specialcheckboxSwitch input:checked + i:after {
opacity: 1;
}
.specialradiobox input:disabled, .specialradiobox input .disabled,
.specialcheckbox input:disabled,
.specialcheckbox input .disabled,
.specialcheckboxSwitch input:disabled,
.specialcheckboxSwitch input .disabled {
cursor: not-allowed;
}
.specialradiobox input:disabled + i, .specialradiobox input .disabled + i,
.specialcheckbox input:disabled + i,
.specialcheckbox input .disabled + i,
.specialcheckboxSwitch input:disabled + i,
.specialcheckboxSwitch input .disabled + i {
background: var(--main-color-light-gray);
border-color: var(--main-color-light-gray);
}
.specialradiobox input:disabled + i:after, .specialradiobox input .disabled + i:after,
.specialcheckbox input:disabled + i:after,
.specialcheckbox input .disabled + i:after,
.specialcheckboxSwitch input:disabled + i:after,
.specialcheckboxSwitch input .disabled + i:after {
color: var(--main-color-gray-base);
}
.specialradiobox input:focus + i,
.specialcheckbox input:focus + i,
.specialcheckboxSwitch input:focus + i {
border-color: var(--main-color-primary);
}
.specialradiobox:active:not(.disabled) i:after,
.specialcheckbox:active:not(.disabled) i:after,
.specialcheckboxSwitch:active:not(.disabled) i:after {
opacity: 0.7;
}
.specialradiobox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckbox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckboxSwitch:active:not(.disabled) input:disabled:not(:checked) + i:after {
opacity: 0;
}
.specialradiobox.disabled,
.specialcheckbox.disabled,
.specialcheckboxSwitch.disabled {
cursor: not-allowed;
color: var(--main-color-black);
}
.specialradiobox.disabled input,
.specialcheckbox.disabled input,
.specialcheckboxSwitch.disabled input {
cursor: not-allowed;
}
.specialradiobox.disabled i,
.specialcheckbox.disabled i,
.specialcheckboxSwitch.disabled i {
background: var(--main-color-pure-white);
border-color: var(--main-color-black);
cursor: not-allowed;
}
.specialradiobox.disabled i:after,
.specialcheckbox.disabled i:after,
.specialcheckboxSwitch.disabled i:after {
color: var(--main-color-black);
cursor: not-allowed;
}
.specialradiobox:has(input:checked) i:after,
.specialcheckbox:has(input:checked) i:after,
.specialcheckboxSwitch:has(input:checked) i:after {
opacity: 1;
}
.specialradiobox:has(input:disabled),
.specialcheckbox:has(input:disabled),
.specialcheckboxSwitch:has(input:disabled) {
color: var(--main-color-dark-gray);
}
.specialradiobox:has(input:disabled) i,
.specialcheckbox:has(input:disabled) i,
.specialcheckboxSwitch:has(input:disabled) i {
background: var(--main-color-light-gray);
border-color: var(--main-color-middle-gray);
}
.specialradiobox:has(input:disabled) i:after,
.specialcheckbox:has(input:disabled) i:after,
.specialcheckboxSwitch:has(input:disabled) i:after {
color: var(--main-color-black);
}
.specialradiobox:has(input:focus) + i,
.specialcheckbox:has(input:focus) + i,
.specialcheckboxSwitch:has(input:focus) + i {
border-color: var(--main-color-primary);
}
.specialcheckbox {
line-height: 24px;
padding-left: 40px;
}
.specialcheckbox i {
border-radius: 10px;
}
.specialcheckbox i:after {
content: "\e019";
font-family: "icons", Helvetica, Arial, sans-serif;
color: var(--main-color-primary);
top: 50%;
left: 50%;
translate: -50% -50%;
opacity: 0;
width: auto;
height: auto;
line-height: 24px;
transition: opacity 0.1s ease-in;
font-size: 18px;
background-color: transparent;
}
.specialcheckbox input {
width: 24px;
height: 24px;
left: 0;
top: 0;
}
.specialcheckbox--small {
padding-left: 27px;
}
.specialcheckbox--small i {
border-radius: 4px;
width: 14px;
height: 14px;
border: 1px solid var(--main-color-black);
top: 50%;
transform: translateY(-50%);
}
.specialcheckbox--small i:after {
content: "\e019";
font-family: "icons", Helvetica, Arial, sans-serif;
color: var(--main-color-primary);
top: 50%;
left: 50%;
translate: -50% -50%;
opacity: 0;
width: auto;
height: auto;
line-height: 12px;
transition: opacity 0.1s ease-in;
font-size: 12px;
background-color: transparent;
}
.specialcheckbox--small2 {
padding-left: 30px;
color: var(--main-color-dark-gray);
margin-bottom: 6px;
line-height: 22px;
}
.specialcheckbox--small2 i {
border-radius: 8px;
width: 22px;
height: 22px;
}
.specialcheckbox--small2 i:after {
content: "\e019";
font-family: "icons", Helvetica, Arial, sans-serif;
color: var(--main-color-primary);
top: 50%;
left: 50%;
translate: -50% -50%;
opacity: 0;
width: auto;
height: auto;
line-height: 16px;
transition: opacity 0.1s ease-in;
font-size: 16px;
background-color: transparent;
}
.specialcheckbox--small2 input:disabled, .specialcheckbox--small2 input .disabled {
cursor: not-allowed;
}
.specialcheckbox--small2 input:disabled + i, .specialcheckbox--small2 input .disabled + i {
background: var(--main-color-white);
border-color: var(--main-color-black);
}
.specialcheckbox--small2 input:disabled + i:after, .specialcheckbox--small2 input .disabled + i:after {
color: var(--main-color-black);
}
@media (max-width: 481px) {
.specialcheckbox--small2 {
word-break: break-word;
hyphens: auto;
}
}
.specialcheckboxSwitch {
padding-left: 45px;
margin-bottom: 0;
}
.specialcheckboxSwitch i {
background: var(--main-color-gray-base);
border-radius: 16px;
width: 36px;
height: 20px;
border: 0;
position: absolute;
margin-top: 3px;
transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch i:after {
content: "";
display: block;
background: var(--main-color-pure-white);
border-radius: 50%;
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
opacity: 1;
transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch input {
width: 36px;
height: 20px;
left: 0;
top: 0;
}
.specialcheckboxSwitch input:checked + i {
background: var(--main-color-primary);
}
.specialcheckboxSwitch input:checked + i:after {
left: 17px;
background: var(--main-color-white);
}
.specialradiobox {
line-height: 27px;
}
/*
Containers
Markup:
.container - Base Container
.container--small - Small Container
.container--large - Large Container
.container--full - Container Maxwidth Full-HD
Styleguide Structure.Containers
*/
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px;
}
.container {
max-width: 1484px;
}
.container--xsmall {
max-width: 884px;
}
.container--small {
max-width: 1184px;
}
.container--large {
max-width: 1816px;
}
.container--full {
max-width: 1920px;
padding-left: 0;
padding-right: 0;
}
.marginBottom--0 {
margin-bottom: 0;
}
.marginTop--xxsmall {
margin-top: 5px;
}
@media (min-width: 1880px) {
.row.gridGap--xlarge {
margin-left: -80px;
margin-right: -80px;
}
.row.gridGap--xlarge > * {
padding-left: 80px;
padding-right: 80px;
}
.row.gridGap--xlarge > *.marginBottom {
margin-bottom: 160px;
}
}
.row--collection > div {
display: flex;
flex-direction: column;
}
.row--collection > div > div {
display: flex;
flex-grow: 1;
}
.row.align-items-stretch > div {
display: flex;
align-items: stretch;
}
@media (max-width: 481px) {
.row.gridGap--small--mobile {
margin-left: -8px;
margin-right: -8px;
}
.row.gridGap--small--mobile > * {
padding-left: 8px;
padding-right: 8px;
}
.row.gridGap--small--mobile > *.marginBottom, .row.gridGap--small--mobile > *.marginBottom--small {
margin-bottom: 16px;
}
}
hr {
border: 0;
border-top: 1px solid var(--main-color-primary-pastelblue);
margin-top: 30px;
margin-bottom: 30px;
}
.font--bold {
font-weight: var(--main-font-weight-bold);
}
.font--bold * {
font-weight: var(--main-font-weight-bold) !important;
}
.fontSize--base {
font-size: var(--main-font-size-base) !important;
}
.fontSize--base * {
font-size: var(--main-font-size-base);
}
.xsmalltext {
font-size: 1.1rem;
}
@media (min-width: 1023px) {
.text-align-left-xs {
text-align: right;
}
}
.fileBody .icon {
color: var(--main-color-black);
}
.fileBody:has(label) .icon {
top: 20px;
}
.fileBody--wrapper {
position: relative;
}
.fileBody--wrapper .sparePartList--tooltip {
position: absolute;
right: -9px;
top: 13px;
z-index: 1;
}
.shopSiteHeadline {
font-weight: var(--main-font-weight-bold);
font-size: 2.6rem;
}
@media (min-width: 1024px) {
.shopSiteHeadline {
font-size: 3rem;
}
}
@media (min-width: 1250px) {
.shopSiteHeadline {
font-size: 3.8rem;
}
}
.contactformular h3, .contactformular .h3, .contactformular .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .contactformular .basePrice {
margin-bottom: 0;
}
/*
Fake Tables
Markup:
Styleguide Base.Fake Tables
*/
.table {
width: auto;
}
@media (min-width: 768px) {
.table {
display: table;
}
}
.table__row {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--main-color-light-gray);
}
@media (min-width: 768px) {
.table__row {
display: table-row;
}
}
@media (min-width: 768px) {
.table__cell {
display: table-cell;
vertical-align: middle;
padding: 10px 5px;
border-bottom: 0;
border-bottom: 1px solid var(--main-color-gray-base);
}
}
@media (min-width: 1250px) {
.table__cell {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 767px) {
.table__cell {
text-align: left !important;
}
.table__cell .button {
margin-top: 10px;
}
}
.flatpickr-calendar {
background: transparent;
opacity: 0;
display: none;
text-align: center;
visibility: hidden;
padding: 0;
-webkit-animation: none;
animation: none;
direction: ltr;
border: 0;
font-size: 14px;
line-height: 24px;
border-radius: 5px;
position: absolute;
width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: manipulation;
touch-action: manipulation;
background: #fff;
-webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}
.flatpickr-calendar.open, .flatpickr-calendar.inline {
opacity: 1;
max-height: 640px;
visibility: visible;
}
.flatpickr-calendar.open {
display: inline-block;
z-index: 99999;
}
.flatpickr-calendar.animate.open {
-webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
display: block;
position: relative;
top: 2px;
}
.flatpickr-calendar.static {
position: absolute;
top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
z-index: 999;
display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
height: 40px;
border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
height: auto;
}
.flatpickr-calendar:before, .flatpickr-calendar:after {
position: absolute;
display: block;
pointer-events: none;
border: solid transparent;
content: "";
height: 0;
width: 0;
left: 22px;
}
.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after {
left: auto;
right: 22px;
}
.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after {
left: 50%;
right: 50%;
}
.flatpickr-calendar:before {
border-width: 5px;
margin: 0 -5px;
}
.flatpickr-calendar:after {
border-width: 4px;
margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
border-top-color: #fff;
}
.flatpickr-calendar:focus {
outline: 0;
}
.flatpickr-wrapper {
position: relative;
display: inline-block;
}
.flatpickr-months {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flatpickr-months .flatpickr-month {
background: transparent;
color: rgba(0, 0, 0, 0.9);
fill: rgba(0, 0, 0, 0.9);
height: 34px;
line-height: 1;
text-align: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
cursor: pointer;
position: absolute;
top: 0;
height: 34px;
padding: 10px;
z-index: 3;
color: rgba(0, 0, 0, 0.9);
fill: rgba(0, 0, 0, 0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
display: none;
}
.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /*
/*rtl:begin:ignore*/
left: 0;
} /*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /*
/*rtl:begin:ignore*/
right: 0;
} /*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
width: 14px;
height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
-webkit-transition: fill 0.1s;
transition: fill 0.1s;
fill: inherit;
}
.numInputWrapper {
position: relative;
height: auto;
}
.numInputWrapper input, .numInputWrapper span {
display: inline-block;
}
.numInputWrapper input {
width: 100%;
}
.numInputWrapper input::-ms-clear {
display: none;
}
.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.numInputWrapper span {
position: absolute;
right: 0;
width: 14px;
padding: 0 4px 0 2px;
height: 50%;
line-height: 50%;
opacity: 0;
cursor: pointer;
border: 1px solid rgba(57, 57, 57, 0.15);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.numInputWrapper span:hover {
background: rgba(0, 0, 0, 0.1);
}
.numInputWrapper span:active {
background: rgba(0, 0, 0, 0.2);
}
.numInputWrapper span:after {
display: block;
content: "";
position: absolute;
}
.numInputWrapper span.arrowUp {
top: 0;
border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid rgba(57, 57, 57, 0.6);
top: 26%;
}
.numInputWrapper span.arrowDown {
top: 50%;
}
.numInputWrapper span.arrowDown:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(57, 57, 57, 0.6);
top: 40%;
}
.numInputWrapper span svg {
width: inherit;
height: auto;
}
.numInputWrapper span svg path {
fill: rgba(0, 0, 0, 0.5);
}
.numInputWrapper:hover {
background: rgba(0, 0, 0, 0.05);
}
.numInputWrapper:hover span {
opacity: 1;
}
.flatpickr-current-month {
font-size: 135%;
line-height: inherit;
font-weight: 300;
color: inherit;
position: absolute;
width: 75%;
left: 12.5%;
padding: 7.48px 0 0 0;
line-height: 1;
height: 34px;
display: inline-block;
text-align: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.flatpickr-current-month span.cur-month {
font-family: inherit;
font-weight: 700;
color: inherit;
display: inline-block;
margin-left: 0.5ch;
padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .numInputWrapper {
width: 6ch;
width: 7ch\0 ;
display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month input.cur-year {
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
cursor: text;
padding: 0 0 0 0.5ch;
margin: 0;
display: inline-block;
font-size: inherit;
font-family: inherit;
font-weight: 300;
line-height: inherit;
height: auto;
border: 0;
border-radius: 0;
vertical-align: initial;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
outline: 0;
}
.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
font-size: 100%;
color: rgba(0, 0, 0, 0.5);
background: transparent;
pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: menulist;
background: transparent;
border: none;
border-radius: 0;
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
font-weight: 300;
height: auto;
line-height: inherit;
margin: -1px 0 0 0;
outline: none;
padding: 0 0 0 0.5ch;
position: relative;
vertical-align: initial;
-webkit-box-sizing: border-box;
-webkit-appearance: menulist;
-moz-appearance: menulist;
width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
background-color: transparent;
outline: none;
padding: 0;
}
.flatpickr-weekdays {
background: transparent;
text-align: center;
overflow: hidden;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
span.flatpickr-weekday {
cursor: default;
font-size: 90%;
background: transparent;
color: rgba(0, 0, 0, 0.54);
line-height: 1;
margin: 0;
text-align: center;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-weight: bolder;
}
.dayContainer, .flatpickr-weeks {
padding: 1px 0 0 0;
}
.flatpickr-days {
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
width: 307.875px;
}
.flatpickr-days:focus {
outline: 0;
}
.dayContainer {
padding: 0;
outline: 0;
text-align: left;
width: 307.875px;
min-width: 307.875px;
max-width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.dayContainer + .dayContainer {
-webkit-box-shadow: -1px 0 0 #e6e6e6;
box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
background: none;
border: 1px solid transparent;
border-radius: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #393939;
cursor: pointer;
font-weight: 400;
width: 14.2857143%;
-webkit-flex-basis: 14.2857143%;
-ms-flex-preferred-size: 14.2857143%;
flex-basis: 14.2857143%;
max-width: 39px;
height: 39px;
line-height: 39px;
margin: 0;
display: inline-block;
position: relative;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
cursor: pointer;
outline: 0;
background: #e6e6e6;
border-color: #e6e6e6;
}
.flatpickr-day.today {
border-color: #959ea9;
}
.flatpickr-day.today:hover, .flatpickr-day.today:focus {
border-color: #959ea9;
background: #959ea9;
color: #fff;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
background: #569ff7;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
border-color: #569ff7;
}
.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-webkit-box-shadow: -10px 0 0 #569ff7;
box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
border-radius: 50px;
}
.flatpickr-day.inRange {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
color: rgba(57, 57, 57, 0.3);
background: transparent;
border-color: transparent;
cursor: default;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
cursor: not-allowed;
color: rgba(57, 57, 57, 0.1);
}
.flatpickr-day.week.selected {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
visibility: hidden;
}
.rangeMode .flatpickr-day {
margin-top: 1px;
}
.flatpickr-weekwrapper {
float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
padding: 0 12px;
-webkit-box-shadow: 1px 0 0 #e6e6e6;
box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
float: none;
width: 100%;
line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
display: block;
width: 100%;
max-width: none;
color: rgba(57, 57, 57, 0.3);
background: transparent;
cursor: default;
border: none;
}
.flatpickr-innerContainer {
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.flatpickr-rContainer {
display: inline-block;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flatpickr-time {
text-align: center;
outline: 0;
display: block;
height: 0;
line-height: 40px;
max-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flatpickr-time:after {
content: "";
display: table;
clear: both;
}
.flatpickr-time .numInputWrapper {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 40%;
height: 40px;
float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
width: 49%;
}
.flatpickr-time input {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
border-radius: 0;
text-align: center;
margin: 0;
padding: 0;
height: inherit;
line-height: inherit;
color: #393939;
font-size: 14px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
font-weight: bold;
}
.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
font-weight: 400;
}
.flatpickr-time input:focus {
outline: 0;
border: 0;
}
.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
height: inherit;
float: left;
line-height: inherit;
color: #393939;
font-weight: bold;
width: 2%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
outline: 0;
width: 18%;
cursor: pointer;
text-align: center;
font-weight: 400;
}
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
background: #eee;
}
.flatpickr-input[readonly] {
cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.flatpickr-calendar {
border-radius: 0;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: var(--main-color-primary);
}
.flatpickr-current-month {
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
font-weight: normal;
}
.flatpickr-current-month .numInputWrapper input {
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
display: none;
}
.flatpickr-day {
line-height: 37px;
color: var(--main-color-dark-gray);
font-weight: normal;
border-radius: 0 !important;
}
.flatpickr-day:hover, .flatpickr-day:focus {
background-color: var(--main-color-light-gray);
border-color: var(--main-color-light-gray);
}
.flatpickr-day.today {
border-color: var(--main-color-dark-gray);
}
.flatpickr-day.today.hover, .flatpickr-day.today:focus {
border-color: var(--main-color-primary);
background-color: var(--main-color-primary);
}
.flatpickr-day.flatpickr-disabled {
color: var(--main-color-light-gray);
}
.flatpickr-day.flatpickr-disabled:hover {
color: var(--main-color-light-gray);
}
.flatpickr-day.inRange {
background: var(--main-color-light-gray);
border-color: var(--main-color-light-gray);
box-shadow: -5px 0 0 var(--main-color-light-gray), 5px 0 0 var(--main-color-light-gray);
}
.flatpickr-day.endRange, .flatpickr-day.selected, .flatpickr-day.startRange {
background-color: var(--main-color-black);
color: var(--main-color-white);
border-color: var(--main-color-black);
}
.flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay {
background-color: var(--main-color-black);
color: var(--main-color-white);
border-color: var(--main-color-black);
}
.flatpickr-day.endRange:hover, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover {
background-color: var(--main-color-gray-base);
color: var(--main-color-white);
border-color: var(--main-color-gray-base);
}
.flatpickr-day.endRange:focus, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus {
background-color: var(--main-color-black);
color: var(--main-color-white);
border-color: var(--main-color-black);
}
.flatpickr-time .flatpickr-am-pm:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time input:hover {
background-color: var(--main-color-light-gray);
}
.js-dateRangeInline {
display: none !important;
}
.filterDropdown .flatpickr-calendar {
width: 100%;
border: 0;
box-shadow: none;
}
.googlemaps_content {
max-width: 100%;
}
.googlemaps_content img {
max-width: none !important;
}
.custom-clustericon {
border-radius: 50%;
background: var(--main-color-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--main-color-white);
}
.custom-clustericon:before {
content: "";
display: block;
width: 80%;
height: 80%;
background: var(--main-color-primary-dark);
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.grecaptcha-badge {
visibility: hidden !important;
}
.lottieContainer {
max-width: 100%;
width: 100%;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
.iti {
position: relative;
display: inline-block;
}
.iti * {
box-sizing: border-box;
}
.iti__hide {
display: none;
}
.iti__v-hide {
visibility: hidden;
}
.iti input.iti__tel-input, .iti input.iti__tel-input[type=tel], .iti input.iti__tel-input[type=text] {
position: relative;
z-index: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-right: 36px;
margin-right: 0;
}
.iti__flag-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 1px;
}
.iti__selected-flag {
z-index: 1;
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 0 6px 0 8px;
}
.iti__arrow {
margin-left: 6px;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid #555;
}
[dir=rtl] .iti__arrow {
margin-right: 6px;
margin-left: 0;
}
.iti__arrow--up {
border-top: none;
border-bottom: 4px solid #555;
}
.iti__dropdown-content {
position: absolute;
z-index: 2;
margin-left: -1px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.iti__dropdown-content--dropup {
bottom: 100%;
margin-bottom: -1px;
}
.iti__search-input {
width: 100%;
border-width: 0;
}
.iti__country-list {
list-style: none;
padding: 0;
margin: 0;
}
.iti--flexible-dropdown-width .iti__country-list {
white-space: nowrap;
}
@media (max-width: 500px) {
.iti--flexible-dropdown-width .iti__country-list {
white-space: normal;
}
}
.iti__flag-box {
display: inline-block;
width: 20px;
}
.iti__divider {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #ccc;
}
.iti__country {
display: flex;
align-items: center;
padding: 5px 10px;
outline: 0;
}
.iti__dial-code {
color: #999;
}
.iti__country.iti__highlight {
background-color: rgba(0, 0, 0, 0.05);
}
.iti__country-name, .iti__flag-box {
margin-right: 6px;
}
[dir=rtl] .iti__country-name, [dir=rtl] .iti__flag-box {
margin-right: 0;
margin-left: 6px;
}
.iti--allow-dropdown input.iti__tel-input, .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--allow-dropdown input.iti__tel-input[type=text], .iti--separate-dial-code input.iti__tel-input, .iti--separate-dial-code input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input[type=text] {
padding-right: 6px;
padding-left: 52px;
margin-left: 0;
}
[dir=rtl] .iti--allow-dropdown input.iti__tel-input, [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text], [dir=rtl] .iti--separate-dial-code input.iti__tel-input, [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text] {
padding-right: 52px;
padding-left: 6px;
margin-right: 0;
}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
right: auto;
left: 0;
}
[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
right: 0;
left: auto;
}
.iti--allow-dropdown .iti__flag-container:hover {
cursor: pointer;
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
background-color: rgba(0, 0, 0, 0.05);
}
.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover, .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
cursor: default;
}
.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag, .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
background-color: transparent;
}
.iti--separate-dial-code .iti__selected-flag {
background-color: rgba(0, 0, 0, 0.05);
}
.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
margin-left: 6px;
}
[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
margin-left: 0;
margin-right: 6px;
}
.iti--container {
position: absolute;
top: -1000px;
left: -1000px;
z-index: 1060;
padding: 1px;
}
.iti--container:hover {
cursor: pointer;
}
.iti--fullscreen-popup.iti--container {
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.iti--fullscreen-popup .iti__dropdown-content {
max-height: 100%;
position: relative;
}
.iti--fullscreen-popup .iti__country {
padding: 10px 10px;
line-height: 1.5em;
}
.iti__flag {
width: 20px;
}
.iti__flag.iti__be {
width: 18px;
}
.iti__flag.iti__ch {
width: 15px;
}
.iti__flag.iti__mc {
width: 19px;
}
.iti__flag.iti__ne {
width: 18px;
}
.iti__flag.iti__np {
width: 13px;
}
.iti__flag.iti__va {
width: 15px;
}
@media (min-resolution: 2x) {
.iti__flag {
background-size: 5762px 15px;
}
}
.iti__flag.iti__ac {
height: 10px;
background-position: 0 0;
}
.iti__flag.iti__ad {
height: 14px;
background-position: -22px 0;
}
.iti__flag.iti__ae {
height: 10px;
background-position: -44px 0;
}
.iti__flag.iti__af {
height: 14px;
background-position: -66px 0;
}
.iti__flag.iti__ag {
height: 14px;
background-position: -88px 0;
}
.iti__flag.iti__ai {
height: 10px;
background-position: -110px 0;
}
.iti__flag.iti__al {
height: 15px;
background-position: -132px 0;
}
.iti__flag.iti__am {
height: 10px;
background-position: -154px 0;
}
.iti__flag.iti__ao {
height: 14px;
background-position: -176px 0;
}
.iti__flag.iti__aq {
height: 14px;
background-position: -198px 0;
}
.iti__flag.iti__ar {
height: 13px;
background-position: -220px 0;
}
.iti__flag.iti__as {
height: 10px;
background-position: -242px 0;
}
.iti__flag.iti__at {
height: 14px;
background-position: -264px 0;
}
.iti__flag.iti__au {
height: 10px;
background-position: -286px 0;
}
.iti__flag.iti__aw {
height: 14px;
background-position: -308px 0;
}
.iti__flag.iti__ax {
height: 13px;
background-position: -330px 0;
}
.iti__flag.iti__az {
height: 10px;
background-position: -352px 0;
}
.iti__flag.iti__ba {
height: 10px;
background-position: -374px 0;
}
.iti__flag.iti__bb {
height: 14px;
background-position: -396px 0;
}
.iti__flag.iti__bd {
height: 12px;
background-position: -418px 0;
}
.iti__flag.iti__be {
height: 15px;
background-position: -440px 0;
}
.iti__flag.iti__bf {
height: 14px;
background-position: -460px 0;
}
.iti__flag.iti__bg {
height: 12px;
background-position: -482px 0;
}
.iti__flag.iti__bh {
height: 12px;
background-position: -504px 0;
}
.iti__flag.iti__bi {
height: 12px;
background-position: -526px 0;
}
.iti__flag.iti__bj {
height: 14px;
background-position: -548px 0;
}
.iti__flag.iti__bl {
height: 14px;
background-position: -570px 0;
}
.iti__flag.iti__bm {
height: 10px;
background-position: -592px 0;
}
.iti__flag.iti__bn {
height: 10px;
background-position: -614px 0;
}
.iti__flag.iti__bo {
height: 14px;
background-position: -636px 0;
}
.iti__flag.iti__bq {
height: 14px;
background-position: -658px 0;
}
.iti__flag.iti__br {
height: 14px;
background-position: -680px 0;
}
.iti__flag.iti__bs {
height: 10px;
background-position: -702px 0;
}
.iti__flag.iti__bt {
height: 14px;
background-position: -724px 0;
}
.iti__flag.iti__bv {
height: 15px;
background-position: -746px 0;
}
.iti__flag.iti__bw {
height: 14px;
background-position: -768px 0;
}
.iti__flag.iti__by {
height: 10px;
background-position: -790px 0;
}
.iti__flag.iti__bz {
height: 12px;
background-position: -812px 0;
}
.iti__flag.iti__ca {
height: 10px;
background-position: -834px 0;
}
.iti__flag.iti__cc {
height: 10px;
background-position: -856px 0;
}
.iti__flag.iti__cd {
height: 15px;
background-position: -878px 0;
}
.iti__flag.iti__cf {
height: 14px;
background-position: -900px 0;
}
.iti__flag.iti__cg {
height: 14px;
background-position: -922px 0;
}
.iti__flag.iti__ch {
height: 15px;
background-position: -944px 0;
}
.iti__flag.iti__ci {
height: 14px;
background-position: -961px 0;
}
.iti__flag.iti__ck {
height: 10px;
background-position: -983px 0;
}
.iti__flag.iti__cl {
height: 14px;
background-position: -1005px 0;
}
.iti__flag.iti__cm {
height: 14px;
background-position: -1027px 0;
}
.iti__flag.iti__cn {
height: 14px;
background-position: -1049px 0;
}
.iti__flag.iti__co {
height: 14px;
background-position: -1071px 0;
}
.iti__flag.iti__cp {
height: 14px;
background-position: -1093px 0;
}
.iti__flag.iti__cq {
height: 12px;
background-position: -1115px 0;
}
.iti__flag.iti__cr {
height: 12px;
background-position: -1137px 0;
}
.iti__flag.iti__cu {
height: 10px;
background-position: -1159px 0;
}
.iti__flag.iti__cv {
height: 12px;
background-position: -1181px 0;
}
.iti__flag.iti__cw {
height: 14px;
background-position: -1203px 0;
}
.iti__flag.iti__cx {
height: 10px;
background-position: -1225px 0;
}
.iti__flag.iti__cy {
height: 14px;
background-position: -1247px 0;
}
.iti__flag.iti__cz {
height: 14px;
background-position: -1269px 0;
}
.iti__flag.iti__de {
height: 12px;
background-position: -1291px 0;
}
.iti__flag.iti__dg {
height: 10px;
background-position: -1313px 0;
}
.iti__flag.iti__dj {
height: 14px;
background-position: -1335px 0;
}
.iti__flag.iti__dk {
height: 15px;
background-position: -1357px 0;
}
.iti__flag.iti__dm {
height: 10px;
background-position: -1379px 0;
}
.iti__flag.iti__do {
height: 14px;
background-position: -1401px 0;
}
.iti__flag.iti__dz {
height: 14px;
background-position: -1423px 0;
}
.iti__flag.iti__ea {
height: 14px;
background-position: -1445px 0;
}
.iti__flag.iti__ec {
height: 14px;
background-position: -1467px 0;
}
.iti__flag.iti__ee {
height: 13px;
background-position: -1489px 0;
}
.iti__flag.iti__eg {
height: 14px;
background-position: -1511px 0;
}
.iti__flag.iti__eh {
height: 10px;
background-position: -1533px 0;
}
.iti__flag.iti__er {
height: 10px;
background-position: -1555px 0;
}
.iti__flag.iti__es {
height: 14px;
background-position: -1577px 0;
}
.iti__flag.iti__et {
height: 10px;
background-position: -1599px 0;
}
.iti__flag.iti__eu {
height: 14px;
background-position: -1621px 0;
}
.iti__flag.iti__ez {
height: 14px;
background-position: -1643px 0;
}
.iti__flag.iti__fi {
height: 12px;
background-position: -1665px 0;
}
.iti__flag.iti__fj {
height: 10px;
background-position: -1687px 0;
}
.iti__flag.iti__fk {
height: 10px;
background-position: -1709px 0;
}
.iti__flag.iti__fm {
height: 11px;
background-position: -1731px 0;
}
.iti__flag.iti__fo {
height: 15px;
background-position: -1753px 0;
}
.iti__flag.iti__fr {
height: 14px;
background-position: -1775px 0;
}
.iti__flag.iti__fx {
height: 14px;
background-position: -1797px 0;
}
.iti__flag.iti__ga {
height: 15px;
background-position: -1819px 0;
}
.iti__flag.iti__gb {
height: 10px;
background-position: -1841px 0;
}
.iti__flag.iti__gd {
height: 12px;
background-position: -1863px 0;
}
.iti__flag.iti__ge {
height: 14px;
background-position: -1885px 0;
}
.iti__flag.iti__gf {
height: 14px;
background-position: -1907px 0;
}
.iti__flag.iti__gg {
height: 14px;
background-position: -1929px 0;
}
.iti__flag.iti__gh {
height: 14px;
background-position: -1951px 0;
}
.iti__flag.iti__gi {
height: 10px;
background-position: -1973px 0;
}
.iti__flag.iti__gl {
height: 14px;
background-position: -1995px 0;
}
.iti__flag.iti__gm {
height: 14px;
background-position: -2017px 0;
}
.iti__flag.iti__gn {
height: 14px;
background-position: -2039px 0;
}
.iti__flag.iti__gp {
height: 14px;
background-position: -2061px 0;
}
.iti__flag.iti__gq {
height: 14px;
background-position: -2083px 0;
}
.iti__flag.iti__gr {
height: 14px;
background-position: -2105px 0;
}
.iti__flag.iti__gs {
height: 10px;
background-position: -2127px 0;
}
.iti__flag.iti__gt {
height: 13px;
background-position: -2149px 0;
}
.iti__flag.iti__gu {
height: 11px;
background-position: -2171px 0;
}
.iti__flag.iti__gw {
height: 10px;
background-position: -2193px 0;
}
.iti__flag.iti__gy {
height: 12px;
background-position: -2215px 0;
}
.iti__flag.iti__hk {
height: 14px;
background-position: -2237px 0;
}
.iti__flag.iti__hm {
height: 10px;
background-position: -2259px 0;
}
.iti__flag.iti__hn {
height: 10px;
background-position: -2281px 0;
}
.iti__flag.iti__hr {
height: 10px;
background-position: -2303px 0;
}
.iti__flag.iti__ht {
height: 12px;
background-position: -2325px 0;
}
.iti__flag.iti__hu {
height: 10px;
background-position: -2347px 0;
}
.iti__flag.iti__ic {
height: 14px;
background-position: -2369px 0;
}
.iti__flag.iti__id {
height: 14px;
background-position: -2391px 0;
}
.iti__flag.iti__ie {
height: 10px;
background-position: -2413px 0;
}
.iti__flag.iti__il {
height: 15px;
background-position: -2435px 0;
}
.iti__flag.iti__im {
height: 10px;
background-position: -2457px 0;
}
.iti__flag.iti__in {
height: 14px;
background-position: -2479px 0;
}
.iti__flag.iti__io {
height: 10px;
background-position: -2501px 0;
}
.iti__flag.iti__iq {
height: 14px;
background-position: -2523px 0;
}
.iti__flag.iti__ir {
height: 12px;
background-position: -2545px 0;
}
.iti__flag.iti__is {
height: 15px;
background-position: -2567px 0;
}
.iti__flag.iti__it {
height: 14px;
background-position: -2589px 0;
}
.iti__flag.iti__je {
height: 12px;
background-position: -2611px 0;
}
.iti__flag.iti__jm {
height: 10px;
background-position: -2633px 0;
}
.iti__flag.iti__jo {
height: 10px;
background-position: -2655px 0;
}
.iti__flag.iti__jp {
height: 14px;
background-position: -2677px 0;
}
.iti__flag.iti__ke {
height: 14px;
background-position: -2699px 0;
}
.iti__flag.iti__kg {
height: 12px;
background-position: -2721px 0;
}
.iti__flag.iti__kh {
height: 13px;
background-position: -2743px 0;
}
.iti__flag.iti__ki {
height: 10px;
background-position: -2765px 0;
}
.iti__flag.iti__km {
height: 12px;
background-position: -2787px 0;
}
.iti__flag.iti__kn {
height: 14px;
background-position: -2809px 0;
}
.iti__flag.iti__kp {
height: 10px;
background-position: -2831px 0;
}
.iti__flag.iti__kr {
height: 14px;
background-position: -2853px 0;
}
.iti__flag.iti__kw {
height: 10px;
background-position: -2875px 0;
}
.iti__flag.iti__ky {
height: 10px;
background-position: -2897px 0;
}
.iti__flag.iti__kz {
height: 10px;
background-position: -2919px 0;
}
.iti__flag.iti__la {
height: 14px;
background-position: -2941px 0;
}
.iti__flag.iti__lb {
height: 14px;
background-position: -2963px 0;
}
.iti__flag.iti__lc {
height: 10px;
background-position: -2985px 0;
}
.iti__flag.iti__li {
height: 12px;
background-position: -3007px 0;
}
.iti__flag.iti__lk {
height: 10px;
background-position: -3029px 0;
}
.iti__flag.iti__lr {
height: 11px;
background-position: -3051px 0;
}
.iti__flag.iti__ls {
height: 14px;
background-position: -3073px 0;
}
.iti__flag.iti__lt {
height: 12px;
background-position: -3095px 0;
}
.iti__flag.iti__lu {
height: 12px;
background-position: -3117px 0;
}
.iti__flag.iti__lv {
height: 10px;
background-position: -3139px 0;
}
.iti__flag.iti__ly {
height: 10px;
background-position: -3161px 0;
}
.iti__flag.iti__ma {
height: 14px;
background-position: -3183px 0;
}
.iti__flag.iti__mc {
height: 15px;
background-position: -3205px 0;
}
.iti__flag.iti__md {
height: 10px;
background-position: -3226px 0;
}
.iti__flag.iti__me {
height: 10px;
background-position: -3248px 0;
}
.iti__flag.iti__mf {
height: 14px;
background-position: -3270px 0;
}
.iti__flag.iti__mg {
height: 14px;
background-position: -3292px 0;
}
.iti__flag.iti__mh {
height: 11px;
background-position: -3314px 0;
}
.iti__flag.iti__mk {
height: 10px;
background-position: -3336px 0;
}
.iti__flag.iti__ml {
height: 14px;
background-position: -3358px 0;
}
.iti__flag.iti__mm {
height: 14px;
background-position: -3380px 0;
}
.iti__flag.iti__mn {
height: 10px;
background-position: -3402px 0;
}
.iti__flag.iti__mo {
height: 14px;
background-position: -3424px 0;
}
.iti__flag.iti__mp {
height: 10px;
background-position: -3446px 0;
}
.iti__flag.iti__mq {
height: 14px;
background-position: -3468px 0;
}
.iti__flag.iti__mr {
height: 14px;
background-position: -3490px 0;
}
.iti__flag.iti__ms {
height: 10px;
background-position: -3512px 0;
}
.iti__flag.iti__mt {
height: 14px;
background-position: -3534px 0;
}
.iti__flag.iti__mu {
height: 14px;
background-position: -3556px 0;
}
.iti__flag.iti__mv {
height: 14px;
background-position: -3578px 0;
}
.iti__flag.iti__mw {
height: 14px;
background-position: -3600px 0;
}
.iti__flag.iti__mx {
height: 12px;
background-position: -3622px 0;
}
.iti__flag.iti__my {
height: 10px;
background-position: -3644px 0;
}
.iti__flag.iti__mz {
height: 14px;
background-position: -3666px 0;
}
.iti__flag.iti__na {
height: 14px;
background-position: -3688px 0;
}
.iti__flag.iti__nc {
height: 10px;
background-position: -3710px 0;
}
.iti__flag.iti__ne {
height: 15px;
background-position: -3732px 0;
}
.iti__flag.iti__nf {
height: 10px;
background-position: -3752px 0;
}
.iti__flag.iti__ng {
height: 10px;
background-position: -3774px 0;
}
.iti__flag.iti__ni {
height: 12px;
background-position: -3796px 0;
}
.iti__flag.iti__nl {
height: 14px;
background-position: -3818px 0;
}
.iti__flag.iti__no {
height: 15px;
background-position: -3840px 0;
}
.iti__flag.iti__np {
height: 15px;
background-position: -3862px 0;
}
.iti__flag.iti__nr {
height: 10px;
background-position: -3877px 0;
}
.iti__flag.iti__nu {
height: 10px;
background-position: -3899px 0;
}
.iti__flag.iti__nz {
height: 10px;
background-position: -3921px 0;
}
.iti__flag.iti__om {
height: 10px;
background-position: -3943px 0;
}
.iti__flag.iti__pa {
height: 14px;
background-position: -3965px 0;
}
.iti__flag.iti__pe {
height: 14px;
background-position: -3987px 0;
}
.iti__flag.iti__pf {
height: 14px;
background-position: -4009px 0;
}
.iti__flag.iti__pg {
height: 15px;
background-position: -4031px 0;
}
.iti__flag.iti__ph {
height: 10px;
background-position: -4053px 0;
}
.iti__flag.iti__pk {
height: 14px;
background-position: -4075px 0;
}
.iti__flag.iti__pl {
height: 13px;
background-position: -4097px 0;
}
.iti__flag.iti__pm {
height: 14px;
background-position: -4119px 0;
}
.iti__flag.iti__pn {
height: 10px;
background-position: -4141px 0;
}
.iti__flag.iti__pr {
height: 14px;
background-position: -4163px 0;
}
.iti__flag.iti__ps {
height: 10px;
background-position: -4185px 0;
}
.iti__flag.iti__pt {
height: 14px;
background-position: -4207px 0;
}
.iti__flag.iti__pw {
height: 13px;
background-position: -4229px 0;
}
.iti__flag.iti__py {
height: 11px;
background-position: -4251px 0;
}
.iti__flag.iti__qa {
height: 8px;
background-position: -4273px 0;
}
.iti__flag.iti__re {
height: 14px;
background-position: -4295px 0;
}
.iti__flag.iti__ro {
height: 14px;
background-position: -4317px 0;
}
.iti__flag.iti__rs {
height: 14px;
background-position: -4339px 0;
}
.iti__flag.iti__ru {
height: 14px;
background-position: -4361px 0;
}
.iti__flag.iti__rw {
height: 14px;
background-position: -4383px 0;
}
.iti__flag.iti__sa {
height: 14px;
background-position: -4405px 0;
}
.iti__flag.iti__sb {
height: 10px;
background-position: -4427px 0;
}
.iti__flag.iti__sc {
height: 10px;
background-position: -4449px 0;
}
.iti__flag.iti__sd {
height: 10px;
background-position: -4471px 0;
}
.iti__flag.iti__se {
height: 13px;
background-position: -4493px 0;
}
.iti__flag.iti__sg {
height: 14px;
background-position: -4515px 0;
}
.iti__flag.iti__sh {
height: 10px;
background-position: -4537px 0;
}
.iti__flag.iti__si {
height: 10px;
background-position: -4559px 0;
}
.iti__flag.iti__sj {
height: 15px;
background-position: -4581px 0;
}
.iti__flag.iti__sk {
height: 14px;
background-position: -4603px 0;
}
.iti__flag.iti__sl {
height: 14px;
background-position: -4625px 0;
}
.iti__flag.iti__sm {
height: 15px;
background-position: -4647px 0;
}
.iti__flag.iti__sn {
height: 14px;
background-position: -4669px 0;
}
.iti__flag.iti__so {
height: 14px;
background-position: -4691px 0;
}
.iti__flag.iti__sr {
height: 14px;
background-position: -4713px 0;
}
.iti__flag.iti__ss {
height: 10px;
background-position: -4735px 0;
}
.iti__flag.iti__st {
height: 10px;
background-position: -4757px 0;
}
.iti__flag.iti__su {
height: 10px;
background-position: -4779px 0;
}
.iti__flag.iti__sv {
height: 12px;
background-position: -4801px 0;
}
.iti__flag.iti__sx {
height: 14px;
background-position: -4823px 0;
}
.iti__flag.iti__sy {
height: 14px;
background-position: -4845px 0;
}
.iti__flag.iti__sz {
height: 14px;
background-position: -4867px 0;
}
.iti__flag.iti__ta {
height: 10px;
background-position: -4889px 0;
}
.iti__flag.iti__tc {
height: 10px;
background-position: -4911px 0;
}
.iti__flag.iti__td {
height: 14px;
background-position: -4933px 0;
}
.iti__flag.iti__tf {
height: 14px;
background-position: -4955px 0;
}
.iti__flag.iti__tg {
height: 13px;
background-position: -4977px 0;
}
.iti__flag.iti__th {
height: 14px;
background-position: -4999px 0;
}
.iti__flag.iti__tj {
height: 10px;
background-position: -5021px 0;
}
.iti__flag.iti__tk {
height: 10px;
background-position: -5043px 0;
}
.iti__flag.iti__tl {
height: 10px;
background-position: -5065px 0;
}
.iti__flag.iti__tm {
height: 14px;
background-position: -5087px 0;
}
.iti__flag.iti__tn {
height: 14px;
background-position: -5109px 0;
}
.iti__flag.iti__to {
height: 10px;
background-position: -5131px 0;
}
.iti__flag.iti__tr {
height: 14px;
background-position: -5153px 0;
}
.iti__flag.iti__tt {
height: 12px;
background-position: -5175px 0;
}
.iti__flag.iti__tv {
height: 10px;
background-position: -5197px 0;
}
.iti__flag.iti__tw {
height: 14px;
background-position: -5219px 0;
}
.iti__flag.iti__tz {
height: 14px;
background-position: -5241px 0;
}
.iti__flag.iti__ua {
height: 14px;
background-position: -5263px 0;
}
.iti__flag.iti__ug {
height: 14px;
background-position: -5285px 0;
}
.iti__flag.iti__uk {
height: 10px;
background-position: -5307px 0;
}
.iti__flag.iti__um {
height: 11px;
background-position: -5329px 0;
}
.iti__flag.iti__un {
height: 14px;
background-position: -5351px 0;
}
.iti__flag.iti__us {
height: 11px;
background-position: -5373px 0;
}
.iti__flag.iti__uy {
height: 14px;
background-position: -5395px 0;
}
.iti__flag.iti__uz {
height: 10px;
background-position: -5417px 0;
}
.iti__flag.iti__va {
height: 15px;
background-position: -5439px 0;
}
.iti__flag.iti__vc {
height: 14px;
background-position: -5456px 0;
}
.iti__flag.iti__ve {
height: 14px;
background-position: -5478px 0;
}
.iti__flag.iti__vg {
height: 10px;
background-position: -5500px 0;
}
.iti__flag.iti__vi {
height: 14px;
background-position: -5522px 0;
}
.iti__flag.iti__vn {
height: 14px;
background-position: -5544px 0;
}
.iti__flag.iti__vu {
height: 12px;
background-position: -5566px 0;
}
.iti__flag.iti__wf {
height: 14px;
background-position: -5588px 0;
}
.iti__flag.iti__ws {
height: 10px;
background-position: -5610px 0;
}
.iti__flag.iti__xk {
height: 15px;
background-position: -5632px 0;
}
.iti__flag.iti__ye {
height: 14px;
background-position: -5654px 0;
}
.iti__flag.iti__yt {
height: 14px;
background-position: -5676px 0;
}
.iti__flag.iti__za {
height: 14px;
background-position: -5698px 0;
}
.iti__flag.iti__zm {
height: 14px;
background-position: -5720px 0;
}
.iti__flag.iti__zw {
height: 10px;
background-position: -5742px 0;
}
.iti__flag {
height: 15px;
box-shadow: 0 0 1px 0 #888;
background-image: url(../img/flags.png?1);
background-repeat: no-repeat;
background-color: #dbdbdb;
background-position: 20px 0;
}
@media (min-resolution: 2x) {
.iti__flag {
background-image: url(../img/flags@2x.png?1);
}
}
.iti__flag.iti__np {
background-color: transparent;
}
.iti {
display: flex;
width: 100%;
}
.iti__flag {
background-image: url("/plugins/intTelInput/img/flags.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.iti__flag {
background-image: url("/plugins/intTelInput/img/flags@2x.png");
}
}
.iti--separate-dial-code .iti__selected-flag {
background: transparent;
}
.iti__selected-dial-code {
color: var(--main-color-black);
}
.inputGroup .iti__flag-container + input {
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}
.inputGroup .iti__country-list {
margin-top: 10px;
padding-top: 10px;
border-radius: 10px;
border-color: var(--main-color-gray-base);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
.inputGroup .iti__country-name {
color: var(--main-color-black);
}
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover {
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}
/**
* Swiper 9.4.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 13, 2023
*/
@font-face {
font-family: swiper-icons;
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
font-weight: 400;
font-style: normal;
}
:root {
--swiper-theme-color:#007aff;
}
.swiper, swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-android .swiper-slide, .swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide, swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
.swiper-autoheight, .swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
.swiper-centered > .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color:#fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color:#000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.swiper-virtual .swiper-slide {
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
:root {
--swiper-navigation-size:44px;
}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
display: none !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: var(--swiper-navigation-sides-offset, 10px);
right: auto;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
content: "prev";
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
content: "next";
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 0.3s opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
display: none !important;
}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet:only-child {
display: none !important;
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
right: var(--swiper-pagination-right, 8px);
left: var(--swiper-pagination-left, auto);
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 0.2s transform, 0.2s top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 0.2s transform, 0.2s left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet, :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 0.2s transform, 0.2s right;
}
.swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: var(--swiper-pagination-progressbar-size, 4px);
left: 0;
top: 0;
}
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-lock {
display: none;
}
.swiper-scrollbar {
border-radius: var(--swiper-scrollbar-border-radius, 10px);
position: relative;
-ms-touch-action: none;
background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
display: none !important;
}
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
position: absolute;
left: var(--swiper-scrollbar-sides-offset, 1%);
bottom: var(--swiper-scrollbar-bottom, 4px);
top: var(--swiper-scrollbar-top, auto);
z-index: 50;
height: var(--swiper-scrollbar-size, 4px);
width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
position: absolute;
left: var(--swiper-scrollbar-left, auto);
right: var(--swiper-scrollbar-right, 4px);
top: var(--swiper-scrollbar-sides-offset, 1%);
z-index: 50;
width: var(--swiper-scrollbar-size, 4px);
height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
border-radius: var(--swiper-scrollbar-border-radius, 10px);
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
touch-action: none;
}
.swiper .swiper-notification, swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube {
overflow: visible;
}
.swiper-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible;
}
.swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
content: "";
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
filter: blur(50px);
}
.swiper-flip {
overflow: visible;
}
.swiper-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
.swiper-cards {
overflow: visible;
}
.swiper-cards .swiper-slide {
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
display: none;
}
.swiper-button-next, .swiper-button-prev {
color: var(--main-color-primary);
cursor: pointer;
font-size: 28px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-button-next .icon, .swiper-button-prev .icon {
display: block;
line-height: 1;
}
.swiper-button-next:hover, .swiper-button-next:focus, .swiper-button-next:active, .swiper-button-prev:hover, .swiper-button-prev:focus, .swiper-button-prev:active {
color: var(--main-color-white);
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
border-radius: 50%;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
display: none;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: transparent;
border: 2px solid var(--main-color-pure-white);
border-radius: 50%;
opacity: 1;
}
@media (min-width: 768px) {
.swiper-pagination-bullet {
width: 16px;
height: 16px;
}
}
.swiper-pagination-bullet-active {
background: var(--main-color-pure-white);
}
.swiper-pagination {
position: static;
transform: none;
}
.swiper-pagination.swiper-pagination-horizontal {
margin-top: 20px;
top: auto;
bottom: 0;
}
.swiper-wrapper {
height: auto;
}
/*
Alerts
Markup:
Text
.alert--danger - Danger
.alert--success - Success
.alert--warning - Warning
.alert--primary - Primary
.alert--secondary - Secondary
Styleguide Components.Alerts
*/
.alert {
border-radius: 10px;
position: relative;
color: var(--main-color-dark-gray);
background: var(--main-color-light-gray);
padding: 10px;
padding-left: 50px;
min-height: 50px;
display: flex;
align-items: center;
}
.alert:before {
content: "\e03a";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
left: 10px;
top: 50%;
font-size: 24px;
width: 40px;
translate: 0 -50%;
text-align: center;
line-height: 1;
display: block;
}
.alert--smallText {
font-size: 11px;
padding-left: 40px;
}
.alert--smallText:before {
font-size: 20px;
width: 30px;
}
.alert--primary {
background: #003399;
color: #ffffff;
}
.alert--secondary {
background: #0088CB;
color: #ffffff;
}
.alert--action {
background: #1A1B19;
color: #ffffff;
}
.alert--danger {
background: #DD3953;
color: #ffffff;
}
.alert--warning {
background: #ED6C43;
color: #1A1B19;
}
.alert--success {
background: #5CBE67;
color: #1A1B19;
}
.buttonRow, .buttonRowTop, .buttonRowBottom {
margin-top: 32px;
margin-bottom: 32px;
margin-left: -5px;
margin-right: -5px;
}
.buttonRow .button, .buttonRowTop .button, .buttonRowBottom .button,
.buttonRow .buttonLink,
.buttonRowTop .buttonLink,
.buttonRowBottom .buttonLink {
margin: 16px 5px;
}
@media (max-width: 481px) {
.buttonRow, .buttonRowTop, .buttonRowBottom {
text-align: center;
}
.buttonRow .pull-left, .buttonRowTop .pull-left, .buttonRowBottom .pull-left,
.buttonRow .pull-right,
.buttonRowTop .pull-right,
.buttonRowBottom .pull-right {
float: none !important;
}
.buttonRow .buttonLink, .buttonRowTop .buttonLink, .buttonRowBottom .buttonLink,
.buttonRow .button,
.buttonRowTop .button,
.buttonRowBottom .button {
min-width: 220px;
}
}
.buttonRowBottom {
margin-bottom: 0;
}
.buttonRowBottom .buttonLink,
.buttonRowBottom .button {
margin-bottom: 0;
}
.buttonRowTop {
margin-top: 0;
}
.buttonRowTop .buttonLink,
.buttonRowTop .button {
margin-top: 0;
}
.linklist .button {
min-width: 0;
}
.linklist.table_area .table_row .table_cell {
padding-top: 16px;
padding-bottom: 16px;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover {
cursor: pointer;
}
.linklist.table_area .table_row.table_body:not(.no-hover):hover .table_cell {
background-color: var(--main-color-light-gray);
}
@media (max-width: 767px) {
.linklist .read_more {
margin-top: 8px;
}
.linklist.table_area .table_row {
padding-bottom: 16px;
padding-top: 16px;
}
.linklist.table_area .table_row:first-child {
padding-top: 0;
}
.linklist.table_area .table_row .table_cell {
padding-top: 0;
padding-bottom: 0;
}
}
/*
Lists
Markup:
.checkList - Checklist
Styleguide Base.Lists
*/
ul,
ol {
margin: 0;
padding: 0;
padding-left: 20px;
}
ul li,
ol li {
margin: 0;
padding: 0;
margin-bottom: 5px;
}
ul.checkList {
list-style: none;
padding-left: 25px;
}
ul.checkList li {
position: relative;
}
ul.checkList li:before {
content: "\e019";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
left: -25px;
font-size: 20px;
margin-top: -4px;
}
#overlay {
display: none;
background-color: rgba(255, 255, 255, 0.7);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 103;
}
/*
Processbar
Markup:
Styleguide Components.Processbar
*/
.processbar {
margin: 20px -10px 20px -10px;
z-index: 1;
position: relative;
}
@media (min-width: 768px) {
.processbar {
margin-bottom: 60px;
}
}
.processbar__icon {
font-size: 30px;
line-height: 1;
margin-bottom: 5px;
}
.processbar__icon .icon {
display: block;
}
.processbar__item {
padding: 0 10px 30px 10px;
width: 33%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 1rem;
color: var(--main-color-middle-gray);
position: relative;
flex-shrink: 0;
}
@media (min-width: 768px) {
.processbar__item {
font-size: var(--main-font-size-small);
}
}
@media (min-width: 1024px) {
.processbar__item {
width: 200px;
}
}
.processbar__item:after {
content: "";
width: 23px;
height: 23px;
border: 4px solid var(--main-color-white);
border-radius: 50%;
position: absolute;
left: 50%;
bottom: 0;
display: block;
background: var(--main-color-middle-gray);
transform: translateX(-50%);
}
.processbar__item.is-done, .processbar__item.is-active {
color: var(--main-color-dark-gray);
font-weight: var(--main-font-weight-bold);
}
.processbar__item.is-done:after, .processbar__item.is-active:after {
background: var(--main-color-primary);
}
.processbar__item:first-child:before, .processbar__item:last-child:before {
content: "";
height: 5px;
width: 50%;
background: var(--main-color-white);
display: block;
position: absolute;
bottom: 9px;
}
.processbar__item:first-child:before {
right: 50%;
}
.processbar__item:last-child:before {
left: 50%;
}
.processbar__items {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.processbar__inactive, .processbar__active {
position: absolute;
width: 100%;
height: 1px;
background: var(--main-color-middle-gray);
bottom: 11px;
left: 0;
z-index: -1;
}
.processbar__active {
background: var(--main-color-primary);
height: 3px;
bottom: 10px;
width: 0;
transition: width 0.6s ease-in-out;
}
#scrolltop_button {
position: fixed;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
justify-content: center;
z-index: 101;
width: 40px;
height: 40px;
font-size: 20px;
background-color: var(--main-color-primary);
color: var(--main-color-primary-contrast);
text-align: center;
cursor: pointer;
right: -45px;
bottom: 0;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
}
#scrolltop_button:hover {
background-color: var(--main-color-primary-darken);
}
#scrolltop_button.sticky {
right: 0;
}
.tabs {
margin-bottom: 32px;
}
.tabs .tabs_item {
float: left;
padding: 8px 32px;
border: 1px solid var(--main-color-gray-base);
}
.tabs .tabs_item:hover {
background-color: var(--main-color-gray-base);
}
.tabs .tabs_item:hover input {
color: var(--main-color-dark-gray);
}
.tabs .tabs_item .form-group {
margin-bottom: 0;
}
.tabs .tabs_item:last-child {
border-left: 0;
}
.tabs:after {
clear: both;
display: block;
content: " ";
}
/*
Iconbar
Markup:
.iconbar--landscape - Orientation landscape
Styleguide Components.Iconbar
*/
.iconbarIcon {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--main-color-text-base);
text-decoration: none;
position: relative;
}
.iconbarIcon:hover, .iconbarIcon:focus, .iconbarIcon:active, .iconbarIcon.is-active {
text-decoration: none;
color: var(--main-color-text-base);
}
.iconbarIcon:hover .iconbarIcon__icon, .iconbarIcon:focus .iconbarIcon__icon, .iconbarIcon:active .iconbarIcon__icon, .iconbarIcon.is-active .iconbarIcon__icon {
color: var(--main-color-primary);
}
.iconbarIcon__icon {
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 24px;
flex-shrink: 0;
}
.iconbarIcon__badge {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-shrink: 0;
margin-left: 10px;
background: #d9dddd;
color: #1A1B19;
}
.iconbarIcon__label {
font-size: 1.6rem;
line-height: 1;
display: none;
}
@media (min-width: 1250px) {
.iconbarIcon__label {
display: block;
}
}
.iconbarIcon__count {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
background: var(--main-color-primary);
color: var(--main-color-primary-contrast);
}
@media (min-width: 1250px) {
.iconbarIcon__count {
right: 10px;
}
}
.iconbarIcon__count.is-action {
display: flex !important;
animation: scaleRequestIconBigger 0.5s forwards ease-in-out;
}
.iconbar {
display: flex;
align-items: flex-end;
}
@media (min-width: 1250px) {
.iconbar {
margin-left: -10px;
margin-right: -10px;
}
.iconbar .iconbarIcon {
padding-left: 10px;
padding-right: 10px;
}
}
.iconbar--landscape .iconbarIcon {
flex-direction: row;
}
@media (min-width: 1250px) {
.iconbar--landscape .iconbarIcon__count {
right: auto;
left: 40px;
margin-left: -10px;
}
}
.iconbar:not(.iconbar--landscape) .iconbarIcon__badge {
order: -1;
margin: 0;
margin-bottom: 5px;
}
.iconbarHover {
z-index: 104;
background: var(--main-color-white);
padding: 20px 30px;
display: none;
flex-direction: column;
width: 250px;
max-width: 100vw;
position: absolute;
top: 100%;
bottom: auto;
right: 50%;
max-height: 70vh;
border-radius: 10px;
transform: translateX(50px);
margin-top: 20px;
filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.1));
}
.iconbarHover:before {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0 20px 20px 20px;
border-color: transparent transparent var(--main-color-white) transparent;
border-style: solid;
position: absolute;
right: 30px;
bottom: 100%;
}
.iconbarHover--bigger {
width: 320px;
transform: translateX(95px);
}
.iconbarHover__close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
}
@media (min-width: 768px) {
.iconbarHover__close {
display: none;
}
}
.iconbarHover__navigation {
margin: 0;
padding: 0;
font-size: 1.5rem;
}
.iconbarHover__navigation li {
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid var(--main-color-gray-base);
}
.iconbarHover__navigation li:last-child {
border-bottom: 0;
}
.iconbarHover__navigation li > span,
.iconbarHover__navigation li > a {
display: flex;
align-items: center;
color: var(--main-color-dark-gray);
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}
.iconbarHover__navigation li > span:hover, .iconbarHover__navigation li > span:focus, .iconbarHover__navigation li > span:active, .iconbarHover__navigation li > span.is-active,
.iconbarHover__navigation li > a:hover,
.iconbarHover__navigation li > a:focus,
.iconbarHover__navigation li > a:active,
.iconbarHover__navigation li > a.is-active {
color: var(--main-color-primary);
text-decoration: none;
}
.iconbarHover__navigation li > span .icon,
.iconbarHover__navigation li > a .icon {
font-size: 1.4em;
margin-right: 10px;
}
.iconbarHover__headline {
font-weight: var(--main-font-weight-bold);
margin-bottom: 10px;
}
.iconbarHover__body {
overflow: hidden;
overflow-y: auto;
padding-right: 10px;
margin-right: -10px;
}
.iconbarHover__footer {
padding-top: 20px;
}
.iconbarItem {
position: relative;
}
.iconbarItem.hoverintent .iconbarHover, .iconbarItem.showIconbarHover .iconbarHover {
display: flex;
}
/*
Iconlist
Markup:
Styleguide Components.Iconlist
*/
.iconList {
display: flex;
flex-wrap: wrap;
margin-right: -5px;
margin-bottom: -5px;
}
.iconList a {
color: var(--main-color-dark-gray);
text-decoration: none;
margin-right: 5px;
margin-bottom: 5px;
}
.iconList a:hover, .iconList a:focus, .iconList a:active {
color: var(--main-color-primary);
text-decoration: none;
}
.iconList .icon {
font-size: 32px;
line-height: 1;
display: block;
}
/*
Iconbox
Markup:
Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €
Styleguide Components.Iconbox
*/
.iconbox {
position: relative;
padding-top: 40px;
}
@media (min-width: 768px) {
.iconbox {
padding-left: 50px;
padding-top: 0;
}
}
.iconbox .icon {
font-size: 28px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
}
@media (min-width: 768px) {
.iconbox .icon {
font-size: 38px;
width: 40px;
height: 40px;
}
}
.iconbox small {
display: block;
color: var(--main-color-dark-gray);
}
/*
Trustbar
JS-Source: ../global/js/trustbar.js
Markup:
Styleguide Components.Trustbar
*/
.trustBar {
display: flex;
position: relative;
width: 100%;
overflow: hidden;
}
@media (min-width: 768px) {
.trustBar {
line-height: 20px;
}
}
@media (max-width: 767px) {
.trustBar {
font-size: 1.3rem;
}
}
.trustBar__close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
z-index: 1;
}
.trustBar__close .icon {
display: block;
margin: 0;
}
.trustBar__close:hover {
color: var(--main-color-white);
}
.trustBar a {
color: var(--main-color-black);
text-decoration: underline;
}
.trustBar a:hover, .trustBar a:focus, .trustBar a:active {
color: var(--main-color-black);
text-decoration: underline;
}
.trustBar .textcontent {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
height: auto;
flex-shrink: 0;
padding-left: 46px;
padding-right: 46px;
text-align: center;
}
.trustBar .textcontent .icon {
font-size: 1.2em;
position: relative;
top: -2px;
display: inline-block;
vertical-align: middle;
}
.trustBar .textcontent .icon:first-child {
margin-right: 7px;
}
.trustBar .textcontent .icon:last-child {
margin-left: 7px;
}
.trustBar .swiper-wrapper {
display: flex;
align-items: center;
}
/*
Trust Infobar
Markup:
Styleguide Components.Trust Infobar
*/
.trustInfobar {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: -15px;
margin-right: -15px;
text-decoration: none;
color: var(--main-color-dark-gray);
}
.trustInfobar:hover, .trustInfobar:focus, .trustInfobar:active {
text-decoration: none;
color: var(--main-color-dark-gray);
}
.trustInfobar > * {
margin-bottom: 15px;
margin-right: 15px;
}
.trustInfobar img {
object-fit: contain;
max-height: 60px;
}
@media (max-width: 1539px) {
.trustInfobar__label {
width: 100%;
margin-right: 0;
}
}
@media (max-width: 767px) {
.trustInfobar {
justify-content: center;
text-align: center;
}
}
/*
Trustlist
Markup:
Styleguide Components.Trustlist
*/
.trustList {
margin: 0 -5px -10px -5px;
padding: 0;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
font-size: 1.2rem;
color: var(--main-color-dark-gray);
}
.trustList li {
list-style-type: none;
margin: 0;
padding: 0 5px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.trustList .icon {
font-size: 20px;
margin-right: 5px;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/*
Rating
Markup:
Styleguide Components.Rating
*/
.rating {
display: flex;
align-items: center;
}
.rating__star {
display: block;
line-height: 1;
}
.rating__star--active .icon:before {
content: "\e071";
}
.rating__star--active-half .icon:before {
content: "\e072";
}
.rating__label {
margin-left: 10px;
}
.rating__stars {
display: flex;
align-items: center;
}
.ratingSelection {
font-size: 1.8em;
margin-right: -5px;
}
.ratingSelection .rating__star {
cursor: pointer;
margin-right: 5px;
}
.ratingSelection .rating__star:hover {
color: var(--main-color-primary);
}
.ratingListItem__stars {
margin-right: 20px;
}
.ratingListItem__header {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.ratingList .ratingListItem:not(:last-child) {
padding-bottom: 20px;
border-bottom: 1px solid var(--main-color-middle-gray);
margin-bottom: 20px;
}
.itemcardRatingLink {
color: var(--main-color-dark-gray);
text-decoration: none;
}
.itemcardRatingLink:hover, .itemcardRatingLink:focus, .itemcardRatingLink:active {
color: var(--main-color-primary);
text-decoration: none;
}
.itemcardRatingViewHeadline {
display: flex;
align-items: center;
}
@media (max-width: 767px) {
.itemcardRatingViewHeadline {
justify-content: space-between;
}
}
.itemcardRatingViewHeadline h2 {
margin-bottom: 0;
}
.itemcardRatingViewHeadline .rating {
margin-left: 20px;
}
/*
Tags
Markup:
Tagname
:hover - Hover
:focus - Focus
:active - Active
.is-loading - Is loading
.is-success - Is success
.is-error - Is error
Styleguide Components.Tags
*/
/*
Tags Group
Markup:
Tagname
Tagname
Tagname
Tagname
Tagname
Tagname
Tagname
Tagname
Styleguide Components.Tags Group
*/
.tag {
background: var(--main-color-white);
display: inline-flex;
align-items: center;
padding: 10px 12px;
font-size: var(--main-font-size-base);
line-height: 18px;
font-weight: var(--main-font-weight-bold);
cursor: pointer;
text-decoration: none;
color: var(--main-color-dark-gray);
border-radius: 4px;
text-align: center;
}
.tag:hover, .tag.is-active {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-primary-contrast);
text-decoration: none;
}
.tag:focus, .tag:active {
background: var(--main-color-primary-dark);
color: var(--main-color-primary-dark-contrast);
text-decoration: none;
}
.tag .icon {
font-size: 1.4em;
margin-left: 5px;
line-height: 1;
display: block;
margin-top: -1px;
}
.tag.is-loading, .tag.is-success, .tag.is-error {
background: var(--main-color-middle-gray) !important;
border-color: var(--main-color-middle-gray) !important;
color: var(--main-color-black) !important;
cursor: not-allowed;
pointer-events: none;
position: relative;
}
.tag.is-loading .icon, .tag.is-success .icon, .tag.is-error .icon {
opacity: 0;
}
.tag.is-loading:after, .tag.is-success:after, .tag.is-error:after {
position: absolute;
left: 50%;
top: 50%;
font-family: "icons", Helvetica, Arial, sans-serif;
translate: -50% -50%;
font-size: 20px;
}
.tag.is-loading {
cursor: wait;
color: var(--main-color-black) !important;
}
.tag.is-loading:after {
content: "\e043";
opacity: 1;
animation: rotation 1s infinite ease-in-out;
}
.tag.is-success {
background: var(--main-color-success) !important;
border-color: var(--main-color-success) !important;
color: var(--main-color-black) !important;
}
.tag.is-success:after {
content: "\e019";
animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.tag.is-error {
background: var(--main-color-danger) !important;
border-color: var(--main-color-danger) !important;
color: var(--main-color-white) !important;
}
.tag.is-error:after {
content: "\e01c";
animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.tags {
display: flex;
flex-wrap: wrap;
margin-bottom: -10px;
margin-right: -10px;
}
.tags .tag {
margin-right: 10px;
margin-bottom: 10px;
}
@media (max-width: 1023px) {
.tags {
overflow-y: hidden;
scroll-snap-type: x mandatory;
flex-wrap: nowrap;
max-width: 100vw;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
}
.tags > * {
scroll-snap-align: center;
flex-shrink: 0;
}
}
/*
Link with Icon
Markup:
Text
Styleguide Navigations.Subnav
*/
.subnav {
font-size: var(--main-font-size-base);
}
.subnav ul {
margin: 0;
padding: 5px 0;
}
.subnav ul:last-child {
padding-bottom: 0;
}
.subnav li {
margin: 0;
padding: 5px 0;
list-style-type: none;
}
.subnav li:last-child {
padding-bottom: 0;
}
.subnav li:not(.is-active) > ul {
display: none;
}
.subnav a {
color: var(--main-color-dark-gray);
font-weight: var(--main-font-weight);
text-decoration: none;
position: relative;
}
.subnav a:hover {
color: var(--main-color-primary);
text-decoration: none;
}
.subnav > ul {
padding: 0;
}
.subnav > ul > li {
padding-bottom: 10px;
}
.subnav > ul > li > a {
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-big);
}
.subnav > ul ul {
margin-left: 20px;
padding-top: 10px;
}
.subnav > ul ul a:before {
content: "\e007";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: 100%;
top: 50%;
transform: translate(-20px, -50%);
width: 20px;
opacity: 0;
transition: 0.2s ease-in-out;
}
.subnav > ul ul a:hover:before, .subnav > ul ul a.is-active:before {
opacity: 1;
transform: translate(0, -50%);
}
/*
Mainnav
Markup:
Styleguide Navigations.Mainnav
*/
.mainnav {
display: flex;
align-items: center;
padding-right: 48px;
}
.mainnav__seperator {
width: 1px;
height: 27px;
background: var(--main-color-gray-base);
display: block;
margin-left: 36px;
margin-right: 36px;
}
@media (min-width: 1250px) {
.mainnav__seperator {
margin-left: 48px;
margin-right: 48px;
}
}
.mainnav ul {
margin: 0;
padding: 0;
}
.mainnav li {
margin: 0;
list-style-type: none;
}
.mainnav a {
color: var(--main-color-text-base);
text-decoration: none;
}
.mainnav li:hover > a, .mainnav li:focus > a, .mainnav li:active > a {
color: var(--main-color-primary);
}
.mainnav li.is-active > a, .mainnav li.is-active-tree > a {
color: var(--main-color-primary);
}
.mainnav li.is-active > a:after, .mainnav li.is-active-tree > a:after {
height: 2px;
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
}
.mainnav li.is-active:hover > a, .mainnav li.is-active:focus > a, .mainnav li.is-active:active > a, .mainnav li.is-active-tree:hover > a, .mainnav li.is-active-tree:focus > a, .mainnav li.is-active-tree:active > a {
color: var(--main-color-primary);
}
.mainnav li.is-active:hover > a:after, .mainnav li.is-active:focus > a:after, .mainnav li.is-active:active > a:after, .mainnav li.is-active-tree:hover > a:after, .mainnav li.is-active-tree:focus > a:after, .mainnav li.is-active-tree:active > a:after {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
}
.mainnav > ul {
display: flex;
margin-left: -18px;
margin-right: -18px;
font-size: var(--main-font-size-base);
}
@media (min-width: 1250px) {
.mainnav > ul {
margin-left: -24px;
margin-right: -24px;
}
}
.mainnav > ul > li {
padding-left: 18px;
padding-right: 18px;
}
@media (min-width: 1250px) {
.mainnav > ul > li {
padding-left: 24px;
padding-right: 24px;
}
}
.mainnav > ul > li > a {
font-weight: var(--main-font-weight-bold);
position: relative;
display: block;
padding-block: 17px;
color: var(--main-color-black);
}
.mainnav > ul > li > a:after {
content: "";
width: 100%;
height: 0;
background: transparent;
display: block;
position: absolute;
left: 0;
bottom: 0;
transition: height 200ms ease-in-out;
}
.mainnav > ul.nav--content > li > a {
font-weight: var(--main-font-weight-bold);
}
.mainnav > ul > li.hoverintent > a:after {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
height: 8px;
}
.mainnav > ul > li.hoverintent .megaMenu,
.mainnav > ul > li.hoverintent > ul {
display: flex;
align-items: flex-start;
flex-wrap: nowrap;
}
.mainnav > ul > li.hoverintent .megaMenu > ul,
.mainnav > ul > li.hoverintent > ul > ul {
flex-grow: 1;
}
.mainnav.headerMainNavigation--content .container {
padding: 0;
margin: 0;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container {
position: relative;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation {
display: block;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul {
display: flex;
flex-direction: column;
width: 33.3333%;
border-right: 1px solid var(--main-color-primary-pastelblue);
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul > li {
width: 100%;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul > li > ul {
display: none;
position: absolute;
top: 0;
left: calc(33.33333% + 40px);
width: 33.33333%;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul > li.hoverintent > ul {
display: block;
}
@media (min-width: 1540px) {
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container {
position: relative;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation {
display: block;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul {
display: flex;
flex-direction: column;
width: 25%;
border-right: 1px solid var(--main-color-primary-pastelblue);
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul > li {
width: 100%;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul > li > ul {
display: none;
position: absolute;
top: 0;
left: calc(25% + 40px);
width: 25%;
}
.mainnav.headerMainNavigation--content > ul > li.hoverintent .container .megaMenu__navigation > ul > li.hoverintent > ul {
display: block;
}
}
.mainnav.headerMainNavigation--content > ul > li ul > li.is-active > a.is-active:after, .mainnav.headerMainNavigation--content > ul > li ul > li.is-active a.is-active-tree:after, .mainnav.headerMainNavigation--content > ul > li ul li.is-active-tree > a.is-active:after, .mainnav.headerMainNavigation--content > ul > li ul li.is-active-tree a.is-active-tree:after {
height: auto;
background: transparent;
}
.subnav > ul > li {
padding-bottom: 10px;
}
.subnav > ul > li > a {
font-size: 1.6rem;
padding-left: 30px;
display: block;
width: auto;
padding-bottom: 12px;
}
.subnav > ul > li > a:before {
font-family: "icons", Helvetica, Arial, sans-serif;
content: "\e007";
display: inline-block;
position: absolute;
font-weight: 300;
left: 0;
font-size: 1.9rem;
top: -1px;
}
.subnav > ul > li ul {
margin-left: 30px;
}
.subnav > ul > li ul li {
padding: 12px 0;
}
.subnav > ul > li ul li > a {
font-size: 1.6rem;
}
.subnav > ul > li ul li > a:hover {
color: #003399;
}
.subnav > ul > li ul li > a:hover:before {
display: none;
}
.subnav > ul > li ul li.is-active > a, .subnav > ul > li ul li .is-active-tree > a {
color: #003399;
font-weight: var(--main-font-weight-bold);
}
.subnav > ul > li ul li.is-active > a:before, .subnav > ul > li ul li .is-active-tree > a:before {
display: none;
}
.subnav > ul > li.is-active > a:before {
content: "\e008";
}
.subnav > ul ul {
padding-top: 0;
padding-bottom: 10px;
}
.subnav > ul ul.level_3 > li:first-child {
padding-top: 21px;
}
.subnav > ul > li:not(:has(ul.level_2)) > a:before {
display: none;
}
.subnav > div {
padding-left: 30px;
}
.subnav li {
margin: 0;
padding: 5px 0;
list-style-type: none;
}
.subnav li:last-child {
padding-bottom: 12px;
}
.subnav li:not(.is-active) > ul {
display: none;
}
.buttonRow, .buttonRowBottom, .buttonRowTop {
margin-top: 16px;
margin-bottom: 16px;
margin-left: -5px;
margin-right: -5px;
}
.buttonRow .button, .buttonRowBottom .button, .buttonRowTop .button,
.buttonRow .buttonLink,
.buttonRowBottom .buttonLink,
.buttonRowTop .buttonLink {
margin: 16px 5px;
}
@media (max-width: 481px) {
.buttonRow, .buttonRowBottom, .buttonRowTop {
text-align: center;
}
.buttonRow .pull-left, .buttonRowBottom .pull-left, .buttonRowTop .pull-left,
.buttonRow .pull-right,
.buttonRowBottom .pull-right,
.buttonRowTop .pull-right {
float: none !important;
}
.buttonRow .buttonLink, .buttonRowBottom .buttonLink, .buttonRowTop .buttonLink,
.buttonRow .button,
.buttonRowBottom .button,
.buttonRowTop .button {
min-width: 220px;
}
}
.buttonRowBottom {
margin-bottom: 0;
}
.buttonRowBottom .buttonLink,
.buttonRowBottom .button {
margin-bottom: 0;
}
.buttonRowTop {
margin-top: 0;
}
.buttonRowTop .buttonLink,
.buttonRowTop .button {
margin-top: 0;
}
.buttonRowBottom--f-r {
display: flex;
justify-content: flex-end;
}
.tooltip {
--tooltip-zindex: 107;
--tooltip-max-width: 300px;
--tooltip-padding-x: 8px;
--tooltip-padding-y: 4px;
--tooltip-margin: ;
--tooltip-font-size: var(--main-font-size-small);
--tooltip-color: var(--main-color-white);
--tooltip-bg: var(--main-color-black);
--tooltip-border-radius: 10px;
--tooltip-opacity: 1;
--tooltip-arrow-width: 0.8rem;
--tooltip-arrow-height: 0.4rem;
z-index: var(--tooltip-zindex);
display: block;
margin: var(--tooltip-margin);
font-family: var(--main-font-family);
font-style: normal;
font-weight: var(--main-font-weight);
line-height: var(--main-line-height);
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
font-size: var(--tooltip-font-size);
word-wrap: break-word;
opacity: 0;
}
.tooltip.show {
opacity: var(--tooltip-opacity);
}
.tooltip .tooltip-arrow {
display: block;
width: var(--tooltip-arrow-width);
height: var(--tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
.tooltip img {
background: var(--main-color-pure-white);
}
.tooltip-top .tooltip-arrow, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
bottom: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-top .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
top: -1px;
border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
border-top-color: var(--tooltip-bg);
left: 2px;
}
/* rtl:begin:ignore */
.tooltip-end .tooltip-arrow, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
left: calc(-1 * var(--tooltip-arrow-height));
width: var(--tooltip-arrow-height);
height: var(--tooltip-arrow-width);
}
.tooltip-end .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
right: -1px;
border-width: calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0;
border-right-color: var(--tooltip-bg);
}
/* rtl:end:ignore */
.tooltip-bottom .tooltip-arrow, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
top: calc(-1 * var(--tooltip-arrow-height));
}
.tooltip-bottom .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
bottom: -1px;
border-width: 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
border-bottom-color: var(--tooltip-bg);
}
/* rtl:begin:ignore */
.tooltip-start .tooltip-arrow, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
right: calc(-1 * var(--tooltip-arrow-height));
width: var(--tooltip-arrow-height);
height: var(--tooltip-arrow-width);
}
.tooltip-start .tooltip-arrow::before, .tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
left: -1px;
border-width: calc(var(--tooltip-arrow-width) * 0.5) 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height);
border-left-color: var(--tooltip-bg);
}
/* rtl:end:ignore */
.tooltip-inner {
max-width: var(--tooltip-max-width);
padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
color: var(--tooltip-color);
background-color: var(--tooltip-bg);
border-radius: var(--tooltip-border-radius);
padding-top: 30px;
}
.tooltip-close {
position: absolute;
top: 5px;
right: 5px;
padding: 10px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--main-color-white);
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-close .icon {
margin-top: 2px;
}
.tooltip-close:hover {
background: var(--main-color-secondary);
cursor: pointer;
color: var(--main-color-white);
}
.dcCookieBar {
position: fixed;
left: 0;
bottom: 0;
line-height: 1.3;
width: 100%;
min-width: 320px;
box-shadow: 0 0 10px black;
z-index: 6000;
padding: 15px;
padding-left: 90px;
background-color: var(--main-color-white);
font-size: var(--main-font-size-base);
color: var(--main-color-black);
box-sizing: border-box;
}
.dcCookieBar a {
color: var(--main-color-dark-gray);
text-decoration: underline;
}
.dcCookieBar a:hover {
color: var(--main-color-primary);
}
.dcCookieBar__button {
line-height: 1.6;
padding: 5px 20px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
text-align: center;
text-decoration: none;
min-width: 40px;
width: auto;
font-size: var(--main-font-size-base);
font-weight: var(--main-font-weight);
color: var(--main-color-black);
border: 0px solid var(--main-color-gray-base);
background-color: var(--main-color-white);
border-radius: 10px;
}
.dcCookieBar__button:hover {
background-color: var(--main-color-primary);
border-color: var(--main-color-primary);
color: var(--main-color-primary-contrast);
}
.dcCookieBar__button:active, .dcCookieBar__button:focus {
background-color: var(--main-color-primary-dark);
border-color: var(--main-color-primary-dark);
color: var(--main-color-primary-dark-contrast);
}
@media (max-width: 1024px) {
.dcCookieBar__button {
font-size: var(--main-font-size-base);
}
}
.dcCookieBar__buttonaction {
border-color: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
}
.dcCookieBar__buttonaction:hover {
background: var(--main-color-primary-dark);
border-color: var(--main-color-primary-dark);
color: var(--main-color-primary-dark-contrast);
}
.dcCookieBar__buttonaction:active, .dcCookieBar__buttonaction:focus {
background: var(--main-color-primary);
border-color: var(--main-color-primary-darken);
color: var(--main-color-primary-darken-contrast);
}
.dcCookieBar__buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
gap: 7.5px;
}
.dcCookieBar__buttons .dcCookieBar__button {
flex-grow: 1;
box-sizing: border-box;
width: 100%;
flex-basis: 100% !important;
}
.dcCookieBar__main {
text-align: center;
}
.dcCookieBar__text {
padding-left: 7.5px;
padding-right: 7.5px;
padding-bottom: 15px;
text-align: left;
}
.dcCookieBar__links {
text-align: right;
font-size: var(--main-font-size-small);
}
.dcCookieBar__links a {
display: inline-block;
vertical-align: middle;
margin-left: 7.5px;
margin-right: 7.5px;
}
.dcCookieBar__center {
text-align: center;
margin-top: 15px;
}
.dcCookieBar__center a {
display: inline-block;
vertical-align: middle;
margin-left: 7.5px;
margin-right: 7.5px;
}
.dcCookieModal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-color: rgba(204, 204, 204, 0.7);
color: var(--main-color-black);
display: none;
padding-left: 15px;
padding-right: 15px;
z-index: 6001;
font-size: var(--main-font-size-base);
}
@media (min-width: 441px) {
.dcCookieModal.dcCookieTopPadding {
padding-top: 150px;
}
}
.dcCookieModal__dialog {
background-color: #ffffff;
padding: 30px;
width: 600px;
max-width: 100%;
margin: 15px auto;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
@media (max-width: 767px) {
.dcCookieModal__dialog {
padding: 15px;
}
}
.dcCookieModal a {
color: var(--main-color-dark-gray);
text-decoration: underline;
cursor: pointer;
}
.dcCookieModal a:hover {
color: var(--main-color-primary);
}
.dcCookieModal .dcCookieBar__button {
color: var(--main-color-black);
background-color: var(--main-color-white);
text-decoration: none;
cursor: pointer;
}
.dcCookieModal .dcCookieBar__button:hover {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
border-color: var(--main-color-primary);
color: var(--main-color-primary-contrast);
}
.dcCookieModal .dcCookieBar__button:active, .dcCookieModal .dcCookieBar__button:focus {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
border-color: var(--main-color-primary-dark);
color: var(--main-color-primary-dark-contrast);
}
.dcCookieModal .dcCookieBar__buttonaction {
border-color: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
cursor: pointer;
}
.dcCookieModal .dcCookieBar__buttonaction:hover {
background: var(--main-color-primary-dark);
border-color: var(--main-color-primary-dark);
color: var(--main-color-primary-dark-contrast);
}
.dcCookieModal .dcCookieBar__buttonaction:active, .dcCookieModal .dcCookieBar__buttonaction:focus {
background-color: var(--main-color-primary-darken);
border-color: var(--main-color-primary-darken);
color: var(--main-color-primary-darken-contrast);
}
.dcCookieModal .dcCookieBar__links {
margin-top: 15px;
text-align: left;
}
.dcCookieModal .dcCookieBar__links a {
margin-left: 0;
margin-right: 15px;
}
.dcCookieModal.open {
display: block;
overflow-x: hidden;
overflow-y: auto;
}
.dcCookieModalBody__headline {
font-size: 20px;
margin-bottom: 15px;
}
.dcCookieModalBody__info {
margin-bottom: 15px;
}
.dcCookieBarSwitch {
width: 50px;
position: relative;
height: 26px;
display: inline-block;
cursor: pointer;
border-radius: 13px;
margin: 0;
background-color: var(--main-color-light-gray);
}
.dcCookieBarSwitch span {
font-style: normal;
position: absolute;
left: 3px;
width: 20px;
height: 20px;
background-color: var(--main-color-black);
top: 50%;
margin-top: -10px;
display: block;
pointer-events: none;
margin-bottom: 0;
border-radius: 50%;
transition: 0.1s ease-in-out;
}
.dcCookieBarSwitch input {
position: absolute;
opacity: 0;
cursor: pointer;
margin: 0;
width: 20px;
height: 20px;
left: 0;
top: 0;
}
.dcCookieBarSwitch input:checked + span {
left: 100%;
margin-left: -23px;
background-color: var(--main-color-primary);
}
.dcCookieBarSwitch__label {
color: var(--main-color-black);
margin-bottom: 0;
line-height: 26px;
margin-right: 10px;
}
.dcCookieBarBox {
padding: 15px;
border: 2px solid var(--main-color-light-gray);
margin-top: 15px;
}
.dcCookieBarBox__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.dcCookieBarBox__title {
margin-right: 30px;
font-size: 16px;
}
.dcCookieBarBox__info {
margin-bottom: 15px;
}
.dcCookieBarMoreBox {
margin-top: 15px;
}
.dcCookieBarMoreBox.open {
display: block;
}
.dcCookieBarTable {
margin-top: 15px;
}
.dcCookieBarTable__row {
padding: 8px 0;
border-bottom: 1px solid var(--main-color-light-gray);
}
.dcCookieBarTable__row:last-child {
border-bottom: 0;
}
.dcCookieBarTable__cell > a {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dcCookieBarTable__cell--description {
font-weight: bold;
font-size: 1.2em;
}
.dcCookieBarTable__cell--switch {
display: flex;
align-items: center;
}
@media (min-width: 768px) {
.dcCookieBarTable__row {
display: flex;
align-items: center;
}
.dcCookieBarTable__cell {
flex-grow: 1;
text-align: left;
width: calc(100% - 200px);
}
.dcCookieBarTable__cell:first-child {
padding-right: 10px;
flex-shrink: 0;
flex-grow: 0;
width: 200px;
}
.dcCookieBarTable__cell:first-child.dcCookieBarTable__cell--description {
width: 50%;
}
.dcCookieBarTable__cell--switch {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.dcCookieBarTable__cell:first-child {
margin-bottom: 4px;
}
.dcCookieBarTable__cell:first-child:after {
content: ":";
}
}
.dcCookieBarRecurringTable__row {
padding: 8px 0;
border-bottom: 1px solid var(--main-color-light-gray);
display: flex;
align-items: center;
justify-content: space-between;
}
.dcCookieBarRecurringTable__row:last-child {
border-bottom: 0;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label {
position: relative;
padding-left: 20px;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent var(--main-color-black);
position: absolute;
left: 0;
top: 50%;
margin-top: -6px;
transition: 0.2s ease-in-out;
}
.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label.active:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
border-color: transparent transparent transparent var(--main-color-primary);
}
.dcCookieBarRecurringTable__row--child {
padding-left: 20px;
}
.dcCookieBarRecurringTable__label {
font-weight: bold;
}
.dcCookieBarHistoryTable {
font-size: 1.1rem;
}
.dcCookieBarHistoryTable__row {
padding: 8px 0;
border-bottom: 1px solid var(--main-color-light-gray);
display: flex;
align-items: center;
justify-content: space-between;
}
.dcCookieBarHistoryTable__row:last-child {
border-bottom: 0;
}
.dcCookieBarHistoryTable__label {
flex-grow: 1;
margin-right: 8px;
}
.dcCookieBarHistoryTable__badge {
width: 12px;
height: 12px;
background-color: red;
border-radius: 50%;
flex-shrink: 0;
margin-right: 8px;
margin-top: 1px;
}
.dcCookieBarHistoryTable__badge.active {
background-color: green;
}
.dcCookieBarHistoryTable__active {
margin-left: 8px;
flex-shrink: 0;
width: 60px;
text-align: right;
}
.dcCookieBarRecurring {
z-index: 6001;
position: fixed;
left: 20px;
bottom: 20px;
box-sizing: border-box;
}
.dcCookieBarRecurringBox {
position: fixed;
z-index: 6001;
left: 20px;
bottom: 80px;
background-color: var(--main-color-white);
box-shadow: 0 0 20px black;
width: 400px;
font-size: var(--main-font-size-base);
}
.dcCookieBarRecurringBox__close {
height: 14px;
width: 14px;
cursor: pointer;
}
.dcCookieBarRecurringBox__close svg path {
fill: #000000;
}
.dcCookieBarRecurringBox__close:hover svg path {
fill: var(--main-color-primary);
}
.dcCookieBarRecurringBox__head {
padding: 15px;
border-bottom: 1px solid var(--main-color-light-gray);
display: flex;
align-items: center;
justify-content: space-between;
}
.dcCookieBarRecurringBox__title {
margin-right: 15px;
}
.dcCookieBarRecurringBox__footer .dcCookieBar__button {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
@media (max-width: 440px) {
.dcCookieBarRecurringBox {
max-width: 100%;
left: 0;
bottom: 0;
max-height: 100vh;
overflow: hidden;
overflow-y: auto;
}
}
.dcCookieBarRecurringButton {
width: 46px;
height: 46px;
line-height: 46px;
text-align: center;
background-color: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
font-size: 20px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px black;
}
.dcCookieBarRecurringButton:hover, .dcCookieBarRecurringButton:focus {
background-color: var(--main-color-primary-dark);
}
.dcCookieBarRecurringButton svg path {
fill: #000000;
}
.dcCookieBarRecurringButton .closelabel {
display: none;
position: relative;
top: 3px;
}
.dcCookieBarRecurringButton .openlabel {
position: relative;
top: 6px;
}
.dcCookieBarRecurringButton.open .openlabel {
display: none;
}
.dcCookieBarRecurringButton.open .closelabel {
display: block;
}
.dcCookieBarTab {
text-align: center;
padding: 10px;
font-weight: bold;
cursor: pointer;
}
.dcCookieBarTab:not(.active) {
background-color: var(--main-color-light-gray);
}
.dcCookieBarTab:hover {
background-color: var(--main-color-white);
}
.dcCookieBarTabContent {
padding: 15px;
display: none;
height: 240px;
max-height: 50vh;
overflow: hidden;
overflow-y: auto;
}
.dcCookieBarTabContent.active {
display: block;
}
.dcCookieBarTabs__header {
display: flex;
}
.dcCookieBarTabs__header .dcCookieBarTab {
flex-grow: 1;
width: 50%;
}
.dcCookieExternal {
display: flex;
align-items: center;
justify-content: center;
}
.dcCookieExternal__info {
padding: 30px;
border: 1px solid var(--main-color-gray-base);
background-color: #ffffff;
}
.dcCookieExternal__headline {
padding-bottom: 20px;
}
.dcCookieExternal__button {
line-height: 1.6;
padding: 5px 20px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
text-align: center;
text-decoration: none;
min-width: 40px;
width: auto;
font-size: var(--main-font-size-base);
font-weight: var(--main-font-weight);
color: var(--main-color-black);
border: 1px solid var(--main-color-gray-base);
background-color: var(--main-color-white);
transition: 0.2s ease-in-out;
}
.dcCookieExternal__button:hover {
background-color: var(--main-color-primary);
border-color: var(--main-color-primary);
color: var(--main-color-primary-contrast);
}
.dcCookieExternal__button:active, .dcCookieExternal__button:focus {
background-color: var(--main-color-primary-dark);
border-color: var(--main-color-primary-dark);
color: var(--main-color-primary-dark-contrast);
}
.hidden {
display: none !important;
}
/*
Filegallery
Markup:
Styleguide Siteparts.Filegallery
*/
.filegallery {
margin-bottom: -16px;
}
.filegalleryFile {
margin-bottom: 16px;
color: var(--main-color-dark-gray);
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
text-decoration: none;
}
.filegalleryFile .icon {
margin-right: 5px;
font-size: 2em;
line-height: 1;
margin-top: -2px;
}
.filegalleryFile span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.filegalleryFile:hover {
color: var(--main-color-primary);
text-decoration: none;
}
/*
Scrollbar
Markup:
.scrollbar--arrows-outside - Arrows Outside
Styleguide Siteparts.Scrollbar
*/
.scrollbar.swiper .swiper-slide {
text-align: center;
}
.scrollbar.swiper .swiper-button-prev,
.scrollbar.swiper .swiper-button-next {
width: 40px;
height: 40px;
font-size: 36px;
color: var(--main-color-white);
scale: 1;
transition: 0.2s ease-in-out;
}
.scrollbar.swiper .swiper-button-prev:hover, .scrollbar.swiper .swiper-button-prev:focus, .scrollbar.swiper .swiper-button-prev:active,
.scrollbar.swiper .swiper-button-next:hover,
.scrollbar.swiper .swiper-button-next:focus,
.scrollbar.swiper .swiper-button-next:active {
scale: 1.4;
}
.scrollbar.swiper .swiper-button-prev {
left: 10px;
}
.scrollbar.swiper .swiper-button-next {
right: 10px;
}
@media (min-width: 1564px) {
.scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
.scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
color: var(--main-color-dark-gray);
}
.scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
left: -50px;
}
.scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
right: -50px;
}
}
.container .scrollbar {
margin-left: -20px;
margin-right: -20px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev,
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
color: var(--main-color-white);
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
left: 10px;
}
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
right: 10px;
}
.newsletterFooterForm .newsletterForm {
display: flex;
width: 100%;
}
.newsletterFooterForm .newsletterForm .infieldInputGroup {
margin: 0;
flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup {
margin: 0;
flex-grow: 1;
}
.newsletterFooterForm .newsletterForm .inputGroup input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.newsletterFooterForm .newsletterForm button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background: var(--main-color-black);
color: var(--main-color-white);
border-color: var(--main-color-black);
}
.newsletterBanner .newsletterForm {
display: flex;
width: 100%;
}
.newsletterBanner .newsletterForm .infieldInputGroup {
margin: 0;
flex-grow: 1;
}
.newsletterBanner .newsletterForm label {
display: none;
}
.newsletterBanner .newsletterForm .inputGroup input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.newsletterBanner .newsletterForm button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background: var(--main-color-black);
color: var(--main-color-white);
border-color: var(--main-color-black);
}
.banner .textcontent + .newsletterBanner {
margin-top: 20px;
}
.languageSwitchButton {
display: flex;
align-items: center;
cursor: pointer;
}
.languageSwitchList {
padding: 0;
list-style: none;
display: flex;
margin: 0;
flex-wrap: wrap;
}
.languageSwitchList li {
width: 100%;
padding: 0;
display: flex;
text-align: center;
}
.languageSwitchList li:not(:last-child) {
border-bottom: 1px solid var(--main-color-middle-gray);
}
.languageSwitchList li.is-active a {
font-weight: var(--main-font-weight-bold);
text-decoration: underline;
}
.languageSwitchList li img {
width: 40px;
flex-shrink: 0;
}
.languageSwitchList li a {
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: var(--main-color-dark-gray);
padding: 15px 0;
width: 100%;
}
.languageSwitchList li a:hover {
color: var(--main-color-primary);
}
.languageSwitchHover > ul {
padding-left: 0;
}
.languageSwitchHover a {
color: var(--main-color-black);
text-decoration: none;
}
.languageSwitchHover a:hover {
color: var(--main-color-primary);
}
.languageSwitchHover li:not(:last-child) {
margin-bottom: 16px;
}
.languageSwitchHover li.is-active a {
font-weight: var(--main-font-weight-bold);
text-decoration: underline;
color: var(--main-color-primary);
}
.collectionArea.is-loading, .collectionArea.is-error {
cursor: not-allowed;
pointer-events: none;
opacity: 0.5;
}
.collectionArea.is-loading {
cursor: wait;
}
.collectionArea.is-error {
background: red;
}
.news {
display: flex;
flex-direction: column;
color: var(--main-color-dark-gray);
text-decoration: none;
width: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
.news {
box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}
}
.news:hover, .news:focus, .news:active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
.news:hover .news__previewimage img, .news:focus .news__previewimage img, .news:active .news__previewimage img {
scale: 1.05;
}
.news:hover .news__link, .news:focus .news__link, .news:active .news__link {
color: var(--main-link-color-hover);
}
.news__date {
font-size: var(--main-font-size-small);
color: var(--main-color-dark-gray);
}
.news__previewimage {
display: flex;
max-width: 100%;
width: 100%;
background-color: var(--main-color-white);
overflow: hidden;
}
.news__previewimage img {
object-fit: cover;
aspect-ratio: 4/3;
transition: 0.2s ease-in-out;
}
.news__headline {
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-big);
margin-bottom: 10px;
}
@media (min-width: 1024px) {
.news__headline {
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 52px;
}
}
.news__summary {
flex-grow: 1;
}
.news__summary > div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.news__link {
font-size: 24px;
text-align: right;
padding-top: 10px;
}
@media (min-width: 1024px) {
.news__link {
padding-top: 20px;
}
}
.news__content {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px 20px 10px 20px;
}
@media (min-width: 1024px) {
.news__content {
padding: 30px 30px 20px 30px;
}
}
.event {
color: var(--main-color-dark-gray);
display: block;
text-decoration: none;
border-bottom: 1px solid var(--main-color-gray-base);
padding-bottom: 30px;
margin-bottom: 30px;
max-width: 900px;
}
.event:hover, .event:focus, .event:active {
text-decoration: none;
color: var(--main-color-dark-gray);
}
.event:hover .event__headline,
.event:hover .event__link, .event:focus .event__headline,
.event:focus .event__link, .event:active .event__headline,
.event:active .event__link {
color: var(--main-color-primary);
}
.event__headline {
font-size: var(--main-font-size-big);
font-weight: var(--main-font-weight-bold);
margin-bottom: 10px;
}
.event__date {
margin-bottom: 10px;
font-size: var(--main-font-size-small);
color: var(--main-color-dark-gray);
}
.event__summary {
margin-bottom: 10px;
}
.event__attr {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
@media (min-width: 768px) {
.event__attr {
gap: 20px;
}
}
.event__link {
text-align: right;
font-size: 24px;
}
a.references {
color: var(--main-color-dark-gray);
text-decoration: none;
display: flex;
flex-direction: column;
}
a.references:hover, a.references:focus, a.references:active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
a.references:hover .contentImage img, a.references:focus .contentImage img, a.references:active .contentImage img {
scale: 1.05;
}
.references {
display: flex;
}
.referencesPreHeadline {
font-weight: var(--main-font-weight-semi-bold);
}
.referencesMainHeadline {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
.references.isProject .contentBox {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
}
.references.isProject .contentBox .textcontent {
color: var(--main-color-pure-white);
}
.references--badge {
position: absolute;
right: 10px;
top: 8px;
z-index: 2;
}
.referencesDescriptionText {
hyphens: auto;
}
.referencesHeadline {
font-size: 3.1rem;
}
@media (max-width: 1249px) {
.referencesHeadline {
font-size: 2.6rem;
}
}
.references .contentBox {
flex-grow: 1;
}
.references .contentBox .contentText {
flex-grow: 1;
}
.references .contentBox .contentText .textcontent {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
}
.references .contentBox .contentText .textcontent > h4 {
flex-grow: 1;
}
.referenceDetailScrollbar {
overflow: hidden;
}
@media (max-width: 1023px) {
.referenceSellerContent {
padding-left: 0;
}
}
.referenceDetailParallax--wrapper {
position: relative;
}
.referenceDetailParallax--wrapper .referenceDetailParallax--text {
position: sticky;
top: 250px;
max-width: 1400px;
margin-inline: auto;
}
.referenceDetailParallax--wrapper .referenceDetailParallax--file > div > * {
min-height: 400px;
object-fit: cover;
}
.referencesList:not(.isFullView) > div > div {
display: flex;
}
@media (max-width: 480px) {
.referencesList:not(.isFullView) > div > div > div > div {
width: 100%;
}
}
.referencesList:not(.isFullView) > div > div .references {
flex-grow: 1;
}
.referencesList:not(.isFullView) .contentImage.js-appendGalleryButton {
position: relative;
}
.referencesList:not(.isFullView) .contentImage.js-appendGalleryButton:hover:after {
background: rgba(13, 110, 253, 0.6);
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.referencesList:not(.isFullView) .contentImage.js-appendGalleryButton:hover:before {
content: "\e067";
font-family: "icons", Helvetica, Arial, sans-serif;
color: var(--main-color-pure-white);
font-size: 8rem;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
z-index: 1;
}
.referencesList.preview > div > div {
width: 100%;
}
.imageGalleryReference .swiper-thumbs {
display: none;
}
.imageGalleryReference .swiper-button-next, .imageGalleryReference .swiper-button-prev {
display: flex !important;
}
.referencesListGallery {
cursor: pointer;
position: relative;
width: 100%;
overflow: hidden;
}
.referencesListGallery .listGallerySwiper {
width: 100%;
height: 100%;
}
.referencesListGallery .listGallerySwiper .swiper-slide {
width: 100% !important;
height: auto;
}
.referencesListGallery .listGallerySwiper .swiper-slide img {
width: 100%;
height: auto;
display: block;
}
.referencesListGallery .swiper-button-prev,
.referencesListGallery .swiper-button-next {
color: var(--main-color-pure-white) !important;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
opacity: 0;
transition: all 0.2s ease;
}
.referencesListGallery .swiper-button-prev:hover,
.referencesListGallery .swiper-button-next:hover {
scale: 1.1;
}
.referencesListGallery .swiper-button-prev::after,
.referencesListGallery .swiper-button-next::after {
font-size: 12px;
}
@media (max-width: 1023px) {
.referencesListGallery .swiper-button-prev,
.referencesListGallery .swiper-button-next {
display: none !important;
}
}
.referencesListGallery:hover .swiper-button-prev,
.referencesListGallery:hover .swiper-button-next {
opacity: 1;
}
.referencesListGallery .swiper-pagination {
display: none;
bottom: 8px;
position: absolute;
}
@media (max-width: 1023px) {
.referencesListGallery .swiper-pagination {
display: block;
}
}
.referencesListGallery .swiper-pagination .swiper-pagination-bullet {
background: var(--main-color-pure-white);
opacity: 0.5;
width: 8px;
height: 8px;
}
.referencesListGallery .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.hideFilter .multiFilterGrid, .hideFilter .pagination {
display: none !important;
}
.testimonialsList {
padding-top: 48px;
padding-bottom: 64px;
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-pure-white);
position: relative;
}
.testimonialsList .swiper-slide {
display: flex;
justify-content: center;
}
@media (max-width: 767px) {
.testimonialsList {
padding-top: 32px;
padding-bottom: 32px;
}
}
.testimonials__content {
color: var(--main-color-white);
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 10px;
}
@media (min-width: 1024px) {
.testimonials__content {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
justify-content: center;
}
}
.testimonials__quote {
font-size: 9rem;
}
.testimonials__text {
line-height: 1.5;
font-size: var(--main-font-size-big);
font-weight: var(--main-font-weight-semi-bold);
position: relative;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
@media (min-width: 481px) {
.testimonials__text {
text-align: center;
}
}
@media (min-width: 768px) {
.testimonials__text {
font-size: 2rem;
}
}
.testimonials__text .testimonials__text--quote {
position: absolute;
font-size: 5.8rem;
line-height: 20px;
font-weight: var(--main-font-weight-bold);
}
.testimonials__text .testimonials__text--quoteleft {
top: -10px;
left: 0;
}
@media (min-width: 1024px) {
.testimonials__text .testimonials__text--quoteleft {
top: 0;
left: -20px;
}
}
.testimonials__text .testimonials__text--quoteright {
bottom: 0;
right: 0;
}
@media (min-width: 1024px) {
.testimonials__text .testimonials__text--quoteright {
right: -20px;
}
}
.testimonials__author {
display: flex;
align-items: center;
gap: 10px;
}
.testimonials__author--img {
width: 50px;
height: 50px;
}
.testimonials__author--img > img {
border-radius: 50% !important;
aspect-ratio: 1;
object-fit: cover;
width: 50px;
height: 50px;
}
.testimonials__author--text {
font-size: var(--main-font-size-small);
text-align: left;
}
@media (max-width: 1023px) {
.testimonials__author {
order: 1;
}
}
@media (min-width: 1024px) {
.testimonials__author {
flex-direction: column;
gap: 24px;
padding-right: 60px;
}
.testimonials__author--img {
width: 175px;
height: 175px;
}
.testimonials__author--img > img {
width: 175px;
height: 175px;
}
.testimonials__author--text {
font-size: var(--main-font-size-base);
text-align: center;
font-weight: var(--main-font-weight-semi-bold);
}
}
.testimonials__position {
margin-bottom: 16px;
}
.testimonials_googleBadge {
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px;
z-index: 1;
}
@media (min-width: 1250px) {
.testimonials_googleBadge {
position: absolute;
top: 0;
right: 0;
max-width: 150px;
padding: 20px;
}
}
@media (min-width: 1250px) {
.testimonials_googleBadge {
max-width: 285px;
}
}
.testimonials__previewWrapper {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-inline: 16px;
text-align: left;
}
.testimonials__previewWrapper .testimonials__text--quote {
position: absolute;
font-size: 5.8rem;
line-height: 20px;
font-weight: var(--main-font-weight-bold);
}
.testimonials__previewWrapper .testimonials__text--quoteleft {
top: -5px;
left: 10px;
}
.testimonials__previewWrapper .testimonials__text--quoteright {
bottom: -5px;
right: 10px;
}
.testimonials__previewWrapper .testimonials__text {
text-align: left;
}
.testimonials__previewWrapper .testimonials__author--text {
font-size: 1.4rem;
font-weight: var(--main-font-weight);
text-align: left;
margin-bottom: 20px;
}
@media (min-width: 1024px) {
.testimonials__previewWrapper {
padding-inline: 48px;
}
}
.testimonialsHeadline {
text-align: center;
}
a.jobs {
color: var(--main-color-dark-gray);
text-decoration: none;
display: flex;
flex-direction: column;
}
a.jobs:hover, a.jobs:focus, a.jobs:active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
a.jobs:hover .contentImage, a.jobs:hover .contentImage--wide img, a.jobs:focus .contentImage, a.jobs:focus .contentImage--wide img, a.jobs:active .contentImage, a.jobs:active .contentImage--wide img {
scale: 1.05;
}
.jobsDetails {
color: var(--main-color-dark-gray);
}
.jobsDetails h1, .jobsDetails .h1, .jobsDetails .categoryInfo .shopSiteHeadline, .categoryInfo .jobsDetails .shopSiteHeadline, .jobsDetails .orderboxSummary__headline, .jobsDetails h2, .jobsDetails .h2, .jobsDetails h3, .jobsDetails .h3, .jobsDetails .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .jobsDetails .basePrice, .jobsDetails h4, .jobsDetails .h4, .jobsDetails .textcontent {
color: var(--main-color-dark-gray);
}
.jobsHeadline {
margin-bottom: 4.8rem;
}
.jobsHeadlineText, .jobsHeadline {
max-width: 750px;
}
.jobsTextbox_1, .jobsTextbox_2 {
color: var(--main-color-dark-gray);
}
@media (min-width: 768px) {
.jobsTextbox_1 ul, .jobsTextbox_2 ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 40px;
}
}
@media (min-width: 1250px) {
.jobsTextbox_1 ul, .jobsTextbox_2 ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 190px;
}
}
.jobsWorkbox .jobsWorkboxWrapper {
display: grid;
gap: 40px;
}
.jobsWorkbox .jobsWorkboxWrapper .checkList {
list-style-type: none;
}
.jobsWorkbox .jobsWorkboxWrapper .checkList li {
display: flex;
gap: 12px;
}
.jobsWorkbox .jobsWorkboxWrapper .checkList li:before {
display: none;
}
.jobsWorkbox .jobsWorkboxWrapper .checkList i {
color: #003399;
font-size: 1.6rem;
}
@media (min-width: 600px) {
.jobsWorkbox .jobsWorkboxWrapper > ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 40px;
}
}
@media (min-width: 1024px) {
.jobsWorkbox .jobsWorkboxWrapper {
grid-template-columns: repeat(2, 1fr);
gap: 64px;
align-items: end;
}
}
.jobsUsps {
display: grid;
gap: 16px;
}
.jobsUsps > .textcontent {
display: flex;
align-items: stretch;
}
.jobsUsps > .textcontent .contentText {
align-items: center;
}
.jobsUsps > .textcontent .h3, .jobsUsps > .textcontent .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .jobsUsps > .textcontent .basePrice {
margin-bottom: 0;
color: var(--main-color-dark-gray);
}
@media (min-width: 500px) {
.jobsUsps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.jobsUsps {
grid-template-columns: repeat(3, 1fr);
}
}
a.news {
color: var(--main-color-dark-gray);
text-decoration: none;
display: flex;
flex-direction: column;
}
a.news:hover, a.news:focus, a.news:active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
a.news:hover .contentImage, a.news:hover .contentImage--wide img, a.news:focus .contentImage, a.news:focus .contentImage--wide img, a.news:active .contentImage, a.news:active .contentImage--wide img {
scale: 1.05;
}
.newsDetails {
color: var(--main-color-dark-gray);
}
.newsDetails h1, .newsDetails .h1, .newsDetails .categoryInfo .shopSiteHeadline, .categoryInfo .newsDetails .shopSiteHeadline, .newsDetails .orderboxSummary__headline, .newsDetails h2, .newsDetails .h2, .newsDetails h3, .newsDetails .h3, .newsDetails .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .newsDetails .basePrice, .newsDetails h4, .newsDetails .h4, .newsDetails .textcontent {
color: var(--main-color-dark-gray);
}
.newsHeadline {
margin-bottom: 4.8rem;
}
.newsHeadlineText, .newsHeadline {
max-width: 750px;
}
.newsTextbox_1, .newsTextbox_2 {
color: var(--main-color-dark-gray);
}
@media (min-width: 768px) {
.newsTextbox_1 ul, .newsTextbox_2 ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 40px;
}
}
@media (min-width: 1250px) {
.newsTextbox_1 ul, .newsTextbox_2 ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 190px;
}
}
.newsList {
position: relative;
}
.newsList .swiper-slide {
height: auto;
display: flex;
}
.newsList .swiper-slide .contentText .textcontent {
display: flex;
flex-direction: column;
align-items: start;
}
.newsList .swiper-slide .contentText .textcontent > div:nth-child(3) {
flex-grow: 1;
}
.newsList .swiper-button-prev, .newsList .swiper-button-next {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
border-radius: 50%;
width: 48px;
height: 48px;
}
.newsList .swiper-button-prev > i, .newsList .swiper-button-next > i {
color: var(--main-color-white);
}
@media (min-width: 1539px) {
.newsList .swiper-button-prev {
left: -60px;
}
.newsList .swiper-button-next {
right: -60px;
}
}
.newsList.preview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0 16px;
}
@media (min-width: 1024px) {
.newsList.preview {
grid-template-columns: repeat(3, 1fr);
}
}
.newsSwiper:not(:has(.swiper-wrapper > div:nth-child(4))) .swiper-wrapper {
display: flex;
}
@media (min-width: 768px) {
.newsSwiper:not(:has(.swiper-wrapper > div:nth-child(4))) .swiper-wrapper {
justify-content: center;
}
}
.newsSwiper .swiper-button-prev.swiper-button-disabled, .newsSwiper .swiper-button-next.swiper-button-disabled {
display: none;
}
.newsItem {
display: flex;
}
.newsItem > a {
position: relative;
}
.newsItem .contentText > .textcontent {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.newsItem .contentText > .textcontent > div:last-of-type {
flex-grow: 1;
}
.newsItem.isEvent .contentBox {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
}
.newsItem.isEvent .contentBox .textcontent {
color: var(--main-color-pure-white);
}
.newsItem.isEvent .contentBox .textcontent .button {
background: linear-gradient(90deg, #ff8a00, #da1b60);
color: var(--main-color-white);
border-color: transparent;
border-width: 0;
line-height: 22px;
transition: none;
}
.newsItem.isEvent .contentBox .textcontent .button:hover, .newsItem.isEvent .contentBox .textcontent .button:focus {
background: var(--main-color-white);
border-color: transparent;
color: var(--main-color-primary);
}
.newsItem.isEvent .contentBox .textcontent .button:active {
background: var(--main-color-white);
border-color: transparent;
color: var(--main-color-primary);
}
@media (min-width: 768px) {
.newsItem.isEvent .contentBox .textcontent .button {
line-height: 24px;
}
}
.newsItem:not(.isEvent) .news--badge {
display: none;
}
.team {
display: flex;
}
.team .contentBox {
position: relative;
}
.team .contentBox .contentImage {
aspect-ratio: 4/3;
background: transparent;
pointer-events: none;
z-index: 2;
}
.team .contentBox .contentImage img {
transition: 400ms ease;
aspect-ratio: 1;
opacity: 1;
}
.team .contentBox .contentImage--wide {
aspect-ratio: 16/10;
background: transparent;
pointer-events: none;
z-index: 2;
object-fit: contain;
}
.team .contentBox .contentImage--wide img {
transition: 400ms ease;
aspect-ratio: 1;
opacity: 1;
}
.team .contentBox .contentHover--buttons {
display: flex;
gap: 16px;
}
.team .contentBox .contentHover--quote {
font-size: 1.2rem;
}
.team .contentBox .contentHoverOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--main-color-pure-white);
padding: 32px;
border-radius: 10px;
opacity: 0;
transition: ease 250ms;
}
.team .contentBox .contentHoverOverlay .contentHover--top {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
margin-bottom: 16px;
}
.team .contentBox .contentHoverOverlay .contentHover--image {
opacity: 0;
}
.team .contentBox .contentHoverOverlay .contentHover--image img {
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
transition: opacity 150ms;
transition-delay: 320ms;
}
.team .contentBox .contentHoverOverlay .contentHover--name {
margin-bottom: 6px;
}
.team .contentBox .contentHoverOverlay a:not(.button) {
color: var(--main-color-primary);
text-decoration: underline;
}
.team .contentBox .contentHoverOverlay .contact-items {
background: #F8F8F8;
padding: 16px;
width: 100%;
}
.team .contentBox .contentHoverOverlay .contact-value {
font-size: var(--main-font-size-small);
}
.team .contentBox .contentHoverOverlay .contact-value a.linkWithIcon {
text-decoration: none;
}
.team .contentBox:hover .contentImage img, .team .contentBox:hover .contentImage--wide img, .team .contentBox:focus .contentImage img, .team .contentBox:focus .contentImage--wide img {
scale: 0.27;
translate: -27% -27%;
border-radius: 50%;
}
@media (min-width: 500px) {
.team .contentBox:hover .contentImage img, .team .contentBox:hover .contentImage--wide img, .team .contentBox:focus .contentImage img, .team .contentBox:focus .contentImage--wide img {
scale: 0.2;
translate: -34% -34%;
}
}
@media (min-width: 1024px) {
.team .contentBox:hover .contentImage img, .team .contentBox:hover .contentImage--wide img, .team .contentBox:focus .contentImage img, .team .contentBox:focus .contentImage--wide img {
scale: 0.26;
translate: -28% -28%;
}
}
.team .contentBox:hover .contentHoverOverlay, .team .contentBox:focus .contentHoverOverlay {
opacity: 1;
}
.media {
display: flex;
flex-direction: column;
color: var(--main-color-dark-gray);
text-decoration: none;
width: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
.media {
box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}
}
.media:hover, .media:focus, .media:active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
.media:hover .media__previewimage img, .media:focus .media__previewimage img, .media:active .media__previewimage img {
scale: 1.05;
}
.media:hover .media__link, .media:focus .media__link, .media:active .media__link {
color: var(--main-link-color-hover);
}
.media__previewimage {
display: flex;
max-width: 100%;
width: 100%;
background-color: var(--main-color-light-gray);
overflow: hidden;
position: relative;
}
.media__previewimage img {
object-fit: cover;
aspect-ratio: 4/3;
transition: 0.2s ease-in-out;
}
.media__previewimage:after {
content: "\e059";
font-family: "icons", Helvetica, Arial, sans-serif;
font-size: 80px;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
color: var(--main-color-white);
}
.media__headline {
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-big);
margin-bottom: 10px;
}
@media (min-width: 1024px) {
.media__headline {
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 52px;
}
}
.media__summary {
flex-grow: 1;
}
.media__summary > div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.media__link {
font-size: 24px;
text-align: right;
padding-top: 10px;
}
@media (min-width: 1024px) {
.media__link {
padding-top: 20px;
}
}
.media__content {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px 20px 10px 20px;
}
@media (min-width: 1024px) {
.media__content {
padding: 30px 30px 20px 30px;
}
}
/*
Inventory
Markup:
.available - Available
.low_availability - Low availability
.not_available - Not Available
.not_available_orderable - Not Available Orderable
.not_available_orderable_number - Not Available Orderable Number
Styleguide Shop.Inventory
*/
.inventory {
position: relative;
padding-left: 26px;
display: inline-flex;
align-items: center;
}
.inventory:before {
content: "";
display: block;
position: absolute;
left: 0px;
top: 50%;
width: 16px;
height: 16px;
translate: 0 -50%;
background: var(--main-color-success);
border-radius: 50%;
}
.inventory.low_availability:before {
background: var(--main-color-success);
}
.inventory.not_available:before {
background: var(--main-color-danger);
}
.inventory:not(.not_available):after {
content: "\e019";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
left: 3px;
top: 50%;
translate: 0 -50%;
font-size: 10px;
color: var(--main-color-pure-white);
}
.inventory p {
margin: 0;
text-wrap: balance;
}
.inventoryShippingInfo {
border-left: 1px solid var(--main-color-black);
padding-left: 5px;
margin-left: 5px;
}
.inventoryWrapper {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
line-height: 1;
}
@media (max-width: 767px) {
.inventoryWrapper {
font-size: var(--main-font-size-xsmall);
}
}
.categoryBanner > div {
display: flex;
flex-direction: row;
}
.categoryBanner .contentImage {
width: fit-content;
}
.categoryBanner .contentImage > div {
width: fit-content;
}
.categoryBanner .contentText {
width: 655px;
}
.categoryBanner .contentText .textcontent {
font-size: 1.4rem;
}
@media (min-width: 1250px) {
.categoryBanner .contentImage {
width: 50%;
display: flex;
align-items: center;
}
.categoryBanner .contentText {
width: 50%;
}
}
@media (min-width: 1024px) {
.categoryBanner {
margin-bottom: 30px;
}
.categoryBanner > div {
display: flex;
flex-direction: column;
align-content: center;
gap: 35px;
}
}
@media (min-width: 768px) {
.categoryBanner > div {
gap: 25px;
margin-bottom: 16px;
}
}
@media (min-width: 481px) {
.categoryBanner > div {
gap: 25px;
margin-bottom: 16px;
}
}
/*
State
Markup:
.state--open - Open
.state--done - Done
Styleguide Shop.State
*/
.state {
position: relative;
padding-left: 15px;
display: inline-flex;
align-items: center;
}
.state:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
width: 10px;
height: 10px;
translate: 0 -50%;
background: var(--main-color-warning);
border-radius: 50%;
}
.state p {
margin: 0;
}
.state--done:before {
background: var(--main-color-success);
}
/*
Categorylist
Markup:
Styleguide Shop.Categorylist
*/
.categoryItem {
width: 100%;
display: flex;
flex-direction: column;
color: var(--main-color-white);
border-radius: 10px;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
}
.categoryItem:hover, .categoryItem:focus, .categoryItem:active {
color: var(--main-color-white);
}
.categoryItem:hover .categoryItem__image img, .categoryItem:focus .categoryItem__image img, .categoryItem:active .categoryItem__image img {
scale: 1.05;
}
.categoryItem__image {
background: var(--main-color-light-gray);
}
.categoryItem__image img {
transition: 0.2s ease-in-out;
aspect-ratio: 1.48;
border-radius: 10px;
object-fit: cover;
}
.categoryItem__content {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
z-index: 1;
padding: 15px;
text-align: center;
transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
.categoryItem__content {
padding: 30px;
}
}
.categoryItem__headline {
line-height: 1.1;
hyphens: auto;
word-break: break-word;
font-weight: var(--main-font-weight-bold);
color: var(--main-color-pure-white);
font-size: 1.6rem;
}
@media (min-width: 768px) {
.categoryItem__headline {
font-size: 2rem;
}
}
@media (min-width: 1024px) {
.categoryItem__headline {
font-size: 2rem;
}
}
@media (min-width: 1250px) {
.categoryItem__headline {
font-size: 2.6rem;
}
}
.categoryItem__description {
margin-top: 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.categoryList.categoryList--marken .categoryItem:after,
.categoryList.categoryList--marken .categoryItem__content {
display: none;
}
/*
Categorylist Itempreview
Markup:
Styleguide Shop.Categorylist Itempreview
*/
.categoryItempreview {
width: 100%;
display: flex;
flex-direction: column;
padding: 10px;
text-decoration: none;
color: var(--main-color-dark-gray);
transition: 0.2s ease-in-out;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
.categoryItempreview {
padding: 20px;
}
}
.categoryItempreview:hover, .categoryItempreview:focus, .categoryItempreview:active {
text-decoration: none;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
color: var(--main-color-dark-gray);
}
.categoryItempreview:hover .categoryItempreview__headline,
.categoryItempreview:hover .categoryItempreview__count, .categoryItempreview:focus .categoryItempreview__headline,
.categoryItempreview:focus .categoryItempreview__count, .categoryItempreview:active .categoryItempreview__headline,
.categoryItempreview:active .categoryItempreview__count {
color: var(--main-color-primary);
}
.categoryItempreview__headline {
text-decoration: none;
font-weight: var(--main-font-weight-bold);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 0.2s ease-in-out;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 10px;
font-size: 1.4rem;
}
@media (min-width: 768px) {
.categoryItempreview__headline {
margin-bottom: 20px;
font-size: var(--main-font-size-base);
}
}
.categoryItempreview__count {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: var(--main-font-weight-bold);
line-height: 1;
font-size: 1.6rem;
}
@media (min-width: 768px) {
.categoryItempreview__count {
font-size: 2.4rem;
}
}
.categoryItempreview__itemImage {
overflow: hidden;
}
.categoryItempreview__item img {
scale: 1;
transition: 0.2s ease-in-out;
aspect-ratio: 1/1;
}
.categoryItempreview__item:first-child {
grid-column: 1/span 3;
}
.categoryItempreview__items {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
flex-grow: 1;
}
@media (min-width: 768px) {
.categoryItempreview__items {
grid-gap: 10px;
}
}
/*
Amount Lines
Markup:
Styleguide Shop.Amount Lines
*/
.amountLine {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 8px;
padding-bottom: 8px;
}
.amountLine__label {
margin-right: 5px;
}
.amountLine__label .tag {
margin-left: 10px;
}
.amountLine--big {
font-weight: var(--main-font-weight-bold);
}
.amountLine--big .amountLine__label {
font-weight: var(--main-font-weight);
}
.order_sum,
.vat_table {
border: 0;
}
.order_sum td,
.vat_table td {
padding: 10px 0;
border: 0;
}
.order_sum tr:first-child td,
.order_sum tr:first-child th,
.vat_table tr:first-child td,
.vat_table tr:first-child th {
border-top: 0;
}
.order_sum .order_price_total_label,
.order_sum .order_price_total,
.vat_table .order_price_total_label,
.vat_table .order_price_total {
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-big);
}
/*
orderboxSummary
Markup:
Summe Bestellung
999,00 €
Styleguide Shop.orderboxSummary
*/
@media (min-width: 768px) {
.orderboxSummary {
padding: 20px 30px;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
background: var(--main-color-white);
}
}
@media (min-width: 1024px) {
.orderboxSummary {
padding: 30px 40px;
}
}
.orderboxSummary__headline {
margin: 0;
}
.orderboxSummary__main {
padding-top: 20px;
padding-bottom: 20px;
}
@media (max-width: 767px) {
.orderboxSummary__main {
padding-top: 0;
}
}
.orderboxSummary__main a {
text-decoration: none;
font-size: var(--main-font-size-small);
}
.orderboxSummary__footer {
padding-top: 20px;
border-top: 1px solid var(--main-color-middle-gray);
}
@media (max-width: 767px) {
.orderboxSummary__head {
display: none;
}
}
.orderboxSummary__head + .orderboxSummary__footer {
border-top: 0;
}
.orderboxSummary__buttons .button {
width: 100%;
margin-top: 20px;
}
.orderboxSummary__trust {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--main-color-light-gray);
}
@media (min-width: 768px) and (max-width: 1023px) {
.orderboxSummary__trust .trustList {
flex-direction: column;
}
}
.orderboxSummary a:not(.button):not(.tag) {
color: var(--main-color-dark-gray);
}
.orderboxSummary a:not(.button):not(.tag):hover, .orderboxSummary a:not(.button):not(.tag):focus, .orderboxSummary a:not(.button):not(.tag):active, .orderboxSummary a:not(.button):not(.tag).is-active {
color: var(--main-color-primary);
}
@media (min-width: 1250px) {
.orderBoxContainer {
margin-left: 50px;
}
}
/*
List Type Switch
Markup:
Styleguide Shop.List Type Switch
*/
.listTypeSwitch {
display: flex;
gap: 10px;
}
.listTypeSwitch button {
font-size: 24px;
border-color: transparent;
background: transparent;
padding: 0;
}
.listTypeSwitch button:hover, .listTypeSwitch button:focus, .listTypeSwitch button:active {
border-color: transparent;
background: transparent;
color: var(--main-color-primary);
}
/*
Variantselection
Markup:
Styleguide Shop.Variantselection
*/
.variantSelection {
display: flex;
flex-wrap: wrap;
grid-gap: 5px;
}
.variantSelection__item {
border: 2px solid var(--main-color-gray-base);
border-radius: 10px;
padding: 5px;
display: flex;
}
.variantSelection__item:hover {
border-color: var(--main-color-primary);
}
.variantSelection__item.is-active {
border-color: var(--main-color-black);
}
.variantSelection__item img {
aspect-ratio: 1;
object-fit: contain;
}
.variantSelection {
position: relative;
}
.variantSelection .swiper-button-prev,
.variantSelection .swiper-button-next {
top: 50%;
margin-top: -10px;
color: var(--main-color-dark-gray);
width: 20px;
height: 20px;
font-size: 20px;
}
.variantSelection .swiper-button-prev:not(.swiper-button-disabled),
.variantSelection .swiper-button-next:not(.swiper-button-disabled) {
display: flex;
align-items: center;
justify-content: center;
}
.variantSelection .swiper-button-prev:not(.swiper-button-disabled):hover,
.variantSelection .swiper-button-next:not(.swiper-button-disabled):hover {
color: var(--main-color-dark-gray);
}
.variantSelection .swiper-button-prev.swiper-button-disabled,
.variantSelection .swiper-button-next.swiper-button-disabled {
display: none;
}
.variantSelection .swiper-button-prev {
left: -20px;
}
@media (min-width: 1024px) {
.variantSelection .swiper-button-prev {
left: -30px;
}
}
.variantSelection .swiper-button-next {
right: -20px;
}
@media (min-width: 1024px) {
.variantSelection .swiper-button-next {
right: -30px;
}
}
.variantSelection .swiper-slide {
width: 70px;
}
.variantSelection .swiper {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.variantSelection .swiper:not(.swiper-initialized) .swiper-wrapper {
grid-gap: 5px;
}
/*
Shop Attributes Icons
Markup:
Styleguide Shop.Attributes Icons
*/
.attributesIcons {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 8px;
}
.attributesIcons__img {
max-width: 40px;
}
@media (min-width: 768px) {
.attributesIcons__img {
max-width: 70px;
}
}
/*
Accountbox
Markup:
Name
E-Mail
Name
E-Mail
.accountBox--new - New
Styleguide Shop.Accountbox
*/
.gp.accountBox h3, .gp.accountBox .h3, .gp.accountBox .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .gp.accountBox .basePrice, .accountBox__headline {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
min-height: 30px;
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-base);
margin: 0;
}
.gp.accountBox h3 .icon, .gp.accountBox .h3 .icon, .gp.accountBox .itemcardBuybox .prices .basePrice .icon, .itemcardBuybox .prices .gp.accountBox .basePrice .icon, .accountBox__headline .icon {
font-size: 1.4em;
margin-right: 5px;
font-weight: normal;
width: 30px;
text-align: center;
}
.accountBox {
border: 1px solid var(--main-color-gray-base);
padding: 10px 20px 20px 20px;
border-radius: 10px;
width: 100%;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.accountBox {
min-height: 120px;
}
}
.accountBox__actions {
margin-left: 20px;
margin-right: -10px;
}
.accountBox__actions a, .accountBox__actions button {
padding: 0;
margin: 0;
border: 0;
background: transparent;
color: var(--main-color-primary);
width: 30px;
height: 30px;
display: flex;
align-content: center;
justify-content: center;
text-decoration: none;
font-size: 20px;
flex-wrap: wrap;
line-height: 1;
}
.accountBox__actions a:hover, .accountBox__actions button:hover {
color: var(--main-color-action);
}
.accountBox__actions a:not(:last-child), .accountBox__actions button:not(:last-child) {
margin-bottom: 10px;
}
.accountBox__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.accountBox__headerButton {
font-size: var(--main-font-size-small);
}
.accountBox__content {
flex-grow: 1;
}
.accountBox__content small {
color: var(--main-color-dark-gray);
}
.accountBox__content .marginBottom:last-child {
margin-bottom: 0;
}
.accountBox__footer {
padding-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: var(--main-color-dark-gray);
}
.accountBox__footer a,
.accountBox__footer button {
padding: 0;
border: 0;
background: transparent;
font-size: var(--main-font-size-small);
color: var(--main-color-dark-gray);
}
.accountBox__footer a:hover,
.accountBox__footer button:hover {
color: var(--main-color-dark-gray);
}
.accountBox--new {
text-align: center;
height: 100%;
color: var(--main-color-dark-gray);
font-size: var(--main-font-size-base);
cursor: pointer;
}
.accountBox--new:hover {
color: var(--main-color-black);
}
.accountBox--new .accountBox__content {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
}
.accountBox--new .accountBox__content .icon {
font-size: 40px;
}
a.accountBox {
color: var(--main-color-dark-gray);
text-decoration: none;
}
a.accountBox:hover {
text-decoration: none;
border-color: var(--main-color-primary);
}
.gp.accountBox:hover {
border-color: var(--main-color-primary);
}
.gp.accountBox > .link {
text-decoration: none;
color: var(--main-color-dark-gray);
}
.gp.accountBox > .link:hover {
text-decoration: none;
}
.gp.accountBox h3, .gp.accountBox .h3, .gp.accountBox .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .gp.accountBox .basePrice {
margin-bottom: 10px;
}
.accountBoxForm {
width: 100%;
display: flex;
}
/*
Account Infobox
Markup:
Styleguide Shop.Account Infobox
*/
.accountInfoBox {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 10px;
grid-template-columns: auto 1fr;
grid-template-areas: "accountInfoBoxIcon accountInfoBoxName" "accountInfoBoxIcon accountInfoBoxCompany" "accountInfoBoxIcon accountInfoBoxLinks";
}
.accountInfoBox__icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #d9dddd;
color: #1A1B19;
font-size: 2.6rem;
grid-area: accountInfoBoxIcon;
}
.accountInfoBox__name {
grid-area: accountInfoBoxName;
font-weight: var(--main-font-weight-bold);
font-size: 1.8rem;
}
.accountInfoBox__company {
grid-area: accountInfoBoxCompany;
}
.accountInfoBox__links {
grid-area: accountInfoBoxLinks;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.itemSharing__item {
margin-top: 10px;
}
.itemSharing__btn {
position: relative;
padding-left: 24px;
display: inline-block;
cursor: pointer;
color: var(--main-color-dark-gray);
}
.itemSharing__btn .icon {
text-align: center;
font-size: 1.2em;
color: var(--main-color-primary);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.itemSharing__btn:hover {
color: var(--main-link-color-hover);
}
.loginBox {
position: relative;
overflow: hidden;
max-width: 1920px;
margin-inline: auto;
}
.loginBox > .container {
padding-inline: 36px;
}
.loginBox--login {
background: var(--main-color-pure-white);
padding: 24px;
border-radius: 10px;
transform: translateX(109%);
transition: transform 1.3s ease;
}
.loginBox--login .inputGroup input {
background: var(--main-color-gray-base);
}
.loginBox--login .inputGroup.is-filled input, .loginBox--login .inputGroup.is-focus input {
background: var(--main-color-gray-base);
}
.loginBox--spacerMobile {
margin-top: 220px;
}
.loginBox--bgForm {
position: absolute;
right: 0;
translate: 65% 0;
z-index: 1;
width: 100%;
transform: translateX(109%);
transition: transform 1s ease;
}
.loginBox--bgForm img {
max-height: 430px;
}
.loginBox--bgImage {
position: absolute;
right: 0;
z-index: 2;
transform: translateX(109%);
transition: transform 1s ease-out;
}
.loginBox--bgImage img {
max-height: 250px;
}
.loginBox--bgWrapper {
display: flex;
align-items: center;
position: absolute;
top: 100px;
width: 100%;
height: 100%;
pointer-events: none;
}
.loginBox.slideInViewport .loginBox--login, .loginBox.slideInViewport .loginBox--bgForm, .loginBox.slideInViewport .loginBox--bgImage {
transform: translateX(0);
}
.loginBox.slideInViewport .loginBox--bgForm {
transition-delay: 0.1s;
}
.loginBox.slideInViewport .loginBox--bgImage {
transition-delay: 0.3s;
}
@media (min-width: 500px) {
.loginBox--bgImage img {
max-height: 300px;
}
.loginBox--bgForm {
translate: 60% 0;
}
.loginBox--bgForm img {
max-height: 500px;
}
.loginBox--bgForm, .loginBox--bgImage, .loginBox--login {
transform: translateX(104%);
}
}
@media (min-width: 768px) {
.loginBox--bgImage img {
max-height: 350px;
}
.loginBox--bgForm {
translate: 50% 0;
}
.loginBox--bgForm img {
max-height: 600px;
}
.loginBox .loginForm {
max-width: 450px;
}
.loginBox--bgForm, .loginBox--bgImage, .loginBox--login {
transform: translateX(103%);
}
}
@media (min-width: 1250px) {
.loginBox--bgImage img {
max-height: 400px;
}
.loginBox--bgForm {
translate: 50% 0;
}
.loginBox--bgForm img {
max-height: 800px;
}
.loginBox--login {
padding: 32px;
}
.loginBox--spacerMobile {
margin-top: 0;
}
.loginBox--bgWrapper {
top: 0;
}
.loginBox--bgForm, .loginBox--bgImage, .loginBox--login {
transform: translateX(102%);
}
}
@media (min-width: 1540px) {
.loginBox--bgImage img {
max-height: 500px;
}
.loginBox--bgForm {
translate: 61% 0;
}
.loginBox--bgForm img {
max-height: 850px;
}
.loginBox--bgForm, .loginBox--bgImage, .loginBox--login {
transform: translateX(117%);
}
}
@media (min-width: 1700px) {
.loginBox--bgImage img {
max-height: 620px;
}
}
@media (min-width: 1800px) {
.loginBox--bgImage img {
max-height: 700px;
}
}
/*
Promotions
Markup:
Styleguide Shop.Promotions
*/
.promotion {
min-width: 40px;
border-radius: 10px;
background: var(--main-color-black);
color: var(--main-color-white);
line-height: 1;
padding: 8px 10px;
display: inline-flex;
font-size: var(--main-font-size-small);
text-align: center;
justify-content: center;
}
@media (min-width: 768px) {
.promotion {
font-size: var(--main-font-size-small);
min-width: 50px;
}
}
.promotion.promotion--1, .promotion.promotion--2 {
background: var(--main-color-danger);
color: var(--main-color-danger-contrast);
}
.promotion.promotion--3 {
background: var(--main-color-success);
color: var(--main-color-success-contrast);
}
.promotion.promotion--4 {
background: linear-gradient(90deg, #ff8a00, #da1b60);
}
.promotion--clickable {
cursor: pointer;
}
.promotion--clickable:hover {
background: var(--main-color-primary);
color: var(--main-color-primary-contrast);
}
.promotion--clickable:hover.promotion--1, .promotion--clickable:hover.promotion--2 {
background: var(--main-color-danger-dark);
color: var(--main-color-danger-dark-contrast);
}
.promotion--clickable:hover.promotion--3 {
background: var(--main-color-success-dark);
color: var(--main-color-success-dark-contrast);
}
.promotions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
/*
Categorybox
Markup:
Styleguide Shop.Categorybox
*/
.categoryBox {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--main-color-white);
text-align: center;
color: var(--main-color-black);
text-decoration: none;
padding: 30px 10px;
border-radius: 10px;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
aspect-ratio: 1.48;
}
@media (min-width: 768px) {
.categoryBox {
padding: 60px 30px;
}
}
.categoryBox.polygon--bottomLeft:after {
max-width: 70%;
transition: 400ms ease;
}
.categoryBox:hover, .categoryBox:focus, .categoryBox:active {
color: var(--main-color-primary);
text-decoration: none;
}
.categoryBox:hover.polygon--bottomLeft:after, .categoryBox:focus.polygon--bottomLeft:after, .categoryBox:active.polygon--bottomLeft:after {
max-width: 80%;
}
.categoryBox__headline {
line-height: 1.1;
hyphens: auto;
word-break: break-word;
font-weight: var(--main-font-weight-bold);
font-size: 1.6rem;
}
@media (min-width: 768px) {
.categoryBox__headline {
font-size: 2rem;
}
}
@media (min-width: 1024px) {
.categoryBox__headline {
font-size: 2rem;
}
}
@media (min-width: 1250px) {
.categoryBox__headline {
font-size: 2.6rem;
}
}
.itemlistElement {
position: relative;
background: var(--main-color-white);
border-radius: 10px;
padding: 24px 32px;
font-size: var(--main-font-size-small);
container: containerItemlistElement/inline-size;
color: var(--main-color-dark-gray);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.08);
}
@media (max-width: 481px) {
.itemlistElement {
padding: 16px;
}
.itemlistElement .itemlistElement__actions {
position: absolute;
top: 13px;
right: 13px;
}
}
.itemlistElement:not(:last-child) {
margin-bottom: 20px;
}
.itemlistElement__toggle {
grid-area: toggle;
}
.itemlistElement__toggle .icon {
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: 0.2s ease-in-out;
}
.itemlistElement__toggle .icon:hover, .itemlistElement__toggle .icon:focus, .itemlistElement__toggle .icon:active {
color: var(--main-color-primary);
}
.itemlistElement__toggle .icon.is-loading, .itemlistElement__toggle .icon.is-success, .itemlistElement__toggle .icon.is-error {
cursor: not-allowed;
pointer-events: none;
}
.itemlistElement__toggle .icon.is-loading {
cursor: wait;
}
.itemlistElement__toggle .icon.is-loading:before {
content: "\e043";
opacity: 1;
animation: rotation 1s infinite ease-in-out;
}
.itemlistElement__toggle .icon.is-error {
color: var(--main-color-danger);
}
.itemlistElement__toggle .icon.is-error:before {
content: "\e01c";
animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.itemlistElement__image {
padding-right: 10px;
}
.itemlistElement__image .image, .itemlistElement__image .itemcardImagesThumbs .itemcardImages__img, .itemcardImagesThumbs .itemlistElement__image .itemcardImages__img, .itemlistElement__image .itemcardImagesMain .itemcardImages__img, .itemcardImagesMain .itemlistElement__image .itemcardImages__img, .itemlistElement__image .imageCover {
background: var(--main-color-white);
}
.itemlistElement__image .image img, .itemlistElement__image .itemcardImagesThumbs .itemcardImages__img img, .itemcardImagesThumbs .itemlistElement__image .itemcardImages__img img, .itemlistElement__image .itemcardImagesMain .itemcardImages__img img, .itemcardImagesMain .itemlistElement__image .itemcardImages__img img, .itemlistElement__image .imageCover img {
mix-blend-mode: multiply;
aspect-ratio: 1.3396226415;
max-width: 260px;
}
.itemlistElement__image--brand {
max-width: 50px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
@container containerItemlistElement (min-width: 1000px) {
.itemlistElement__image {
display: flex;
flex-direction: row-reverse;
gap: 10px;
}
.itemlistElement__image--brand {
position: relative;
max-width: 80px;
}
}
.itemlistElement__media {
grid-area: media;
display: flex;
align-items: center;
position: relative;
align-self: flex-start;
}
.itemlistElement__name {
color: var(--main-color-dark-gray);
font-weight: var(--main-font-weight-bold);
text-decoration: none;
line-height: 1.1;
margin-bottom: 4px;
display: block;
text-wrap: balance;
}
@container containerItemlistElement (min-width: 450px) {
.itemlistElement__name {
font-size: 1.8rem;
}
}
@container containerItemlistElement (min-width: 600px) {
.itemlistElement__name {
margin-bottom: 16px;
font-size: 2rem;
}
}
.itemlistElement__description {
grid-area: description;
align-self: start;
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
padding-bottom: 16px;
}
.itemlistElement__info {
grid-area: info;
}
.itemlistElement__inventory {
grid-area: inventory;
}
.itemlistElement__inventory .inventoryShippingInfo {
display: none;
}
@container containerItemlistElement (min-width: 800px) {
.itemlistElement__inventory {
justify-content: flex-end;
}
}
.itemlistElement__prices {
grid-area: prices;
color: var(--main-color-black);
align-self: end;
justify-self: end;
margin-bottom: 10px;
}
@container containerItemlistElement (min-width: 800px) {
.itemlistElement__prices .prices {
align-items: flex-end;
gap: 10px;
}
.itemlistElement__prices .prices--customization {
gap: 3px;
}
}
.itemlistElement__orderbutton .button {
width: 100%;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton {
padding: 0;
transition: ease-in-out 0.2s;
width: 57px;
max-width: none;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 767px) {
.itemlistElement__orderbutton .orderButtonWrapper .orderButton {
width: 40px;
}
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton span {
display: none;
}
.itemlistElement__orderbutton .orderButtonWrapper .orderButton .icon {
position: static;
transform: none;
}
.itemlistElement__actions {
position: absolute;
top: 22px;
right: 30px;
}
.itemlistElement__actions .actionIcon {
font-size: 2.7rem;
line-height: 1;
}
.itemlistElement__addon:has(:last-child) {
grid-area: addon;
display: flex;
align-items: center;
align-self: flex-end;
}
.itemlistElement__item_no {
margin-bottom: 10px;
line-height: 1;
}
.itemlistElement__wrapper {
display: grid;
padding-top: 5px;
padding-bottom: 5px;
grid-column-gap: 5px;
}
@container containerItemlistElement (min-width: 400px) {
.itemlistElement__wrapper {
grid-column-gap: 10px;
grid-template-columns: 30px 50% 1fr auto;
grid-template-areas: ". media description prices" ". media inventory addon";
}
}
@container containerItemlistElement (min-width: 800px) {
.itemlistElement__wrapper {
align-items: center;
grid-template-columns: 30px 80px 1fr auto auto;
grid-template-areas: ". media description prices addon" ". media inventory prices addon";
}
.itemlistElement__wrapper .itemlistElement__description {
padding-bottom: 16px;
}
}
@container containerItemlistElement (min-width: 1100px) {
.itemlistElement__wrapper {
grid-template-columns: 30px 100px 1fr 130px auto auto;
grid-template-areas: ". media description inventory prices addon";
}
}
@container containerItemlistElement (min-width: 1200px) {
.itemlistElement__wrapper {
grid-template-columns: 30px 100px 155px 1fr 130px auto auto;
grid-template-areas: ". media description info inventory prices addon";
}
}
@container containerItemlistElement (max-width: 450px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "media media media media" "description description description description" "prices prices prices prices" "inventory inventory addon addon";
}
.itemlistElement__wrapper--noVariant .itemlistElement__media {
justify-self: center;
margin-bottom: 16px;
}
}
@container containerItemlistElement (max-width: 410px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "media media media media" "description description description description" "prices prices prices prices" "inventory inventory inventory inventory" "addon addon addon addon";
}
.itemlistElement__wrapper--noVariant .itemlistElement__media {
justify-self: center;
margin-bottom: 16px;
}
.itemlistElement__wrapper--noVariant .itemlistElement__inventory {
justify-self: flex-end;
margin-bottom: 5px;
}
}
@container containerItemlistElement (min-width: 450px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 100px 50px 1fr 1fr;
grid-template-areas: "media media description description" "media media prices prices" "media media inventory inventory" "media media addon addon";
}
}
@container containerItemlistElement (min-width: 600px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 100px 100px 3fr auto;
grid-template-areas: "media media description description" "media media prices prices" "media media inventory addon";
}
}
@container containerItemlistElement (min-width: 800px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 1fr 1fr 1fr 1fr 180px 1fr;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media inventory inventory addon addon";
grid-template-rows: auto auto 50px;
}
}
@container containerItemlistElement (min-width: 1000px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 150px 80px 1fr 1fr 200px auto;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media description description inventory addon";
}
}
@container containerItemlistElement (min-width: 1300px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 250px 100px 1fr 1fr 200px auto;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media description description inventory addon";
}
}
@container containerItemlistElement (max-width: 400px) {
.itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
grid-template-columns: 30px 50% 1fr;
grid-template-areas: "toggle media description" "toggle media inventory" "toggle media prices" "toggle media addon";
}
}
@container containerItemlistElement (min-width: 400px) {
.itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
grid-template-areas: "toggle media description prices" "toggle media inventory addon";
}
}
@container containerItemlistElement (min-width: 800px) {
.itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
grid-template-areas: "toggle media description prices addon" "toggle media inventory prices addon";
}
}
@container containerItemlistElement (min-width: 1100px) {
.itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
grid-template-areas: "toggle media description inventory prices addon";
}
}
@container containerItemlistElement (min-width: 1200px) {
.itemlistElement__wrapper--hasVariant, .itemlistElement__wrapper--isVariant {
grid-template-areas: "toggle media description info inventory prices addon";
}
}
.itemlistElement__wrapper--isVariant {
border-top: 1px solid var(--main-color-light-gray);
}
.itemlistElement__wrapper .itemlistElement__inventory {
display: flex;
align-items: center;
align-self: center;
}
@container containerItemlistElement (min-width: 450px) {
.itemlistElement__wrapper .itemlistElement__inventory {
align-items: center;
margin-bottom: 10px;
justify-content: flex-end;
}
}
@container containerItemlistElement (min-width: 600px) {
.itemlistElement__wrapper .itemlistElement__inventory {
justify-content: end;
}
}
.itemlistElement__wrapper .itemlistElement__prices {
margin-top: 5px;
}
@container containerItemlistElement (min-width: 1000px) {
.itemlistElement__wrapper .itemlistElement__prices {
margin-top: 0;
margin-bottom: 20px;
}
}
.itemlistElement__wrapper .itemlistElement__addon {
margin-top: 8px;
justify-content: flex-end;
white-space: nowrap;
}
@container containerItemlistElement (min-width: 450px) {
.itemlistElement__wrapper .itemlistElement__addon {
margin-top: 0;
}
}
@container containerItemlistElement (max-width: 1199px) {
.itemlistElement__wrapper .itemlistElement__info {
display: none;
}
}
.itemlistElement.is-active .itemlistElement__wrapper--hasVariant .itemlistElement__toggle .icon {
rotate: 90deg;
}
.itemlistElement.is-active .itemlistElement__wrapper--isVariant {
display: grid;
}
a.itemlistElement__name:hover, a.itemlistElement__name:focus, a.itemlistElement__name:active {
color: var(--main-color-primary);
text-decoration: none;
}
.itemlistElement__description:not(:has(.slidecontent)) .itemlistElement__descriptionText {
flex-grow: 1;
}
/*
Prices
Markup:
299,95 €
199,95 €
Price incl. 19% VAT.
Styleguide Shop.Prices
*/
.crossPrice {
display: inline-block;
position: relative;
white-space: nowrap;
align-items: center;
justify-content: center;
}
.basePrice,
.actionPrice {
white-space: nowrap;
font-weight: var(--main-font-weight-bold);
line-height: 1;
}
@media (min-width: 481px) {
.basePrice,
.actionPrice {
font-size: 2rem;
}
}
@media (min-width: 1024px) {
.basePrice,
.actionPrice {
font-size: 2.8rem;
}
}
.basePriceCard {
font-size: 2rem;
}
@media (min-width: 1024px) {
.basePriceCard {
font-size: 2.8rem;
}
}
.priceNotice {
width: 100%;
margin-top: 5px;
text-align: right;
}
.prices {
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: wrap;
gap: 5px;
}
.prices:has(.prices--left) {
justify-content: space-between;
}
.prices .crossPrice + .basePrice {
color: var(--main-color-danger);
margin-left: 10px;
}
@media (min-width: 768px) {
.prices .crossPrice + .basePrice {
margin-left: 20px;
}
}
.prices:has(.crossPrice) .basePrice {
color: var(--main-color-black);
}
.pricesItemcard {
justify-content: space-between;
align-items: flex-start;
}
.pricesItemcard .prices--right {
display: flex;
align-items: center;
gap: 5px;
}
@media (min-width: 1024px) {
.vatInfo {
font-size: 1.6rem;
}
}
.itemcardBuybox:has(.itemcardCustomization) .crossPrice {
display: none;
}
.itemcardBuybox:not(:has(.itemcardCustomization)) .prices--left .crossPriceLabel, .itemcardBuybox:not(:has(.itemcardCustomization)) .prices--left .smalltext {
display: none;
}
/*
Quantity Spinner
Markup:
Small
Artikelnummer
Artikelbezeichnung
Neueste
Empfehlung
Preis aufsteigend
Preis absteigend
Preis absteigend
Styleguide Shop.Sorting
*/
.sortingSelect.customSelect .customSelect__selected {
padding-right: 45px;
font-size: var(--main-font-size-base);
}
.sortingSelect.customSelect .customSelect__selected:after {
content: "\e06f";
font-size: 2rem;
right: 18px;
}
.sortingSelect.customSelect.is-active .customSelect__selected:after {
content: "\e06f";
}
.orderItemlist .orderItem__sumPrice {
display: flex;
justify-content: center;
align-items: center;
}
.orderItemlist .orderItem__sumPrice .basePrice {
font-size: 1.6rem;
}
.orderItemlist .orderItem__price .basePrice {
font-size: 1.6rem;
}
.sparePartsListContainer {
container-type: inline-size;
container-name: sparePartsList;
}
.sparePartsListContainer--alert .sparePartsList {
border: 2px solid var(--main-color-warning);
}
.sparePartsListContainer--alert .sparePartsList h5 {
position: relative;
color: var(--main-color-warning);
}
.sparePartsListContainer--alert .sparePartsList h5:after {
content: "\e01a";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: 10px;
top: 50%;
translate: 0 -50%;
font-size: 2.8rem;
color: var(--main-color-warning);
}
.sparePartsList {
display: none;
background: var(--main-color-pure-white);
border-radius: 10px;
padding: 10px;
}
.sparePartsList--itemWrapper {
display: flex;
justify-content: space-between;
gap: 5px;
}
.sparePartsList--itemWrapper .form-group {
margin-bottom: 6px;
}
.sparePartsList--itemWrapper .specialcheckbox--small2 {
margin-bottom: 0;
}
.sparePartsList--itemWrapper > div:first-child {
min-width: 130px;
}
.sparePartsList .add-on-item {
padding: 5px;
}
.sparePartsList__priceWrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 115px;
}
.sparePartsList--price {
font-weight: var(--main-font-weight-bold);
color: var(--main-color-black);
font-size: 1.5rem;
white-space: nowrap;
}
.sparePartsList--priceAddon {
font-size: 1.2rem;
}
.sparePartsList:has(.add-on-item:not(.hidden)) {
display: block;
}
.sparePartsList .quantity--small-2 .quantity__spinner {
display: none;
}
.specialcheckbox--sparePartText {
display: flex;
flex-direction: column;
gap: 8px;
}
.specialcheckbox--sparePartText > span:not(:first-child) {
font-size: 12px;
line-height: 16px;
}
@container sparePartsList (min-width: 520px) {
.specialcheckbox--sparePartText {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 3px;
}
}
@container sparePartsList (min-width: 320px) {
.sparePartsList .quantity--small-2 .quantity__spinner {
display: block;
}
}
.favoriteButton .favText {
pointer-events: none;
white-space: nowrap;
}
.favoriteButton .favText--notFilled {
display: inline;
}
.favoriteButton .favText--filled {
display: none;
}
.favoriteButton .favText--filled-card, .favoriteButton .favText--filled-favlist {
display: none;
}
.favoriteButton.active {
background: var(--main-color-light-gray);
color: var(--main-color-dark-gray);
border-color: var(--main-color-light-gray);
}
.favoriteButton.active .favText--notFilled {
display: none;
}
.favoriteButton.active .favText--filled:not(.favText--filled-card, .favText--filled-favlist) {
display: inline;
}
body:not(.favorites) .itemlistElement__list:has(.favoriteButton.active) {
cursor: not-allowed;
}
body:not(.favorites) .itemlistElement__list:has(.favoriteButton.active) .favoriteButton {
pointer-events: none;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton {
background: transparent;
color: var(--main-color-primary);
border-color: var(--main-color-primary);
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton:hover, body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton:focus {
background: var(--main-color-pure-white);
border-color: #0088CB;
color: #0088CB;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favoriteButton:active {
background: var(--main-color-white);
border-color: #0088CB;
color: #0088CB;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favText--filled {
display: none;
}
body.favorites .itemlistElement__list:has(.favoriteButton.active) .favText--filled-favlist {
display: inline;
}
body.favorites .itemlistElement .itemlistElement__favButton {
display: none;
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__addon {
display: flex;
flex-direction: column;
justify-items: flex-end;
align-items: flex-end;
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton {
display: block;
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton .favoriteButton {
display: inline-block;
color: var(--main-color-dark-gray);
cursor: pointer;
position: relative;
background-color: transparent;
padding: 5px 8px 3px 8px;
border: 0;
text-decoration: underline;
font-size: 1.4rem;
white-space: nowrap;
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton .favoriteButton:hover {
color: var(--main-color-primary);
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton .favoriteButton.is-loading {
background: transparent !important;
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton .favoriteButton.is-loading:after {
right: -23px;
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton .favoriteButton.is-success {
background: transparent;
color: var(--main-color-success);
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton .favText {
display: none;
}
body.favorites .itemlistElement:has(.slidecontent--favorites) .itemlistElement__favButton .favText--filled-favlist {
display: inline;
}
.itemcard:has(.itemcardCustomization) .itemcardActions:has(.favoriteButton.active) .favText--filled {
display: none;
}
.itemcard:has(.itemcardCustomization) .itemcardActions:has(.favoriteButton.active) .favText--filled-card {
display: inline;
}
.itemcard:has(.itemcardCustomization) .itemcardActions:has(.favoriteButton.active) .favoriteButton {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
border-color: transparent;
border-width: 0;
line-height: 22px;
}
.itemcard:has(.itemcardCustomization) .itemcardActions:has(.favoriteButton.active) .favoriteButton:hover, .itemcard:has(.itemcardCustomization) .itemcardActions:has(.favoriteButton.active) .favoriteButton:focus {
background: linear-gradient(90deg, #ff8a00, #da1b60);
border-color: transparent;
color: var(--main-color-primary-dark-contrast);
}
.itemcard:has(.itemcardCustomization) .itemcardActions:has(.favoriteButton.active) .favoriteButton:active {
background: linear-gradient(90deg, #ff8a00, #da1b60);
border-color: transparent;
color: var(--main-color-primary-darken-contrast);
}
.itemcard:not(:has(.itemcardCustomization)) .itemcardActions:has(.favoriteButton.active) {
cursor: not-allowed;
}
.itemcard:not(:has(.itemcardCustomization)) .itemcardActions:has(.favoriteButton.active) .favoriteButton {
pointer-events: none;
}
.itemlistElement__favButton {
display: none;
}
@container containerItemlistElement (min-width: 450px) {
.itemlistElement .itemlistElement__inventory {
align-items: center;
margin-bottom: 10px;
justify-content: flex-end;
}
}
@container containerItemlistElement (max-width: 450px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "media media media media" "description description description description" "prices prices prices prices" "inventory inventory addon addon";
}
.itemlistElement__wrapper--noVariant .itemlistElement__media {
justify-self: center;
margin-bottom: 16px;
}
}
@container containerItemlistElement (max-width: 410px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "media media media media" "description description description description" "prices prices prices prices" "inventory inventory inventory inventory" "addon addon addon addon";
}
.itemlistElement__wrapper--noVariant .itemlistElement__media {
justify-self: center;
margin-bottom: 16px;
}
.itemlistElement__wrapper--noVariant .itemlistElement__inventory {
justify-self: flex-end;
margin-bottom: 5px;
}
}
@container containerItemlistElement (min-width: 450px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 1fr 0.5fr 1fr 1fr;
grid-template-areas: "media media description description" "media media prices prices" "media media inventory inventory";
}
}
@container containerItemlistElement (min-width: 600px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 1fr 0.5fr 3fr auto;
grid-template-areas: "media media description description" "media media prices prices" "media media inventory inventory";
}
}
@container containerItemlistElement (min-width: 800px) {
.itemlistElement__wrapper--noVariant {
grid-template-rows: auto auto 38px;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media description description inventory inventory";
}
.itemlistElement__wrapper--noVariant .itemlistElement__description {
padding-bottom: 10px;
}
}
@container containerItemlistElement (min-width: 1000px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 150px 80px 1fr 1fr 200px auto;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media description description inventory inventory";
}
}
@container containerItemlistElement (min-width: 1300px) {
.itemlistElement__wrapper--noVariant {
grid-template-columns: 250px 100px 1fr 1fr 190px auto;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media description description inventory inventory";
}
}
@container containerItemlistElement (max-width: 450px) {
.itemlistElement__wrapper--noVariant:has(.configButton), .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) {
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "media media media media" "description description description description" "prices prices prices prices" "inventory inventory addon addon";
}
.itemlistElement__wrapper--noVariant:has(.configButton) .itemlistElement__media, .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) .itemlistElement__media {
justify-self: center;
margin-bottom: 16px;
}
}
@container containerItemlistElement (max-width: 410px) {
.itemlistElement__wrapper--noVariant:has(.configButton), .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) {
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "media media media media" "description description description description" "prices prices prices prices" "inventory inventory inventory inventory" "addon addon addon addon";
}
.itemlistElement__wrapper--noVariant:has(.configButton) .itemlistElement__media, .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) .itemlistElement__media {
justify-self: center;
margin-bottom: 16px;
}
.itemlistElement__wrapper--noVariant:has(.configButton) .itemlistElement__inventory, .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) .itemlistElement__inventory {
justify-self: flex-end;
margin-bottom: 5px;
}
}
@container containerItemlistElement (min-width: 450px) {
.itemlistElement__wrapper--noVariant:has(.configButton), .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) {
grid-template-columns: 100px 50px 1fr 2fr;
grid-template-areas: "media media description description" "media media prices prices" "media media inventory inventory" "media media addon addon";
}
}
@container containerItemlistElement (min-width: 600px) {
.itemlistElement__wrapper--noVariant:has(.configButton), .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) {
grid-template-columns: 100px 100px 3fr auto;
grid-template-areas: "media media description description" "media media prices prices" "media media inventory addon";
}
}
@container containerItemlistElement (min-width: 800px) {
.itemlistElement__wrapper--noVariant:has(.configButton), .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) {
grid-template-columns: 1fr 1fr 1fr 1fr 130px 1.22fr;
grid-template-areas: "media media description description prices prices" "media media description description inventory inventory" "media media description description addon addon";
grid-template-rows: auto auto 75px;
}
}
@container containerItemlistElement (min-width: 1000px) {
.itemlistElement__wrapper--noVariant:has(.configButton), .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) {
grid-template-columns: 150px 80px 1fr 1fr 200px auto;
grid-template-rows: auto auto 52px;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media description description inventory addon";
}
}
@container containerItemlistElement (min-width: 1300px) {
.itemlistElement__wrapper--noVariant:has(.configButton), .itemlistElement__wrapper--noVariant:has(.itemlistElement__list) {
grid-template-columns: 250px 100px 1fr 1fr 190px auto;
grid-template-areas: "media media description description prices prices" "media media description description prices prices" "media media description description inventory addon";
}
}
.configButton--favorites {
display: none;
}
.configButton {
white-space: nowrap;
}
body.favorites .configButton--favorites {
display: inline-block;
}
body.favorites .configButton--basic {
display: none;
}
body.favorites .itemlistElement__favButton {
display: block;
}
.headerLogo {
max-width: 110px;
flex-shrink: 0;
}
@media (min-width: 768px) {
.headerLogo {
max-width: 140px;
}
}
@media (min-width: 1250px) {
.headerLogo {
max-width: 155px;
}
}
@media (min-width: 1540px) {
.headerLogo {
max-width: 200px;
}
}
.headerLogo a, .headerLogo img {
display: block;
aspect-ratio: 10/2;
object-fit: contain;
object-position: left center;
}
.headerTrust {
background: linear-gradient(90deg, #ff8a00, #da1b60);
color: var(--main-color-white);
font-size: var(--main-font-size-small);
}
.headerTopLeft {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.headerTopLeft > * {
margin-right: 10px;
}
@media (min-width: 768px) {
.headerTopLeft > * {
margin-right: 32px;
}
}
.headerTop {
background: var(--main-color-light-gray);
padding-top: 5px;
padding-bottom: 5px;
font-size: 1.3rem;
line-height: 20px;
}
@media (min-width: 768px) {
.headerTop {
padding-top: 10px;
padding-bottom: 10px;
}
}
.headerTop .container {
max-width: 1920px;
display: flex;
align-items: center;
justify-content: space-between;
}
.headerTop .customSelect__selected {
font-size: 1.3rem;
line-height: 1;
}
.headerMain {
padding-top: 16px;
padding-bottom: 16px;
background: var(--main-color-white);
position: relative;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1019607843);
z-index: 20;
}
@media (min-width: 768px) {
.headerMain {
padding-top: 15px;
padding-bottom: 15px;
}
}
@media (min-width: 1024px) {
.headerMain {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
box-shadow: none;
}
.headerMain--right {
color: var(--main-color-white);
}
}
@media (min-width: 1250px) {
.headerMain--right {
gap: 8px;
}
}
@media (min-width: 1540px) {
.headerMain--right {
gap: 16px;
}
}
.headerMain--right {
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
}
@media (min-width: 1024px) {
.headerMain--left {
display: flex;
align-items: center;
padding-left: 16px;
background: var(--main-color-white);
border-radius: 15px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
}
.headerMain > .container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1816px;
}
@media (min-width: 768px) {
.headerMain > .container {
flex-wrap: nowrap;
}
}
.headerMain .headerLogo {
margin-right: 10px;
}
@media (min-width: 768px) {
.headerMain .headerLogo {
margin-right: 32px;
}
}
@media (max-width: 1023px) {
.headerMain .headerMainNavigation {
display: none;
}
}
@media (min-width: 1250px) {
.headerMain .searchBar {
width: 350px;
}
}
.headerMain .headerAccount {
justify-content: flex-end;
}
.headerMain .headerAccount .iconbarIcon__label {
display: none;
}
@media (min-width: 1024px) {
.headerMain .headerAccount .iconbarIcon {
z-index: 1;
}
.headerMain .headerAccount .iconbarIcon:before {
content: "";
background: var(--main-color-pure-white);
width: 0;
height: 0;
border-radius: 50%;
position: absolute;
z-index: -1;
transition: 250ms cubic-bezier(0.66, 0.21, 0.35, 1.74);
}
.headerMain .headerAccount .iconbarIcon:hover:before, .headerMain .headerAccount .iconbarIcon:focus:before, .headerMain .headerAccount .iconbarIcon.is-active:before {
width: 40px;
height: 40px;
}
}
@media (min-width: 1250px) {
.headerMain .headerAccount .iconbarIcon {
padding-inline: 4px;
}
}
.headerMain .headerNavToggler {
display: none;
}
@media (max-width: 1023px) {
.headerMain .headerNavToggler {
display: block;
}
}
.headerMain.sticky {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 100;
border-bottom: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
body[data-site_code=catalog] .headerAccount .iconbarItem--quickorder, body[data-site_code=catalog] .headerAccount .iconbarItem--account {
display: none;
}
.headerMainnavigation--vehicles.button {
transition: none;
}
.headerMainnavigation--vehicles.button:hover, .headerMainnavigation--vehicles.button:focus, .headerMainnavigation--vehicles.button:active {
background: var(--main-color-white);
color: var(--main-color-primary);
}
footer {
background: var(--main-color-white);
z-index: 2;
}
footer .container {
padding-inline: 36px;
}
.footerMain {
padding-top: 32px;
border-top: 5px solid;
border-image-slice: 1;
border-image-source: linear-gradient(270deg, #003399 0%, #0088CB 100%);
}
.footerMain > .container {
max-width: 1816px;
}
.footerTop {
display: none;
padding-top: 13px;
padding-bottom: 13px;
}
.footerTop > .container {
max-width: 1816px;
}
.footerContact, .footerOpening {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--main-color-dark-gray);
}
.footerContact h4, .footerContact .h4, .footerOpening h4, .footerOpening .h4 {
margin-bottom: 16px;
font-weight: var(--main-font-weight-bold);
color: var(--main-color-black);
}
@media (max-width: 767px) {
.footerContact div:has(.contact-item), .footerOpening div:has(.contact-item) {
justify-content: center;
}
.footerContact div:has(.contact-item) .contact-value, .footerOpening div:has(.contact-item) .contact-value {
justify-content: center;
}
}
.footerOpeningButtons {
text-align: center;
}
.footerBottom {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.footerBottom--left {
margin-bottom: 20px;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 1540px) {
.footerBottom--left {
flex-direction: column;
}
.footerBottom--left .nav {
order: 1;
}
}
.footerBottom--left .nav {
justify-content: center;
}
.footerBottom--left .nav > ul {
margin-inline: 0;
}
.footerBottom--left .nav .megaMenu__navigation {
display: flex;
align-items: center;
}
.footerBottom--left .nav .megaMenu__navigation > li {
padding-inline: 24px;
line-height: 1;
}
.footerBottom--left .nav .megaMenu__navigation > li:not(:last-child) {
border-right: 1px solid var(--main-color-black);
}
.footerBottom--left .nav .megaMenu__navigation > li:first-child {
padding-left: 0;
}
.footerBottom--left .nav .megaMenu__navigation > li:last-child {
padding-right: 0;
}
.footerBottom--left .iconList {
justify-content: center;
}
.footerBottom--left .footerNewsletter--mailchimp {
width: 100%;
}
.footerBottom--right {
position: relative;
overflow: hidden;
display: flex;
width: 100%;
padding-top: 80px;
}
.footerBottom--right .container {
display: flex;
align-items: flex-end;
justify-content: center;
flex-wrap: nowrap;
flex-grow: 1;
z-index: 2;
gap: 20px;
padding-bottom: 20px;
}
.footerBackground {
position: absolute;
width: 100%;
bottom: -5px;
pointer-events: none;
}
.footerBackground .bg_desktop {
display: none;
}
.footerCopyright {
color: var(--main-color-pure-white);
font-size: 0.9rem;
margin-bottom: 3px;
}
.footerPartner {
display: none;
}
.footerPartner .h4 {
color: var(--main-color-black);
}
.footerPartner .iconsList {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
gap: 0 10px;
justify-content: space-between;
}
.footerPartner .iconsList li {
display: flex;
align-items: center;
justify-content: center;
padding-inline: 5px;
flex: 1 0 auto;
max-width: 70px;
}
.footerNewsletter--mailchimp form > div {
display: flex;
align-items: flex-end;
gap: 5px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.footerNewsletter--mailchimp form > div {
justify-content: center;
}
}
.footerNewsletter--mailchimp form > div .mc-field-group {
flex-grow: 1;
max-width: 285px;
}
.footerNewsletter--mailchimp form > div input:not(.button) {
padding-block: 11px;
}
.footerBrands > .textcontent {
display: flex;
align-items: center;
}
.footerBrands ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
flex-grow: 1;
gap: 20px;
}
.footerBrands ul li {
margin-bottom: 0;
line-height: 1;
}
.footerLogo {
max-width: 130px;
}
.footerLogo > div {
line-height: 1;
}
@media (min-width: 374px) {
.footerLogo {
max-width: 170px;
}
}
@media (min-width: 481px) {
.footerLogo {
max-width: 150px;
}
.footerBackground {
bottom: -40px;
}
.footerCopyright {
font-size: 1.2rem;
}
.footerBottom--right {
padding-top: 100px;
}
}
@media (min-width: 700px) {
.footerBackground {
bottom: -60px;
}
}
@media (min-width: 768px) {
.footerContact, .footerOpening {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
}
.footerOpeningButtons {
text-align: start;
}
.footerTop {
display: block;
background: var(--main-color-dark-gray);
color: var(--main-color-light-gray);
}
.footerMain {
border-top: 0;
}
.footerBottom {
max-width: 1816px;
margin-inline: auto;
flex-wrap: nowrap;
align-items: flex-end;
}
.footerBottom > .container {
justify-content: flex-start;
max-width: 40%;
padding-bottom: 20px;
}
.footerBottom--right {
padding-top: 80px;
}
.footerBottom--left {
justify-content: flex-start;
margin-bottom: 0;
}
.footerBottom--left .nav {
justify-content: flex-start;
}
.footerBottom--left .iconList {
justify-content: flex-start;
}
.footerBackground {
bottom: -25px;
}
footer .container {
padding-inline: 16px;
}
.footerLogo {
max-width: 200px;
}
}
@media (min-width: 900px) {
.footerBackground {
bottom: -45px;
}
}
@media (min-width: 1024px) {
.footerMain {
margin-bottom: 50px;
}
.footerBottom--right {
padding-top: 110px;
}
.footerBottom--right > .container {
gap: 42px;
}
.footerBackground {
bottom: -50px;
}
.footerLogo {
max-width: 240px;
}
}
@media (min-width: 1250px) {
.footerPartner {
display: block;
}
.footerBottom {
overflow: visible;
}
.footerBottom--right {
padding-top: 10px;
overflow: visible;
}
.footerBottom--right .container {
justify-content: start;
padding-left: 100px;
}
.footerBackground {
bottom: -1px;
}
.footerBackground .bg_mobile {
display: none;
}
.footerBackground .bg_desktop {
display: block;
}
.footerLogo {
max-width: 265px;
}
.footerCopyright {
font-size: 1.6rem;
}
}
@media (min-width: 1540px) {
.footerBottom > .container {
max-width: 60%;
}
}
.mobileMenu {
position: fixed;
top: 0;
width: 321px;
height: 100%;
z-index: 105;
background-color: var(--main-color-white);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
right: -340px;
opacity: 0;
transition: 0.2s ease-in-out;
pointer-events: none;
}
.mobileMenu__close {
width: 30px;
height: 30px;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
right: 0;
top: 0;
}
.mobileMenu__header {
display: flex;
justify-content: flex-end;
padding: 15px 20px 0 30px;
}
.mobileMenu__subHeader {
margin-bottom: 20px;
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-big);
}
.mobileMenu__backLink {
justify-content: flex-start !important;
margin-bottom: 20px;
font-size: var(--main-font-size-small);
display: inline-flex !important;
}
.mobileMenu__backLink:before {
font-family: "icons", Helvetica, Arial, sans-serif;
content: "\e006";
font-size: 20px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.mobileMenu__seperator {
height: 1px;
width: 100%;
background: var(--main-color-gray-base);
display: block;
}
.mobileMenu__navigation a {
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
color: var(--main-color-black);
padding: 10px 0;
}
.mobileMenu__navigation a:hover, .mobileMenu__navigation a:focus, .mobileMenu__navigation a:active {
color: var(--main-color-primary);
text-decoration: none;
}
.mobileMenu__navigation li {
padding: 0;
margin: 0;
list-style-type: none;
}
.mobileMenu__navigation li.is-active > a, .mobileMenu__navigation li.is-active_tree > a {
font-weight: var(--main-font-weight-bold);
}
.mobileMenu__navigation ul {
margin: 0;
padding: 15px 20px 15px 30px;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
background: var(--main-color-white);
transition: 0.2s ease-in-out;
opacity: 0;
pointer-events: none;
overflow: hidden;
overflow-y: auto;
}
.mobileMenu__navigation > ul {
left: 0;
opacity: 1;
pointer-events: auto;
position: static;
height: auto;
}
.mobileMenu__navigation li.hasChildren > a:after {
font-family: "icons", Helvetica, Arial, sans-serif;
content: "\e007";
font-size: 20px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.mobileMenu__navigation li.hasChildren.is-open {
overflow: hidden;
}
.mobileMenu__navigation li.hasChildren.is-open > ul {
pointer-events: auto;
opacity: 1;
left: 0;
z-index: 1;
}
.mobileMenu__navigation--main > ul > li > a {
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-big);
}
.mobileMenu__section {
border-top: 1px solid var(--main-color-gray-base);
padding: 30px 20px 30px 30px;
}
.mobileMenu__body {
position: relative;
overflow: hidden;
padding: 0;
width: 100%;
flex-grow: 1;
}
.mobileMenu.is-open {
right: 0;
opacity: 1;
pointer-events: auto;
}
.mobileMenu .searchBar--small {
max-width: none;
}
body.is-mobilemenuopen {
overflow: hidden;
}
@media print {
a[href]:after {
content: none !important;
}
}
ul.checkList li:before {
color: var(--main-color-primary);
}
ul.bigDot {
list-style: none;
padding-left: 25px;
}
ul.bigDot li {
position: relative;
}
ul.bigDot li:before {
content: "";
position: absolute;
left: -25px;
font-size: 20px;
margin-top: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--main-color-dark-gray);
top: 9px;
}
/*
Infield Input Groups
Markup:
Filled
.is-focus - Focus
Styleguide Form.Input Groups
*/
/*
Input Groups Addons
Markup:
.is-focus - Focus
.is-inactive - Inactive
Styleguide Form.Input Groups Addons
*/
.inputGroup {
display: flex;
width: 100%;
transition: 0.2s ease-in-out;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
position: relative;
}
.inputGroup input,
.inputGroup .input {
flex-grow: 1;
transition: 0.2s ease-in-out;
}
.inputGroup input:not(:last-child),
.inputGroup .input:not(:last-child) {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.inputGroup__addon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 0 solid var(--main-color-gray-base);
min-width: 0 !important;
overflow: hidden;
text-decoration: none;
padding-block: 0;
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
}
@media (min-width: 768px) {
.inputGroup__addon {
height: 50px;
}
}
.inputGroup__addon:first-child {
margin-right: -1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.inputGroup__addon:last-child {
margin-left: -1px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.inputGroup__addon .button {
min-width: 0;
border-radius: 0;
margin: -1px;
}
.inputGroup__addon .icon {
line-height: 1;
display: block;
font-size: 24px;
margin-top: -1px;
padding-right: 6px;
}
@media (min-width: 1250px) {
.inputGroup__addon .icon {
font-size: 35px;
}
}
.inputGroup__addon + input,
.inputGroup__addon + select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.inputGroup__addon--clickable {
cursor: pointer;
}
.inputGroup__addon--clickable:hover {
color: var(--main-color-primary);
}
.inputGroup button.inputGroup__addon {
min-width: 40px;
background: transparent;
}
@media (min-width: 768px) {
.inputGroup button.inputGroup__addon {
min-width: 50px;
}
}
.inputGroup button.inputGroup__addon:hover, .inputGroup button.inputGroup__addon:focus, .inputGroup button.inputGroup__addon:active {
background: var(--main-color-primary);
color: var(--main-color-primary-darken);
}
.inputGroup--infieldAddon .inputGroup__addon {
position: absolute;
height: 100%;
border: 0;
background: transparent !important;
}
.inputGroup--infieldAddon .inputGroup__addon:first-child {
left: 0;
}
.inputGroup--infieldAddon .inputGroup__addon:last-child {
right: 0;
}
.inputGroup--infieldAddon > input:first-child {
padding-right: 40px;
border-radius: 0;
}
@media (min-width: 768px) {
.inputGroup--infieldAddon > input:first-child {
padding-right: 50px;
}
}
.inputGroup--infieldAddon > input:last-child {
padding-left: 40px;
border-radius: 0;
}
@media (min-width: 768px) {
.inputGroup--infieldAddon > input:last-child {
padding-left: 50px;
}
}
.inputGroup--infieldAddonText {
flex-direction: column;
}
.inputGroup--infieldAddonText .inputGroup__addon {
position: absolute;
height: calc(100% - 22px);
border: 0;
background: transparent !important;
color: var(--main-color-dark-gray);
bottom: 0;
padding-right: 20px;
}
.inputGroup--infieldAddonText .inputGroup__addon:first-child {
left: 0;
}
.inputGroup--infieldAddonText .inputGroup__addon:last-child {
right: 0;
}
.inputGroup--infieldAddonText input:first-child {
padding-right: 40px;
border-radius: 0;
}
@media (min-width: 768px) {
.inputGroup--infieldAddonText input:first-child {
padding-right: 50px;
}
}
.inputGroup--infieldAddonText input:last-child {
padding-left: 40px;
border-radius: 0;
}
@media (min-width: 768px) {
.inputGroup--infieldAddonText input:last-child {
padding-left: 50px;
}
}
.inputGroup.is-focus {
border-color: var(--main-color-primary);
}
.inputGroup.is-focus > input,
.inputGroup.is-focus > .input,
.inputGroup.is-focus select {
background: var(--main-color-pure-white);
border-color: var(--main-color-primary);
}
.inputGroup.is-focus .inputGroup__addon {
background: var(--main-color-pure-white);
border-color: var(--main-color-primary);
}
.inputGroup.is-inactive .inputGroup__addon {
display: none;
}
.inputGroup--max280 {
max-width: 280px;
}
.inputGroup--sparepart {
border: 2px solid var(--main-color-primary);
border-radius: 48px;
background: var(--main-color-pure-white);
margin-bottom: 12px;
}
.inputGroup--sparepart input,
.inputGroup--sparepart .input {
border-radius: 48px;
border-color: transparent;
color: var(--main-color-primary);
}
.inputGroup--sparepart.is-focus {
border-color: var(--main-color-primary);
border-radius: 48px;
}
.inputGroup--sparepart.is-focus > input,
.inputGroup--sparepart.is-focus > .input,
.inputGroup--sparepart.is-focus select {
background: var(--main-color-pure-white);
border-color: transparent;
border-radius: 48px;
}
.inputGroup--sparepart.is-focus .inputGroup__addon {
background: transparent;
}
.inputGroup--sparepart .inputGroup__addon {
color: var(--main-color-primary);
}
@media (min-width: 768px) {
.inputGroup--sparepart:not(.inputGroup--large) {
max-width: 220px;
}
}
/*
Toggle Navigation
Markup:
.is-active - Active Class
Styleguide Navigations.Toggle Navigation
*/
.navToggler {
width: 40px;
height: 24px;
cursor: pointer;
position: relative;
}
.navToggler__bar {
width: 100%;
height: 2px;
background-color: var(--main-color-black);
border-radius: 4px;
position: absolute;
left: 8px;
width: calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: -webkit-calc(100% - 16px);
width: -o-calc(100% - 16px);
transition: 0.2s linear;
}
.navToggler__bar:first-child {
top: 3px;
}
.navToggler__bar:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.navToggler__bar:last-child {
bottom: 3px;
}
.navToggler.is-active .navToggler__bar:first-child {
rotate: 45deg;
top: 19px;
}
.navToggler.is-active .navToggler__bar:nth-child(2) {
height: 0;
width: 0;
left: 50%;
}
.navToggler.is-active .navToggler__bar:last-child {
rotate: -45deg;
bottom: 19px;
}
.iconbarItem {
line-height: 1;
}
.iconbarHover {
margin-top: 60px;
}
.iconbarHover__headline {
color: var(--main-color-black);
font-weight: var(--main-font-weight);
}
.iconbarIcon__label {
font-size: 1.4rem;
}
@media (max-width: 1023px) {
.iconbarIcon__icon {
width: 32px;
}
}
@media (min-width: 1024px) {
.iconbarIcon__label {
display: block;
}
}
@media (min-width: 1250px) {
.iconbarIcon__icon {
height: 35px;
font-size: 35px;
}
.iconbarIcon__label {
font-size: 1.6rem;
}
}
.iconsList--large {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
max-width: 1100px;
margin-inline: auto;
flex-wrap: wrap;
gap: 20px;
padding-left: 0;
}
.iconsList--large > li img {
min-width: 60px;
max-width: 110px;
}
@media (min-width: 1024px) {
.iconsList--large {
gap: 10px 45px;
}
.iconsList--large > li img {
min-width: 70px;
max-width: 170px;
}
}
.iconbarIcon__count {
border: 1px solid var(--main-color-white);
top: -10px;
}
/*
Searchbar
You can add minified Classes for each Viewport Size (--minified-xs,--minified-sm,--minified-md,--minified-lg,--minified-xlg)
Markup:
.searchBar--minified
.is-focus
Styleguide Components.Searchbar
*/
.searchBar {
width: 100%;
}
.searchBar input {
background: transparent;
border: 2px solid var(--main-color-pure-white);
border-radius: 48px !important;
}
@media (min-width: 1024px) {
.searchBar input {
color: var(--main-color-pure-white);
}
.searchBar input::placeholder {
color: var(--main-color-pure-white);
}
.searchBar input::-ms-input-placeholder {
color: var(--main-color-pure-white);
}
}
.searchBar input:-webkit-autofill,
.searchBar input:-webkit-autofill:hover,
.searchBar input:-webkit-autofill:focus,
.searchBar input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px transparent inset !important;
}
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
transition: 0.2s ease-in-out;
padding-right: 0;
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
color: var(--main-color-primary);
background: transparent;
}
@media (min-width: 1024px) {
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
color: var(--main-color-pure-white);
right: 0;
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
color: var(--main-color-white);
}
}
@media (min-width: 1540px) {
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
position: absolute;
right: 6px;
top: 1px;
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
color: var(--main-color-white);
}
}
.searchBar--minified {
position: relative;
}
.searchBar--minified input {
width: 0;
right: -2px;
position: absolute;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
}
.searchBar--minified .inputGroup__addon {
z-index: 1;
}
.searchBar--minified.is-active input, .searchBar--minified.is-filled input {
width: 300px;
padding-right: 50px;
opacity: 1;
pointer-events: auto;
}
.searchBar.is-focus {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.searchBar.is-focus input {
color: var(--main-color-black);
}
.searchBar.is-focus .inputGroup__addon, .searchBar.is-focus button.inputGroup__addon {
border-color: var(--main-color-white);
padding-right: 5px;
}
.searchBar.is-focus .inputGroup__addon:hover, .searchBar.is-focus .inputGroup__addon:focus, .searchBar.is-focus button.inputGroup__addon:hover, .searchBar.is-focus button.inputGroup__addon:focus {
background: transparent;
color: var(--main-color-white);
}
@media (min-width: 1024px) {
.searchBar.is-focus .inputGroup__addon, .searchBar.is-focus button.inputGroup__addon {
background: transparent;
color: var(--main-color-white);
}
}
@media (max-width: 767px) {
.searchBar--minified-xs {
position: relative;
justify-content: flex-end;
}
.searchBar--minified-xs input {
width: 0;
right: 0;
top: 50%;
translate: 0 -50%;
position: absolute;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
}
.searchBar--minified-xs .inputGroup__addon {
z-index: 1;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
background: transparent;
border-color: transparent;
}
.searchBar--minified-xs.is-focus {
box-shadow: none;
}
.searchBar--minified-xs.is-focus input {
width: 220px;
padding-right: 50px;
opacity: 1;
background: var(--main-color-pure-white);
pointer-events: auto;
border: 2px solid var(--main-color-primary);
border-radius: 48px;
}
}
@media (max-width: 767px) and (min-width: 481px) {
.searchBar--minified-xs.is-focus input {
width: 350px;
}
}
@media (max-width: 767px) and (min-width: 1024px) {
.searchBar--minified-xs.is-focus input {
border-color: var(--main-color-primary-dark);
background: var(--main-color-light-gray);
color: var(--main-color-black);
backdrop-filter: blur(125px);
-webkit-backdrop-filter: blur(125px);
}
.searchBar--minified-xs.is-focus input::placeholder {
color: var(--main-color-black);
}
.searchBar--minified-xs.is-focus input::-ms-input-placeholder {
color: var(--main-color-black);
}
}
@media (max-width: 767px) {
.searchBar--minified-xs.is-focus .inputGroup__addon {
background: transparent;
border-color: transparent;
}
}
@media (max-width: 767px) and (min-width: 1024px) {
.searchBar--minified-xs.is-focus .inputGroup__addon {
color: var(--main-color-black) !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.searchBar--minified-sm {
position: relative;
justify-content: flex-end;
}
.searchBar--minified-sm input {
width: 0;
right: 0;
top: 50%;
translate: 0 -50%;
position: absolute;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
}
.searchBar--minified-sm .inputGroup__addon {
z-index: 1;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
background: transparent;
border-color: transparent;
}
.searchBar--minified-sm.is-focus {
box-shadow: none;
}
.searchBar--minified-sm.is-focus input {
width: 220px;
padding-right: 50px;
opacity: 1;
background: var(--main-color-pure-white);
pointer-events: auto;
border: 2px solid var(--main-color-primary);
border-radius: 48px;
}
}
@media (min-width: 768px) and (max-width: 1023px) and (min-width: 481px) {
.searchBar--minified-sm.is-focus input {
width: 350px;
}
}
@media (min-width: 768px) and (max-width: 1023px) and (min-width: 1024px) {
.searchBar--minified-sm.is-focus input {
border-color: var(--main-color-primary-dark);
background: var(--main-color-light-gray);
color: var(--main-color-black);
backdrop-filter: blur(125px);
-webkit-backdrop-filter: blur(125px);
}
.searchBar--minified-sm.is-focus input::placeholder {
color: var(--main-color-black);
}
.searchBar--minified-sm.is-focus input::-ms-input-placeholder {
color: var(--main-color-black);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.searchBar--minified-sm.is-focus .inputGroup__addon {
background: transparent;
border-color: transparent;
}
}
@media (min-width: 768px) and (max-width: 1023px) and (min-width: 1024px) {
.searchBar--minified-sm.is-focus .inputGroup__addon {
color: var(--main-color-black) !important;
}
}
@media (min-width: 1024px) and (max-width: 1249px) {
.searchBar--minified-md {
position: relative;
justify-content: flex-end;
}
.searchBar--minified-md input {
width: 0;
right: 0;
top: 50%;
translate: 0 -50%;
position: absolute;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
}
.searchBar--minified-md .inputGroup__addon {
z-index: 1;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
background: transparent;
border-color: transparent;
}
.searchBar--minified-md.is-focus {
box-shadow: none;
}
.searchBar--minified-md.is-focus input {
width: 220px;
padding-right: 50px;
opacity: 1;
background: var(--main-color-pure-white);
pointer-events: auto;
border: 2px solid var(--main-color-primary);
border-radius: 48px;
}
}
@media (min-width: 1024px) and (max-width: 1249px) and (min-width: 481px) {
.searchBar--minified-md.is-focus input {
width: 350px;
}
}
@media (min-width: 1024px) and (max-width: 1249px) and (min-width: 1024px) {
.searchBar--minified-md.is-focus input {
border-color: var(--main-color-primary-dark);
background: var(--main-color-light-gray);
color: var(--main-color-black);
backdrop-filter: blur(125px);
-webkit-backdrop-filter: blur(125px);
}
.searchBar--minified-md.is-focus input::placeholder {
color: var(--main-color-black);
}
.searchBar--minified-md.is-focus input::-ms-input-placeholder {
color: var(--main-color-black);
}
}
@media (min-width: 1024px) and (max-width: 1249px) {
.searchBar--minified-md.is-focus .inputGroup__addon {
background: transparent;
border-color: transparent;
}
}
@media (min-width: 1024px) and (max-width: 1249px) and (min-width: 1024px) {
.searchBar--minified-md.is-focus .inputGroup__addon {
color: var(--main-color-black) !important;
}
}
@media (min-width: 1024px) and (max-width: 1249px) {
.searchBar--minified-md .inputGroup__addon {
color: var(--main-color-white);
}
}
@media (min-width: 1250px) and (max-width: 1539px) {
.searchBar--minified-lg {
position: relative;
justify-content: flex-end;
}
.searchBar--minified-lg input {
width: 0;
right: 0;
top: 50%;
translate: 0 -50%;
position: absolute;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
}
.searchBar--minified-lg .inputGroup__addon {
z-index: 1;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
background: transparent;
border-color: transparent;
}
.searchBar--minified-lg.is-focus {
box-shadow: none;
}
.searchBar--minified-lg.is-focus input {
width: 220px;
padding-right: 50px;
opacity: 1;
background: var(--main-color-pure-white);
pointer-events: auto;
border: 2px solid var(--main-color-primary);
border-radius: 48px;
}
}
@media (min-width: 1250px) and (max-width: 1539px) and (min-width: 481px) {
.searchBar--minified-lg.is-focus input {
width: 350px;
}
}
@media (min-width: 1250px) and (max-width: 1539px) and (min-width: 1024px) {
.searchBar--minified-lg.is-focus input {
border-color: var(--main-color-primary-dark);
background: var(--main-color-light-gray);
color: var(--main-color-black);
backdrop-filter: blur(125px);
-webkit-backdrop-filter: blur(125px);
}
.searchBar--minified-lg.is-focus input::placeholder {
color: var(--main-color-black);
}
.searchBar--minified-lg.is-focus input::-ms-input-placeholder {
color: var(--main-color-black);
}
}
@media (min-width: 1250px) and (max-width: 1539px) {
.searchBar--minified-lg.is-focus .inputGroup__addon {
background: transparent;
border-color: transparent;
}
}
@media (min-width: 1250px) and (max-width: 1539px) and (min-width: 1024px) {
.searchBar--minified-lg.is-focus .inputGroup__addon {
color: var(--main-color-black) !important;
}
}
@media (min-width: 1540px) {
.searchBar--minified-xlg {
position: relative;
justify-content: flex-end;
}
.searchBar--minified-xlg input {
width: 0;
right: 0;
top: 50%;
translate: 0 -50%;
position: absolute;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
}
.searchBar--minified-xlg .inputGroup__addon {
z-index: 1;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
background: transparent;
border-color: transparent;
}
.searchBar--minified-xlg.is-focus {
box-shadow: none;
}
.searchBar--minified-xlg.is-focus input {
width: 220px;
padding-right: 50px;
opacity: 1;
background: var(--main-color-pure-white);
pointer-events: auto;
border: 2px solid var(--main-color-primary);
border-radius: 48px;
}
}
@media (min-width: 1540px) and (min-width: 481px) {
.searchBar--minified-xlg.is-focus input {
width: 350px;
}
}
@media (min-width: 1540px) and (min-width: 1024px) {
.searchBar--minified-xlg.is-focus input {
border-color: var(--main-color-primary-dark);
background: var(--main-color-light-gray);
color: var(--main-color-black);
backdrop-filter: blur(125px);
-webkit-backdrop-filter: blur(125px);
}
.searchBar--minified-xlg.is-focus input::placeholder {
color: var(--main-color-black);
}
.searchBar--minified-xlg.is-focus input::-ms-input-placeholder {
color: var(--main-color-black);
}
}
@media (min-width: 1540px) {
.searchBar--minified-xlg.is-focus .inputGroup__addon {
background: transparent;
border-color: transparent;
}
}
@media (min-width: 1540px) and (min-width: 1024px) {
.searchBar--minified-xlg.is-focus .inputGroup__addon {
color: var(--main-color-black) !important;
}
}
@media (max-width: 374px) {
.searchBar.is-focus {
right: -100px;
z-index: 1;
}
}
.searchSuggestionItem {
border-bottom: 1px solid var(--main-color-gray-base);
text-decoration: none;
padding: 10px;
color: var(--main-color-dark-gray);
display: grid;
grid-gap: 10px;
align-items: center;
grid-template-columns: auto 1fr;
grid-template-areas: "searchSuggestionImg searchSuggestionDescription";
cursor: pointer;
}
.searchSuggestionItem__img {
grid-area: searchSuggestionImg;
width: 60px;
}
.searchSuggestionItem__description {
grid-area: searchSuggestionDescription;
}
.searchSuggestionItem:hover, .searchSuggestionItem.is-active {
color: var(--main-color-dark-gray);
text-decoration: none;
background: var(--main-color-light-gray);
}
.searchBarSuggestions {
background: var(--main-color-white);
border-radius: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}
.searchBarWrapper {
position: relative;
}
.searchBarWrapper .searchBarSuggestions {
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 1;
}
.searchBarWrapper.is-loading .searchBar {
pointer-events: none;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon {
animation: rotation 1s infinite ease-in-out;
}
.searchBarWrapper.is-loading .inputGroup__addon .icon:before {
content: "\e043";
}
.searchBar.is-focus {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.searchBar.is-focus input {
color: var(--main-color-black);
}
.searchBar.is-focus .inputGroup__addon, .searchBar.is-focus button.inputGroup__addon {
border-color: var(--main-color-white);
padding-right: 5px;
background: transparent;
}
.searchBar.is-focus .inputGroup__addon:hover, .searchBar.is-focus .inputGroup__addon:focus, .searchBar.is-focus button.inputGroup__addon:hover, .searchBar.is-focus button.inputGroup__addon:focus {
background: transparent;
color: var(--main-color-primary);
}
@media (min-width: 1024px) {
.searchBar.is-focus .inputGroup__addon, .searchBar.is-focus button.inputGroup__addon {
background: transparent;
color: var(--main-color-black);
}
}
/*
Nav
Markup:
Styleguide Navigations.Nav
*/
.nav {
display: flex;
flex-wrap: nowrap;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav a {
color: var(--main-color-dark-gray);
text-decoration: none;
font-size: 1.6rem;
}
.nav a:hover, .nav a:focus, .nav a:active, .nav a.active, .nav a.active_tree {
color: var(--main-color-primary);
}
.nav li:hover > a, .nav li:focus > a, .nav li:active > a, .nav li.active > a, .nav li.active_tree > a {
color: var(--main-color-primary);
}
.nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-left: -20px;
margin-right: -20px;
}
@media (min-width: 768px) {
.nav ul {
margin-left: -15px;
margin-right: -15px;
}
}
.nav ul > li {
padding-left: 20px;
padding-right: 20px;
position: relative;
}
.nav ul > li:not(:last-child):after {
content: "";
position: absolute;
right: 0;
height: 100%;
width: 1px;
background: var(--main-color-dark-gray);
}
@media (min-width: 768px) {
.nav ul > li {
padding-left: 15px;
padding-right: 15px;
}
}
.nav > a {
margin-right: 20px;
}
@media (min-width: 768px) {
.nav > a {
margin-right: 30px;
}
}
.navChildrenToggle {
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 0;
padding-right: 16px;
}
.navChildrenToggle:after {
content: "\e007";
font-family: "icons", Helvetica, Arial, sans-serif;
}
.navChildrenToggle.is-active:after {
content: "\e008";
}
/*
Navgroup
Markup:
.navgroup--col-2 - 2 Columns
.navgroup--col-3 - 3 Columns
.navgroup--col-4 - 4 Columns
.navgroup--col-5 - 5 Columns
.navgroup--collapse-mobile - Collapse Mobile
Styleguide Navigations.Navgroup
*/
.navgroup {
margin-bottom: -15px;
}
.navgroup li > span,
.navgroup a {
color: var(--main-color-dark-gray);
display: block;
margin-bottom: 15px;
text-decoration: none;
}
.navgroup li > span.is-active, .navgroup li > span.is-active-tree,
.navgroup a.is-active,
.navgroup a.is-active-tree {
color: var(--main-color-primary);
}
.navgroup a:hover, .navgroup a:focus, .navgroup a:active {
color: var(--main-color-primary);
text-decoration: none;
}
.navgroup li {
margin: 0;
padding: 0;
list-style-type: none;
flex-grow: 1;
}
.navgroup li:hover > a {
color: var(--main-color-primary);
}
.navgroup ul {
margin: 0;
padding: 0;
}
.navgroup > ul > li > span,
.navgroup > ul > li > a {
font-weight: var(--main-font-weight-bold);
color: var(--main-color-black);
font-size: 2rem;
}
.navgroup--col-2 > ul, .navgroup--col-3 > ul, .navgroup--col-4 > ul, .navgroup--col-5 > ul {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-left: -10px;
margin-right: -10px;
margin-bottom: -20px;
}
.navgroup--col-2 > ul > li, .navgroup--col-3 > ul > li, .navgroup--col-4 > ul > li, .navgroup--col-5 > ul > li {
width: 100%;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.navgroup--col-2 > ul > li {
width: 50%;
}
}
@media (min-width: 768px) {
.navgroup--col-3 > ul > li {
width: 33.3333333333%;
}
}
@media (min-width: 768px) {
.navgroup--col-4 > ul > li {
width: 50%;
}
}
@media (min-width: 1024px) {
.navgroup--col-4 > ul > li {
width: 25%;
}
}
@media (min-width: 768px) {
.navgroup--col-5 > ul > li {
width: 50%;
}
}
@media (min-width: 1024px) {
.navgroup--col-5 > ul > li {
width: 25%;
}
}
@media (min-width: 1250px) {
.navgroup--col-5 > ul > li {
width: 20%;
}
}
@media (max-width: 767px) {
.navgroup--collapse-mobile a {
margin-bottom: 16px;
line-height: 30px;
}
.navgroup--collapse-mobile li.hasChildren > a,
.navgroup--collapse-mobile li.hasChildren > span {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.navgroup--collapse-mobile > ul {
margin-left: 0;
margin-right: 0;
}
.navgroup--collapse-mobile > ul > li {
padding-left: 0;
padding-right: 0;
margin-bottom: 16px;
border-bottom: 1px solid var(--main-color-primary-pastelblue);
}
.navgroup--collapse-mobile > ul > li > ul {
display: none;
}
.navgroup--collapse-mobile > ul > li.open > ul {
display: block;
}
}
/*
Radio List
Markup:
radioList--small - Small
Styleguide Components.Radio List
*/
.radioListItem {
display: flex;
align-items: center;
position: relative;
padding: 10px 10px 10px 60px;
border: 1px solid var(--main-color-gray-base);
border-radius: 10px;
cursor: pointer;
min-height: 65px;
}
.radioListItem:hover, .radioListItem:focus, .radioListItem:active {
border-color: var(--main-color-primary);
}
.radioListItem__image {
padding-left: 20px;
}
.radioListItem__image img {
aspect-ratio: 4/3;
object-fit: contain;
object-position: center center;
display: block;
}
.radioListItem__headline {
font-size: var(--main-font-size-base);
}
.radioListItem__summary {
display: block;
margin-top: 5px;
}
.radioListItem__text {
flex-grow: 1;
}
.radioListItem input {
width: 0;
height: 0;
position: absolute;
opacity: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.radioListItem input + i {
display: block;
width: 20px;
height: 20px;
background-color: var(--main-color-white);
border: 1px solid var(--main-color-gray-base);
border-radius: 50%;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.radioListItem input + i:after {
content: "";
background: var(--main-color-primary);
pointer-events: none;
position: absolute;
width: 10px;
height: 10px;
left: 5px;
top: 5px;
opacity: 0;
transition: opacity 0.1s ease-in;
background-color: var(--main-color-primary);
border-radius: 50%;
display: block;
}
.radioListItem input:checked + i:after {
opacity: 1;
}
.radioList {
margin-bottom: -20px;
}
.radioList .radioListItem {
margin-bottom: 20px;
}
.radioList--small {
margin: 0;
}
.radioList--small .radioListItem {
margin-bottom: 0;
border-radius: 0;
padding: 5px 10px 5px 40px;
min-height: 53px;
}
.radioList--small .radioListItem:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.radioList--small .radioListItem:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.radioList--small .radioListItem__summary {
margin-top: 0;
}
.radioList--small .radioListItem input + i {
left: 10px;
}
/*
Contentbox
Markup:
Headline
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,
.reverse - Reverse
.contentBox--textinbox - Text in Box
//Styleguide Components.Contentbox
*/
.contentBox {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
color: var(--main-color-dark-gray);
text-decoration: none;
background: var(--main-color-pure-white);
flex-grow: 1;
}
@media (min-width: 768px) {
.contentBox {
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
}
}
.contentBox .contentImage {
max-width: 100%;
width: 100%;
background-color: var(--main-color-white);
overflow: hidden;
}
.contentBox .contentImage img {
object-fit: cover;
aspect-ratio: 1.48;
transition: 0.3s ease-in-out;
display: block;
min-width: 100%;
}
.contentBox .contentImage--wide {
max-width: 100%;
width: 100%;
background-color: var(--main-color-white);
overflow: hidden;
aspect-ratio: 16/10;
}
.contentBox .contentImage--wide img {
object-fit: cover;
aspect-ratio: 16/10;
transition: 0.2s ease-in-out;
display: block;
min-width: 100%;
}
.contentBox .contentText {
padding: 16px;
flex-grow: 1;
display: flex;
}
.contentBox .contentText .countUp--number {
margin-bottom: 0;
display: inline-flex;
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.contentBox .contentText .countUp--number:after {
content: "+";
display: block;
color: #003399;
}
.contentBox .contentText .textcontent {
width: 100%;
display: flex;
flex-direction: column;
}
.contentBox .contentText .textcontent > h4, .contentBox .contentText .textcontent .h3, .contentBox .contentText .textcontent .itemcardBuybox .prices .basePrice, .itemcardBuybox .prices .contentBox .contentText .textcontent .basePrice {
flex-grow: 1;
}
.contentBox .link {
flex-grow: 1;
}
@container containerRowColumn (min-inline-size: 600px) {
.contentBox {
flex-direction: row;
}
.contentBox .contentImage {
width: 50%;
flex-shrink: 0;
display: flex;
}
.contentBox .contentImage > .textcontent {
display: flex;
}
.contentBox .contentImage img {
min-height: 100%;
}
.contentBox.reverse {
flex-direction: row-reverse;
}
}
.contentBox > .link:not(.button), .contentBox a:not(.button) {
color: var(--main-color-dark-gray);
text-decoration: none;
display: flex;
flex-direction: column;
}
@container containerRowColumn (min-inline-size:600px) {
.contentBox > .link:not(.button), .contentBox a:not(.button) {
flex-direction: row;
}
}
.contentBox > .link:not(.button):hover, .contentBox > .link:not(.button):focus, .contentBox > .link:not(.button):active, .contentBox a:not(.button):hover, .contentBox a:not(.button):focus, .contentBox a:not(.button):active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
.contentBox > .link:not(.button):hover .contentImage img, .contentBox > .link:not(.button):hover .contentImage--wide img, .contentBox > .link:not(.button):focus .contentImage img, .contentBox > .link:not(.button):focus .contentImage--wide img, .contentBox > .link:not(.button):active .contentImage img, .contentBox > .link:not(.button):active .contentImage--wide img, .contentBox a:not(.button):hover .contentImage img, .contentBox a:not(.button):hover .contentImage--wide img, .contentBox a:not(.button):focus .contentImage img, .contentBox a:not(.button):focus .contentImage--wide img, .contentBox a:not(.button):active .contentImage img, .contentBox a:not(.button):active .contentImage--wide img {
scale: 1.05;
}
.contentBox .contact-value a {
display: block;
}
.contentBox .contact-value a.linkWithIcon {
text-decoration: none;
}
.contentBox .contact-value a:not(.linkWithIcon) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 1024px) {
.contentBox .contentText {
padding: 32px;
}
}
.contentBox:not(.contentBox--bgBanner) .contentText {
color: var(--main-color-dark-gray);
}
a.contentBox:not(.button) {
color: var(--main-color-dark-gray);
text-decoration: none;
}
a.contentBox:not(.button):hover, a.contentBox:not(.button):focus, a.contentBox:not(.button):active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
a.contentBox:not(.button):hover .contentImage img, a.contentBox:not(.button):focus .contentImage img, a.contentBox:not(.button):active .contentImage img {
scale: 1.05;
}
.contentBox.hasLink > .link:not(.button) {
cursor: pointer;
color: var(--main-color-dark-gray);
}
.contentBox.hasLink > .link:not(.button):hover, .contentBox.hasLink > .link:not(.button):focus, .contentBox.hasLink > .link:not(.button):active {
color: var(--main-color-dark-gray);
text-decoration: none;
}
.contentBox.hasLink > .link:not(.button):hover .contentImage img, .contentBox.hasLink > .link:not(.button):focus .contentImage img, .contentBox.hasLink > .link:not(.button):active .contentImage img {
scale: 1.05;
}
.contentBox.contentBox--textinbox {
position: relative;
color: var(--main-color-white);
border-radius: 0;
}
.contentBox.contentBox--textinbox .contentText {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
padding: 48px;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.contentBox.contentBox--textinbox .contentText {
padding: 30px;
}
}
.contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2 {
line-height: 1.1;
font-weight: normal;
font-size: 1.6rem;
}
@media (min-width: 768px) {
.contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2 {
font-size: 2rem;
}
}
@media (min-width: 1024px) {
.contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2 {
font-size: 2.6rem;
}
}
@media (min-width: 1250px) {
.contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2 {
font-size: 3rem;
}
}
@media (min-width: 1250px) {
.contentBox.contentBox--textinbox .contentText h2, .contentBox.contentBox--textinbox .contentText .h2 {
font-size: 4.8rem;
}
}
.contentBox.contentBox--textinbox .contentText h2:last-child, .contentBox.contentBox--textinbox .contentText .h2:last-child {
margin-bottom: 0;
}
.contentBox.contentBox--textinbox .contentText.contentText--left {
align-items: flex-start;
}
.contentBox.contentBox--textinbox .contentText.contentText--right {
align-items: flex-end;
}
.contentBox.contentBox--textinbox .contentText.contentText--vertTop {
justify-content: flex-start;
}
.contentBox.contentBox--textinbox .contentText.contentText--vertBottom {
justify-content: flex-end;
}
.contentBox.contentBox--textinbox .contentText.contentText--center {
align-items: center;
justify-content: center;
}
.contentBox.contentBox--textinbox .contentText.contentText--center a, .contentBox.contentBox--textinbox .contentText.contentText--center .link {
align-items: center;
justify-content: center;
}
.contentBox.contentBox--textinbox .contentImage img {
aspect-ratio: auto;
}
.contentBox.contentBox--textinbox.hasLink > .link {
color: var(--main-color-white);
}
.contentBox.contentBox--textinbox.hasLink > .link:hover, .contentBox.contentBox--textinbox.hasLink > .link:focus, .contentBox.contentBox--textinbox.hasLink > .link:active {
color: var(--main-color-white);
}
.contentBox.contentBox--bgBanner {
min-height: 400px;
background: unset;
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
}
@media (max-width: 1023px) {
.contentBox.contentBox--bgBanner {
min-height: 320px;
}
}
.contentBoxRow > div {
display: flex;
}
.contentBoxRow > div:nth-last-of-type(1) .countUp--number:after {
content: "%";
}
.swiperContentBox {
padding-inline: 10px;
}
.swiperContentBox .swiper-wrapper {
padding-block: 50px;
}
.swiperContentBox .swiper-wrapper .contentBox {
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1019607843);
}
.swiperContentBox .swiper-slide {
height: auto;
display: flex;
transition: transform 0.3s ease-in-out;
padding-inline: 4px;
}
.swiperContentBox .swiper-slide.swiper-slide-active {
z-index: 1;
}
@media (min-width: 500px) {
.swiperContentBox .swiper-slide.swiper-slide-active {
transform: scale(1.11);
}
}
.swiperContentBox .swiper-slide:not(.swiper-slide-active) {
transform: scale(1);
}
.swiperContentBox:not(.swiper-initialized) .swiper-wrapper {
display: flex;
}
.swiper-parent-relative {
position: relative;
}
.swiper-parent-relative .swiper-button-next,
.swiper-parent-relative .swiper-button-prev {
top: 56%;
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
border-radius: 50%;
width: 48px;
height: 48px;
color: var(--main-color-white);
display: flex;
align-items: center;
justify-content: center;
}
.swiper-parent-relative .swiper-button-next:hover, .swiper-parent-relative .swiper-button-next:focus, .swiper-parent-relative .swiper-button-next:active,
.swiper-parent-relative .swiper-button-prev:hover,
.swiper-parent-relative .swiper-button-prev:focus,
.swiper-parent-relative .swiper-button-prev:active {
color: var(--main-color-white);
background: linear-gradient(90deg, #ff8a00, #da1b60);
border-radius: 50%;
}
.swiper-parent-relative .swiper-button-prev {
left: calc((100% - 1484px - 100px) / 2);
}
.swiper-parent-relative .swiper-button-prev:before {
content: "\e006";
font-family: "icons", Helvetica, Arial, sans-serif;
color: var(--main-color-pure-white);
font-size: 28px;
}
.swiper-parent-relative .swiper-button-prev i {
margin-right: 2px;
}
@media (max-width: 1540px) {
.swiper-parent-relative .swiper-button-prev {
left: 20px;
}
}
.swiper-parent-relative .swiper-button-next {
right: calc((100% - 1484px - 100px) / 2);
}
.swiper-parent-relative .swiper-button-next:before {
content: "\e007";
font-family: "icons", Helvetica, Arial, sans-serif;
color: var(--main-color-pure-white);
font-size: 28px;
}
.swiper-parent-relative .swiper-button-next i {
margin-left: 2px;
}
@media (max-width: 1540px) {
.swiper-parent-relative .swiper-button-next {
right: 20px;
}
}
@media (max-width: 1023px) {
.swiper-parent-relative .swiper-button-next,
.swiper-parent-relative .swiper-button-prev {
display: none;
}
}
.border--rounded {
border-radius: 10px;
}
.border--rounded .textcontent {
border-radius: 10px;
}
.border--rounded img, .border--rounded video, .border--rounded .bannerTextRight {
border-radius: 10px;
}
.box--shadow {
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
}
.videoShadow .textcontent {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
}
.polygonBackground {
position: relative;
}
.polygonBackground:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
right: 0;
bottom: 0;
background: url("/userdata/images/background/categoryBoy--polygon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom right;
border-bottom-right-radius: 10px;
max-width: 90%;
pointer-events: none;
}
@media (min-width: 768px) {
.polygonBackground:after {
max-width: 80%;
}
}
@media (min-width: 1250px) {
.polygonBackground:after {
max-width: 75%;
}
}
.polygon--bottomLeft {
position: relative;
overflow: hidden;
border-bottom-left-radius: 10px;
}
.polygon--bottomLeft:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: -5%;
bottom: 0;
background: url("/userdata/images/background/oktagon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom right;
border-bottom-left-radius: 10px;
max-width: 90%;
pointer-events: none;
}
@media (min-width: 768px) {
.polygon--bottomLeft:after {
max-width: 60%;
}
}
@media (min-width: 1250px) {
.polygon--bottomLeft:after {
max-width: 50%;
}
}
.categoryGrid {
display: grid;
gap: 16px;
}
.categoryGrid__box {
background: var(--main-color-pure-white);
border-radius: 10px;
padding: 32px;
display: flex;
flex-wrap: wrap;
gap: 20px;
container-type: inline-size;
}
.categoryGrid__box:has(.link) .link {
text-decoration: none;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-grow: 1;
color: var(--main-color-black);
}
.categoryGrid__box:has(.link) .link .categoryGrid__image {
transition: 300ms ease-in;
}
.categoryGrid__box:has(.link) .link:hover .categoryGrid__image {
scale: 1.1;
translate: -10px 0;
}
.categoryGrid__box.bg--primary-gradient {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
}
.categoryGrid__box.bg--primary-gradient a, .categoryGrid__box.bg--primary-gradient .link, .categoryGrid__box.bg--primary-gradient .categoryGrid--text {
color: var(--main-color-pure-white);
}
.categoryGrid__box:first-child .categoryGrid__image {
max-width: 1000px;
}
@container (min-inline-size: 1000px) {
.categoryGrid__box .categoryGrid__image {
z-index: 1;
}
}
.categoryGrid__image {
max-width: 520px;
z-index: 1;
}
.categoryGrid--text {
max-width: 590px;
text-align: center;
z-index: 1;
color: var(--main-color-dark-gray);
}
.categoryGrid--text .text--small {
max-width: 420px;
}
.categoryGrid--text > .textcontent {
display: flex;
align-items: center;
flex-direction: column;
}
.categoryGrid--text .h2 {
hyphens: auto;
}
@media (min-width: 500px) {
.categoryGrid {
grid-template-columns: 1fr 1fr;
}
.categoryGrid__box:nth-child(1), .categoryGrid__box:nth-child(4) {
grid-column: span 2;
}
}
@media (min-width: 768px) {
.categoryGrid {
grid-template-columns: repeat(2, 1fr);
}
.categoryGrid > div:nth-child(1) {
grid-column: span 2;
}
.categoryGrid > div:nth-child(2) {
grid-column: span 1;
}
.categoryGrid > div:nth-child(3) {
grid-column: span 1;
}
.categoryGrid > div:nth-child(4) {
grid-column: span 2;
}
.categoryGrid > div:nth-child(5) {
grid-column: span 1;
}
.categoryGrid > div:nth-child(6) {
grid-column: span 1;
}
}
.polygonBackground {
position: relative;
}
.polygonBackground:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
right: 0;
left: 50%;
transform: translateX(-50%);
background: url("/userdata/images/background/oktagon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom right;
border-radius: 0;
pointer-events: none;
}
@media (min-width: 768px) {
.polygonBackground:after {
max-width: 80%;
}
}
@media (min-width: 1250px) {
.polygonBackground:after {
max-width: 75%;
}
}
@media (min-width: 1540px) {
.polygonBackground:after {
max-width: 90%;
}
}
/*
Action Icon
Markup:
{{tc.please_choose}}
S
M
L
XL
XXL
Choose
.customSelect--small - Small Custom Select
Styleguide Components.Custom Select
*/
.customSelect {
position: relative;
width: 100%;
}
.customSelect__selectedCount {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--main-color-primary);
color: var(--main-color-primary-contrast);
align-items: center;
justify-content: center;
margin-left: 10px;
font-size: 1.4rem;
vertical-align: middle;
margin-top: -2px;
display: none;
}
.customSelect__selectedCount.is-active {
display: inline-flex;
}
.customSelect__selected {
padding-right: 40px;
font-weight: var(--main-font-weight-bold);
}
.customSelect__hiddenFormField {
display: none;
}
.customSelect__dropdown {
z-index: 2;
background: var(--main-color-white);
font-size: var(--main-font-size-small);
overflow: hidden;
}
@media (max-width: 767px) {
.customSelect__dropdown {
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
padding: 20px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
translate: 0 110%;
transition: 0.2s ease-in-out;
pointer-events: none;
opacity: 0;
z-index: 104;
}
}
@media (min-width: 768px) {
.customSelect__dropdown {
position: absolute;
left: 0;
top: 100%;
width: 100%;
min-width: 300px;
max-width: 100vw;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border: 1px solid var(--main-color-gray-base);
border-radius: 10px;
margin-top: 5px;
display: none;
}
}
.customSelect__dropdownClose {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
}
@media (min-width: 768px) {
.customSelect__dropdownClose {
display: none;
}
}
.customSelect__dropdownTitle {
font-weight: var(--main-font-weight-bold);
padding-right: 40px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.8rem;
}
.customSelect__dropdownTitle:not(:last-child) {
margin-bottom: 20px;
}
@media (min-width: 768px) {
.customSelect__dropdownTitle {
display: none;
}
}
.customSelect__dropdownHeader {
padding: 10px;
margin-bottom: 10px;
}
.customSelect__dropdownBody {
max-height: 80vh;
overflow: hidden;
overflow-y: auto;
}
@media (min-width: 768px) {
.customSelect__dropdownBody {
max-height: 260px;
}
}
.customSelect__dropdownFooter {
margin-top: 10px;
padding: 10px;
padding-bottom: 15px;
border-top: 1px solid var(--main-color-light-gray);
text-align: center;
}
.customSelect__dropdownFooter .button {
width: 100%;
margin-bottom: 10px;
}
.customSelect__dropdownFooter .linkWithIcon {
font-size: var(--main-font-size-small);
}
.customSelect__dropdownItemHeadline {
font-weight: var(--main-font-weight-bold);
}
.customSelect__dropdownItemText {
font-size: 0.9em;
color: var(--main-color-dark-gray);
padding-left: 20px;
}
.customSelect__dropdownItem {
padding: 10px 20px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: var(--main-color-dark-gray);
text-decoration: none;
}
.customSelect__dropdownItem:hover {
background: var(--main-color-light-gray);
color: var(--main-color-dark-gray);
text-decoration: none;
}
.customSelect__dropdownItem.is-active {
background: var(--main-color-light-gray);
}
.customSelect__dropdownItem.disabled {
pointer-events: none;
cursor: not-allowed;
color: var(--main-color-middle-gray);
}
.customSelect__dropdownItem.disabled .customSelect__dropdownItemText {
color: var(--main-color-middle-gray);
}
.customSelect__dropdownItem--radio, .customSelect__dropdownItem--checkbox {
padding-left: 40px;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--radio:after, .customSelect__dropdownItem--checkbox:before, .customSelect__dropdownItem--checkbox:after {
content: "";
position: absolute;
left: 10px;
top: 50%;
translate: 0 -50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--checkbox:before {
border: 1px solid var(--main-color-black);
border-radius: 10px;
background: var(--main-color-white);
}
.customSelect__dropdownItem--radio:after, .customSelect__dropdownItem--checkbox:after {
opacity: 0;
}
.customSelect__dropdownItem--radio.is-active:before, .customSelect__dropdownItem--checkbox.is-active:before {
border-color: var(--main-color-black);
}
.customSelect__dropdownItem--radio.is-active:after, .customSelect__dropdownItem--checkbox.is-active:after {
opacity: 1;
}
.customSelect__dropdownItem--radio:before, .customSelect__dropdownItem--radio:after {
border-radius: 50%;
}
.customSelect__dropdownItem--radio:after {
background: var(--main-color-black);
width: 12px;
height: 12px;
margin-left: 4px;
opacity: 0;
}
.customSelect__dropdownItem--checkbox:after {
content: "\e019";
font-family: "icons", Helvetica, Arial, sans-serif;
font-size: 18px;
}
.customSelect__dropdownItem--checkbox.is-active {
background: transparent;
}
.customSelect__dropdownItem--checkbox.is-active:before {
border-color: var(--main-color-black);
}
.customSelect__dropdownItem--checkbox.is-active:after {
opacity: 1;
}
.customSelect select {
display: none;
}
.customSelect.is-active .customSelect__selected {
border-color: var(--main-color-primary);
}
.customSelect.is-active .customSelect__selected:after {
content: "\e008";
}
.customSelect.is-active .customSelect__dropdown {
display: block;
}
@media (max-width: 767px) {
.customSelect.is-active .customSelect__dropdown {
translate: 0 0;
pointer-events: auto;
opacity: 1;
}
}
.customSelect--small {
width: auto;
display: inline-flex;
}
.customSelect--small .customSelect__selected {
padding: 0;
padding-right: 20px;
background: transparent;
border: 0;
border-radius: 0;
}
.customSelect--small .customSelect__selected:after {
font-size: 1.2rem;
right: 0;
}
.customSelect--openRight .customSelect__dropdown {
left: auto;
right: 0;
}
.customSelect--openTop .customSelect__dropdown {
top: auto;
bottom: 35px;
}
.customMultiSelect {
width: 100%;
position: relative;
}
.customMultiSelect__selectbox {
z-index: 3;
background: var(--main-color-white);
font-size: var(--main-font-size-small);
position: absolute;
left: 0;
top: 100%;
min-width: 100%;
max-width: 100vw;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border: 1px solid var(--main-color-gray-base);
border-radius: 10px;
margin-top: 5px;
display: none;
padding: 5px;
max-height: 410px;
overflow: auto;
}
.customMultiSelect__selectbox--item {
padding: 5px 12px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: var(--main-color-dark-gray);
text-decoration: none;
width: 100%;
}
.customMultiSelect__selectbox--item .specialcheckbox {
margin-bottom: 0;
font-size: 1.6rem;
width: 100%;
}
.customMultiSelect__selectbox--item .specialcheckbox i {
width: 16px;
height: 16px;
border-radius: 4px;
border-width: 1.5px;
}
.customMultiSelect--footer {
padding: 10px 10px;
position: sticky;
bottom: -5px;
background: var(--main-color-white);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
border-top: 1px solid var(--main-color-gray-base);
}
@media (max-width: 767px) {
.customMultiSelect--footer {
flex-wrap: wrap;
}
}
.customMultiSelect--selected {
padding-right: 40px;
font-weight: var(--main-font-weight-bold);
}
.customMultiSelect--actionButton {
white-space: nowrap;
cursor: pointer;
}
.customMultiSelect--actionButton:hover:not(.button--primary) {
color: var(--main-color-primary);
}
.customMultiSelect__selectedCount {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--main-color-primary);
color: var(--main-color-primary-contrast);
align-items: center;
justify-content: center;
font-size: 1.4rem;
vertical-align: middle;
margin-top: -2px;
position: absolute;
text-align: center;
top: -10px;
right: 3px;
}
.customMultiSelect__selectedCount:empty {
display: none;
}
.customMultiSelect__selectedCount.is-active {
display: inline-flex;
}
.multiFilterGrid > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
flex-grow: 1;
}
.selectBox {
position: relative;
}
.js-selectOptions {
display: none;
overflow-y: scroll;
}
.js-selectOptions label {
display: block;
}
/*
Modals
Markup:
Open Modal
.modal--info - Info
.modal--error - Error
.modal--success - Success
Styleguide Components.Modals
*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 107;
opacity: 0;
transition: 0.4s ease;
pointer-events: none;
align-items: flex-end;
display: none;
overflow-x: hidden;
overflow-y: auto;
}
@media (min-width: 768px) {
.modal {
padding: 30px;
align-items: flex-start;
}
}
@media (min-width: 1250px) {
.modal {
padding: 60px;
}
}
.modal__dialog {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
transition: 0.4s ease;
background: var(--main-color-pure-white);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
transform: translateY(20%);
}
@media (max-width: 767px) {
.modal__dialog {
max-height: 100%;
max-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
}
}
@media (min-width: 768px) {
.modal__dialog {
border-radius: 10px;
overflow: hidden;
transform: translateY(-20%);
}
}
@media (min-width: 1250px) {
.modal__dialog {
box-shadow: 0 10px 60px rgba(0, 0, 0, 0.2);
}
}
.modal__content {
width: 100%;
display: flex;
flex-direction: column;
transition: opacity 0.2s ease-in;
opacity: 1;
}
.modal__close {
position: absolute;
right: 10px;
top: 10px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
opacity: 0.6;
}
.modal__close:hover, .modal__close:focus {
color: var(--main-color-primary);
}
.modal__header {
padding: 20px 40px 0 20px;
}
@media (min-width: 768px) {
.modal__header {
padding: 30px 50px 0 30px;
}
}
.modal__body {
padding: 20px;
}
@media (min-width: 768px) {
.modal__body {
padding: 30px;
padding-top: 0;
}
}
.modal__footer {
padding: 20px;
}
@media (min-width: 768px) {
.modal__footer {
padding: 30px;
}
}
.modal__footer:not(.modal__footer--bg) {
padding-top: 0;
}
.modal__footer .button {
border: 0;
padding-top: 10px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
line-height: 18px;
font-size: var(--main-font-size-small);
}
.modal__title {
font-weight: var(--main-font-weight-bold);
font-size: var(--main-font-size-big);
margin-bottom: 1em;
}
.modal__title small {
font-size: var(--main-font-size-base);
font-weight: var(--main-font-weight);
}
.modal--info .modal__header, .modal--error .modal__header, .modal--success .modal__header {
padding: 0;
}
.modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
text-align: center;
max-width: 420px;
padding-top: 50px;
}
@media (min-width: 768px) {
.modal--info .modal__dialog, .modal--error .modal__dialog, .modal--success .modal__dialog {
padding-top: 130px;
}
}
.modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
content: "\e029";
font-family: "icons", Helvetica, Arial, sans-serif;
border: 2px solid var(--main-color-warning);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
border-radius: 50%;
color: var(--main-color-warning);
transform: translateX(-50%);
line-height: 1;
top: 20px;
font-size: 24px;
width: 40px;
height: 40px;
}
@media (min-width: 768px) {
.modal--info .modal__dialog:before, .modal--error .modal__dialog:before, .modal--success .modal__dialog:before {
top: 40px;
font-size: 40px;
width: 60px;
height: 60px;
border-width: 3px;
}
}
.modal--error .modal__dialog:before {
content: "\e029";
border-color: var(--main-color-danger);
color: var(--main-color-danger);
}
.modal--success .modal__dialog:before {
content: "\e019";
border-color: var(--main-color-success);
color: var(--main-color-success);
}
.modal--loading .modal__title {
opacity: 0;
}
.modal--loading .modal__body {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
}
.modal--loading .modal__body .icon {
font-size: 60px;
animation: rotation 1s infinite linear;
}
.modal--lg .modal__dialog {
max-width: 1200px;
}
.modal--md .modal__dialog {
max-width: 900px;
}
.modal--sm .modal__dialog {
max-width: 600px;
}
.modal--xs .modal__dialog {
max-width: 500px;
}
.modal--white .modal__dialog {
background: var(--main-color-white);
color: var(--main-color-black);
}
.modal.open {
opacity: 1;
pointer-events: auto;
}
.modal.open .modal__dialog {
transform: none;
}
.modal--disabled .modal__dialog {
pointer-events: none;
margin-top: -10px;
}
.modal--disabled .modal__content {
opacity: 0.2;
}
.modalBg {
background: rgba(204, 204, 204, 0.7);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 106;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
body.modal-open,
html.modal-open {
overflow: hidden;
}
@media (min-width: 1024px) {
body.modal-open,
html.modal-open {
padding-right: 6px;
}
}
.shadowBox:not(.slidecontentItem) {
border-radius: 10px;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
background: var(--main-color-white);
padding: 16px;
}
@media (min-width: 1024px) {
.shadowBox:not(.slidecontentItem) {
padding: 48px;
}
}
@media (min-width: 768px) {
.shadowBox.slidecontentItem {
border-radius: 10px;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
background: var(--main-color-white);
padding: 16px;
}
}
@media (min-width: 1024px) {
.shadowBox.slidecontentItem {
padding: 48px;
}
}
@media (min-width: 768px) {
.shadowBox--favorites {
max-width: 50%;
}
}
.megaMenu {
display: none;
position: absolute;
left: 0;
top: calc(100% + 20px);
border-radius: 10px;
padding: 32px;
z-index: 101;
background: var(--main-color-white);
width: 85vw;
max-width: 1816px;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
padding-bottom: 30px;
flex-grow: 1;
}
.megaMenu li {
padding-top: 5px;
padding-bottom: 5px;
}
.megaMenu li.is-active_tree > a {
color: var(--main-color-primary);
}
.megaMenu li.level_2 {
width: 33.3333%;
}
.megaMenu li.level_3 {
border-right: 1px solid var(--main-color-primary-pastelblue);
}
.megaMenu ul.level_4 {
width: 85%;
}
.megaMenu a {
font-weight: var(--main-font-weight-semi-bold);
display: block;
position: relative;
color: var(--main-color-dark-gray);
}
.megaMenu a:hover, .megaMenu a:active, .megaMenu a:focus {
color: var(--main-color-primary);
}
.megaMenu > ul > li:has(.megaMenu__content) .megaMenu__content {
display: none;
}
.megaMenu > ul > li:has(.megaMenu__content).hoverintent .megaMenu__content {
display: block;
}
.megaMenu__navigation {
display: none;
}
.megaMenu__navigation > ul {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
}
.megaMenu > ul {
position: relative;
}
.megaMenu > ul > li {
border-right: 1px solid var(--main-color-primary-pastelblue);
}
.megaMenu > ul > li.hoverintent .container .megaMenu__navigation {
display: block;
}
.megaMenu > ul > li.hoverintent .container .megaMenu__navigation > ul {
display: flex;
flex-direction: column;
}
.megaMenu > ul > li.hoverintent .container .megaMenu__navigation > ul > li > ul {
display: none;
position: absolute;
top: 0;
left: calc(66.666% + 140px);
}
.megaMenu > ul > li.hoverintent .container .megaMenu__navigation > ul > li.hoverintent > ul {
display: block;
}
.megaMenu > ul > li.level_2 {
width: 33.333%;
}
.megaMenu > ul > li.level_2 > .container {
position: absolute;
top: 0;
left: calc(33.3333% + 20px);
width: 33.3333%;
}
.megaMenu > ul > li.level_2 > .container ul.level_3 > li {
border-right: 1px solid var(--main-color-primary-pastelblue);
}
.megaMenu > ul > li.level_2.hoverintent .megaMenu__navigation {
display: block;
}
.megaMenu .container {
font-size: var(--main-font-size-base);
display: flex;
}
.megaMenu .container .megaMenu__navigation {
flex-grow: 1;
}
.megaMenu .megaMenu__content {
flex-shrink: 0;
padding-left: 32px;
width: 25%;
display: none;
position: relative;
right: 0;
top: 0;
}
.megaMenu .megaMenuContentWrapper {
position: relative;
background: var(--main-color-white);
width: 25%;
display: none;
right: 0;
top: 0;
font-size: var(--main-font-size-small);
}
@media (min-width: 1540px) {
.megaMenu .megaMenu__content {
display: block;
}
}
@media (min-width: 1540px) {
.megaMenu > ul {
max-width: 75%;
}
}
.headerMainNavigation--content ul.level_3 {
width: 85%;
}
.breadcrumb .current {
font-weight: var(--main-font-weight-bold);
}
.breadcrumbWrapper {
margin-top: 24px;
margin-bottom: 24px;
}
@media (min-width: 1024px) {
.breadcrumbWrapper {
margin-bottom: 32px;
}
}
/*
Pagination
Markup:
Styleguide Components.Pagination
*/
.pagination {
display: flex;
align-items: center;
justify-content: center;
}
.pagination__item {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
width: 28px;
text-align: center;
line-height: 1;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
color: var(--main-color-primary);
cursor: not-allowed;
background: var(--main-color-pure-white);
padding: 0;
border: 0;
border-radius: 10px;
}
.pagination__item--prev, .pagination__item--next {
background: transparent;
}
.pagination__item--seperator {
background: transparent;
}
.pagination__item--inactive {
color: var(--main-color-middle-gray);
}
.pagination__item--active {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white) !important;
}
.pagination .icon {
font-size: 24px;
}
button.pagination__item,
a.pagination__item {
color: var(--main-color-primary);
cursor: pointer;
}
button.pagination__item:hover, button.pagination__item:focus, button.pagination__item:active,
a.pagination__item:hover,
a.pagination__item:focus,
a.pagination__item:active {
background: var(--main-color-primary);
color: var(--main-color-white);
text-decoration: none;
}
.yottie-container {
max-width: 100% !important;
}
.yottie-container .yottie {
max-width: 100% !important;
padding: 0 16px;
}
.sparePartsList table, .sparePartsList .table {
min-width: 65%;
}
.sparePartsList table th, .sparePartsList table td, .sparePartsList table tr, .sparePartsList table .table__row, .sparePartsList table .table__cell, .sparePartsList .table th, .sparePartsList .table td, .sparePartsList .table tr, .sparePartsList .table .table__row, .sparePartsList .table .table__cell {
border: 0;
}
.sparePartList--tooltip {
width: 20px;
height: 20px;
border-radius: 50%;
align-items: center;
justify-content: center;
position: relative;
display: inline-flex;
margin-left: 8px;
padding: 10px;
margin-bottom: -4px;
cursor: pointer;
}
.sparePartList--tooltip:after {
content: "\e05e";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
font-size: 22px;
}
.savingsCalculator__head {
max-width: 60%;
display: flex;
align-items: center;
gap: 48px;
}
.savingsCalculator__head--icon .icon {
font-size: 12.4rem;
line-height: 1;
}
.savingsCalculator__head--text > div {
margin-bottom: 8px;
line-height: 1.1;
}
.savingsCalculator__main {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 116px;
align-items: center;
}
.savingsCalculator--selectBox {
padding: 32px;
border-radius: 10px;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1019607843);
position: relative;
}
.savingsCalculator--selectBox.bg--white {
color: var(--main-color-black) !important;
}
.savingsCalculator--selectBox.bg--white .specialradiobox {
color: var(--main-color-dark-gray) !important;
}
.savingsCalculator--selectBox > div {
display: flex;
flex-direction: column;
}
.savingsCalculator--inputBox > .inputGroup:first-child {
margin-bottom: 32px;
}
.savingsCalculator--resultBox h3, .savingsCalculator--resultBox .h2 {
line-height: 1.1;
margin-bottom: 16px;
}
.savingsCalculator--selectBox {
position: relative;
}
.savingsCalculator--selectBox:after {
content: "\e009";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
top: calc(100% + 15px);
color: var(--main-color-white);
}
@media (min-width: 768px) {
.savingsCalculator--selectBox:after {
content: "\e00b";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: -32px;
left: auto;
font-size: 24px;
top: 50%;
transform: translateY(-50%);
color: var(--main-color-white);
}
}
@media (min-width: 1250px) {
.savingsCalculator--selectBox, .savingsCalculator--inputBox {
position: relative;
}
.savingsCalculator--selectBox:after, .savingsCalculator--inputBox:after {
content: "\e00b";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: -76px;
font-size: 32px;
top: 50%;
transform: translateY(-50%);
color: var(--main-color-white);
}
}
@media (max-width: 1249px) {
.savingsCalculator__main {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 40px;
}
.savingsCalculator--resultBox {
grid-column: span 3;
}
}
@media (max-width: 767px) {
.savingsCalculator__head {
max-width: 100%;
gap: 24px;
}
.savingsCalculator__head--icon .icon {
font-size: 8rem;
line-height: 1;
}
.savingsCalculator__head--text > div {
margin-bottom: 8px;
line-height: 1.1;
}
.savingsCalculator__main {
grid-template-columns: 1fr;
grid-gap: 60px;
}
.savingsCalculator--resultBox {
grid-column: span 1;
}
}
/*
Banner
Markup:
.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right
//Styleguide Siteparts.Banner
*/
.banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText .categoryInfo .shopSiteHeadline:not(.highlighted), .categoryInfo .banner .contentText .shopSiteHeadline:not(.highlighted), .banner .contentText__headline {
margin-top: 0;
line-height: 1.1;
margin-bottom: clamp(10px, 0.5em, 20px);
font-weight: var(--main-font-weight-bold);
color: var(--main-color-black);
font-size: 2.8rem;
}
@media (min-width: 1024px) {
.banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText .categoryInfo .shopSiteHeadline:not(.highlighted), .categoryInfo .banner .contentText .shopSiteHeadline:not(.highlighted), .banner .contentText__headline {
font-size: 3.6rem;
}
}
@media (min-width: 1250px) {
.banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText .categoryInfo .shopSiteHeadline:not(.highlighted), .categoryInfo .banner .contentText .shopSiteHeadline:not(.highlighted), .banner .contentText__headline {
font-size: 4.2rem;
}
}
@media (min-width: 1540px) {
.banner .contentText h1:not(.highlighted), .banner .contentText .h1:not(.highlighted), .banner .contentText .orderboxSummary__headline:not(.highlighted), .banner .contentText .categoryInfo .shopSiteHeadline:not(.highlighted), .categoryInfo .banner .contentText .shopSiteHeadline:not(.highlighted), .banner .contentText__headline {
font-size: 6.2rem;
}
}
.bannerHeadline--small .contentText__headline {
margin-top: 0;
line-height: 1.1;
margin-bottom: clamp(10px, 0.5em, 20px);
font-weight: var(--main-font-weight-bold);
color: var(--main-color-black);
font-size: 2.4rem;
}
@media (min-width: 1024px) {
.bannerHeadline--small .contentText__headline {
font-size: 3.2rem;
}
}
@media (min-width: 1250px) {
.bannerHeadline--small .contentText__headline {
font-size: 3.8rem;
}
}
.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText__text {
margin-top: 0;
font-weight: var(--main-font-weight);
color: var(--main-color-black);
font-size: 1.2rem;
}
@media (min-width: 1024px) {
.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText__text {
font-size: 1.4rem;
}
}
@media (min-width: 1540px) {
.banner .contentText h2:not(.highlighted), .banner .contentText .h2:not(.highlighted), .banner .contentText__text {
font-size: 1.6rem;
}
}
.banner {
position: relative;
display: block;
width: 100%;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.banner .contentImage {
display: flex;
width: 100%;
min-height: 380px;
}
@media (max-width: 1249px) {
.banner .contentImage {
min-height: 480px;
}
}
.banner .contentImage .textcontent {
width: 100%;
}
.banner .contentImage video,
.banner .contentImage img {
display: block;
min-width: 100%;
object-fit: cover;
height: 100% !important;
min-height: 380px;
}
@media (max-width: 1249px) {
.banner .contentImage video,
.banner .contentImage img {
min-height: 480px;
}
}
@media (max-width: 767px) {
.banner .contentImage img {
object-position: 65%;
}
}
@media (max-width: 767px) {
.banner .contentImage {
aspect-ratio: 1;
max-height: 380px;
min-height: 380px;
}
}
.banner .contentText__headline {
hyphens: auto;
}
@media (min-width: 767px) {
.banner .contentText__headline {
margin-bottom: 16px;
}
}
@media (min-width: 1250px) {
.banner .contentText__headline {
margin-bottom: 32px;
}
}
.banner .contentText h3:not(.highlighted), .banner .contentText .h3:not(.highlighted), .banner .contentText .itemcardBuybox .prices .basePrice:not(.highlighted), .itemcardBuybox .prices .banner .contentText .basePrice:not(.highlighted) {
margin-bottom: 10px;
}
.banner .contentText h1:last-child, .banner .contentText .h1:last-child, .banner .contentText .orderboxSummary__headline:last-child, .banner .contentText .categoryInfo .shopSiteHeadline:last-child, .categoryInfo .banner .contentText .shopSiteHeadline:last-child,
.banner .contentText h2:last-child, .banner .contentText .h2:last-child,
.banner .contentText h3:last-child, .banner .contentText .h3:last-child, .banner .contentText .itemcardBuybox .prices .basePrice:last-child, .itemcardBuybox .prices .banner .contentText .basePrice:last-child {
margin-bottom: 0;
}
.banner .contentText .buttonLink {
color: var(--main-color-white);
}
.banner .contentText .buttonLink:after {
background: var(--main-color-white);
}
.banner .contentText > .textcontent {
width: 100%;
background: var(--main-color-white);
padding: 16px;
border-radius: 10px;
box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1019607843);
}
@media (min-width: 768px) {
.banner .contentText > .textcontent {
width: 50%;
max-width: 735px;
}
}
@media (min-width: 1024px) {
.banner .contentText > .textcontent {
padding: 32px;
}
}
@media (min-width: 1250px) {
.banner .contentText > .textcontent {
max-width: 740px;
padding: 48px;
}
}
.banner .contentText {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
padding: 24px;
align-items: center;
justify-content: center;
}
@media (min-width: 481px) {
.banner .contentText {
padding: 48px;
}
}
@media (min-width: 1540px) {
.banner .contentText {
padding-left: calc((100% - 1484px + 24px) / 2);
}
}
.banner .contentText.contentText--left {
align-items: flex-start;
}
.banner .contentText.contentText--right {
align-items: flex-end;
}
.banner .contentText.contentText--vertTop {
justify-content: flex-start;
}
.banner .contentText.contentText--vertBottom {
justify-content: flex-end;
}
.banner .contentText.contentText--center {
align-items: center;
justify-content: center;
}
.banner.banner--hasNoText .contentImage:after {
display: none;
}
a.banner {
color: var(--main-color-dark-gray);
}
a.banner:hover .contentText__button.button--secondary {
background: var(--main-color-pure-white);
border-color: #0088CB;
color: #0088CB;
}
.bannerImage--rounded .contentImage {
border-radius: 10px;
}
.bannerText--blur .banner .contentText > .textcontent {
background: rgba(248, 248, 248, 0.6901960784);
opacity: 1;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.contentBox--bgSplit > div:nth-child(odd) .contentBox .contentText {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
}
.contentBox--bgSplit > div:nth-child(odd) .contentBox .button {
background: linear-gradient(90deg, #ff8a00, #da1b60);
color: var(--main-color-white);
border-color: transparent;
border-width: 0;
line-height: 22px;
transition: none;
}
.contentBox--bgSplit > div:nth-child(odd) .contentBox .button:hover, .contentBox--bgSplit > div:nth-child(odd) .contentBox .button:focus {
background: var(--main-color-white);
border-color: transparent;
color: var(--main-color-primary);
}
.contentBox--bgSplit > div:nth-child(odd) .contentBox .button:active {
background: var(--main-color-white);
border-color: transparent;
color: var(--main-color-primary);
}
@media (min-width: 768px) {
.contentBox--bgSplit > div:nth-child(odd) .contentBox .button {
line-height: 24px;
}
}
.contentBox--bgSplit > div:nth-child(odd) .countUp--number {
background: none;
-webkit-text-fill-color: unset;
color: var(--main-color-white);
}
.contentBox--bgSplit > div:nth-child(odd) .countUp--number:after {
color: var(--main-color-white);
}
.contentBox--bgAll .contentBox .contentText {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
color: var(--main-color-white);
}
.contentBox--bgAll .contentBox .button {
background: linear-gradient(90deg, #ff8a00, #da1b60);
color: var(--main-color-white);
border-color: transparent;
border-width: 0;
line-height: 22px;
transition: none;
}
.contentBox--bgAll .contentBox .button:hover, .contentBox--bgAll .contentBox .button:focus {
background: var(--main-color-white);
border-color: transparent;
color: var(--main-color-primary);
}
.contentBox--bgAll .contentBox .button:active {
background: var(--main-color-white);
border-color: transparent;
color: var(--main-color-primary);
}
@media (min-width: 768px) {
.contentBox--bgAll .contentBox .button {
line-height: 24px;
}
}
.contentBox--bgAll .countUp--number {
color: var(--main-color-secondary);
background: none;
-webkit-text-fill-color: unset;
}
.bannerArrowGroup {
position: relative;
}
.bannerArrowGroup a {
color: var(--main-color-pure-white);
text-decoration: none;
}
.bannerArrowGroup a:hover {
color: var(--main-color-pure-white);
}
.bannerArrowGroup .animationArrow {
z-index: 1;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: var(--main-color-pure-white);
font-size: 6rem;
animation: swipe 500ms ease-in-out infinite alternate;
}
@media (max-width: 1249px) {
.bannerArrowGroup .animationArrow {
display: none;
}
}
@keyframes swipe {
from {
translate: 0;
}
to {
translate: 0 -5px;
}
}
/*
Banner with Textbox
Markup:
.contentText--left contentText--vertTop - Content Vertical top Horizontal left
.contentText--right contentText--vertTop - Content Vertical top Horizontal right
.contentText--vertTop - Content Vertical top Horizontal center
.contentText--left - Content Vertical center Horizontal left
.contentText--right - Content Vertical center Horizontal right
.contentText--left contentText--vertBottom - Content Vertical bottom Horizontal left
.contentText--vertBottom - Content Vertical bottom Horizontal center
.contentText--right contentText--vertBottom - Content Vertical bottom Horizontal right
//Styleguide Siteparts.Banner with Textbox
*/
.banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText .orderboxSummary__headline:not(.highlighted), .banner2 .contentText .categoryInfo .shopSiteHeadline:not(.highlighted), .categoryInfo .banner2 .contentText .shopSiteHeadline:not(.highlighted), .banner2 .contentText__headline {
margin-top: 0;
line-height: 1.1;
margin-bottom: clamp(10px, 0.5em, 20px);
font-size: 3rem;
}
@media (min-width: 1024px) {
.banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText .orderboxSummary__headline:not(.highlighted), .banner2 .contentText .categoryInfo .shopSiteHeadline:not(.highlighted), .categoryInfo .banner2 .contentText .shopSiteHeadline:not(.highlighted), .banner2 .contentText__headline {
font-size: 3.4rem;
}
}
@media (min-width: 1250px) {
.banner2 .contentText h1:not(.highlighted), .banner2 .contentText .h1:not(.highlighted), .banner2 .contentText .orderboxSummary__headline:not(.highlighted), .banner2 .contentText .categoryInfo .shopSiteHeadline:not(.highlighted), .categoryInfo .banner2 .contentText .shopSiteHeadline:not(.highlighted), .banner2 .contentText__headline {
font-size: 4.7rem;
}
}
.banner2 .contentText h2:not(.highlighted), .banner2 .contentText .h2:not(.highlighted), .banner2 .contentText__text {
margin-top: 0;
margin-bottom: 30px;
color: var(--main-color-black);
}
.banner2 {
position: relative;
display: block;
width: 100%;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.banner2 .contentImage {
display: flex;
width: 100%;
}
.banner2 .contentImage .textcontent {
width: 100%;
}
.banner2 .contentImage video,
.banner2 .contentImage img {
display: block;
min-width: 100%;
object-fit: cover;
min-height: 100%;
}
@media (max-width: 1023px) {
.banner2 .contentImage {
aspect-ratio: 16/8;
}
.banner2 .contentImage video,
.banner2 .contentImage img {
height: 100% !important;
}
}
@media (max-width: 767px) {
.banner2 .contentImage {
aspect-ratio: 4/3;
max-height: 380px;
}
}
.banner2 .contentText h2:not(.highlighted), .banner2 .contentText .h2:not(.highlighted) {
font-weight: normal;
margin-bottom: clamp(10px, 0.5em, 10px);
}
.banner2 .contentText h3:not(.highlighted), .banner2 .contentText .h3:not(.highlighted), .banner2 .contentText .itemcardBuybox .prices .basePrice:not(.highlighted), .itemcardBuybox .prices .banner2 .contentText .basePrice:not(.highlighted) {
margin-bottom: 10px;
}
.banner2 .contentText h1:last-child, .banner2 .contentText .h1:last-child, .banner2 .contentText .orderboxSummary__headline:last-child, .banner2 .contentText .categoryInfo .shopSiteHeadline:last-child, .categoryInfo .banner2 .contentText .shopSiteHeadline:last-child,
.banner2 .contentText h2:last-child, .banner2 .contentText .h2:last-child,
.banner2 .contentText h3:last-child, .banner2 .contentText .h3:last-child, .banner2 .contentText .itemcardBuybox .prices .basePrice:last-child, .itemcardBuybox .prices .banner2 .contentText .basePrice:last-child {
margin-bottom: 0;
}
.banner2 .contentText .textcontent {
width: 100%;
background: var(--main-color-white);
padding: 20px 0;
color: var(--main-color-black);
}
@media (min-width: 768px) {
.banner2 .contentText .textcontent {
width: 50%;
padding: 30px;
}
}
@media (min-width: 1024px) {
.banner2 .contentText .textcontent {
max-width: 500px;
padding: 40px;
}
}
.banner2 .contentText {
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.banner2 .contentText {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 48px;
}
}
@media (min-width: 1250px) {
.banner2 .contentText {
padding: 96px;
}
}
@media (min-width: 1540px) {
.banner2 .contentText {
padding: 96px 192px;
}
}
.banner2 .contentText.contentText--left {
align-items: flex-start;
}
.banner2 .contentText.contentText--right {
align-items: flex-end;
}
.banner2 .contentText.contentText--vertTop {
justify-content: flex-start;
}
.banner2 .contentText.contentText--vertBottom {
justify-content: flex-end;
}
.banner2.banner--hasNoText .contentImage:after {
display: none;
}
a.banner2 {
color: var(--main-color-dark-gray);
text-decoration: none;
}
a.banner2:hover .contentText__button {
background: linear-gradient(90deg, #ff8a00, #da1b60);
}
/*
Bannergroup
Markup:
//Styleguide Siteparts.Bannergroup
*/
@media (min-width: 768px) {
.bannerGroup {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, auto);
gap: 20px;
grid-template-areas: "banner1 banner1 banner1 banner1 banner1 banner1" "banner2 banner2 banner2 banner3 banner3 banner3";
}
}
@media (min-width: 1024px) {
.bannerGroup {
grid-template-areas: "banner1 banner1 banner1 banner1 banner2 banner2" "banner1 banner1 banner1 banner1 banner3 banner3";
}
}
.bannerGroup .banner {
display: flex;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.bannerGroup .banner {
margin-bottom: 0;
}
}
.bannerGroup .banner > .link {
display: flex;
width: 100%;
}
.bannerGroup .banner .contentImage img {
height: 100% !important;
}
.bannerGroup .banner .contentText {
padding: 20px;
}
@media (min-width: 1250px) {
.bannerGroup .banner .contentText {
padding: 30px;
}
}
.bannerGroup .banner .contentText .textcontent {
width: 100%;
}
.bannerGroup .banner:first-child {
grid-area: banner1;
}
@media (min-width: 1024px) {
.bannerGroup .banner:not(:first-child) .contentImage {
position: relative;
width: 100%;
}
.bannerGroup .banner:not(:first-child) .contentImage img {
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
@media (max-width: 767px) {
.bannerGroup .banner:nth-child(2) .contentImage, .bannerGroup .banner:nth-child(3) .contentImage {
aspect-ratio: 16/9;
}
}
.bannerGroup .banner:nth-child(2) {
grid-area: banner2;
}
.bannerGroup .banner:nth-child(3) {
grid-area: banner3;
}
.scrollbar__img > img {
border-radius: 10px;
}
.scrollbar .swiper-wrapper:not(:has(> div:nth-child(5))) {
justify-content: center;
}
.container .scrollbar {
margin-left: 0;
margin-right: 0;
}
/*
Image Gallery
Markup:
//Styleguide Siteparts.Image Gallery
*/
.fullscreenSwiper.gallerySwiper {
position: relative;
background: transparent;
z-index: 0;
}
.fullscreenSwiper.gallerySwiper:before {
content: none;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperImage {
padding: 0;
background: none;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperImage .swiper-slide {
height: 100%;
aspect-ratio: 4/3;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperImage .swiper-slide > * {
width: 100%;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperImage .swiper-slide img {
object-fit: cover;
margin: 0;
border-radius: 10px;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperThumbs {
margin-top: 16px;
max-width: 100%;
height: auto;
padding-bottom: 0;
width: 100%;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperThumbs .swiper-slide {
opacity: 1;
border-radius: 10px;
aspect-ratio: 1;
display: flex;
overflow: hidden;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperThumbs .swiper-slide img {
object-fit: cover;
}
.fullscreenSwiper.gallerySwiper .gallerySwiperThumbs .swiper-slide-thumb-active {
border: 2px solid var(--main-color-primary);
}
.fullscreenSwiper {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 106;
background-color: var(--main-color-pure-white);
display: flex;
flex-direction: column;
}
.fullscreenSwiper:before {
content: "\e043";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
font-size: 80px;
z-index: 106;
color: var(--main-color-middle-gray);
animation: rotation 1s infinite ease-in-out;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
.fullscreenSwiper:before {
font-size: 120px;
}
}
.fullscreenSwiper.is-loading:before {
opacity: 1;
}
.fullscreenSwiper.is-loading .fullscreenSwiperImage,
.fullscreenSwiper.is-loading .fullscreenSwiperThumbs {
opacity: 0;
}
.fullscreenSwiperImage {
width: 100%;
flex-grow: 1;
padding: 96px 160px;
display: flex;
justify-content: center;
transition: opacity 0.2s ease-in-out;
}
.fullscreenSwiperImage:before, .fullscreenSwiperImage:after {
display: none;
}
.fullscreenSwiperImage::before, .fullscreenSwiperImage::after {
display: none;
}
.fullscreenSwiperImage .swiper-slide {
position: relative;
opacity: 0;
transition: 0.2s ease-in-out;
}
.fullscreenSwiperImage .swiper-slide > * {
bottom: 0;
height: auto;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.fullscreenSwiperImage .swiper-slide iframe {
width: 100%;
height: 100%;
}
.fullscreenSwiperImage .swiper-slide.swiper-slide-active {
opacity: 1;
}
.fullscreenSwiperImage .swiper-button-prev,
.fullscreenSwiperImage .swiper-button-next {
font-size: 40px;
color: var(--main-color-black);
border-radius: 50%;
width: 40px;
height: 40px;
justify-content: center;
cursor: pointer;
}
.fullscreenSwiperImage .swiper-button-prev:hover,
.fullscreenSwiperImage .swiper-button-next:hover {
color: var(--main-color-pure-white);
}
.fullscreenSwiperImage .swiper-button-prev.swiper-button-lock,
.fullscreenSwiperImage .swiper-button-next.swiper-button-lock {
display: none;
}
.fullscreenSwiperImage .swiper-button-prev {
left: 15px;
}
.fullscreenSwiperImage .swiper-button-next {
right: 15px;
}
@media (max-width: 767px) {
.fullscreenSwiperImage {
padding: 16px;
}
.fullscreenSwiperImage .swiper-button-prev,
.fullscreenSwiperImage .swiper-button-next {
display: none;
}
}
.fullscreenSwiperThumbs {
flex-shrink: 0;
height: 112px;
padding-bottom: 32px;
transition: opacity 0.2s ease-in-out;
}
@media (max-width: 767px) {
.fullscreenSwiperThumbs {
height: 76px;
padding-bottom: 16px;
}
}
.fullscreenSwiperThumbs .swiper-wrapper {
justify-content: center;
}
.fullscreenSwiperThumbs .swiper-slide {
width: 80px;
cursor: pointer;
opacity: 0.4;
transition: 0.2s ease-in-out;
}
@media (max-width: 767px) {
.fullscreenSwiperThumbs .swiper-slide {
width: 60px;
}
}
.fullscreenSwiperThumbs .swiper-slide > img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
}
.fullscreenSwiperThumbs .swiper-slide:hover, .fullscreenSwiperThumbs .swiper-slide.swiper-slide-thumb-active {
opacity: 1;
}
.fullscreenSwiperThumbs .swiper-button-disabled {
opacity: 0;
}
.fullscreenSwiperClose {
position: fixed;
right: 20px;
top: 20px;
font-size: 40px;
border: 2px solid transparent;
color: var(--main-color-black);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1001;
transition: 0.2s ease-in-out;
}
.fullscreenSwiperClose:hover {
color: var(--main-color-action);
border-color: var(--main-color-action);
}
@media (max-width: 767px) {
.fullscreenSwiperClose {
top: 10px;
right: 10px;
font-size: 30px;
border-width: 1px;
width: 40px;
height: 40px;
}
}
body.fullscreen-gallery-opened {
overflow: hidden;
}
/*
Slideshow
Markup:
.slideshow--arrows-outside - Arrows Outside
//Styleguide Siteparts.Slideshow
*/
.slideshow.swiper .swiper-button-prev,
.slideshow.swiper .swiper-button-next {
width: 40px;
height: 40px;
font-size: 36px;
color: var(--main-color-white);
scale: 1;
transition: 0.2s ease-in-out;
}
.slideshow.swiper .swiper-button-prev:hover, .slideshow.swiper .swiper-button-prev:focus, .slideshow.swiper .swiper-button-prev:active,
.slideshow.swiper .swiper-button-next:hover,
.slideshow.swiper .swiper-button-next:focus,
.slideshow.swiper .swiper-button-next:active {
scale: 1.4;
}
.slideshow.swiper .swiper-button-prev {
left: 10px;
}
.slideshow.swiper .swiper-button-next {
right: 10px;
}
@media (min-width: 1564px) {
.slideshow.swiper.slideshow--arrows-outside .swiper-button-prev,
.slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
color: var(--main-color-dark-gray);
}
.slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
left: -50px;
}
.slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
right: -50px;
}
}
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev,
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
color: var(--main-color-white);
}
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
left: 10px;
}
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
right: 10px;
}
.slideshow_main.swiper, .banner2 {
max-width: 1920px;
}
.slideshow_main.swiper .contentText, .banner2 .contentText {
padding: 20px;
}
.slideshow_main.swiper .contentText .textcontent, .banner2 .contentText .textcontent {
background: transparent;
}
.slideshow_main.swiper .contentText__text, .banner2 .contentText__text {
margin-bottom: 8px;
font-size: 2.8rem;
font-weight: var(--main-font-weight-bold);
}
.slideshow_main.swiper .contentText__headline, .banner2 .contentText__headline {
font-size: 6.8rem;
}
@media (max-width: 767px) {
.slideshow_main.swiper .swiper-pagination, .banner2 .swiper-pagination {
margin-top: 0;
}
.slideshow_main.swiper .swiper-pagination .swiper-pagination-bullet, .banner2 .swiper-pagination .swiper-pagination-bullet {
border-color: var(--main-color-primary);
background: var(--main-color-primary);
}
.slideshow_main.swiper .swiper-pagination .swiper-pagination-bullet-active, .banner2 .swiper-pagination .swiper-pagination-bullet-active {
background: var(--main-color-pure-white);
}
}
@media (min-width: 768px) {
.slideshow_main.swiper .contentText, .banner2 .contentText {
overflow: hidden;
}
.slideshow_main.swiper .contentText .textcontent, .banner2 .contentText .textcontent {
position: relative;
overflow: hidden;
z-index: 1;
}
.slideshow_main.swiper .contentText.contentText--left:after, .banner2 .contentText.contentText--left:after {
content: "";
position: absolute;
background: #FFFFFF 0% 0% no-repeat padding-box;
opacity: 0.6;
filter: blur(70px);
bottom: -450px;
left: -450px;
border-radius: 50%;
width: 900px;
height: 900px;
}
}
@media (min-width: 1540px) {
.slideshow_main.swiper .contentText .textcontent, .banner2 .contentText .textcontent {
padding-bottom: 100px;
}
.slideshow_main.swiper .contentText.contentText--left:after, .banner2 .contentText.contentText--left:after {
width: 1000px;
height: 1000px;
}
.slideshow_main.swiper .swiper-pagination, .banner2 .swiper-pagination {
width: auto;
position: absolute;
bottom: 40px;
left: 60px;
}
}
.slideshow_badgeWrapper {
display: flex;
}
.slideshow_badge {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: auto;
margin-bottom: -30px;
margin-left: -10px;
max-width: 90px;
}
.slideshow_badge > span {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
color: var(--main-color-white);
font-size: 2.4rem;
}
@media (min-width: 1250px) {
.slideshow_badge {
max-width: 190px;
}
.slideshow_badge > span {
font-size: 4.8rem;
}
}
/*
Slidecontent
Markup:
Styleguide Siteparts.Slidecontent
*/
body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem {
border-bottom: 1px solid var(--main-color-primary-pastelblue);
margin-bottom: 10px;
}
body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem:not(:last-child) {
margin-bottom: 10px;
}
body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem__headline {
position: relative;
font-size: 16px;
color: var(--main-color-dark-gray);
padding: 10px;
padding-left: 0;
padding-right: 30px;
cursor: pointer;
}
body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem__headline:after {
content: "\e005";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: 0;
top: 50%;
font-size: 20px;
width: 20px;
text-align: center;
transition: 0.2s ease-in-out;
translate: 0 -50%;
}
body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem__headline:hover, body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem__headline:active, body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem__headline:focus {
color: var(--main-color-primary);
}
body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem__content {
display: none;
padding: 10px 10px 20px 10px;
}
body:not(:has(.itemcardTabselect__tabs)) .slidecontentItem.is-active .slidecontentItem__headline:after {
rotate: 180deg;
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__headline {
position: relative;
font-size: 16px;
color: var(--main-color-dark-gray);
padding: 0;
padding-right: 30px;
cursor: pointer;
font-weight: var(--main-font-weight-bold);
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__headline:after {
content: "\e005";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: 0;
top: 50%;
font-size: 20px;
width: 20px;
text-align: center;
transition: 0.2s ease-in-out;
translate: 0 -50%;
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__headline:hover, body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__headline:active, body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__headline:focus {
color: var(--main-color-primary);
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__content {
display: none;
padding: 0;
max-height: 400px;
overflow: auto;
padding-right: 4px;
scrollbar-gutter: stable;
margin-top: 16px;
scrollbar-width: auto;
scrollbar-color: var(--main-color-light-gray);
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__content::-webkit-scrollbar {
width: 12px;
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__content::-webkit-scrollbar-track {
background: var(--main-color-light-gray);
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem__content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #003399 0%, #0088CB 100%);
border-radius: 11px;
min-height: 120px;
}
body:has(.slidecontent--customazation) .slidecontent--customazation .slidecontentItem.is-active .slidecontentItem__headline:after {
rotate: 180deg;
}
@media (max-width: 767px) {
.itemcardTabselect__tabs .slidecontentItem {
border-bottom: 1px solid var(--main-color-primary-pastelblue);
margin-bottom: 10px;
}
.itemcardTabselect__tabs .slidecontentItem:not(:last-child) {
margin-bottom: 10px;
}
.itemcardTabselect__tabs .slidecontentItem__headline {
position: relative;
font-size: 16px;
color: var(--main-color-dark-gray);
padding: 10px;
padding-left: 0;
padding-right: 30px;
cursor: pointer;
}
.itemcardTabselect__tabs .slidecontentItem__headline:after {
content: "\e005";
font-family: "icons", Helvetica, Arial, sans-serif;
position: absolute;
right: 0;
top: 50%;
font-size: 20px;
width: 20px;
text-align: center;
transition: 0.2s ease-in-out;
translate: 0 -50%;
}
.itemcardTabselect__tabs .slidecontentItem__headline:hover, .itemcardTabselect__tabs .slidecontentItem__headline:active, .itemcardTabselect__tabs .slidecontentItem__headline:focus {
color: var(--main-color-primary);
}
.itemcardTabselect__tabs .slidecontentItem__content {
display: none;
padding: 10px 0 20px 0;
}
.itemcardTabselect__tabs .slidecontentItem.is-active .slidecontentItem__headline:after {
rotate: 180deg;
}
}
.slidecontent--favorites {
max-width: 500px;
margin-bottom: 16px;
}
.gradientText > div > * {
background: linear-gradient(270deg, #003399 0%, #0088CB 100%);
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradientText > div > * {
width: auto;
}
/*# sourceMappingURL=main.css.map */
