@charset "UTF-8"; /* Icons Markup:
icons-custom icons-custom-kitchen icons-custom icons-custom-palette
Styleguide Base.Icons */ @font-face { font-family: "icons-custom"; font-display: swap; src: url("../fonts/icons-custom.woff2") format("woff2"), url("../fonts/icons-custom.woff") format("woff"); } .icons-custom, .icon-palette, .icon-attribute-INKLKUECHE { font-family: "icons-custom"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } :root { --base-icon-kitchen: ""; --base-icon-palette: ""; } .icons-custom-kitchen:before { content: var(--base-icon-kitchen); } .icons-custom-palette:before { content: var(--base-icon-palette); } /* */ /* public-sans-regular - latin */ @font-face { font-family: Khand; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Khand-Regular.woff2") format("woff2"), url("../fonts/Khand-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: Khand; font-style: normal; font-display: swap; font-weight: bold; src: url("../fonts/Khand-SemiBold.woff2") format("woff2"), url("../fonts/Khand-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: Khand; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/Khand-SemiBold.woff2") format("woff2"), url("../fonts/Khand-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: Khand; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/Khand-Bold.woff2") format("woff2"), url("../fonts/Khand-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: Khand; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/Khand-Medium.woff2") format("woff2"), url("../fonts/Khand-Medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --main-color-white: #ffffff; --main-color-black: #151515; --main-color-gray-base: #ababab; --main-color-middle-gray: #888888; --main-color-dark-gray: #444444; --main-color-light-gray: #cccccc; --main-color-primary: #FFDE00; --main-color-primary-dark: #e6c800; --main-color-primary-darken: #ccb200; --main-color-secondary: #ffe533; --main-color-action: #FFDE00; --main-color-danger: #D00000; --main-color-danger-dark: #bf2828; --main-color-warning: #FFA600; --main-color-warning-dark: #e98a00; --main-color-success: #00b265; --main-color-success-dark: #9ec40d; --main-color-info: #cccccc; --main-color-primary-contrast: var(--main-color-black); --main-color-primary-dark-contrast: var(--main-color-black); --main-color-primary-darken-contrast: var(--main-color-black); --main-color-secondary-contrast: var(--main-color-white); --main-color-action-contrast: var(--main-color-white); --main-color-danger-contrast: var(--main-color-white); --main-color-danger-dark-contrast: var(--main-color-white); --main-color-warning-contrast: colorTextContrast(#FFA600); --main-color-warning-dark-contrast: colorTextContrast(#e98a00); --main-color-success-contrast: var(--main-color-white); --main-color-success-dark-contrast: colorTextContrast(#9ec40d); --main-color-info-contrast: colorTextContrast(#cccccc); --main-font-family: Khand,Helvetica, Arial, sans-serif; --main-font-weight: 400; --main-font-weight-medium: 500; --main-font-weight-bold: 600; --main-font-weight-xbold: 700; --main-font-size-base: 1.8rem; --main-font-size-small: 1.6rem; --main-font-size-big: 2.2rem; --main-line-height: 1.5; --main-link-color: var(--main-color-black); --main-link-color-hover: #FFDE00; } body { background-color: var(--main-color-black); } button, .button { border-radius: 4px; background: transparent; color: var(--main-color-black); border-color: var(--main-color-black); line-height: 20px; padding: 8px 24px; font-size: 18px; position: relative; font-weight: var(--main-font-weight-medium); transition: 0.2s linear; } button:after, .button:after { content: var(--base-icon-arrow-right); font-family: "icons", Helvetica, Arial, sans-serif; position: absolute; top: 50%; opacity: 0; transform: translateY(-50%); transition: 0.2s ease-in-out; font-size: 0.8em; right: 16px; } @media (min-width: 768px) { button:after, .button:after { right: 32px; } } @media (min-width: 1025px) { button, .button { padding: 14px 40px; font-size: 20px; } button:after, .button:after { font-size: 0.9em; } } button:has(.icon):after, .button:has(.icon):after { display: none; } button .icon, .button .icon { font-size: 1em; margin-top: -2px; } button:hover:not(:has(.icon)):not(.button--sm), button:focus:not(:has(.icon)):not(.button--sm), button:active:not(:has(.icon)):not(.button--sm), .button:hover:not(:has(.icon)):not(.button--sm), .button:focus:not(:has(.icon)):not(.button--sm), .button:active:not(:has(.icon)):not(.button--sm) { padding-left: 16px; padding-right: 32px; } @media (min-width: 1025px) { button:hover:not(:has(.icon)):not(.button--sm), button:focus:not(:has(.icon)):not(.button--sm), button:active:not(:has(.icon)):not(.button--sm), .button:hover:not(:has(.icon)):not(.button--sm), .button:focus:not(:has(.icon)):not(.button--sm), .button:active:not(:has(.icon)):not(.button--sm) { padding-left: 30px; padding-right: 50px; } } button:hover:after, button:focus:after, button:active:after, .button:hover:after, .button:focus:after, .button:active:after { opacity: 1; right: 10px; } @media (min-width: 768px) { button:hover:after, button:focus:after, button:active:after, .button:hover:after, .button:focus:after, .button:active:after { right: 24px; } } button:hover, button:focus, .button:hover, .button:focus { background: var(--main-color-primary); border-color: var(--main-color-primary); color: var(--main-color-black); } button:active, .button:active { background: var(--main-color-primary-dark); border-color: var(--main-color-primary-dark); color: var(--main-color-black); } button--primary, .button--primary { background: var(--main-color-primary); color: var(--main-color-primary-contrast); border-color: var(--main-color-primary); } button--primary:hover, button--primary:focus, .button--primary:hover, .button--primary:focus { background: var(--main-color-primary); border-color: var(--main-color-primary); color: var(--main-color-primary-contrast); } button--primary:active, .button--primary:active { background: var(--main-color-primary-darken); border-color: var(--main-color-primary-darken); color: var(--main-color-primary-darken-contrast); } button--action, .button--action { background: var(--main-color-black); color: var(--main-color-primary); border-color: var(--main-color-black); } button--action:hover, button--action:focus, .button--action:hover, .button--action:focus { background: var(--main-color-primary); border-color: var(--main-color-primary); color: var(--main-color-black); } button--action:active, .button--action:active { background: var(--main-color-primary-dark); border-color: var(--main-color-primary-dark); color: var(--main-color-black); } 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-white); } button--danger:active, .button--danger:active { background: var(--main-color-danger-darken); border-color: var(--main-color-danger-darken); color: var(--main-color-white); } button--sm, .button--sm { padding: 8px 16px; font-size: 16px; } button--sm:after, .button--sm:after { display: none; } @media (min-width: 768px) { button--sm, .button--sm { padding: 11px 24px; font-size: 18px; } } button--bouncedIcon .icon, .button--bouncedIcon .icon { animation: bounceIcon 2s ease-in-out infinite; } .buttonLink { all: unset; cursor: pointer; background: transparent; border: 0; padding: 0; text-decoration: none; text-transform: uppercase; font-size: 2rem; font-weight: var(--main-font-weight-bold); display: inline-flex; align-items: center; line-height: 1; position: relative; padding-right: 30px; } .buttonLink:after { all: unset; content: var(--base-icon-arrow-right); font-family: "icons", Helvetica, Arial, sans-serif; width: auto; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); margin-top: -2px; transition: all 0.2s ease-in-out; } .buttonLink:hover, .buttonLink:focus, .buttonLink:active { color: var(--main-color-primary); text-decoration: none; } .buttonLink:hover:after, .buttonLink:focus:after, .buttonLink:active:after { width: auto; right: 0; } @media (max-width: 481px) { .buttonRow, .buttonRowBottom, .buttonRowTop { text-align: left; } .buttonRow .button, .buttonRow .buttonLink, .buttonRowBottom .button, .buttonRowBottom .buttonLink, .buttonRowTop .button, .buttonRowTop .buttonLink { min-width: 0; } } @keyframes bounceIcon { 0% { transform: translateY(-10%); } 70% { transform: translateY(10%); } 100% { transform: translateY(-10%); } } .actionIcon .icon { pointer-events: none; } .bg--white { background-color: #ffffff; } .border--white { border-color: #ffffff; } .color--white { color: #ffffff; } .color--white a:not(:hover):not(:focus):not(:active), .color--white .link:not(:hover):not(:focus):not(:active) { color: #ffffff; } .bg--black { background-color: #151515; color: colorTextContrast(#151515); } .bg--black a:not(.button), .bg--black .link { color: colorTextContrast(#151515); } .border--black { border-color: #151515; } .color--black { color: #151515; } .color--black a:not(:hover):not(:focus):not(:active), .color--black .link:not(:hover):not(:focus):not(:active) { color: #151515; } .bg--gray-base { background-color: #ababab; color: colorTextContrast(#ababab); } .bg--gray-base a:not(.button), .bg--gray-base .link { color: colorTextContrast(#ababab); } .border--gray-base { border-color: #ababab; } .color--gray-base { color: #ababab; } .color--gray-base a:not(:hover):not(:focus):not(:active), .color--gray-base .link:not(:hover):not(:focus):not(:active) { color: #ababab; } .bg--middle-gray { background-color: #888888; color: colorTextContrast(#888888); } .bg--middle-gray a:not(.button), .bg--middle-gray .link { color: colorTextContrast(#888888); } .border--middle-gray { border-color: #888888; } .color--middle-gray { color: #888888; } .color--middle-gray a:not(:hover):not(:focus):not(:active), .color--middle-gray .link:not(:hover):not(:focus):not(:active) { color: #888888; } .bg--dark-gray { background-color: #444444; color: colorTextContrast(#444444); } .bg--dark-gray a:not(.button), .bg--dark-gray .link { color: colorTextContrast(#444444); } .border--dark-gray { border-color: #444444; } .color--dark-gray { color: #444444; } .color--dark-gray a:not(:hover):not(:focus):not(:active), .color--dark-gray .link:not(:hover):not(:focus):not(:active) { color: #444444; } .bg--light-gray { background-color: #cccccc; color: colorTextContrast(#cccccc); } .bg--light-gray a:not(.button), .bg--light-gray .link { color: colorTextContrast(#cccccc); } .border--light-gray { border-color: #cccccc; } .color--light-gray { color: #cccccc; } .color--light-gray a:not(:hover):not(:focus):not(:active), .color--light-gray .link:not(:hover):not(:focus):not(:active) { color: #cccccc; } .bg--primary { background-color: #FFDE00; color: colorTextContrast(#FFDE00); } .bg--primary a:not(.button), .bg--primary .link { color: colorTextContrast(#FFDE00); } .border--primary { border-color: #FFDE00; } .color--primary { color: #FFDE00; } .color--primary a:not(:hover):not(:focus):not(:active), .color--primary .link:not(:hover):not(:focus):not(:active) { color: #FFDE00; } .bg--primary-dark { background-color: #e6c800; color: colorTextContrast(#e6c800); } .bg--primary-dark a:not(.button), .bg--primary-dark .link { color: colorTextContrast(#e6c800); } .border--primary-dark { border-color: #e6c800; } .color--primary-dark { color: #e6c800; } .color--primary-dark a:not(:hover):not(:focus):not(:active), .color--primary-dark .link:not(:hover):not(:focus):not(:active) { color: #e6c800; } .bg--primary-darken { background-color: #ccb200; color: colorTextContrast(#ccb200); } .bg--primary-darken a:not(.button), .bg--primary-darken .link { color: colorTextContrast(#ccb200); } .border--primary-darken { border-color: #ccb200; } .color--primary-darken { color: #ccb200; } .color--primary-darken a:not(:hover):not(:focus):not(:active), .color--primary-darken .link:not(:hover):not(:focus):not(:active) { color: #ccb200; } .bg--secondary { background-color: #ffe533; color: colorTextContrast(#ffe533); } .bg--secondary a:not(.button), .bg--secondary .link { color: colorTextContrast(#ffe533); } .border--secondary { border-color: #ffe533; } .color--secondary { color: #ffe533; } .color--secondary a:not(:hover):not(:focus):not(:active), .color--secondary .link:not(:hover):not(:focus):not(:active) { color: #ffe533; } .bg--action { background-color: #FFDE00; color: colorTextContrast(#FFDE00); } .bg--action a:not(.button), .bg--action .link { color: colorTextContrast(#FFDE00); } .border--action { border-color: #FFDE00; } .color--action { color: #FFDE00; } .color--action a:not(:hover):not(:focus):not(:active), .color--action .link:not(:hover):not(:focus):not(:active) { color: #FFDE00; } .bg--danger { background-color: #D00000; color: colorTextContrast(#D00000); } .bg--danger a:not(.button), .bg--danger .link { color: colorTextContrast(#D00000); } .border--danger { border-color: #D00000; } .color--danger { color: #D00000; } .color--danger a:not(:hover):not(:focus):not(:active), .color--danger .link:not(:hover):not(:focus):not(:active) { color: #D00000; } .bg--warning { background-color: #FFA600; color: colorTextContrast(#FFA600); } .bg--warning a:not(.button), .bg--warning .link { color: colorTextContrast(#FFA600); } .border--warning { border-color: #FFA600; } .color--warning { color: #FFA600; } .color--warning a:not(:hover):not(:focus):not(:active), .color--warning .link:not(:hover):not(:focus):not(:active) { color: #FFA600; } .bg--success { background-color: #00b265; color: colorTextContrast(#00b265); } .bg--success a:not(.button), .bg--success .link { color: colorTextContrast(#00b265); } .border--success { border-color: #00b265; } .color--success { color: #00b265; } .color--success a:not(:hover):not(:focus):not(:active), .color--success .link:not(:hover):not(:focus):not(:active) { color: #00b265; } .bg--info { background-color: #cccccc; color: colorTextContrast(#cccccc); } .bg--info a:not(.button), .bg--info .link { color: colorTextContrast(#cccccc); } .border--info { border-color: #cccccc; } .color--info { color: #cccccc; } .color--info a:not(:hover):not(:focus):not(:active), .color--info .link:not(:hover):not(:focus):not(:active) { color: #cccccc; } .bg--black h1:not(.color--white), .bg--black h2:not(.color--white), .bg--black h4:not(.color--white), .bg--black h5:not(.color--white), .bg--black h6:not(.color--white), .bg--black .h1:not(.color--white), .bg--black .historyEilaItem__year:not(.color--white), .bg--black .h2:not(.color--white), .bg--black .horizontalInfoSlide__headline:not(.color--white), .bg--black .h4:not(.color--white), .bg--black .h5:not(.color--white), .bg--black .heroForm__boxHeadline h3:not(.color--white), .heroForm__boxHeadline .bg--black h3:not(.color--white), .bg--black .heroForm__boxHeadline .h3:not(.color--white), .heroForm__boxHeadline .bg--black .h3:not(.color--white), .bg--black .h6:not(.color--white), .bg--black .historyEilaItem__headline:not(.color--white) { color: var(--main-color-primary); } .bg--black .button:not(:hover):not(:focus):not(:active):not(.button--primary):not(.button--action) { color: var(--main-color-white); border-color: var(--main-color-white); } .bg--black ul li::marker { color: var(--main-color-primary); } .bg--black .infieldInputGroup label { color: var(--main-color-black); } .bg--black .color--dark-gray { color: var(--main-color-white); } .bg--middle-gray, .bg--dark-gray { color: var(--main-color-white); } .bg--middle-gray h1, .bg--middle-gray h2, .bg--middle-gray h3, .bg--middle-gray h4, .bg--middle-gray h5, .bg--middle-gray h6, .bg--middle-gray .h1, .bg--middle-gray .historyEilaItem__year, .bg--middle-gray .h2, .bg--middle-gray .horizontalInfoSlide__headline, .bg--middle-gray .h3, .bg--middle-gray .h4, .bg--middle-gray .h5, .bg--middle-gray .h6, .bg--middle-gray .historyEilaItem__headline, .bg--dark-gray h1, .bg--dark-gray h2, .bg--dark-gray h3, .bg--dark-gray h4, .bg--dark-gray h5, .bg--dark-gray h6, .bg--dark-gray .h1, .bg--dark-gray .historyEilaItem__year, .bg--dark-gray .h2, .bg--dark-gray .horizontalInfoSlide__headline, .bg--dark-gray .h3, .bg--dark-gray .h4, .bg--dark-gray .h5, .bg--dark-gray .h6, .bg--dark-gray .historyEilaItem__headline { color: var(--main-color-primary); } .bg--middle-gray .color--dark-gray, .bg--dark-gray .color--dark-gray { color: var(--main-color-white); } .bg--primary .button--primary, .bg--primary .button--action { background: var(--main-color-black); color: var(--main-color-white); border-color: var(--main-color-black); } .bg--primary .button--primary:hover, .bg--primary .button--primary:focus, .bg--primary .button--action:hover, .bg--primary .button--action:focus { color: var(--main-color-black); background: var(--main-color-primary-dark); border-color: var(--main-color-primary-dark); } .bg--primary .button--primary:active, .bg--primary .button--action:active { color: var(--main-color-black); background: var(--main-color-primary-darken); border-color: var(--main-color-primary-darken); } .bg--secondary, .bg--action { color: var(--main-color-black); } .bg--secondary .link, .bg--secondary a:not(.button), .bg--action .link, .bg--action a:not(.button) { color: var(--main-color-black); } .bg--secondary button:hover, .bg--secondary button:focus, .bg--secondary .button:hover, .bg--secondary .button:focus, .bg--action button:hover, .bg--action button:focus, .bg--action .button:hover, .bg--action .button:focus { color: var(--main-color-black); background: var(--main-color-primary-dark); border-color: var(--main-color-primary-dark); } .bg--secondary button:active, .bg--secondary .button:active, .bg--action button:active, .bg--action .button:active { color: var(--main-color-black); background: var(--main-color-primary-darken); border-color: var(--main-color-primary-darken); } .bg--secondary .button--primary, .bg--secondary .button--action, .bg--action .button--primary, .bg--action .button--action { background: var(--main-color-black); color: var(--main-color-white); border-color: var(--main-color-black); } .bg--secondary .button--primary:hover, .bg--secondary .button--primary:focus, .bg--secondary .button--action:hover, .bg--secondary .button--action:focus, .bg--action .button--primary:hover, .bg--action .button--primary:focus, .bg--action .button--action:hover, .bg--action .button--action:focus { color: var(--main-color-black); background: var(--main-color-primary-dark); border-color: var(--main-color-primary-dark); } .bg--secondary .button--primary:active, .bg--secondary .button--action:active, .bg--action .button--primary:active, .bg--action .button--action:active { color: var(--main-color-black); background: var(--main-color-primary-darken); border-color: var(--main-color-primary-darken); } h1, .h1, .historyEilaItem__year, h2, .h2, .heroForm__headline h1, .heroForm__headline .h1, .heroForm__headline .historyEilaItem__year, .horizontalInfoSlide__headline, h3, .h3, h4, .h4, h5, .h5, .heroForm__boxHeadline h1, .heroForm__boxHeadline h2, .heroForm__boxHeadline h3, .heroForm__boxHeadline h4, .heroForm__boxHeadline h5, .heroForm__boxHeadline h6, .heroForm__boxHeadline .h1, .heroForm__boxHeadline .historyEilaItem__year, .heroForm__boxHeadline .h2, .heroForm__boxHeadline .horizontalInfoSlide__headline, .heroForm__boxHeadline .h3, .heroForm__boxHeadline .h4, .heroForm__boxHeadline .h5, .heroForm__boxHeadline .h6, .heroForm__boxHeadline .historyEilaItem__headline, h6, .h6, .historyEilaItem__headline { all: unset; display: block; font-weight: var(--main-font-weight-bold); text-transform: uppercase; line-height: 1.05; margin: 0; margin-bottom: clamp(10px, 1em, 20px); } h1.highlighted, .h1.highlighted, .highlighted.historyEilaItem__year, h2.highlighted, .h2.highlighted, .highlighted.horizontalInfoSlide__headline, h3.highlighted, .h3.highlighted, h4.highlighted, .h4.highlighted, h5.highlighted, .h5.highlighted, h6.highlighted, .h6.highlighted, .highlighted.historyEilaItem__headline { font-weight: var(--main-font-weight); line-height: 1; } h1, .h1, .historyEilaItem__year { margin-bottom: clamp(10px, 1em, 30px); text-transform: uppercase; line-height: 1; font-weight: var(--main-font-weight-xbold); font-size: 3.8rem; } @media (min-width: 768px) { h1, .h1, .historyEilaItem__year { font-size: 4.9rem; } } @media (min-width: 1024px) { h1, .h1, .historyEilaItem__year { font-size: 5.8rem; } } @media (min-width: 1250px) { h1, .h1, .historyEilaItem__year { font-size: 7rem; } } @media (min-width: 1540px) { h1, .h1, .historyEilaItem__year { font-size: 10rem; } } h2, .h2, .heroForm__headline h1, .heroForm__headline .h1, .heroForm__headline .historyEilaItem__year, .horizontalInfoSlide__headline { font-size: 3.4rem; } @media (min-width: 768px) { h2, .h2, .heroForm__headline h1, .heroForm__headline .h1, .heroForm__headline .historyEilaItem__year, .horizontalInfoSlide__headline { font-size: 4.09rem; } } @media (min-width: 1024px) { h2, .h2, .heroForm__headline h1, .heroForm__headline .h1, .heroForm__headline .historyEilaItem__year, .horizontalInfoSlide__headline { font-size: 4.78rem; } } @media (min-width: 1250px) { h2, .h2, .heroForm__headline h1, .heroForm__headline .h1, .heroForm__headline .historyEilaItem__year, .horizontalInfoSlide__headline { font-size: 5.7rem; } } @media (min-width: 1540px) { h2, .h2, .heroForm__headline h1, .heroForm__headline .h1, .heroForm__headline .historyEilaItem__year, .horizontalInfoSlide__headline { font-size: 8rem; } } h3, .h3 { font-size: 2.4rem; } @media (min-width: 768px) { h3, .h3 { font-size: 2.76rem; } } @media (min-width: 1024px) { h3, .h3 { font-size: 3.12rem; } } @media (min-width: 1250px) { h3, .h3 { font-size: 3.6rem; } } @media (min-width: 1540px) { h3, .h3 { font-size: 4.8rem; } } h4, .h4 { line-height: 1; text-transform: none; font-size: 2.2rem; } @media (min-width: 768px) { h4, .h4 { font-size: 2.47rem; } } @media (min-width: 1024px) { h4, .h4 { font-size: 2.74rem; } } @media (min-width: 1250px) { h4, .h4 { font-size: 3.1rem; } } @media (min-width: 1540px) { h4, .h4 { font-size: 4rem; } } h5, .h5, .heroForm__boxHeadline h1, .heroForm__boxHeadline h2, .heroForm__boxHeadline h3, .heroForm__boxHeadline h4, .heroForm__boxHeadline h5, .heroForm__boxHeadline h6, .heroForm__boxHeadline .h1, .heroForm__boxHeadline .historyEilaItem__year, .heroForm__boxHeadline .h2, .heroForm__boxHeadline .horizontalInfoSlide__headline, .heroForm__boxHeadline .h3, .heroForm__boxHeadline .h4, .heroForm__boxHeadline .h5, .heroForm__boxHeadline .h6, .heroForm__boxHeadline .historyEilaItem__headline { font-size: 2rem; } @media (min-width: 768px) { h5, .h5, .heroForm__boxHeadline h1, .heroForm__boxHeadline h2, .heroForm__boxHeadline h3, .heroForm__boxHeadline h4, .heroForm__boxHeadline h5, .heroForm__boxHeadline h6, .heroForm__boxHeadline .h1, .heroForm__boxHeadline .historyEilaItem__year, .heroForm__boxHeadline .h2, .heroForm__boxHeadline .horizontalInfoSlide__headline, .heroForm__boxHeadline .h3, .heroForm__boxHeadline .h4, .heroForm__boxHeadline .h5, .heroForm__boxHeadline .h6, .heroForm__boxHeadline .historyEilaItem__headline { font-size: 2.24rem; } } @media (min-width: 1024px) { h5, .h5, .heroForm__boxHeadline h1, .heroForm__boxHeadline h2, .heroForm__boxHeadline h3, .heroForm__boxHeadline h4, .heroForm__boxHeadline h5, .heroForm__boxHeadline h6, .heroForm__boxHeadline .h1, .heroForm__boxHeadline .historyEilaItem__year, .heroForm__boxHeadline .h2, .heroForm__boxHeadline .horizontalInfoSlide__headline, .heroForm__boxHeadline .h3, .heroForm__boxHeadline .h4, .heroForm__boxHeadline .h5, .heroForm__boxHeadline .h6, .heroForm__boxHeadline .historyEilaItem__headline { font-size: 2.48rem; } } @media (min-width: 1250px) { h5, .h5, .heroForm__boxHeadline h1, .heroForm__boxHeadline h2, .heroForm__boxHeadline h3, .heroForm__boxHeadline h4, .heroForm__boxHeadline h5, .heroForm__boxHeadline h6, .heroForm__boxHeadline .h1, .heroForm__boxHeadline .historyEilaItem__year, .heroForm__boxHeadline .h2, .heroForm__boxHeadline .horizontalInfoSlide__headline, .heroForm__boxHeadline .h3, .heroForm__boxHeadline .h4, .heroForm__boxHeadline .h5, .heroForm__boxHeadline .h6, .heroForm__boxHeadline .historyEilaItem__headline { font-size: 2.8rem; } } @media (min-width: 1540px) { h5, .h5, .heroForm__boxHeadline h1, .heroForm__boxHeadline h2, .heroForm__boxHeadline h3, .heroForm__boxHeadline h4, .heroForm__boxHeadline h5, .heroForm__boxHeadline h6, .heroForm__boxHeadline .h1, .heroForm__boxHeadline .historyEilaItem__year, .heroForm__boxHeadline .h2, .heroForm__boxHeadline .horizontalInfoSlide__headline, .heroForm__boxHeadline .h3, .heroForm__boxHeadline .h4, .heroForm__boxHeadline .h5, .heroForm__boxHeadline .h6, .heroForm__boxHeadline .historyEilaItem__headline { font-size: 3.6rem; } } h6, .h6, .historyEilaItem__headline { font-size: 2rem; } @media (min-width: 768px) { h6, .h6, .historyEilaItem__headline { font-size: 2.18rem; } } @media (min-width: 1024px) { h6, .h6, .historyEilaItem__headline { font-size: 2.36rem; } } @media (min-width: 1250px) { h6, .h6, .historyEilaItem__headline { font-size: 2.6rem; } } @media (min-width: 1540px) { h6, .h6, .historyEilaItem__headline { font-size: 3.2rem; } } .icon-attribute-PERSONENANZAHL:before { content: var(--base-icon-users); } .icon-attribute-GROESSE:before { content: var(--base-icon-expand); } .icon-attribute-AUFBAUZEIT:before { content: var(--base-icon-clock); } .icon-attribute-GEWICHT:before { content: var(--base-icon-shipping); } .icon-attribute-INKLKUECHE:before { content: var(--base-icon-kitchen); } .icon-palette:before { content: var(--base-icon-palette); } /* 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,
--small - Small Padding --middle - Middle Padding --large - Large Padding --xlarge - xLarge Padding Styleguide Structure.Paddings */ .padding { padding: 16px; } .paddingTop { padding-top: 16px; } .paddingRight { padding-right: 16px; } .paddingBottom { padding-bottom: 16px; } .paddingLeft { padding-left: 16px; } .p--small { padding: 24px; } .pt--small { padding-top: 24px; } .pr--small { padding-right: 24px; } .pb--small { padding-bottom: 24px; } .pl--small { padding-left: 24px; } .padding--small { padding: 24px; } .paddingTop--small { padding-top: 24px; } .paddingRight--small { padding-right: 24px; } .paddingBottom--small { padding-bottom: 24px; } .paddingLeft--small { padding-left: 24px; } .p--middle { padding: 48px; } .pt--middle { padding-top: 48px; } .pr--middle { padding-right: 48px; } .pb--middle { padding-bottom: 48px; } .pl--middle { padding-left: 48px; } .padding--middle { padding: 48px; } .paddingTop--middle { padding-top: 48px; } .paddingRight--middle { padding-right: 48px; } .paddingBottom--middle { padding-bottom: 48px; } .paddingLeft--middle { padding-left: 48px; } .p--large { padding: 62px; } .pt--large { padding-top: 62px; } .pr--large { padding-right: 62px; } .pb--large { padding-bottom: 62px; } .pl--large { padding-left: 62px; } .padding--large { padding: 62px; } .paddingTop--large { padding-top: 62px; } .paddingRight--large { padding-right: 62px; } .paddingBottom--large { padding-bottom: 62px; } .paddingLeft--large { padding-left: 62px; } .p--xlarge { padding: 124px; } .pt--xlarge { padding-top: 124px; } .pr--xlarge { padding-right: 124px; } .pb--xlarge { padding-bottom: 124px; } .pl--xlarge { padding-left: 124px; } .padding--xlarge { padding: 124px; } .paddingTop--xlarge { padding-top: 124px; } .paddingRight--xlarge { padding-right: 124px; } .paddingBottom--xlarge { padding-bottom: 124px; } .paddingLeft--xlarge { padding-left: 124px; } @media (max-width: 767.98px) { .p--large { padding: 24px; } .pt--large { padding-top: 24px; } .pr--large { padding-right: 24px; } .pb--large { padding-bottom: 24px; } .pl--large { padding-left: 24px; } .padding--large { padding: 24px; } .paddingTop--large { padding-top: 24px; } .paddingRight--large { padding-right: 24px; } .paddingBottom--large { padding-bottom: 24px; } .paddingLeft--large { padding-left: 24px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .p--large { padding: 62px; } .pt--large { padding-top: 62px; } .pr--large { padding-right: 62px; } .pb--large { padding-bottom: 62px; } .pl--large { padding-left: 62px; } .padding--large { padding: 62px; } .paddingTop--large { padding-top: 62px; } .paddingRight--large { padding-right: 62px; } .paddingBottom--large { padding-bottom: 62px; } .paddingLeft--large { padding-left: 62px; } } @media (min-width: 1250px) and (max-width: 1539.98px) { .p--large { padding: 62px; } .pt--large { padding-top: 62px; } .pr--large { padding-right: 62px; } .pb--large { padding-bottom: 62px; } .pl--large { padding-left: 62px; } .padding--large { padding: 62px; } .paddingTop--large { padding-top: 62px; } .paddingRight--large { padding-right: 62px; } .paddingBottom--large { padding-bottom: 62px; } .paddingLeft--large { padding-left: 62px; } } @media (min-width: 1540px) { .p--large { padding: 62px; } .pt--large { padding-top: 62px; } .pr--large { padding-right: 62px; } .pb--large { padding-bottom: 62px; } .pl--large { padding-left: 62px; } .padding--large { padding: 62px; } .paddingTop--large { padding-top: 62px; } .paddingRight--large { padding-right: 62px; } .paddingBottom--large { padding-bottom: 62px; } .paddingLeft--large { padding-left: 62px; } } @media (max-width: 767.98px) { .p--xlarge { padding: 48px; } .pt--xlarge { padding-top: 48px; } .pr--xlarge { padding-right: 48px; } .pb--xlarge { padding-bottom: 48px; } .pl--xlarge { padding-left: 48px; } .padding--xlarge { padding: 48px; } .paddingTop--xlarge { padding-top: 48px; } .paddingRight--xlarge { padding-right: 48px; } .paddingBottom--xlarge { padding-bottom: 48px; } .paddingLeft--xlarge { padding-left: 48px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .p--xlarge { padding: 96px; } .pt--xlarge { padding-top: 96px; } .pr--xlarge { padding-right: 96px; } .pb--xlarge { padding-bottom: 96px; } .pl--xlarge { padding-left: 96px; } .padding--xlarge { padding: 96px; } .paddingTop--xlarge { padding-top: 96px; } .paddingRight--xlarge { padding-right: 96px; } .paddingBottom--xlarge { padding-bottom: 96px; } .paddingLeft--xlarge { padding-left: 96px; } } @media (min-width: 1250px) and (max-width: 1539.98px) { .p--xlarge { padding: 124px; } .pt--xlarge { padding-top: 124px; } .pr--xlarge { padding-right: 124px; } .pb--xlarge { padding-bottom: 124px; } .pl--xlarge { padding-left: 124px; } .padding--xlarge { padding: 124px; } .paddingTop--xlarge { padding-top: 124px; } .paddingRight--xlarge { padding-right: 124px; } .paddingBottom--xlarge { padding-bottom: 124px; } .paddingLeft--xlarge { padding-left: 124px; } } @media (max-width: 767.98px) { .xs-padding { padding-bottom: 20px; } .xs-padding-base { padding-bottom: 16px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .sm-padding { padding-bottom: 20px; } .sm-padding-base { padding-bottom: 16px; } } @media (min-width: 1024px) and (max-width: 1249.98px) { .md-padding { padding-bottom: 20px; } .md-padding-base { padding-bottom: 16px; } } @media (min-width: 1250px) and (max-width: 1539.98px) { .lg-padding { padding-bottom: 20px; } .lg-padding-base { padding-bottom: 16px; } } @media (min-width: 1540px) { .xlg-padding { padding-bottom: 20px; } .xlg-padding-base { padding-bottom: 16px; } } :root { --paddingTopHeader: 120px; } @media (min-width: 768px) { :root { --paddingTopHeader: 160px; } } @media (min-width: 1025px) { :root { --paddingTopHeader: 200px; } } .paddingTopHeader { padding-top: var(--paddingTopHeader); } /* 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,
--small - Small Margin --middle - Middle Margin --large - Large Margin --xlarge - xLarge Margin Styleguide Structure.Margins */ .margin { margin: 16px; } .marginTop { margin-top: 16px; } .marginRight { margin-right: 16px; } .marginBottom { margin-bottom: 16px; } .marginLeft { margin-left: 16px; } .m--small { margin: 24px; } .mt--small { margin-top: 24px; } .mr--small { margin-right: 24px; } .mb--small { margin-bottom: 24px; } .ml--small { margin-left: 24px; } .margin--small { margin: 24px; } .marginTop--small { margin-top: 24px; } .marginRight--small { margin-right: 24px; } .marginBottom--small { margin-bottom: 24px; } .marginLeft--small { margin-left: 24px; } .m--middle { margin: 48px; } .mt--middle { margin-top: 48px; } .mr--middle { margin-right: 48px; } .mb--middle { margin-bottom: 48px; } .ml--middle { margin-left: 48px; } .margin--middle { margin: 48px; } .marginTop--middle { margin-top: 48px; } .marginRight--middle { margin-right: 48px; } .marginBottom--middle { margin-bottom: 48px; } .marginLeft--middle { margin-left: 48px; } .m--large { margin: 62px; } .mt--large { margin-top: 62px; } .mr--large { margin-right: 62px; } .mb--large { margin-bottom: 62px; } .ml--large { margin-left: 62px; } .margin--large { margin: 62px; } .marginTop--large { margin-top: 62px; } .marginRight--large { margin-right: 62px; } .marginBottom--large { margin-bottom: 62px; } .marginLeft--large { margin-left: 62px; } .m--xlarge { margin: 124px; } .mt--xlarge { margin-top: 124px; } .mr--xlarge { margin-right: 124px; } .mb--xlarge { margin-bottom: 124px; } .ml--xlarge { margin-left: 124px; } .margin--xlarge { margin: 124px; } .marginTop--xlarge { margin-top: 124px; } .marginRight--xlarge { margin-right: 124px; } .marginBottom--xlarge { margin-bottom: 124px; } .marginLeft--xlarge { margin-left: 124px; } @media (max-width: 767.98px) { .m--large { margin: 24px; } .mt--large { margin-top: 24px; } .mr--large { margin-right: 24px; } .mb--large { margin-bottom: 24px; } .ml--large { margin-left: 24px; } .margin--large { margin: 24px; } .marginTop--large { margin-top: 24px; } .marginRight--large { margin-right: 24px; } .marginBottom--large { margin-bottom: 24px; } .marginLeft--large { margin-left: 24px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .m--large { margin: 62px; } .mt--large { margin-top: 62px; } .mr--large { margin-right: 62px; } .mb--large { margin-bottom: 62px; } .ml--large { margin-left: 62px; } .margin--large { margin: 62px; } .marginTop--large { margin-top: 62px; } .marginRight--large { margin-right: 62px; } .marginBottom--large { margin-bottom: 62px; } .marginLeft--large { margin-left: 62px; } } @media (min-width: 1250px) and (max-width: 1539.98px) { .m--large { margin: 62px; } .mt--large { margin-top: 62px; } .mr--large { margin-right: 62px; } .mb--large { margin-bottom: 62px; } .ml--large { margin-left: 62px; } .margin--large { margin: 62px; } .marginTop--large { margin-top: 62px; } .marginRight--large { margin-right: 62px; } .marginBottom--large { margin-bottom: 62px; } .marginLeft--large { margin-left: 62px; } } @media (min-width: 1540px) { .m--large { margin: 62px; } .mt--large { margin-top: 62px; } .mr--large { margin-right: 62px; } .mb--large { margin-bottom: 62px; } .ml--large { margin-left: 62px; } .margin--large { margin: 62px; } .marginTop--large { margin-top: 62px; } .marginRight--large { margin-right: 62px; } .marginBottom--large { margin-bottom: 62px; } .marginLeft--large { margin-left: 62px; } } @media (max-width: 767.98px) { .m--xlarge { margin: 48px; } .mt--xlarge { margin-top: 48px; } .mr--xlarge { margin-right: 48px; } .mb--xlarge { margin-bottom: 48px; } .ml--xlarge { margin-left: 48px; } .margin--xlarge { margin: 48px; } .marginTop--xlarge { margin-top: 48px; } .marginRight--xlarge { margin-right: 48px; } .marginBottom--xlarge { margin-bottom: 48px; } .marginLeft--xlarge { margin-left: 48px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .m--xlarge { margin: 96px; } .mt--xlarge { margin-top: 96px; } .mr--xlarge { margin-right: 96px; } .mb--xlarge { margin-bottom: 96px; } .ml--xlarge { margin-left: 96px; } .margin--xlarge { margin: 96px; } .marginTop--xlarge { margin-top: 96px; } .marginRight--xlarge { margin-right: 96px; } .marginBottom--xlarge { margin-bottom: 96px; } .marginLeft--xlarge { margin-left: 96px; } } @media (min-width: 1250px) and (max-width: 1539.98px) { .m--xlarge { margin: 124px; } .mt--xlarge { margin-top: 124px; } .mr--xlarge { margin-right: 124px; } .mb--xlarge { margin-bottom: 124px; } .ml--xlarge { margin-left: 124px; } .margin--xlarge { margin: 124px; } .marginTop--xlarge { margin-top: 124px; } .marginRight--xlarge { margin-right: 124px; } .marginBottom--xlarge { margin-bottom: 124px; } .marginLeft--xlarge { margin-left: 124px; } } @media (max-width: 767.98px) { .xs-margin { margin-bottom: 20px; } .xs-margin-base { margin-bottom: 16px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .sm-margin { margin-bottom: 20px; } .sm-margin-base { margin-bottom: 16px; } } @media (min-width: 1024px) and (max-width: 1249.98px) { .md-margin { margin-bottom: 20px; } .md-margin-base { margin-bottom: 16px; } } @media (min-width: 1250px) and (max-width: 1539.98px) { .lg-margin { margin-bottom: 20px; } .lg-margin-base { margin-bottom: 16px; } } @media (min-width: 1540px) { .xlg-margin { margin-bottom: 20px; } .xlg-margin-base { margin-bottom: 16px; } } .paddingBottomOffset { padding-bottom: 300px; } @media (min-width: 1025px) { .paddingBottomOffset { padding-bottom: 400px; } } .marginTopOffset { margin-top: -246px; } @media (min-width: 1025px) { .marginTopOffset { margin-top: -300px; } } .container { max-width: 1436px; } .container--xsmall { max-width: 900px; } .container--small { max-width: 1240px; } .container--large { max-width: 1720px; } .container--full { max-width: 2100px; } #container { max-width: 2100px; margin-left: auto; margin-right: auto; } /* Text Align Responsive text alignment helper for content that is maintained in the CMS. The class only takes effect below the `sm` breakpoint (mobile), so an alignment that is set on the element for desktop stays untouched. Markup:
Button
Styleguide Structure.TextAlign */ @media (max-width: 767.98px) { .text-align-left-xs { text-align: left !important; } } .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid var(--main-color-primary); opacity: 1; border-radius: 6px; background-color: transparent; transition: width 0.3s ease; } .swiper-pagination-bullet-active { width: 60px; overflow: hidden; position: relative; background-color: transparent; } .swiper-pagination-bullet-active:after { content: ""; display: block; width: 100%; height: 100%; background-color: var(--main-color-primary); border-radius: 6px; position: absolute; left: 0; top: 0; transform-origin: left center; animation: fillBullet 5s linear forwards; } .swiper-pagination-bullet--hidden { display: none !important; } .swiper-pagination-bullet--edge { transform: scale(0.6); } .swiper-pagination--vertical { display: flex; flex-direction: column; gap: 12px; } .swiper-pagination--vertical .swiper-pagination-bullet-active { width: 12px; height: 60px; } .swiper-pagination--vertical .swiper-pagination-bullet-active:after { transform-origin: top center; animation: fillBulletVertical 5s linear forwards; } .swiper-button-next, .swiper-button-prev { font-size: 3.6rem; width: 36px; height: 36px; } @media (min-width: 768px) { .swiper-button-next, .swiper-button-prev { font-size: 4.2rem; width: 40px; height: 40px; } } .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-primary); } .swiper-pagination-lock, .swiper-button-lock { opacity: 0 !important; } .swiper:not(.swiper-initialized) .swiper-pagination-lock { display: flex; justify-content: center; } .swiper:not(.swiper-initialized) .swiper-pagination-lock .swiper-pagination-bullet:only-child { display: block !important; } @keyframes fillBullet { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes fillBulletVertical { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } .bg--primary .swiper-button-next:hover, .bg--primary .swiper-button-next:focus, .bg--primary .swiper-button-next:active, .bg--primary .swiper-button-prev:hover, .bg--primary .swiper-button-prev:focus, .bg--primary .swiper-button-prev:active { color: var(--main-color-black); } .navToggler { width: 32px; height: 32px; } @media (min-width: 768px) { .navToggler { width: 40px; height: 40px; } } .navToggler__bar { width: calc(100% - 12px); left: 6px; border-radius: 2px; } @media (max-width: 767px) { .navToggler__bar { height: 1px; } .navToggler__bar:first-child { top: 9px; } .navToggler__bar:last-child { bottom: 9px; } } @media (min-width: 768px) { .navToggler__bar { width: calc(100% - 20px); left: 10px; } } @media (max-width: 767px) { .navToggler.is-active .navToggler__bar:first-child { top: 15px; } } @media (max-width: 767px) { .navToggler.is-active .navToggler__bar:last-child { bottom: 16px; } } .nav ul > li { margin: 0; } .nav ul > li:hover > a, .nav ul > li:focus > a, .nav ul > li:active > a { color: var(--main-color-black); text-decoration: underline; } .nav a { color: var(--main-color-black); text-decoration: none; } .nav a:hover, .nav a:focus, .nav a:active { color: var(--main-color-black); text-decoration: underline; } @media (min-width: 768px) { .nav ul { margin-left: -8px; margin-right: -8px; } .nav ul > li { padding-left: 8px; padding-right: 8px; } } .mainnav > ul { font-size: 1.8rem; text-transform: uppercase; gap: 24px; } @media (min-width: 1025px) { .mainnav > ul { gap: 32px; } } .mainnav > ul > li { padding: 0; } .mainnav > ul > li > a, .mainnav > ul > li > span { color: var(--main-color-black); display: inline-block; } .mainnav > ul > li > a:after, .mainnav > ul > li > span:after { content: ""; height: 2px; width: 0; display: block; background: transparent; transition: 0.4s ease-in-out; } .mainnav > ul > li > a:hover, .mainnav > ul > li > a:focus, .mainnav > ul > li > a:active, .mainnav > ul > li > span:hover, .mainnav > ul > li > span:focus, .mainnav > ul > li > span:active { color: var(--main-color-black); } .mainnav > ul > li:hover > a, .mainnav > ul > li:focus > a, .mainnav > ul > li:active > a { color: var(--main-color-black); } .mainnav > ul > li:hover > a:after, .mainnav > ul > li:focus > a:after, .mainnav > ul > li:active > a:after { background: var(--main-color-primary); width: 100%; } .mainnav > ul > li.is-active, .mainnav > ul > li.is-active-tree { color: var(--main-color-black); } .mainnav > ul > li.is-active > a:after, .mainnav > ul > li.is-active > span:after, .mainnav > ul > li.is-active-tree > a:after, .mainnav > ul > li.is-active-tree > span:after { background: var(--main-color-primary); width: 100%; } .mainnav > ul > li.is-active:hover > a, .mainnav > ul > li.is-active:focus > a, .mainnav > ul > li.is-active:active > a, .mainnav > ul > li.is-active-tree:hover > a, .mainnav > ul > li.is-active-tree:focus > a, .mainnav > ul > li.is-active-tree:active > a { color: var(--main-color-black); } .mainnav__backlink { position: relative; padding-left: 30px; text-transform: none; font-weight: var(--main-font-weight) !important; } @media (max-width: 767px) { .mainnav__backlink { font-size: 1.4rem; padding-left: 25px; } } .mainnav__backlink .icon { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); margin-top: -2px; transition: 0.2s ease-in-out; } @media (max-width: 767px) { .mainnav__backlink .icon { margin-top: 0; } } .mainnav__backlink:after { display: none; } .mainnav__backlink:hover .icon, .mainnav__backlink:focus .icon, .mainnav__backlink:active .icon { left: 0; } .mainnav__backlink:hover:after, .mainnav__backlink:focus:after, .mainnav__backlink:active:after { display: none; } .navgroup a, .navgroup li > span { margin-bottom: 10px; } @media (min-width: 768px) { .navgroup a, .navgroup li > span { margin-bottom: 14px; } } .navgroup a { color: var(--main-color-black); text-decoration: none; } .navgroup a:hover, .navgroup a:focus, .navgroup a:active { color: var(--main-color-black); text-decoration: underline; } .navgroup li:hover > a, .navgroup li:focus > a, .navgroup li:active > a { color: var(--main-color-black); text-decoration: underline; } .navgroup > ul > li > a, .navgroup > ul > li > span { text-transform: uppercase; } @media (min-width: 768px) and (max-width: 1024px) { .navgroup--col-4 > ul > li { width: 25%; } } /* Big Link Markup: Mietpark30+ Einheiten entdecken und in 3D konfigurieren Styleguide Components.Big Link */ .bigLink { background: var(--main-color-primary); color: var(--main-color-black); text-decoration: none; display: flex; width: 264px; height: 251px; padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 10px; position: relative; border-radius: 4px; overflow: hidden; } @media (max-width: 1024px) { .bigLink { width: 100%; aspect-ratio: 16/5; height: auto; } } @media (max-width: 767px) { .bigLink { width: 100%; aspect-ratio: 21/14; height: auto; } } .bigLink:hover { color: var(--main-color-black); text-decoration: none; } .bigLink:hover .bigLink__headline .icon { right: 0; } .bigLink__headline { font-size: var(--main-font-size-big); font-style: normal; font-weight: var(--main-font-weight-bold); line-height: 1; text-transform: uppercase; display: inline-flex; padding-right: 30px; position: relative; } .bigLink__headline .icon { font-size: 0.9em; display: block; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); transition: 0.2s ease-in-out; } .bigLink__headline .icon:before { display: block; } @media (max-width: 1024px) { .bigLink__headline { max-width: 50%; } } @media (max-width: 767px) { .bigLink__headline { max-width: 70%; } } .bigLink__text { z-index: 1; } @media (max-width: 1024px) { .bigLink__text { max-width: 50%; padding-right: 20px; } } @media (max-width: 767px) { .bigLink__text { max-width: 70%; padding-right: 20px; } } .bigLink img { position: absolute; left: 0; bottom: 0; width: 100% !important; } @media (max-width: 1024px) { .bigLink img { width: 50% !important; left: auto; right: 0; } } @media (max-width: 767px) { .bigLink img { left: auto; width: 60% !important; right: 0; bottom: 0; } } .iconList { container-type: inline-size; container-name: iconlist; gap: 16px; margin: 0; } @container iconlist (min-width: 292px) { .iconList { gap: 28px; } } .iconList a { margin: 0; } .iconList .icon { font-size: 28px; } @container iconlist (min-width: 292px) { .iconList .icon { font-size: 36px; } } .languageSwitchButton { all: unset; text-decoration: none; display: inline-flex; padding-right: 0; cursor: pointer; position: relative; padding-left: 20px; font-size: 1.6rem; } .languageSwitchButton:hover, .languageSwitchButton:focus, .languageSwitchButton:active { text-decoration: none; } .languageSwitchButton:after { display: none; } .languageSwitchButton .icon { font-size: 1.1em; position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-top: -1px; } .languageSwitchButton:hover, .languageSwitchButton:focus, .languageSwitchButton:active { color: var(--main-color-black); text-decoration: underline; } .languageSwitchButton:hover .icon, .languageSwitchButton:focus .icon, .languageSwitchButton:active .icon { text-decoration: none; } .promotion { padding: 7px 12px; font-size: 1.4rem; border-radius: 0; line-height: 16px; } .promotion.promotion--1, .promotion.promotion--2 { background: var(--main-color-black); color: var(--main-color-white); } .promotion.promotion--3 { background: var(--main-color-primary); color: var(--main-color-black); } .promotion--attribute { background: var(--main-color-white); color: var(--main-color-black); border: 1px solid var(--main-color-light-gray); text-transform: none; display: inline-flex; align-items: center; gap: 8px; } .promotion--attribute .icon { font-size: 14px; } .factbox { display: flex; align-items: flex-start; flex-wrap: wrap; scroll-margin-top: 65px; } @media (min-width: 768px) { .factbox { flex-wrap: nowrap; scroll-margin-top: 100px; } } @media (min-width: 1250px) { .factbox { scroll-margin-top: 140px; } } @media (min-width: 1540px) { .factbox { scroll-margin-top: 160px; } } .factbox__media { width: 100%; flex-shrink: 0; display: flex; justify-content: center; } @media (min-width: 768px) { .factbox__media { width: 60%; } } @media (min-width: 1250px) { .factbox__media { width: 55%; } } .factbox__media .textcontent { width: 100%; } .factbox__mediaItem { aspect-ratio: 1; width: 100%; justify-content: center; align-items: center; display: flex; } .factbox__mediaItem style { display: none; } .factbox__mediaItem img, .factbox__mediaItem video, .factbox__mediaItem picture { object-position: top center; display: block; max-height: 100% !important; } .factbox__content { position: relative; flex-shrink: 0; background: var(--main-color-white); color: var(--main-color-black); width: 100%; padding: 24px; padding-top: 12px; margin-top: -40px; max-width: calc(100% - 40px); margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .factbox__content { width: 40%; margin-left: -30px; padding: 24px; padding-top: 12px; max-height: calc(100% - 60px); margin-top: auto; margin-bottom: auto; } } @media (min-width: 1250px) { .factbox__content { width: 30%; padding: 30px; padding-top: 16px; } } @media (min-width: 1540px) { .factbox__content { margin-left: -30px; max-height: calc(100% - 60px); padding: 40px; padding-top: 28px; } } .factbox__contentItemHeadline { position: relative; padding-top: 12px; padding-bottom: 12px; padding-right: 36px; font-size: 1.8rem; cursor: pointer; } @media (min-width: 768px) { .factbox__contentItemHeadline { font-size: 2rem; } } .factbox__contentItemHeadline:after { content: var(--base-icon-plus); font-family: "icons", Helvetica, Arial, sans-serif; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 1; } .factbox__contentItemHeadline:hover, .factbox__contentItemHeadline:focus, .factbox__contentItemHeadline:active { color: var(--main-color-primary); } .factbox__contentItemInfo { padding-bottom: 16px; } .factbox__contentItem { border-bottom: 1px solid var(--main-color-black); } .factbox__contentItem:not(:first-child) .factbox__contentItemInfo { display: none; } .factbox__contentItem.is-active .factbox__contentItemHeadline:after { opacity: 0; } .contactBanner__media { aspect-ratio: 4/3; background: black; } @media (min-width: 768px) { .contactBanner__media { aspect-ratio: 1920/800; } } .contactBanner__media video, .contactBanner__media img, .contactBanner__media picture { aspect-ratio: 4/3 !important; object-fit: cover; display: block; } @media (min-width: 768px) { .contactBanner__media video, .contactBanner__media img, .contactBanner__media picture { aspect-ratio: 1920/800 !important; } } .contactBanner__box { position: relative; margin-left: auto; transform: translateY(-40px); padding: 32px; } @media (min-width: 768px) { .contactBanner__box { padding: 48px; transform: translateY(-64px); } } @media (min-width: 1025px) { .contactBanner__box { max-width: 1100px; } } @media (min-width: 1540px) { .contactBanner__box { padding: 80px 140px; transform: translateY(-140px); max-width: 1400px; } } .contactBanner__box .itemboxList.swiper { margin-left: -32px; margin-right: -32px; } @media (min-width: 768px) { .contactBanner__box .itemboxList.swiper { margin-left: 0; margin-right: -48px; } } @media (min-width: 1540px) { .contactBanner__box .itemboxList.swiper { margin-right: -140px; } } .contactBanner__box .itemboxList.swiper:not(.swiper-initialized) > .swiper-wrapper > * { width: 80%; } .contactBanner__box .itemboxEilaList.swiper:not(.is-single) { margin-left: -32px; margin-right: -32px; } @media (min-width: 768px) { .contactBanner__box .itemboxEilaList.swiper:not(.is-single) { margin-left: 0; margin-right: -48px; } } @media (min-width: 1540px) { .contactBanner__box .itemboxEilaList.swiper:not(.is-single) { margin-right: -140px; } } .contactBanner__box .itemboxEilaList.swiper:not(.is-single):before, .contactBanner__box .itemboxEilaList.swiper:not(.is-single):after { content: ""; position: absolute; top: 0; width: 20%; height: 100%; z-index: 2; } .contactBanner__box .itemboxEilaList.swiper:not(.is-single):before { left: 0; background: linear-gradient(-90deg, rgba(255, 222, 0, 0) 0%, var(--main-color-white) 100%); } .contactBanner__box .itemboxEilaList.swiper:not(.is-single):after { right: 0; background: linear-gradient(90deg, rgba(255, 222, 0, 0) 0%, var(--main-color-white) 100%); } @media (min-width: 768px) { .contactBanner__box .itemboxEilaList.swiper.is-single { margin-right: -24px; } } @media (min-width: 1540px) { .contactBanner__box .itemboxEilaList.swiper.is-single { margin-right: -100px; } } .contactBanner__box .itemboxEilaList.swiper .swiper-pagination-bullet { border-color: var(--main-color-black); } .contactBanner__box .itemboxEilaList.swiper .swiper-pagination-bullet:after { background: var(--main-color-black); } .contactBanner__box .itemboxEilaList.swiper .swiper-button-prev, .contactBanner__box .itemboxEilaList.swiper .swiper-button-next { display: none; } @media (min-width: 768px) { .contactBanner__box .itemboxEilaList.swiper .swiper-slide.swiper-slide-prev { transform: scale(0.7) translateX(50%); } .contactBanner__box .itemboxEilaList.swiper .swiper-slide.swiper-slide-next { transform: scale(0.7) translateX(-50%); } } .contactBanner__box .itemboxEilaList.swiper .swiper-slide:not(.swiper-slide-active) .itemboxSliderHospitality__name { opacity: 0; } .contactBanner__box .itemboxSliderHospitality__image { margin-bottom: 10px; } .contactBanner__box .itemboxSliderHospitality__image img { aspect-ratio: 440/258; } .contactBanner__box .itemboxSliderHospitality__content { margin: 0; position: absolute; left: 0; bottom: 0; width: 100%; } .contactBanner__box .itemboxSliderHospitality__name { font-size: 2rem; } @media (min-width: 1025px) { .contactBanner__box .itemboxSliderHospitality__name { font-size: 2.2rem; } } .contactBanner__box--left { margin-left: 0; margin-right: auto; } .contactBanner__box.bg--black .button--primary { background: var(--main-color-primary); border-color: var(--main-color-primary); color: var(--main-color-black); } .contactBanner__box.bg--black .button--primary:hover, .contactBanner__box.bg--black .button--primary:focus { background: var(--main-color-primary-dark); border-color: var(--main-color-primary-dark); } .contactBanner__box.bg--black .button--primary:active { background: var(--main-color-primary-darken); border-color: var(--main-color-primary-darken); } .contactBanner__box.bg--black .itemboxEilaList.swiper .swiper-pagination-bullet { border-color: var(--main-color-white); } .contactBanner__box.bg--black .itemboxEilaList.swiper .swiper-pagination-bullet:after { background: var(--main-color-white); } .contactBanner__box.bg--black .itemboxEilaList.swiper:before { left: 0; background: linear-gradient(-90deg, transparent 0%, var(--main-color-black) 100%); } .contactBanner__box.bg--black .itemboxEilaList.swiper:after { right: 0; background: linear-gradient(90deg, transparent 0%, var(--main-color-black) 100%); } .contactBanner__box.bg--primary .itemboxEilaList.swiper .swiper-pagination-bullet { border-color: var(--main-color-black); } .contactBanner__box.bg--primary .itemboxEilaList.swiper .swiper-pagination-bullet:after { background: var(--main-color-black); } .contactBanner__box.bg--primary .itemboxEilaList.swiper:before { left: 0; background: linear-gradient(-90deg, transparent 0%, var(--main-color-primary) 100%); } .contactBanner__box.bg--primary .itemboxEilaList.swiper:after { right: 0; background: linear-gradient(90deg, transparent 0%, var(--main-color-primary) 100%); } .contactBanner__box.bg--primary .itemboxEilaList.swiper .itemboxSliderHospitality:hover .itemboxSliderHospitality__name, .contactBanner__box.bg--primary .itemboxEilaList.swiper .itemboxSliderHospitality:focus .itemboxSliderHospitality__name, .contactBanner__box.bg--primary .itemboxEilaList.swiper .itemboxSliderHospitality:active .itemboxSliderHospitality__name { text-decoration: underline; color: var(--main-color-black); } .contactBanner:has(.letter) { position: relative; z-index: 1; } .contactBanner:has(.letter) .letter { z-index: -1; top: 50% !important; transform: translateY(-20%) !important; aspect-ratio: 130/60 !important; } .gp .contactBanner__box { transform: translateY(0); } .bg--primary .contactBanner__box.bg--black .link, .bg--primary .contactBanner__box.bg--black a:not(.button) { color: var(--main-color-primary); } .bg--primary .contactBanner__box.bg--black .link:hover, .bg--primary .contactBanner__box.bg--black .link:focus, .bg--primary .contactBanner__box.bg--black a:not(.button):hover, .bg--primary .contactBanner__box.bg--black a:not(.button):focus { color: var(--main-color-primary-dark); } .bg--primary .contactBanner__box.bg--black .link:active, .bg--primary .contactBanner__box.bg--black a:not(.button):active { color: var(--main-color-primary-darken); } .bg--black .contactBanner__box.bg--primary h2 { color: var(--main-color-black); } ul.checkList { font-weight: var(--main-font-weight-medium); } @media (min-width: 1025px) { ul.checkList { font-size: 2.2rem; padding-left: 30px; } } ul.checkList li:before { color: var(--main-color-primary); } @media (min-width: 1025px) { ul.checkList li:before { margin-top: 0; left: -30px; } } ul.checkList--half { display: grid; grid-column-gap: 8px; grid-row-gap: 4px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } @media (min-width: 768px) { ul.checkList--half { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (min-width: 1024px) { ul.checkList--half { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } .tabs__headerItem { cursor: pointer; color: var(--main-color-dark-gray); text-decoration: none; font-weight: var(--main-font-weight-medium); font-size: 1.6rem; padding-top: 5px; padding-bottom: 5px; position: relative; } @media (min-width: 768px) { .tabs__headerItem { font-size: 1.8rem; } } .tabs__headerItem:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; opacity: 0; } .tabs__headerItem:hover, .tabs__headerItem:focus, .tabs__headerItem:active { color: var(--main-color-black); } .tabs__headerItem.is-active { color: var(--main-color-black); } .tabs__headerItem.is-active:after { opacity: 1; background: var(--main-color-primary); } .tabs__header { display: flex; gap: 12px; } @media (min-width: 768px) { .tabs__header { gap: 24px; } } .tabs__body { padding-top: 32px; } .tabs__body:not(.is-active) { display: none; } /* Banner Markup:
Headline
Subline
Button
.bannerEila--2 - Angeschnitten //Styleguide Components.bannerEila */ .bannerEilaMedia { display: flex; width: 100%; position: relative; overflow: hidden; } .bannerEilaMedia video, .bannerEilaMedia img { display: block; min-width: 100%; object-fit: cover; width: 100%; max-width: none; max-height: none; flex: 1; } @media (min-width: 768px) { .bannerEilaMedia video, .bannerEilaMedia img { aspect-ratio: 1920/1080 !important; } } .bannerEilaTextcontentInner { max-width: 100%; } @media (min-width: 768px) { .bannerEilaTextcontentInner { max-width: 60%; } } @media (min-width: 1025px) { .bannerEilaTextcontentInner { max-width: 50%; } } @media (min-width: 1250px) { .bannerEilaTextcontentInner { max-width: 980px; } } .bannerEilaTextcontent { position: absolute; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--main-color-white); width: 100%; max-width: 1720px; left: 50%; transform: translateX(-50%); padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; } @media (min-width: 768px) { .bannerEilaTextcontent { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 1250px) { .bannerEilaTextcontent { padding-top: 60px; padding-bottom: 60px; } } @media (min-width: 1540px) { .bannerEilaTextcontent { padding-top: 100px; padding-bottom: 100px; } } .bannerEilaTextcontent.bannerEilaTextcontent--left { align-items: flex-start; } .bannerEilaTextcontent.bannerEilaTextcontent--right { align-items: flex-end; } .bannerEilaTextcontent.bannerEilaTextcontent--vertTop { justify-content: flex-start; } .bannerEilaTextcontent.bannerEilaTextcontent--vertBottom { justify-content: flex-end; } .bannerEilaTextcontent__text { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .bannerEilaTextcontent__text:last-child { margin-bottom: 0; } .bannerEilaTextcontent__headline { color: var(--main-color-primary); margin-bottom: 0.2em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /*vollflächig*/ .bannerEila { position: relative; display: flex; width: 100%; height: 100%; max-width: 2100px; margin-left: auto; margin-right: auto; } .bannerEila:not(.bannerEila--2) { max-height: 100vh; max-height: 100svh; } .bannerEila:has(.bannerEilaTextcontent) .bannerEilaMedia:after { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 0.75) 70%); position: absolute; left: 0; bottom: 0; pointer-events: none; } /*angeschnitten*/ .bannerEila--2:before { content: ""; display: block; width: 100%; background: var(--main-color-black); position: absolute; left: 0; bottom: 0; height: 50%; height: calc(53% - 40px); } @media (min-width: 768px) { .bannerEila--2:before { height: calc(53% - 75px); } } @media (min-width: 1025px) { .bannerEila--2:before { height: calc(53% - 100px); } } .bannerEila--2 .bannerEilaMedia { max-width: 87.5%; margin-left: auto; margin-top: 80px; } @media (min-width: 768px) { .bannerEila--2 .bannerEilaMedia { margin-top: 140px; } } @media (min-width: 1025px) { .bannerEila--2 .bannerEilaMedia { margin-top: 200px; } } @media (min-width: 1920px) { .bannerEila--2 .bannerEilaMedia { max-width: 79.3%; } } .bannerEila--2 .bannerEilaMedia video, .bannerEila--2 .bannerEilaMedia img { aspect-ratio: 1 !important; } @media (min-width: 768px) { .bannerEila--2 .bannerEilaMedia video, .bannerEila--2 .bannerEilaMedia img { aspect-ratio: 1658/933 !important; } } /*scroll Headline to Content */ .bannerEila--scrollHeadToContent { padding-bottom: 160px; } @media (min-width: 768px) { .bannerEila--scrollHeadToContent { padding-bottom: 220px; } } @media (min-width: 1250px) { .bannerEila--scrollHeadToContent { padding-bottom: 320px; } } @media (min-width: 1540px) { .bannerEila--scrollHeadToContent { padding-bottom: 420px; } } .bannerEila--scrollHeadToContent:before { height: 60%; } @media (min-width: 768px) { .bannerEila--scrollHeadToContent:before { height: 58%; } } @media (min-width: 1250px) { .bannerEila--scrollHeadToContent:before { height: 57%; } } @media (min-width: 1540px) { .bannerEila--scrollHeadToContent:before { height: 62%; } } .bannerEila--scrollHeadToContent .bannerEilaTextcontent { bottom: 0; } @media (min-width: 768px) { .bannerEila--scrollHeadToContent .bannerEilaTextcontent { bottom: 240px; } } @media (min-width: 1250px) { .bannerEila--scrollHeadToContent .bannerEilaTextcontent { bottom: 420px; } } @media (max-width: 767px) { .bannerEila--scrollHeadToContent:has(.bannerEilaTextcontent) .bannerEilaMedia:after { display: none; } } .slideBanner { position: relative; display: block; width: 100%; color: var(--main-color-white); flex-shrink: 0; transition: 0.8s ease-in-out; } @media (min-width: 768px) { .slideBanner { width: 25%; } } .slideBanner:after { content: ""; background: linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 0.75) 50%); display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; pointer-events: none; z-index: 1; transition: 0.2s ease-in-out; } .slideBanner__media { position: relative; height: 260px; } @media (min-width: 768px) { .slideBanner__media { height: 300px; } } @media (min-width: 1025px) { .slideBanner__media { height: 400px; } } @media (min-width: 1250px) { .slideBanner__media { height: 660px; } } .slideBanner__media picture, .slideBanner__media img, .slideBanner__media video { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; object-fit: cover; aspect-ratio: unset !important; } .slideBanner__media video { opacity: 0; z-index: 1; transition: 0.8s ease-in-out; } .slideBanner__info { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; } .slideBanner__headline { font-weight: var(--main-font-weight-bold); text-transform: uppercase; line-height: 1; position: absolute; left: 0; bottom: 0; transition: 0.4s ease-in-out; font-size: 2.2rem; } @media (min-width: 1025px) { .slideBanner__headline { font-size: 2.6rem; } } @media (min-width: 1250px) { .slideBanner__headline { font-size: 3.6rem; } } .slideBanner__info, .slideBanner__headline { padding: 15px; padding-right: 50px; } @media (min-width: 1025px) { .slideBanner__info, .slideBanner__headline { padding: 30px; padding-right: 60px; } } @media (min-width: 1250px) { .slideBanner__info, .slideBanner__headline { padding: 40px; padding-right: 80px; } } .slideBanner__summary { margin-top: 16px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; opacity: 0; color: var(--main-color-white); max-width: 540px; font-size: 1.4rem; } @media (min-width: 1250px) { .slideBanner__summary { font-size: 1.8rem; } } .slideBanner__btn { position: absolute; font-size: 2.6rem; color: var(--main-color-primary); display: block; right: 15px; bottom: 14px; } @media (min-width: 1025px) { .slideBanner__btn { right: 20px; bottom: 32px; } } @media (min-width: 1250px) { .slideBanner__btn { font-size: 3.2rem; right: 40px; bottom: 42px; } } .slideBanner__btn .icon { display: block; line-height: 1; } .slideBanner.is-active { width: calc(50% - 40px); } .slideBanner.is-active .slideBanner__media video { opacity: 1; } .slideBanner.is-active .slideBanner__summary { opacity: 1; } .slideBanner.is-active .slideBanner__headline { bottom: 40px; } @media (min-width: 1025px) { .slideBanner.is-active .slideBanner__headline { bottom: 50px; } } @media (min-width: 1250px) { .slideBanner.is-active .slideBanner__headline { bottom: 60px; } } .slideBanner.is-active:after { opacity: 0.4; } .slideBanners { display: flex; max-width: 1720px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; gap: 10px; } @media (min-width: 768px) { .slideBanners { justify-content: flex-end; } } @media (min-width: 1250px) { .slideBanners { gap: 20px; } } @media (max-width: 767px) { .slideBanners { overflow-y: hidden; scroll-snap-type: x mandatory; flex-wrap: nowrap; } .slideBanners > * { scroll-snap-align: center; flex-shrink: 0; width: 67%; } } /* Big USP List Markup: Styleguide Components.Big USP List */ .bigUsp__count { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--main-color-black); font-style: normal; font-weight: var(--main-font-weight-bold); line-height: 1; text-transform: uppercase; color: var(--main-color-white); font-size: 6rem; } @media (min-width: 1025px) { .bigUsp__count { font-size: 8rem; } } .bigUsp__title { font-weight: var(--main-font-weight-bold); line-height: 1; text-transform: uppercase; font-size: 2.4rem; } @media (min-width: 768px) { .bigUsp__title { font-size: 3rem; } } @media (min-width: 1025px) { .bigUsp__title { font-size: 4rem; } } .uspList { margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 20px; justify-content: space-between; flex-wrap: wrap; } .uspList__item { margin: 0; padding: 0; list-style: none; } .scrollytellingVideoSticky { position: sticky; top: 15%; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; } @media (min-width: 768px) { .scrollytellingVideoSticky { justify-content: center; align-items: center; padding-top: 0; } } .scrollytellingVideoSticky__inner { position: relative; width: 100%; } .scrollytellingVideoSticky__inner:before, .scrollytellingVideoSticky__inner:after { content: ""; height: 10%; width: 100%; display: block; left: 0; position: absolute; } .scrollytellingVideoSticky__inner:before { top: 0; background: linear-gradient(180deg, rgb(21, 21, 21) 0%, rgba(21, 21, 21, 0) 100%); } .scrollytellingVideoSticky__inner:after { left: 0; bottom: 0; background: linear-gradient(0deg, rgb(21, 21, 21) 0%, rgba(21, 21, 21, 0) 100%); } .scrollytellingVideoSticky canvas { display: block; max-width: 100%; } .scrollytellingVideoSticky video { display: block; aspect-ratio: auto; object-fit: contain !important; object-position: center !important; } .scrollytellingVideo { position: relative; height: 500vh; margin-top: -8rem; } @media (min-width: 1025px) { .scrollytellingVideo { margin-top: -24rem; } } @media (min-width: 1250px) { .scrollytellingVideo { height: 800vh; } } .scrollytellingItems { list-style: none; margin: 0; padding: 0; } .scrollytellingItems__text { font-weight: var(--main-font-weight-bold); line-height: 1; width: 100%; display: flex; flex-wrap: wrap; gap: 0 0.2em; text-shadow: 0 0 30px rgba(255, 255, 255, 0.4); font-size: 3.4rem; padding-left: 20px; padding-right: 20px; } @media (min-width: 1025px) { .scrollytellingItems__text { font-size: 4rem; } } @media (min-width: 1250px) { .scrollytellingItems__text { font-size: 5rem; text-shadow: 0 0 60px rgba(255, 255, 255, 0.4); } } @media (min-width: 1540px) { .scrollytellingItems__text { font-size: 6rem; } } .scrollytellingItems__text.is-right { justify-content: flex-end; } .scrollytellingItems__text.is-center { justify-content: center; } .scrollytellingItems__text span { display: inline-block; align-items: center; padding: 0; border-radius: 10px; color: transparent; opacity: 0; transform: translateX(-10%); transition: opacity 0.2s linear, transform 0.2s linear; } .scrollytellingItems__text span.is-visible { opacity: 1; transform: translateX(0); transition: background 0.2s linear, color 0.2s linear; } .scrollytellingItems__text span.is-revealed { color: var(--main-color-white); background: transparent; } .scrollytellingItems__item { margin: 0; position: fixed; z-index: 1; pointer-events: none; max-width: 100%; } @media (max-width: 767px) { .scrollytellingItems__item { text-align: center; } } .scrollytellingWrapper { background: #161616; position: relative; z-index: 102; } .scrollytellingWrapper__headline { position: relative; z-index: 1; pointer-events: none; color: var(--main-color-white); } .scrollytellingWrapper__headline h2 { margin: 0; padding-top: 4rem; } .horizontalInfoSlides { position: relative; overflow: hidden; } @media (max-width: 1024px) { .horizontalInfoSlides .swiper-wrapper { flex-direction: column; padding-top: 32px; padding-bottom: 32px; } } @media (min-width: 1025px) { .horizontalInfoSlides .swiper-wrapper { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: none; scrollbar-width: none; -ms-overflow-style: none; } .horizontalInfoSlides .swiper-wrapper::-webkit-scrollbar { display: none; } .horizontalInfoSlides .swiper-slide { flex-shrink: 0; width: 100vw; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; } } .horizontalInfoSlides .swiper-pagination { position: absolute; display: flex; flex-direction: row; gap: 12px; z-index: 2; right: 20px; bottom: 20px; } @media (min-width: 768px) { .horizontalInfoSlides .swiper-pagination { bottom: 40px; } } @media (min-width: 1025px) { .horizontalInfoSlides .swiper-pagination { bottom: 20px; } } @media (min-width: 1250px) { .horizontalInfoSlides .swiper-pagination { bottom: 60px; } } @media (min-width: 1540px) { .horizontalInfoSlides .swiper-pagination { right: calc((100% - 1680px) / 2); bottom: 100px; } } .horizontalInfoSlides .swiper-pagination-bullet { cursor: pointer; border-color: var(--main-color-gray-base); } .horizontalInfoSlides .swiper-pagination-bullet:after { background: var(--main-color-gray-base); animation: false; } .horizontalInfoSlides .swiper-pagination-bullet:hover, .horizontalInfoSlides .swiper-pagination-bullet:focus, .horizontalInfoSlides .swiper-pagination-bullet:active { border-color: var(--main-color-primary); } .horizontalInfoSlides .swiper-pagination-bullet:hover:after, .horizontalInfoSlides .swiper-pagination-bullet:focus:after, .horizontalInfoSlides .swiper-pagination-bullet:active:after { background: var(--main-color-primary); } .horizontalInfoSlide { overflow: hidden; position: relative; max-width: 2100px; } @media (min-width: 1025px) { .horizontalInfoSlide { display: flex; align-items: center; } } @media (min-width: 1025px) and (orientation: landscape) { .horizontalInfoSlide { height: 100vh; height: 100svh; } } @media (min-width: 1250px) { .horizontalInfoSlide { min-height: 600px; } } .horizontalInfoSlide__img img { min-width: 100%; } .horizontalInfoSlide__headline { text-shadow: 0 0 20px #000; } @media (min-width: 1250px) { .horizontalInfoSlide__headline { margin-bottom: 48px; } } .horizontalInfoSlide__content { margin-left: auto; margin-right: auto; width: 100%; max-width: 1720px; padding: 32px 20px; z-index: 1; position: relative; } @media (min-width: 768px) { .horizontalInfoSlide__content { padding: 56px 40px; } } @media (min-width: 1025px) { .horizontalInfoSlide__content { padding: 72px 40px; } } @media (min-width: 768px) { .horizontalInfoSlide--1 .horizontalInfoSlide__headline { margin-left: auto; max-width: 75%; padding-right: 24px; text-align: right; } } @media (min-width: 768px) { .horizontalInfoSlide--1 .horizontalInfoSlide__contentWrapper { margin-left: auto; max-width: 75%; } } @media (min-width: 768px) { .horizontalInfoSlide--1 .horizontalInfoSlide__img--1 { position: absolute; left: 0; top: 50%; max-width: 50% !important; transform: translate(-10%, -50%); } } @media (min-width: 1025px) { .horizontalInfoSlide--1 .horizontalInfoSlide__img--1 { transform: translate(0, -50%); } } @media (min-width: 1250px) { .horizontalInfoSlide--1 .horizontalInfoSlide__img--1 { max-width: 100% !important; } } @media (min-width: 1540px) { .horizontalInfoSlide--1 .horizontalInfoSlide__img--1 { left: calc((100% - 1720px) / 2); } } @media (max-width: 767px) { .horizontalInfoSlide--1 .horizontalInfoSlide__img--1 img { aspect-ratio: 1; object-fit: cover; } } .horizontalInfoSlide--2 .horizontalInfoSlide__img { width: 50%; flex-shrink: 0; } .horizontalInfoSlide--2 .horizontalInfoSlide__img--1 { z-index: 1; position: relative; margin-top: 48px; margin-right: -20px; width: calc(50% + 20px); } @media (min-width: 1540px) { .horizontalInfoSlide--2 .horizontalInfoSlide__img--1 { margin-top: 120px; margin-right: -48px; width: calc(50% + 48px); } } .horizontalInfoSlide--2 .horizontalInfoSlide__imgs { display: flex; } @media (min-width: 768px) { .horizontalInfoSlide--2 .horizontalInfoSlide__imgs { order: 1; position: absolute; right: 0; top: 50%; width: 60%; transform: translateY(-50%); } } @media (min-width: 1540px) { .horizontalInfoSlide--2 .horizontalInfoSlide__imgs { right: calc((100% - 1720px) / 2); padding-right: 20px; width: 62%; } } @media (min-width: 1920px) { .horizontalInfoSlide--2 .horizontalInfoSlide__imgs { width: 55%; } } @media (min-width: 768px) { .horizontalInfoSlide--2 .horizontalInfoSlide__headline { max-width: 60%; } } @media (min-width: 768px) { .horizontalInfoSlide--2 .horizontalInfoSlide__contentWrapper { max-width: 40%; padding-right: 40px; } } @media (min-width: 1540px) { .horizontalInfoSlide--2 .horizontalInfoSlide__contentWrapper { max-width: 30%; } } @media (min-width: 768px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--1 { position: absolute; left: 0; top: 50%; max-width: 50% !important; transform: translate(0, -50%); } } @media (min-width: 1540px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--1 { max-width: 100% !important; left: calc((100% - 1720px) / 2); padding-right: 20px; width: 44%; } } @media (min-width: 1920px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--1 { width: 40%; } } @media (max-width: 767px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--1 img { aspect-ratio: 1; object-fit: cover; } } @media (max-width: 767px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--2 { width: 50%; padding-left: 20px; padding-bottom: 20px; } } @media (min-width: 768px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--2 { width: 180px; position: absolute; left: 20px; bottom: 0; } } @media (min-width: 1025px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--2 { width: 300px; position: absolute; left: auto; right: 0; top: 60px; bottom: auto; } } @media (min-width: 1540px) { .horizontalInfoSlide--3 .horizontalInfoSlide__img--2 { width: 400px; } } @media (min-width: 768px) { .horizontalInfoSlide--3 .horizontalInfoSlide__headline { margin-left: auto; max-width: 65%; } } @media (min-width: 1540px) { .horizontalInfoSlide--3 .horizontalInfoSlide__headline { max-width: 60%; } } @media (min-width: 1540px) { .horizontalInfoSlide--3 .horizontalInfoSlide__text { max-width: 550px; } } @media (min-width: 768px) { .horizontalInfoSlide--3 .horizontalInfoSlide__contentWrapper { max-width: 50%; margin-left: auto; padding-left: 20px; } } @media (min-width: 1540px) { .horizontalInfoSlide--3 .horizontalInfoSlide__contentWrapper { padding-left: 48px; } } .projectBanners { display: flex; width: 100%; position: relative; flex-wrap: wrap; max-width: 2100px; margin-left: auto; margin-right: auto; overflow: hidden; } @media (min-width: 768px) { .projectBanners { flex-wrap: nowrap; } } .projectBanners__content { flex-shrink: 0; padding-left: 20px; padding-right: 20px; width: 100%; margin-bottom: 40px; display: flex; } @media (min-width: 768px) { .projectBanners__content { margin-bottom: 0; width: 50%; padding-right: 40px; } } @media (min-width: 1025px) { .projectBanners__content { width: 36%; padding-right: 80px; } } @media (min-width: 1740px) { .projectBanners__content { padding-left: calc((100% - 1680px) / 2); } } .projectBanners__contentInner { width: 100%; display: flex; align-items: center; position: relative; } @media (min-width: 768px) { .projectBanners__contentInner { padding-bottom: 40px; padding-top: 40px; } } .projectBanners__sliderWrapper { flex-grow: 1; width: 100%; } @media (min-width: 768px) { .projectBanners__sliderWrapper { width: 50%; } } @media (min-width: 1025px) { .projectBanners__sliderWrapper { width: 64%; } } @media (max-width: 1024px) { .projectBanners__slider { padding-right: 20px; } } @media (max-width: 767px) { .projectBanners__slider { padding-right: 20px; padding-left: 20px; } } .projectBanners__slider .swiper { position: relative; } .projectBanners__slider .swiper-wrapper { align-items: center; } .projectBanners__slider .swiper-slide { opacity: 1; transition: opacity 0.2s ease-in-out; } .projectBanners__slider .swiper-slide:not(.swiper-slide-active) { opacity: 0.5; } .projectBanners__slider .swiper-slide.swiper-slide-next { scale: 0.8; transform-origin: left center; } .projectBanners__slider .swiper-pagination-bullet { border-color: var(--main-color-black); } .projectBanners__slider .swiper-pagination-bullet-active:after { background-color: var(--main-color-black); } .projectBanners__slider .swiper-pagination { right: 0; left: auto; text-align: left; bottom: 0; width: 100%; } @media (max-width: 1024px) { .projectBanners__slider .swiper-pagination { display: flex; } .projectBanners__slider .swiper-pagination .swiper-pagination-bullet { display: block; flex-shrink: 0; } } @media (min-width: 1025px) { .projectBanners__slider .swiper-pagination { position: absolute; width: 35%; margin: 0; } } @media (min-width: 1540px) { .projectBanners__slider .swiper-pagination { bottom: 10px; } } .projectBanners__sliderItem img { min-width: 100%; aspect-ratio: 1; object-fit: cover; } .projectBanners .swiper-navigation { position: absolute; display: none; justify-content: flex-end; gap: 16px; width: 100%; bottom: 0; } @media (min-width: 768px) { .projectBanners .swiper-navigation { display: flex; } } @media (min-width: 1025px) { .projectBanners .swiper-navigation { gap: 24px; } } .projectBanners .swiper-navigation .swiper-button-prev, .projectBanners .swiper-navigation .swiper-button-next { position: static; margin: 0; font-size: 3.2rem; } .teamValueCarousel__memberName { padding-left: 8px; } @media (min-width: 768px) { .teamValueCarousel__memberName { padding-left: 16px; } } @media (min-width: 1250px) { .teamValueCarousel__memberName { padding-left: 24px; } } .teamValueCarousel__memberPosition { padding-left: 4px; } @media (min-width: 768px) { .teamValueCarousel__memberPosition { padding-left: 8px; } } @media (min-width: 1250px) { .teamValueCarousel__memberPosition { padding-left: 16px; } } .teamValueCarousel__memberInfo { display: none; flex-direction: column; flex-shrink: 0; font-size: 1.4rem; } @media (min-width: 768px) { .teamValueCarousel__memberInfo { padding-bottom: 5px; } } @media (min-width: 1250px) { .teamValueCarousel__memberInfo { padding-bottom: 24px; font-size: 1.6rem; } } .teamValueCarousel__member { display: flex; align-items: flex-end; } .teamValueCarousel__member img { aspect-ratio: 1; object-fit: cover; overflow: hidden; border-radius: 50%; flex-shrink: 0; transition: max-width 1s ease-in-out; max-width: 60px !important; } @media (min-width: 1025px) { .teamValueCarousel__member img { max-width: 80px !important; } } @media (min-width: 1400px) { .teamValueCarousel__member img { max-width: 100px !important; } } .teamValueCarousel__member.is-active .teamValueCarousel__memberInfo { display: flex; } .teamValueCarousel__member.is-active img { max-width: 100px !important; } @media (min-width: 768px) { .teamValueCarousel__member.is-active img { max-width: 120px !important; } } @media (min-width: 1025px) { .teamValueCarousel__member.is-active img { max-width: 180px !important; } } @media (min-width: 1250px) { .teamValueCarousel__member.is-active img { max-width: 200px !important; } } @media (min-width: 1400px) { .teamValueCarousel__member.is-active img { max-width: 264px !important; } } .teamValueCarousel__title { margin-bottom: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } @media (min-width: 1540px) { .teamValueCarousel__title { font-size: 7rem; } } .teamValueCarousel__quote { margin: 0; max-width: 528px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4; font-size: 1.5rem; } @media (min-width: 768px) { .teamValueCarousel__quote { padding-left: 16px; font-size: 1.6rem; } } @media (min-width: 1025px) { .teamValueCarousel__quote { -webkit-line-clamp: 3; font-size: var(--main-font-size-base); } } @media (min-width: 1250px) { .teamValueCarousel__quote { padding-left: 24px; -webkit-line-clamp: 4; } } @media (min-width: 1400px) { .teamValueCarousel__quote { font-size: 2.2rem; padding-left: 48px; } } .teamValueCarousel__header { flex-shrink: 0; padding-bottom: 48px; } @media (max-width: 767px) { .teamValueCarousel__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } } @media (min-width: 768px) { .teamValueCarousel__header { padding-bottom: 24px; padding-right: 16px; padding-top: 160px; width: 300px; text-align: right; } } @media (min-width: 1025px) { .teamValueCarousel__header { padding-top: 232px; width: 360px; } } @media (min-width: 1250px) { .teamValueCarousel__header { width: 440px; padding-right: 30px; padding-top: 245px; } } @media (min-width: 1400px) { .teamValueCarousel__header { padding-top: 275px; } } @media (min-width: 1540px) { .teamValueCarousel__header { width: 560px; } } .teamValueCarousel__header h2, .teamValueCarousel__header .h2, .teamValueCarousel__header .heroForm__headline h1, .heroForm__headline .teamValueCarousel__header h1, .teamValueCarousel__header .heroForm__headline .h1, .teamValueCarousel__header .heroForm__headline .historyEilaItem__year, .heroForm__headline .teamValueCarousel__header .h1, .heroForm__headline .teamValueCarousel__header .historyEilaItem__year, .teamValueCarousel__header .horizontalInfoSlide__headline { margin-bottom: 0; } @media (min-width: 1540px) { .teamValueCarousel__header h2, .teamValueCarousel__header .h2, .teamValueCarousel__header .heroForm__headline h1, .heroForm__headline .teamValueCarousel__header h1, .teamValueCarousel__header .heroForm__headline .h1, .teamValueCarousel__header .heroForm__headline .historyEilaItem__year, .heroForm__headline .teamValueCarousel__header .h1, .heroForm__headline .teamValueCarousel__header .historyEilaItem__year, .teamValueCarousel__header .horizontalInfoSlide__headline { font-size: 7rem; } } .teamValueCarousel__header .swiper-navigation { display: flex; justify-content: flex-end; gap: 8px; } @media (min-width: 768px) { .teamValueCarousel__header .swiper-navigation { gap: 20px; margin-top: 32px; } } @media (min-width: 1025px) { .teamValueCarousel__header .swiper-navigation { margin-top: 48px; } } @media (min-width: 1540px) { .teamValueCarousel__header .swiper-navigation { margin-top: 64px; } } .teamValueCarousel__header .swiper-navigation .swiper-button-prev, .teamValueCarousel__header .swiper-navigation .swiper-button-next { position: static; margin: 0; font-size: 3.2rem; z-index: auto; } .teamValueCarousel__container { display: flex; width: 100%; flex-direction: column; } @media (min-width: 768px) { .teamValueCarousel__container { flex-direction: row; } } .teamValueCarousel__members, .teamValueCarousel__activeContent { padding: 0; max-width: 280px; } @media (min-width: 360px) { .teamValueCarousel__members, .teamValueCarousel__activeContent { max-width: 320px; } } @media (min-width: 768px) { .teamValueCarousel__members, .teamValueCarousel__activeContent { max-width: 400px; } } @media (min-width: 1025px) { .teamValueCarousel__members, .teamValueCarousel__activeContent { padding: 32px 16px 16px 16px; max-width: 520px; } } @media (min-width: 1250px) { .teamValueCarousel__members, .teamValueCarousel__activeContent { padding: 48px 24px 24px 24px; max-width: 580px; } } @media (min-width: 1400px) { .teamValueCarousel__members, .teamValueCarousel__activeContent { max-width: 680px; } } .teamValueCarousel__activeContentMain { border-radius: 50%; background-color: var(--main-color-primary); display: flex; aspect-ratio: 1; padding: 32px; padding-top: 100px; } @media (min-width: 768px) { .teamValueCarousel__activeContentMain { padding-top: 160px; } } @media (min-width: 1025px) { .teamValueCarousel__activeContentMain { padding: 48px; padding-top: 200px; } } @media (min-width: 1400px) { .teamValueCarousel__activeContentMain { padding-top: 230px; } } .teamValueCarousel__members { aspect-ratio: 1; position: relative; width: 100%; height: 100%; pointer-events: none; } .teamValueCarousel__members .teamValueCarousel__member { position: absolute; left: 50%; top: 50%; } .teamValueCarousel__members .teamValueCarousel__member:not(.is-active):not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]) { display: none; } .teamValueCarousel__sliderWrapper { position: relative; width: 100%; } @media (min-width: 768px) { .teamValueCarousel__sliderWrapper { width: calc(100% - 300px); } } @media (min-width: 1025px) { .teamValueCarousel__sliderWrapper { width: calc(100% - 360px); } } @media (min-width: 1250px) { .teamValueCarousel__sliderWrapper { width: calc(100% - 440px); } } @media (min-width: 1540px) { .teamValueCarousel__sliderWrapper { width: calc(100% - 560px); } } .teamValueCarousel__sliderWrapper .teamValueCarousel__activeContent .teamValueCarousel__member { position: absolute; left: 0; top: 0; } .teamValueCarousel__sliderWrapper .teamValueCarousel__members { position: absolute; left: 0; top: 0; z-index: 1; } .cLevelBox { position: relative; transition: 0.3s linear; flex-shrink: 0; } @media (max-width: 1024px) { .cLevelBox { width: calc(33.3333333333% - 12px); aspect-ratio: 1; } } @media (max-width: 767px) { .cLevelBox { width: 100%; aspect-ratio: 2/1; } } @media (min-width: 1025px) { .cLevelBox { width: 235px; height: 235px; } } @media (min-width: 1250px) { .cLevelBox { width: 320px; height: 320px; } } @media (min-width: 1540px) { .cLevelBox { width: 360px; height: 360px; } } @media (min-width: 1700px) { .cLevelBox { width: 405px; height: 405px; } } .cLevelBox__img { z-index: 1; position: absolute; left: 0; top: 0; aspect-ratio: 1; height: 100%; } @media (max-width: 767px) { .cLevelBox__img { width: 50%; } } .cLevelBox__img img { aspect-ratio: 1; display: block; object-fit: cover; min-width: 100%; min-height: 100% !important; } .cLevelBox__name { text-transform: uppercase; font-weight: var(--main-font-weight-bold); line-height: 1; font-size: 1.6rem; } @media (min-width: 768px) { .cLevelBox__name { font-size: 2rem; } } @media (min-width: 1250px) { .cLevelBox__name { font-size: 2.4rem; } } @media (min-width: 1540px) { .cLevelBox__name { font-size: 3.2rem; } } .cLevelBox__position { font-size: 1.2rem; } @media (min-width: 768px) { .cLevelBox__position { font-size: 1.6rem; } } @media (min-width: 1250px) { .cLevelBox__position { font-size: 2rem; } } @media (min-width: 1540px) { .cLevelBox__position { font-size: 2.4rem; } } .cLevelBox__text { font-size: 0.9rem; } @media (min-width: 768px) { .cLevelBox__text { margin-top: 5px; font-size: 1rem; } } @media (min-width: 1250px) { .cLevelBox__text { font-size: 1.4rem; margin-top: 10px; } } @media (min-width: 1540px) { .cLevelBox__text { font-size: 1.6rem; } } @media (min-width: 768px) { .cLevelBox__contentInner { opacity: 0; transition: 0.3s linear; } } .cLevelBox__content { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1; position: absolute; right: 0; top: 0; height: 100%; background: var(--main-color-primary); color: var(--main-color-black); padding: 16px; width: 50%; } @media (min-width: 768px) { .cLevelBox__content { width: 100%; } } @media (min-width: 1025px) { .cLevelBox__content { padding: 24px; width: 50%; } } @media (min-width: 1540px) { .cLevelBox__content { padding: 40px; } } @media (max-width: 1024px) { .cLevelBox:hover { z-index: 2; } } @media (min-width: 1025px) { .cLevelBox.is-show-content-box { width: 470px; } } @media (min-width: 1250px) { .cLevelBox.is-show-content-box { width: 640px; } } @media (min-width: 1540px) { .cLevelBox.is-show-content-box { width: 720px; } } @media (min-width: 1700px) { .cLevelBox.is-show-content-box { width: 810px; } } @media (max-width: 1024px) { .cLevelBox.is-show-content-box { z-index: 3; } } @media (min-width: 768px) and (max-width: 1024px) { .cLevelBox.is-show-content-box .cLevelBox__content { left: 0; z-index: 4; } } .cLevelBox.is-show-content-text .cLevelBox__contentInner { opacity: 1; } .cLevelBoxes { display: flex; justify-content: flex-end; width: 100%; gap: 16px; } @media (min-width: 1250px) { .cLevelBoxes { gap: 24px; } } @media (max-width: 767px) { .cLevelBoxes { flex-wrap: wrap; } } .fullscreenSwiper { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px); } .fullscreenSwiperImage { padding: 0; } .fullscreenSwiperImage .swiper-button-prev, .fullscreenSwiperImage .swiper-button-next { color: var(--main-color-white); } .fullscreenSwiperThumbs { display: none; } .fullscreenSwiperClose { color: var(--main-color-white); } .careerHero__content { padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .careerHero__content { padding-right: 40px; flex-shrink: 0; width: 50%; } } @media (min-width: 1250px) { .careerHero__content { width: 45%; } } @media (min-width: 1540px) { .careerHero__content { width: 708px; } } .careerHero__video { width: 100%; } @media (min-width: 768px) { .careerHero__video { width: 50%; } } @media (min-width: 1250px) { .careerHero__video { width: 55%; } } @media (min-width: 1540px) { .careerHero__video { width: calc(100% - 700px); } } .careerHero__summary { margin-bottom: 32px; } @media (min-width: 768px) { .careerHero__summary { margin-bottom: 0; } } @media (min-width: 768px) { .careerHero__wrapper { display: flex; padding-left: 20px; align-items: flex-end; } } @media (min-width: 1740px) { .careerHero__wrapper { padding-left: calc((100% - 1680px) / 2); } } .careerHero__slogan { width: 80px; } @media (min-width: 768px) { .careerHero__slogan { width: 100px; } } @media (min-width: 1540px) { .careerHero__slogan { width: 250px; } } .careerHero__slogan img, .careerHero__slogan svg { aspect-ratio: 1; width: 100%; } .vehicleInUseBanner { display: flex; width: 100%; position: relative; flex-wrap: wrap; max-width: 2100px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .vehicleInUseBanner { flex-wrap: nowrap; } } .vehicleInUseBanner__logo { margin-bottom: 20px; } @media (max-width: 1024px) { .vehicleInUseBanner__logo { max-width: 100px; } } @media (max-width: 767px) { .vehicleInUseBanner__logo { max-width: 60px; margin-bottom: 10px; } } .vehicleInUseBanner__content { flex-shrink: 0; padding-left: 20px; padding-right: 20px; width: 100%; margin-bottom: 40px; display: flex; } @media (min-width: 768px) { .vehicleInUseBanner__content { margin-bottom: 0; width: 50%; padding-right: 40px; position: relative; } } @media (min-width: 1025px) { .vehicleInUseBanner__content { width: 45%; padding-right: 80px; } } @media (min-width: 1250px) { .vehicleInUseBanner__content { width: 36%; padding-right: 80px; } } @media (min-width: 1740px) { .vehicleInUseBanner__content { padding-left: calc((100% - 1680px) / 2); } } .vehicleInUseBanner__contentInner { width: 100%; display: flex; align-items: center; } @media (min-width: 768px) { .vehicleInUseBanner__contentInner { padding-bottom: 40px; padding-top: 40px; position: relative; } } @media (max-width: 1799px) { .vehicleInUseBanner__contentInner { padding-left: 40px; } } @media (max-width: 767px) { .vehicleInUseBanner__contentInner { padding-left: 0; } } .vehicleInUseBanner__sliderWrapper { flex-grow: 1; width: 100%; } @media (min-width: 768px) { .vehicleInUseBanner__sliderWrapper { width: 50%; } } @media (min-width: 1025px) { .vehicleInUseBanner__sliderWrapper { width: 55%; } } @media (min-width: 1250px) { .vehicleInUseBanner__sliderWrapper { width: 64%; } } @media (max-width: 1024px) { .vehicleInUseBanner__slider { padding-right: 20px; } } @media (max-width: 767px) { .vehicleInUseBanner__slider { padding-right: 20px; padding-left: 20px; } } .vehicleInUseBanner__slider .swiper { position: relative; } .vehicleInUseBanner__slider .swiper-wrapper { align-items: center; } .vehicleInUseBanner__slider .swiper-slide { opacity: 1; transition: opacity 0.2s ease-in-out; } .vehicleInUseBanner__slider .swiper-slide:not(.swiper-slide-active) { opacity: 0.5; } .vehicleInUseBanner__slider .swiper-slide.swiper-slide-next { scale: 0.8; transform-origin: left center; } .vehicleInUseBanner__sliderItem img { min-width: 100%; aspect-ratio: 1; object-fit: cover; } .vehicleInUseBanner .swiper-navigation { position: absolute; display: none; justify-content: flex-end; gap: 16px; bottom: 0; } @media (min-width: 768px) { .vehicleInUseBanner .swiper-navigation { display: flex; } } @media (min-width: 1025px) { .vehicleInUseBanner .swiper-navigation { gap: 24px; } } @media (max-width: 1799px) { .vehicleInUseBanner .swiper-navigation { width: calc(100% - 40px); } } .vehicleInUseBanner .swiper-navigation .swiper-button-prev, .vehicleInUseBanner .swiper-navigation .swiper-button-next { position: static; margin: 0; font-size: 3.2rem; } .vehicleInUseBanner .swiper-pagination { position: absolute; bottom: auto; width: 0; margin: 0; top: 0; transform: none; } @media (max-width: 767px) { .vehicleInUseBanner .swiper-pagination { top: auto; left: 20px; bottom: 20px; flex-direction: row; width: calc(100% - 40px); gap: 6px; } .vehicleInUseBanner .swiper-pagination .swiper-pagination-bullet-active { width: 60px; height: 12px; } .vehicleInUseBanner .swiper-pagination .swiper-pagination-bullet-active:after { transform-origin: left center; animation: fillBullet 5s linear forwards; } } @media (min-width: 768px) { .vehicleInUseBanner .swiper-pagination { top: 50%; transform: translateY(-50%); } } @media (min-width: 1800px) { .vehicleInUseBanner .swiper-pagination { left: -40px; } } @media (min-width: 1900px) { .vehicleInUseBanner .swiper-pagination { left: -80px; } } .vehicleInUseBanner .swiper-pagination-bullet { border-color: var(--main-color-black); } .vehicleInUseBanner .swiper-pagination-bullet-active:after { background-color: var(--main-color-black); } .instafeed .juicer-feed .feed-item { display: block; max-width: 100%; position: relative; width: 100%; background-color: var(--main-color-white); } @media (max-width: 480px) { .instafeed .juicer-feed .feed-item { width: 50% !important; } } .instafeed .juicer-feed .feed-item:before { content: ""; display: block; padding-top: 125%; } .instafeed .juicer-feed .feed-item .j-image { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; position: absolute !important; } .instafeed .juicer-feed .feed-item .j-image img { width: 100% !important; height: 100% !important; object-fit: cover; max-height: 100% !important; position: absolute; left: 0; top: 0; } .instafeed .juicer-feed .j-paginate.juicer-button { display: none; } @media (max-width: 480px) { .instafeed .juicer-feed .j-stacker-wrapper .j-stacker > * { display: flex !important; flex-wrap: wrap; align-items: stretch; } } .instafeed:has(.letter) { position: relative; z-index: 1; } .instafeed:has(.letter) .letter { top: -40px; z-index: -1; transform: none !important; aspect-ratio: 187/150; background-size: 100%; } .letter { position: absolute; pointer-events: none; z-index: 1; overflow: hidden; background-repeat: no-repeat; background-position: center center; display: none; } .letter--e { aspect-ratio: 13/30; width: 10%; } @media (min-width: 1250px) { .letter--e { width: 8%; } } @media (min-width: 1540px) { .letter--e { width: 10%; } } @media (min-width: 1700px) { .letter--e { width: 15%; } } .letter--e.letter--position-top-left, .letter--e.letter--position-bottom-left { left: 0; background-size: 200%; background-position: center right; } .letter--e.letter--position-top-left { top: 0; transform: translateY(-50%); } .letter--e.letter--position-bottom-right { bottom: 0; transform: translateY(50%); } .letter--e.letter--position-top-right, .letter--e.letter--position-bottom-right { right: 0; background-size: 120%; background-position: center left; } .letter--e.letter--position-top-right { top: 0; transform: translateY(-50%); } .letter--e.letter--position-bottom-right { bottom: 0; transform: translateY(50%); } .letter--a { aspect-ratio: 121/300; } .letter--a.letter--position-top-left, .letter--a.letter--position-bottom-left { left: 0; background-size: 200%; background-position: center right; } .letter--a.letter--position-top-left { top: 0; transform: translateY(-50%); } .letter--a.letter--position-bottom-right { bottom: 0; transform: translateY(50%); } .letter--a.letter--position-top-right, .letter--a.letter--position-bottom-right { right: 0; aspect-ratio: 121/150; background-size: 120%; background-position: center left; } .letter--a.letter--position-top-right { top: 0; transform: translateY(-50%); } .letter--a.letter--position-bottom-right { bottom: 0; transform: translateY(50%); } .letter--a.letter--rotate-90, .letter--a.letter--rotate-270 { aspect-ratio: 187/150; background-size: 100%; width: 35%; } @media (min-width: 768px) { .letter--a.letter--rotate-90, .letter--a.letter--rotate-270 { width: 20%; } } .letter--i.letter--rotate-0, .letter--i.letter--rotate-180, .letter--l.letter--rotate-0, .letter--l.letter--rotate-180 { aspect-ratio: 47/170; background-size: auto 100%; width: 15%; } @media (min-width: 768px) { .letter--i.letter--rotate-0, .letter--i.letter--rotate-180, .letter--l.letter--rotate-0, .letter--l.letter--rotate-180 { width: 8%; } } @media (min-width: 1025px) { .letter--i.letter--rotate-0, .letter--i.letter--rotate-180, .letter--l.letter--rotate-0, .letter--l.letter--rotate-180 { width: 10%; } } .letter--i.letter--rotate-0.letter--position-top-left, .letter--i.letter--rotate-0.letter--position-bottom-left, .letter--i.letter--rotate-180.letter--position-top-left, .letter--i.letter--rotate-180.letter--position-bottom-left, .letter--l.letter--rotate-0.letter--position-top-left, .letter--l.letter--rotate-0.letter--position-bottom-left, .letter--l.letter--rotate-180.letter--position-top-left, .letter--l.letter--rotate-180.letter--position-bottom-left { left: 0; background-position: center right; } .letter--i.letter--rotate-0.letter--position-top-left, .letter--i.letter--rotate-180.letter--position-top-left, .letter--l.letter--rotate-0.letter--position-top-left, .letter--l.letter--rotate-180.letter--position-top-left { top: 0; transform: translateY(-50%); } .letter--i.letter--rotate-0.letter--position-bottom-left, .letter--i.letter--rotate-180.letter--position-bottom-left, .letter--l.letter--rotate-0.letter--position-bottom-left, .letter--l.letter--rotate-180.letter--position-bottom-left { bottom: 0; transform: translateY(50%); } .letter--i.letter--rotate-0.letter--position-top-right, .letter--i.letter--rotate-0.letter--position-bottom-right, .letter--i.letter--rotate-180.letter--position-top-right, .letter--i.letter--rotate-180.letter--position-bottom-right, .letter--l.letter--rotate-0.letter--position-top-right, .letter--l.letter--rotate-0.letter--position-bottom-right, .letter--l.letter--rotate-180.letter--position-top-right, .letter--l.letter--rotate-180.letter--position-bottom-right { right: 0; background-position: center left; } .letter--i.letter--rotate-0.letter--position-top-right, .letter--i.letter--rotate-180.letter--position-top-right, .letter--l.letter--rotate-0.letter--position-top-right, .letter--l.letter--rotate-180.letter--position-top-right { top: 0; transform: translateY(-50%); } .letter--i.letter--rotate-0.letter--position-bottom-right, .letter--i.letter--rotate-180.letter--position-bottom-right, .letter--l.letter--rotate-0.letter--position-bottom-right, .letter--l.letter--rotate-180.letter--position-bottom-right { bottom: 0; transform: translateY(50%); } .letter--i.letter--rotate-90, .letter--l.letter--rotate-90 { width: 30%; aspect-ratio: 170/70; background-size: auto 100%; } .letter--i.letter--rotate-90.letter--position-top-left, .letter--i.letter--rotate-90.letter--position-bottom-left, .letter--l.letter--rotate-90.letter--position-top-left, .letter--l.letter--rotate-90.letter--position-bottom-left { left: 0; background-position: right center; } .letter--i.letter--rotate-90.letter--position-top-left, .letter--l.letter--rotate-90.letter--position-top-left { top: 0; } .letter--i.letter--rotate-90.letter--position-bottom-left, .letter--l.letter--rotate-90.letter--position-bottom-left { bottom: 0; } .letter--i.letter--rotate-90.letter--position-top-right, .letter--i.letter--rotate-90.letter--position-bottom-right, .letter--l.letter--rotate-90.letter--position-top-right, .letter--l.letter--rotate-90.letter--position-bottom-right { right: 0; background-position: left center; } .letter--i.letter--rotate-90.letter--position-top-right, .letter--l.letter--rotate-90.letter--position-top-right { top: 0; transform: translateY(-50%); } .letter--i.letter--rotate-90.letter--position-bottom-right, .letter--l.letter--rotate-90.letter--position-bottom-right { bottom: 0; transform: translateY(50%); } .letter--i.letter--rotate-270, .letter--l.letter--rotate-270 { background-size: auto 100%; } .letter--i.letter--rotate-270.letter--position-top-left, .letter--i.letter--rotate-270.letter--position-bottom-left, .letter--l.letter--rotate-270.letter--position-top-left, .letter--l.letter--rotate-270.letter--position-bottom-left { left: 0; background-size: auto 100%; background-position: right center; aspect-ratio: 170/60; width: 40%; } @media (min-width: 768px) { .letter--i.letter--rotate-270.letter--position-top-left, .letter--i.letter--rotate-270.letter--position-bottom-left, .letter--l.letter--rotate-270.letter--position-top-left, .letter--l.letter--rotate-270.letter--position-bottom-left { width: 30%; } } .letter--i.letter--rotate-270.letter--position-top-right, .letter--i.letter--rotate-270.letter--position-bottom-right, .letter--l.letter--rotate-270.letter--position-top-right, .letter--l.letter--rotate-270.letter--position-bottom-right { right: 0; background-position: left center; aspect-ratio: 170/70; width: 40%; } @media (min-width: 768px) { .letter--i.letter--rotate-270.letter--position-top-right, .letter--i.letter--rotate-270.letter--position-bottom-right, .letter--l.letter--rotate-270.letter--position-top-right, .letter--l.letter--rotate-270.letter--position-bottom-right { width: 25%; } } .letter--i.letter--rotate-270.letter--position-top-left, .letter--i.letter--rotate-270.letter--position-top-right, .letter--l.letter--rotate-270.letter--position-top-left, .letter--l.letter--rotate-270.letter--position-top-right { top: 0; transform: translateY(-50%); } .letter--i.letter--rotate-270.letter--position-bottom-left, .letter--i.letter--rotate-270.letter--position-bottom-right, .letter--l.letter--rotate-270.letter--position-bottom-left, .letter--l.letter--rotate-270.letter--position-bottom-right { bottom: 0; transform: translateY(50%); } .letter--i.letter--rotate-90.letter--position-top-left, .letter--i.letter--rotate-90.letter--position-top-right { transform: translateY(-36%); } .letter--i.letter--rotate-90.letter--position-bottom-left, .letter--i.letter--rotate-90.letter--position-bottom-right { transform: translateY(64%); } .letter--i.letter--rotate-270.letter--position-top-left, .letter--i.letter--rotate-270.letter--position-top-right { transform: translateY(-64%); } .letter--i.letter--rotate-270.letter--position-bottom-left, .letter--i.letter--rotate-270.letter--position-bottom-right { transform: translateY(36%); } .letter--l.letter--rotate-90 { aspect-ratio: 190/60; } .letter--l.letter--rotate-90.letter--position-top-left, .letter--l.letter--rotate-90.letter--position-top-right { transform: translateY(-36%); } .letter--l.letter--rotate-90.letter--position-bottom-left, .letter--l.letter--rotate-90.letter--position-bottom-right { transform: translateY(64%); } .letter--l.letter--rotate-270.letter--position-top-left, .letter--l.letter--rotate-270.letter--position-top-right { transform: translateY(-64%); } .letter--l.letter--rotate-270.letter--position-bottom-left, .letter--l.letter--rotate-270.letter--position-bottom-right { transform: translateY(36%); } .letterWrapper { position: relative; } .letterWrapper:has(.letter--below) { z-index: 1; } .letterWrapper:has(.letter--below) .letter--below { z-index: -1; } .letterWrapper .letter { display: block; } .modal--xs .modal__dialog { max-width: 480px; } .roadshowForm__progress { margin-bottom: 24px; } .roadshowForm__progressBar { position: relative; height: 4px; background: var(--main-color-light-gray); border-radius: 2px; margin-bottom: 16px; } .roadshowForm__progressFill { position: absolute; top: 0; left: 0; height: 100%; background: var(--main-color-primary); border-radius: 2px; transition: width 0.4s ease; width: 0%; } .roadshowForm__steps { display: flex; justify-content: space-between; position: relative; margin-bottom: 10px; margin-top: -35px; } .roadshowForm__stepDot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--main-color-light-gray); background: var(--main-color-white); color: var(--main-color-gray-base); font-weight: var(--main-font-weight-bold); transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; padding: 0; } .roadshowForm__stepDot.is-done { border-color: var(--main-color-primary); background: var(--main-color-primary); color: var(--main-color-black); } .roadshowForm__stepDot.is-active { border-color: var(--main-color-black); background: var(--main-color-black); color: var(--main-color-primary); transform: scale(1.15); } .roadshowForm__stepLabel { color: var(--main-color-gray-base); margin: 0; text-align: right; } .roadshowForm__step { display: none; animation: rsStepIn 0.3s ease; } .roadshowForm__step.is-active { display: block; } @keyframes rsStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .roadshowForm__stepHeader { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 32px; } .roadshowForm__stepNumber { font-size: 4.8rem; font-weight: var(--main-font-weight-xbold); color: var(--main-color-primary); line-height: 1; min-width: 50px; } .roadshowForm__stepTitle { font-size: 2.2rem; font-weight: var(--main-font-weight-bold); margin: 0 0 4px; color: var(--main-color-black); } .roadshowForm__stepSubtitle { color: var(--main-color-gray-base); margin: 0; } .roadshowForm__grid { display: grid; gap: 16px; margin-bottom: 24px; } .roadshowForm__grid--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 767px) { .roadshowForm__grid--2 { grid-template-columns: 1fr; } } .roadshowForm__grid--span2 { grid-column: 1/-1; } .roadshowForm__sectionDivider { display: flex; align-items: center; gap: 12px; margin: 24px 0 24px; color: var(--main-color-gray-base); font-weight: var(--main-font-weight-bold); text-transform: uppercase; letter-spacing: 1px; } .roadshowForm__sectionDivider::before, .roadshowForm__sectionDivider::after { content: ""; flex: 1; height: 1px; background: var(--main-color-light-gray); } .roadshowForm__radioGroup { border: none; padding: 0; margin: 0; min-width: 0; } .roadshowForm__radioGroup__label { display: block; font-weight: var(--main-font-weight-bold); color: var(--main-color-dark-gray); margin: 0 0 10px; } .roadshowForm__radioGroup__options { display: flex; flex-wrap: wrap; gap: 8px; } .roadshowForm__radioOption, .roadshowForm__checkboxOption { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1.5px solid var(--main-color-light-gray); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; background: var(--main-color-white); white-space: nowrap; } .roadshowForm__radioOption input[type=radio], .roadshowForm__checkboxOption input[type=radio], .roadshowForm__radioOption input[type=checkbox], .roadshowForm__checkboxOption input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; } .roadshowForm__radioOption:hover, .roadshowForm__checkboxOption:hover { border-color: var(--main-color-black); } .roadshowForm__radioOption:has(input:focus-visible), .roadshowForm__checkboxOption:has(input:focus-visible) { outline: 2px solid var(--main-color-black); outline-offset: 2px; } .roadshowForm__radioOption:has(input:checked), .roadshowForm__checkboxOption:has(input:checked) { border-color: var(--main-color-black); background: var(--main-color-black); color: var(--main-color-primary); } .roadshowForm__multiHint { font-weight: 400; font-size: 1.3rem; color: var(--main-color-gray-base); } .roadshowForm__checkboxGroup { border: none; padding: 0; margin: 0 0 24px; min-width: 0; } .roadshowForm__checkboxGrid { display: flex; flex-wrap: wrap; gap: 8px; } .roadshowForm__rentalLink { color: var(--main-color-dark-gray); } .roadshowForm__rentalLink:hover { color: var(--main-color-black); } .roadshowForm__flatpickr.flatpickr-calendar { border: 1px solid var(--main-color-light-gray); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); font-family: inherit; } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-months { background: var(--main-color-black); border-radius: 5px 5px 0 0; } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-months .flatpickr-month, .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-months .flatpickr-next-month { color: var(--main-color-white); fill: var(--main-color-white); } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-months .flatpickr-month:hover svg, .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--main-color-primary); } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-weekday { color: var(--main-color-gray-base); font-weight: var(--main-font-weight-bold); } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-day { border-radius: 4px; } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-day:hover { background: var(--main-color-light-gray); border-color: var(--main-color-light-gray); } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-day.selected, .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-day.startRange, .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-day.endRange { background: var(--main-color-black); border-color: var(--main-color-black); color: var(--main-color-primary); } .roadshowForm__flatpickr.flatpickr-calendar .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); } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-day.today:not(.selected) { border-color: var(--main-color-primary); } .roadshowForm__flatpickr.flatpickr-calendar .flatpickr-day.flatpickr-disabled { color: var(--main-color-light-gray); } .roadshowForm__conditionalBlock { margin-top: 24px; } .roadshowForm__nav { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--main-color-light-gray); } .roadshowForm__navSpacer { flex: 1; } .roadshowForm__requiredHint { font-size: 1.2rem; color: var(--main-color-gray-base); margin: 16px 0 0; } .roadshowForm__privacy .roadshowForm__checkboxOption { white-space: normal; padding: 12px 16px; } .roadshowForm__summary { padding: 0; } .roadshowForm__summaryTitle { font-size: 2rem; font-weight: var(--main-font-weight-bold); margin-top: 32px; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--main-color-black); } .roadshowForm__summarySection { margin-bottom: 20px; } .roadshowForm__summarySection:last-child { margin-bottom: 0; } .roadshowForm__summarySectionTitle { font-weight: var(--main-font-weight-bold); margin-bottom: 12px; } .roadshowForm__summaryList { margin: 0; display: grid; grid-template-columns: 300px 1fr; gap: 4px 12px; } @media (max-width: 767px) { .roadshowForm__summaryList { grid-template-columns: 1fr; } } .roadshowForm__summaryList dt { color: var(--main-color-gray-base); } .roadshowForm__summaryList dd { margin: 0; } .roadshowForm__success { text-align: center; animation: rsStepIn 0.4s ease; } .roadshowForm__successIcon { font-size: 6.4rem; color: var(--main-color-primary); margin-bottom: 24px; line-height: 1; } .roadshowForm__successIcon .icon { font-size: 6.4rem; } .roadshowForm__successTitle { font-size: 2.8rem; font-weight: var(--main-font-weight-bold); margin: 0 0 16px; } .roadshowForm__successText { color: var(--main-color-gray-base); max-width: 480px; margin: 0 auto; } .roadshowForm .infieldInputGroup__input.is-invalid { border-color: var(--main-color-danger) !important; } .roadshowForm .button.is-loading { opacity: 0.7; pointer-events: none; } .roadshowForm .button.is-loading::after { content: ""; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rsSpin 0.7s linear infinite; margin-left: 8px; vertical-align: middle; } @keyframes rsSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .roadshowForm .infieldInputGroup:has(textarea):not(.is-filled):not(.is-focus) > label { top: 10px; transform: none; } .roadshowForm textarea { min-height: 100px; } /* Hero with form Two-column landing page hero: optional logo, subtitle, headline, summary and a USP check list on the left, a primary-colored box with an embedded HubSpot form on the right. Wrap `strong` inside the headline to highlight words. Styleguide Components.Hero with form */ .heroForm { padding-left: 20px; padding-right: 20px; } @media (min-width: 1025px) { .heroForm { padding-left: 40px; padding-right: 40px; } } .heroForm__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1025px) { .heroForm__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1250px) { .heroForm__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); column-gap: 80px; } } .heroForm__content { min-width: 0; max-width: 900px; } .heroForm__logo { display: flex; max-width: 300px; } .heroForm__logo img, .heroForm__logo picture { display: block; width: 100%; height: auto; } .heroForm__divider { margin: 30px 0; } .heroForm__headline h1, .heroForm__headline h2, .heroForm__headline h3, .heroForm__headline h4, .heroForm__headline h5, .heroForm__headline h6, .heroForm__headline .h1, .heroForm__headline .historyEilaItem__year, .heroForm__headline .h2, .heroForm__headline .horizontalInfoSlide__headline, .heroForm__headline .h3, .heroForm__headline .h4, .heroForm__headline .h5, .heroForm__headline .h6, .heroForm__headline .historyEilaItem__headline { color: var(--main-color-white) !important; } .heroForm__summary { margin-bottom: 40px; } .heroForm__usps { display: grid; grid-template-columns: 1fr; grid-row-gap: 12px; margin: 0; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--main-color-middle-gray); border-bottom: 1px solid var(--main-color-middle-gray); } @media (min-width: 768px) { .heroForm__usps { grid-template-columns: repeat(3, 1fr); grid-column-gap: 40px; } } .heroForm__usp { margin: 0; } .heroForm__box { min-width: 0; padding: 30px; color: var(--main-color-black); } .heroForm__boxSubtitle { text-transform: uppercase; } .heroForm__boxHeadline { color: var(--main-color-black); margin-top: 5px; margin-bottom: 5px; } .heroForm__boxHeadline h1, .heroForm__boxHeadline h2, .heroForm__boxHeadline h3, .heroForm__boxHeadline h4, .heroForm__boxHeadline h5, .heroForm__boxHeadline h6, .heroForm__boxHeadline .h1, .heroForm__boxHeadline .historyEilaItem__year, .heroForm__boxHeadline .h2, .heroForm__boxHeadline .horizontalInfoSlide__headline, .heroForm__boxHeadline .h3, .heroForm__boxHeadline .h4, .heroForm__boxHeadline .h5, .heroForm__boxHeadline .h6, .heroForm__boxHeadline .historyEilaItem__headline { color: var(--main-color-black) !important; margin: 0; } .heroForm__boxSummary { margin-bottom: 20px; } .heroForm__form:not(:has(.hs-form-iframe)) { aspect-ratio: 6/2; } /* Content tiles Intro (subtitle, headline, summary) followed by a list of tiles. The layout option switches the tile look: - `contentTiles--numbered`: two-column list with auto-numbered items (01, 02, …) - `contentTiles--cards`: white cards with a primary badge - `contentTiles--usp`: black boxes with a big primary claim `contentTiles--center` centers the intro. Markup:
Warum eila

Was Du vor Ort aus erster Hand siehst

Styleguide Components.Content tiles */ .contentTiles__headline strong, .contentTiles__headline b { color: var(--main-color-primary); font-weight: inherit; } .contentTiles__summary { margin-bottom: 20px; } .contentTiles__list { display: grid; grid-template-columns: 1fr; gap: 30px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: contentTiles; } @media (min-width: 768px) { .contentTiles__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1025px) { .contentTiles__list { grid-template-columns: repeat(3, 1fr); gap: 40px; } } .contentTiles__item { margin: 0; padding: 0; list-style: none; counter-increment: contentTiles; } .contentTiles__item::marker, .contentTiles__item::before { content: none; } .contentTiles__badge { display: inline-block; margin-bottom: 20px; padding: 6px 12px; background: var(--main-color-primary); color: var(--main-color-black); font-size: 1.2rem; font-weight: var(--main-font-weight-bold); line-height: 1.2; text-transform: uppercase; } .contentTiles__title { margin-bottom: 15px; } .contentTiles__text > *:last-child { margin-bottom: 0; } .contentTiles--center .contentTiles__subtitle, .contentTiles--center .contentTiles__headline, .contentTiles--center .contentTiles__summary { text-align: center; } .contentTiles--numbered .contentTiles__list { gap: 0; } @media (min-width: 768px) { .contentTiles--numbered .contentTiles__list { grid-template-columns: 1fr; } } @media (min-width: 1025px) { .contentTiles--numbered .contentTiles__list { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } } .contentTiles--numbered .contentTiles__item { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 30px 0; border-top: 1px solid var(--main-color-middle-gray); } @media (min-width: 1025px) { .contentTiles--numbered .contentTiles__item { grid-template-columns: 120px 1fr; } } .contentTiles--numbered .contentTiles__item::before { content: counter(contentTiles, decimal-leading-zero); color: var(--main-color-primary); font-size: 5rem; font-weight: var(--main-font-weight-bold); line-height: 1; } @media (min-width: 1025px) { .contentTiles--numbered .contentTiles__item::before { font-size: 7rem; } } .contentTiles--numbered .contentTiles__title { color: var(--main-color-white); } .contentTiles--cards .contentTiles__item { padding: 24px; background: var(--main-color-white); color: var(--main-color-black); } .contentTiles--cards .contentTiles__title { color: var(--main-color-black); } .contentTiles--usp .contentTiles__item { padding: 24px; background: var(--main-color-black); color: var(--main-color-white); } .contentTiles--usp .contentTiles__title { color: var(--main-color-primary); font-size: 5rem; line-height: 1; } @media (min-width: 1025px) { .contentTiles--usp .contentTiles__title { font-size: 7rem; } } .slidecontentItem { margin: 0; border-bottom-color: var(--main-color-black); } .slidecontentItem:not(:last-child) { margin: 0; } .slidecontentItem__headline { font-size: 2rem; padding: 10px; padding-left: 0; padding-right: 30px; } @media (min-width: 768px) { .slidecontentItem__headline { font-size: 2.2rem; } } .slidecontentItem__headline:after { left: auto; right: 0; } .slidecontentItem__content { padding: 0 0 20px 0; } @media (min-width: 768px) { .slidecontentItem__content { padding: 10px 0 20px 0; } } .bg--primary .slidecontentItem__headline:hover, .bg--primary .slidecontentItem__headline:focus, .bg--primary .slidecontentItem__headline:active { color: var(--main-color-black); } .imageGalleryEila { max-width: 2100px; } .imageGalleryEila .swiper-slide { opacity: 0.5; transform: scale(0.8); transition: all 0.3s ease; } .imageGalleryEila .swiper-slide.swiper-slide-active { opacity: 1; transform: scale(1); z-index: 1; } .imageGalleryEila .swiper-slide.swiper-slide-prev { transform: scale(0.8) translateX(13%); } .imageGalleryEila .swiper-slide.swiper-slide-next { transform: scale(0.8) translateX(-13%); } .imageGalleryEila .swiper-button-prev, .imageGalleryEila .swiper-button-next { color: var(--main-color-white); } .imageGalleryEila .swiper-button-prev:hover, .imageGalleryEila .swiper-button-prev:focus, .imageGalleryEila .swiper-button-prev:active, .imageGalleryEila .swiper-button-next:hover, .imageGalleryEila .swiper-button-next:focus, .imageGalleryEila .swiper-button-next:active { color: var(--main-color-primary); } .imageGalleryEila:not(.swiper-initialized) { display: flex; } .imageGalleryEila:not(.swiper-initialized) .swiper-slide { width: 50%; } .imageGalleryEilaItem__img { min-width: 100%; aspect-ratio: 1200/800; background-color: var(--main-color-black); object-fit: contain; } .collection .tags { display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 10px; } @media (max-width: 767px) { .collection .tags { overflow-y: hidden; scroll-snap-type: x mandatory; flex-wrap: nowrap; margin-left: -20px; margin-right: -20px; padding-left: 20px; } .collection .tags > * { scroll-snap-align: center; flex-shrink: 0; } .collection .tags > *:last-child { margin-right: 20px; } } @media (min-width: 1250px) { .collection .tags { gap: 10px 20px; } } .collection .tags .tag { border: 1px solid var(--main-color-white); display: inline-flex; color: var(--main-color-white); text-decoration: none; white-space: nowrap; line-height: 20px; padding: 6px 14px; border-radius: 4px; background: transparent; font-weight: var(--main-font-weight-medium); } @media (min-width: 1250px) { .collection .tags .tag { padding: 10px 28px; font-size: 1.8rem; } } .collection .tags .tag:hover, .collection .tags .tag:focus, .collection .tags .tag:active, .collection .tags .tag.is-active { border-color: var(--main-color-primary); background: var(--main-color-primary); color: var(--main-color-black); } .customerLogos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 0; padding: 0; } @media (min-width: 1025px) { .customerLogos { gap: 16px 32px; } } @media (min-width: 1250px) { .customerLogos { gap: 32px 64px; } } .customerLogos .customerLogo { margin: 0; padding: 0; list-style: none; flex-shrink: 0; width: 80px; text-align: center; } @media (min-width: 1025px) { .customerLogos .customerLogo { width: 120px; } } .customerLogos .customerLogo img { aspect-ratio: 4/3; object-fit: contain; filter: grayscale(1); display: block; } /* Contactperson Markup:
Martin Hausmann
Martin Hausmann
+49 (0)921 – 95 92 30 00
roadshow@eila.de
Styleguide Siteparts.Contactperson */ .contactPerson { container-name: contactPerson; container-type: inline-size; } .contactPerson__img { margin-bottom: 24px; } .contactPerson__img img { aspect-ratio: 1; object-fit: cover; overflow: hidden; border-radius: 50%; } .contactPerson__name { font-weight: var(--main-font-weight-bold); margin-bottom: 8px; } .contactPerson__links { display: flex; flex-direction: column; gap: 4px; } @container contactPerson (min-width: 290px) { .contactPerson__wrapper { display: flex; align-items: center; gap: 24px; } .contactPerson__img { max-width: 100px; margin-bottom: 0; } } .contactPersons .collectionArea { display: flex; gap: 24px; flex-wrap: wrap; display: grid; grid-column-gap: 32px; grid-row-gap: 32px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .project { width: 100%; display: block; position: relative; container-type: inline-size; container-name: project; } .project:before { content: ""; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; opacity: 0; transition: opacity 0.2s ease-in-out; z-index: 1; } .project__img { overflow: hidden; display: block; width: 100%; } .project__img img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; transition: 0.2s ease-in-out; } .project__video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease-in-out; } .project__video video { width: 100% !important; height: 100% !important; object-fit: cover !important; } .project__hover { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; color: var(--main-color-white); display: flex; flex-direction: column; opacity: 0; transition: 0.2s ease-in-out; transform: translateY(10px); padding: 12px; } @container project (min-width: 200px) { .project__hover { padding: 16px; } } @container project (min-width: 300px) { .project__hover { padding: 24px; } } .project__logo { max-width: 60px; } @container project (min-width: 200px) { .project__logo { max-width: 100px; } } @container project (min-width: 300px) { .project__logo { max-width: 120px; } } .project__logo img { aspect-ratio: 1; } .project__headline { font-size: 1.8rem; font-weight: var(--main-font-weight-bold); line-height: 1; text-transform: uppercase; } @container project (min-width: 200px) { .project__headline { font-size: 2.4rem; } } @container project (min-width: 300px) { .project__headline { font-size: 3.6rem; } } .project__hoverContent { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; } .project__hoverContent:after { content: var(--base-icon-arrow-right); font-family: "icons", Helvetica, Arial, sans-serif; color: var(--main-color-primary); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 24px; line-height: 1; font-style: normal; margin-left: auto; margin-top: 4px; } @container project (min-width: 200px) { .project__hoverContent:after { width: 32px; height: 32px; font-size: 32px; } } .project:hover:before, .project:focus:before, .project:active:before { opacity: 1; } .project:hover img, .project:focus img, .project:active img { scale: 1.06; } .project:hover .project__hover, .project:focus .project__hover, .project:active .project__hover { opacity: 1; transform: translateY(0px); } .project:hover .project__video, .project:focus .project__video, .project:active .project__video { opacity: 1; } .projects .collectionArea { display: grid; grid-column-gap: 20px; grid-row-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } @media (min-width: 768px) { .projects .collectionArea { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (min-width: 1024px) { .projects .collectionArea { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } @media (min-width: 1250px) { .projects .collectionArea { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } @media (min-width: 1540px) { .projects .collectionArea { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } } @media (max-width: 767px) { .projects .collectionArea { grid-column-gap: 10px; grid-row-gap: 10px; } } .projects.isCrossseller .collectionArea { display: grid; grid-column-gap: 20px; grid-row-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } @media (min-width: 768px) { .projects.isCrossseller .collectionArea { grid-template-columns: repeat(auto-fill, minmax(263px, 1fr)); } } @media (min-width: 1024px) { .projects.isCrossseller .collectionArea { grid-template-columns: repeat(auto-fill, minmax(263px, 1fr)); } } @media (min-width: 1250px) { .projects.isCrossseller .collectionArea { grid-template-columns: repeat(auto-fill, minmax(263px, 1fr)); } } @media (min-width: 1540px) { .projects.isCrossseller .collectionArea { grid-template-columns: repeat(auto-fill, minmax(263px, 1fr)); } } @media (max-width: 767px) { .projects.isCrossseller .collectionArea { grid-column-gap: 10px; grid-row-gap: 10px; } } @media (max-width: 767px) { .projects.isCrossseller .collectionArea { display: flex; overflow-y: hidden; scroll-snap-type: x mandatory; flex-wrap: nowrap; margin-left: -20px; margin-right: -20px; padding-left: 20px; } .projects.isCrossseller .collectionArea > * { scroll-snap-align: center; flex-shrink: 0; margin-right: 20px; width: 60%; } } .projects.preview .project { width: 140px; flex-shrink: 0; } @media (min-width: 768px) { .projects.preview .project { width: 300px; } } @media (min-width: 1540px) { .projects.preview .project { width: 400px; } } .projects.projectsSwiper { overflow: hidden; position: relative; max-width: 2100px; margin-left: auto; margin-right: auto; } .projects.projectsSwiper .swiper-wrapper { transition-timing-function: linear !important; } .projects.projectsSwiper .swiper-slide { width: auto; } .projectBanner { margin: 0 auto; max-width: 2100px; position: relative; } .projectBanner:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 10%, rgba(255, 255, 255, 0) 80%); z-index: 1; } .projectBanner picture, .projectBanner video, .projectBanner img { aspect-ratio: 6/4 !important; object-fit: cover !important; min-width: 100%; } @media (min-width: 768px) { .projectBanner picture, .projectBanner video, .projectBanner img { aspect-ratio: 1920/540 !important; } } .projectBoxArea { position: relative; z-index: 1; } .projectDetailsBox { padding: 24px; margin-top: -70px; } @media (min-width: 768px) { .projectDetailsBox { padding: 32px; margin-top: -120px; } } @media (min-width: 1250px) { .projectDetailsBox { padding: 64px; margin-top: -130px; } } .projectDetailsBox__head { display: flex; gap: 20px; justify-content: space-between; } .projectDetailsBox__logo { order: 1; width: 120px; filter: grayscale(1); text-align: center; margin-top: -8px; margin-right: -8px; } @media (min-width: 768px) { .projectDetailsBox__logo { width: 160px; margin-top: -16px; margin-right: -16px; } } @media (min-width: 1250px) { .projectDetailsBox__logo { margin-top: -30px; margin-right: -16px; } } .projectDetailsBox__logo img { aspect-ratio: 4/3; } .projectDetailsBox .projectItempreview { margin-left: -24px; margin-right: -24px; } @media (min-width: 768px) { .projectDetailsBox .projectItempreview { margin-left: -32px; margin-right: -32px; } } @media (min-width: 1250px) { .projectDetailsBox .projectItempreview { margin-left: -64px; margin-right: -64px; } } .projectDetailsBox .projectItempreview .itemboxList.swiper .itemboxSliderHospitality { position: relative; } .projectDetailsBox .projectItempreview .itemboxList.swiper .itemboxSliderHospitality__image img { aspect-ratio: 830/467; } .projectDetailsBox .projectItempreview .itemboxList.swiper .itemboxSliderHospitality__content { margin: 0; position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; } .projectDetailsBox .projectItempreview .itemboxList.swiper .itemboxSliderHospitality__name { font-size: 2.2rem; } .projectDetailsBox .projectItempreview .itemboxList.swiper .swiper-button-prev, .projectDetailsBox .projectItempreview .itemboxList.swiper .swiper-button-next { color: var(--main-color-black); } .projectDetailsBox .projectItempreview .itemboxList.swiper .swiper-slide.swiper-slide-active { z-index: 1; } .projectDetailsBox .projectItempreview .itemboxList.swiper .swiper-slide.swiper-slide-next { transform-origin: left center; opacity: 0.5; transform: translate(-20%, 0) scale(0.8); } .projectDetailsBox .projectItempreview .itemboxList.swiper .swiper-slide.swiper-slide-prev { transform: translate(20%, 0) scale(0.8); transform-origin: right center; } .projectDetailsBox .projectItempreview .itemboxList.swiper .swiper-pagination-bullets { display: none; } .projectDetailsBox .projectItempreview .itemboxList.swiper:not(.swiper-initialized) .swiper-slide { width: 100%; } @media (min-width: 768px) { .projectDetailsBox .projectItempreview .itemboxList.swiper:not(.swiper-initialized) .swiper-slide { width: 65%; } } .projects.isList:has(.letter) { position: relative; } .projects.isList:has(.letter) .letter { right: 2%; transform: none !important; z-index: 1; background-size: 100%; aspect-ratio: 187/150; width: 40%; top: 50px; } @media (min-width: 768px) { .projects.isList:has(.letter) .letter { width: 35%; top: 100px; } } @media (min-width: 1025px) { .projects.isList:has(.letter) .letter { width: 35%; top: 60px; max-width: 450px; } } .projects.isList:has(.letter) .collectionArea { position: relative; z-index: 2; } .projectDetailsBoxWrapper:has(.letter) { position: relative; padding-bottom: 48px; } @media (min-width: 1025px) { .projectDetailsBoxWrapper:has(.letter) { padding-right: 32px; padding-bottom: 48px; } } @media (min-width: 1250px) { .projectDetailsBoxWrapper:has(.letter) { padding-right: 48px; padding-bottom: 60px; } } @media (min-width: 1720px) { .projectDetailsBoxWrapper:has(.letter) { padding-right: 80px; padding-bottom: 80px; } } .projectDetailsBoxWrapper:has(.letter) .letter { aspect-ratio: 173/150; background-size: 100%; transform: none !important; z-index: -1; width: 60%; right: -15px; bottom: 15px; } @media (min-width: 768px) { .projectDetailsBoxWrapper:has(.letter) .letter { bottom: 0; } } @media (min-width: 1025px) { .projectDetailsBoxWrapper:has(.letter) .letter { width: 50%; right: 0; } } @media (min-width: 1540px) { .projectDetailsBoxWrapper:has(.letter) .letter { width: 60%; } } .projectCrossseller:has(.letter) { position: relative; z-index: 1; } .projectCrossseller:has(.letter) .letter--e { z-index: -1; aspect-ratio: 13/8; background-position: top center; background-size: 100%; transform: none; width: 27%; right: 2%; } .historyEilaItem { display: flex; flex-direction: column; width: 100%; background: var(--main-color-white); } @media (min-width: 768px) { .historyEilaItem { flex-direction: row; } } .historyEilaItem__content { flex-grow: 1; padding: 32px 64px 64px 32px; } @media (min-width: 768px) { .historyEilaItem__content { padding: 30px 120px 60px 40px; } } @media (min-width: 1540px) { .historyEilaItem__content { padding: 80px 140px 80px 80px; } } .historyEilaItem__year { margin-bottom: 24px; } .historyEilaItem__headline { flex-grow: 1; margin-bottom: 24px; } .historyEilaItem__img { flex-shrink: 0; width: 100%; aspect-ratio: 1053/592; background: var(--main-color-light-gray); } @media (min-width: 768px) { .historyEilaItem__img { width: 50%; } } @media (min-width: 1250px) { .historyEilaItem__img { width: 60%; } } @media (min-width: 1540px) { .historyEilaItem__img { width: 65%; } } .historyEilaItem__img img { aspect-ratio: 1053/592; object-fit: cover; min-height: 100%; min-width: 100%; display: block; } .historyEilaSlider .swiper-slide { display: flex; } .historyEilaSlider .swiper-navigation { position: absolute; right: 0; bottom: 0; display: flex; gap: 8px; padding: 16px 24px; padding-top: 0; width: 100%; } @media (min-width: 768px) { .historyEilaSlider .swiper-navigation { padding: 20px 40px; padding-top: 0; width: 50%; gap: 16px; } } @media (min-width: 1250px) { .historyEilaSlider .swiper-navigation { width: 40%; } } @media (min-width: 1540px) { .historyEilaSlider .swiper-navigation { padding: 48px 80px; padding-top: 0; width: 35%; } } .historyEilaSlider .swiper-navigation .swiper-button-prev, .historyEilaSlider .swiper-navigation .swiper-button-next { margin: 0; font-size: 3.2rem; position: static; } .historyEilaSlider .swiper-pagination { position: absolute; left: auto; top: 0; height: 100%; width: auto; margin: 0; justify-content: center; right: 24px; } @media (min-width: 768px) { .historyEilaSlider .swiper-pagination { right: 32px; } } .historyEilaSlider .swiper-pagination .swiper-pagination-bullet { margin: 0; border-color: var(--main-color-gray-base); } .historyEilaSlider .swiper-pagination .swiper-pagination-bullet:after { background-color: var(--main-color-gray-base); } @keyframes fillBulletVertical { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } .eilaInfoTVBox { display: block; position: relative; color: var(--main-color-white); background-color: var(--main-color-white); container-type: inline-size; container-name: infotv-box; } .eilaInfoTVBox__img { display: block; aspect-ratio: 1; position: relative; overflow: hidden; } .eilaInfoTVBox__img img { aspect-ratio: 1; min-width: 100%; display: block; transition: 0.2s ease-in-out; } .eilaInfoTVBox__img:before { content: var(--base-icon-play); font-family: "icons", Helvetica, Arial, sans-serif; display: flex; align-items: center; justify-content: center; padding-bottom: 1px; border-radius: 50%; background: var(--main-color-primary); color: var(--main-color-black); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; font-size: 20px; padding-left: 2px; margin-top: -28px; transition: 0.2s ease-in-out; z-index: 1; } @container infotv-box (min-width: 250px) { .eilaInfoTVBox__img:before { margin-top: -37px; width: 48px; height: 48px; font-size: 24px; padding-left: 4px; } } @container infotv-box (min-width: 300px) { .eilaInfoTVBox__img:before { margin-top: -47px; } } @container infotv-box (min-width: 400px) { .eilaInfoTVBox__img:before { margin-top: -60px; } } .eilaInfoTVBox__headline { display: block; position: absolute; left: 0; bottom: 0; font-size: 1.3rem; padding: 6px 8px; background: rgba(21, 21, 21, 0.5); backdrop-filter: blur(5px); width: 100%; line-height: 1.1; display: flex; align-items: center; min-height: 36px; } .eilaInfoTVBox__headline > span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @container infotv-box (min-width: 250px) { .eilaInfoTVBox__headline { font-size: 1.6rem; padding: 10px 16px; min-height: 56px; } } @container infotv-box (min-width: 300px) { .eilaInfoTVBox__headline { font-size: 2rem; padding: 10px 20px; min-height: 64px; } } @container infotv-box (min-width: 400px) { .eilaInfoTVBox__headline { font-size: 2.4rem; padding: 10px 24px; min-height: 73px; } } .eilaInfoTVBox:hover .eilaInfoTVBox__img:before, .eilaInfoTVBox:focus .eilaInfoTVBox__img:before, .eilaInfoTVBox:active .eilaInfoTVBox__img:before { width: 44px; height: 44px; } @container infotv-box (min-width: 250px) { .eilaInfoTVBox:hover .eilaInfoTVBox__img:before, .eilaInfoTVBox:focus .eilaInfoTVBox__img:before, .eilaInfoTVBox:active .eilaInfoTVBox__img:before { width: 52px; height: 52px; } } .eilaInfoTVBox.hoverintent .eilaInfoTVBox__img img { scale: 1.05; } .eilaInfoTV .collectionArea { display: grid; grid-column-gap: 20px; grid-row-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } @media (min-width: 768px) { .eilaInfoTV .collectionArea { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (min-width: 1024px) { .eilaInfoTV .collectionArea { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } @media (min-width: 1250px) { .eilaInfoTV .collectionArea { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } @media (min-width: 1540px) { .eilaInfoTV .collectionArea { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } } .eilaInfoTVVideo:has(.letter) { position: relative; z-index: 1; } .eilaInfoTVVideo:has(.letter) .letter { z-index: -1; } .eilaJob { display: flex; flex-direction: column; position: relative; text-decoration: none; color: var(--main-color-black); container-type: inline-size; container-name: eila-job; } .eilaJob__img { display: block; aspect-ratio: 1; position: relative; overflow: hidden; } .eilaJob__img img { aspect-ratio: 1; min-width: 100%; display: block; transition: 0.2s ease-in-out; } .eilaJob__attribute { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } @media (min-width: 1025px) { .eilaJob__attribute { gap: 8px; } } .eilaJob__attribute .icon { border-radius: 50%; background: var(--main-color-light-gray); flex-shrink: 0; display: block; font-size: 14px; position: relative; transition: 0.2s ease-in-out; width: 24px; height: 24px; } @media (min-width: 768px) { .eilaJob__attribute .icon { width: 26px; height: 26px; font-size: 16px; } } @media (min-width: 1025px) { .eilaJob__attribute .icon { width: 28px; height: 28px; font-size: 16px; } } @media (min-width: 1540px) { .eilaJob__attribute .icon { width: 36px; height: 36px; font-size: 18px; } } .eilaJob__attribute .icon:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; line-height: 1; } .eilaJob__attributeList { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 1.5rem; } @media (min-width: 1025px) { .eilaJob__attributeList { gap: 8px 12px; font-size: 1.6rem; } } @media (min-width: 1250px) { .eilaJob__attributeList { gap: 8px 16px; } } @media (min-width: 1540px) { .eilaJob__attributeList { gap: 8px 20px; font-size: 1.8rem; } } .eilaJob__title { font-weight: var(--main-font-weight-medium); text-transform: uppercase; line-height: 1.08; flex-grow: 1; font-size: 2rem; } @container eila-job (min-width: 350px) { .eilaJob__title { font-size: 2.4rem; } } .eilaJob__footer { position: relative; padding-right: 36px; margin-top: 16px; } @container eila-job (min-width: 350px) { .eilaJob__footer { margin-top: 36px; } } .eilaJob__footer:after { content: var(--base-icon-arrow-right); font-family: "icons", Helvetica, Arial, sans-serif; position: absolute; color: var(--main-color-primary); font-size: 2.4rem; transition: 0.2s ease-in-out; right: 0; bottom: 0; line-height: 24px; } @media (min-width: 768px) { .eilaJob__footer:after { line-height: 26px; } } @media (min-width: 1025px) { .eilaJob__footer:after { line-height: 28px; } } @media (min-width: 1540px) { .eilaJob__footer:after { line-height: 36px; } } .eilaJob__content { padding: 24px 0 0 0; display: flex; flex-direction: column; flex-grow: 1; } @container eila-job (min-width: 200px) { .eilaJob__content { padding: 24px 0 0 0; } } @container eila-job (min-width: 350px) { .eilaJob__content { padding: 32px 20px 0 20px; } } .eilaJob:hover, .eilaJob:focus, .eilaJob:active { text-decoration: none; color: var(--main-color-black); } .eilaJob:hover .eilaJob__attribute .icon, .eilaJob:focus .eilaJob__attribute .icon, .eilaJob:active .eilaJob__attribute .icon { background: var(--main-color-primary); } .eilaJob:hover .eilaJob__footer:after, .eilaJob:focus .eilaJob__footer:after, .eilaJob:active .eilaJob__footer:after { right: -5px; } .eilaJob.hoverintent .eilaJob__img img { scale: 1.05; } :root { --jobs-list-gap-between-rows: 32px; } @media (min-width: 768px) { :root { --jobs-list-gap-between-rows: 64px; } } .jobsList .collectionArea { display: grid; grid-column-gap: 20px; grid-row-gap: var(--jobs-list-gap-between-rows); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @media (min-width: 768px) { .jobsList .collectionArea { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (min-width: 1024px) { .jobsList .collectionArea { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } @media (min-width: 1250px) { .jobsList .collectionArea { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } } .eilaJobDetailHead .eilaJob__attribute .icon { background: var(--main-color-dark-gray); color: var(--main-color-primary); } .jobsRequest__headline { font-size: 1.8rem; font-weight: var(--main-font-weight-bold); } @media (min-width: 1025px) { .jobsRequest__headline { font-size: 2.4rem; } } .eilaJobDetailImg:has(.letter) { max-width: 760px; position: relative; padding-right: 20px; z-index: 1; } @media (min-width: 768px) { .eilaJobDetailImg:has(.letter) { padding-right: 40px; padding-bottom: 40px; } } @media (min-width: 1025px) { .eilaJobDetailImg:has(.letter) { padding-right: 40px; padding-bottom: 60px; } } @media (min-width: 1540px) { .eilaJobDetailImg:has(.letter) { padding-right: 80px; padding-bottom: 80px; } } .eilaJobDetailImg:has(.letter) .letter { z-index: -1 !important; transform: none !important; background-size: 100%; width: 70% !important; } @media (max-width: 767px) { .eilaJobDetailImg:has(.letter) .letter { bottom: -30px !important; } } @media (min-width: 768px) { .eilaJobDetailImg:has(.letter) .letter { width: 75% !important; } } @media (min-width: 1025px) { .eilaJobDetailImg:has(.letter) .letter { width: 65% !important; } } @media (min-width: 1540px) { .eilaJobDetailImg:has(.letter) .letter { width: 75% !important; } } .eilaJobDetailInfo:has(.letter) { position: relative; } .eilaJobDetailInfo:has(.letter) .letter { transform: translateY(10%) !important; } .dcPromoBar { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; text-decoration: none; border: 0; font-size: 1.6rem; z-index: 102; } @media (min-width: 768px) { .dcPromoBar { height: 56px; font-size: 1.7rem; } } .dcPromoBar[href] { cursor: pointer; } .dcPromoBar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; box-sizing: border-box; width: 100%; padding: 0 16px; } @media (min-width: 768px) { .dcPromoBar__inner { flex-wrap: nowrap; gap: 12px 20px; padding: 0 24px; } } .dcPromoBar__badge { display: inline-flex; align-items: center; background: var(--main-color-white); color: var(--main-color-black); line-height: 1.2; padding: 3px 6px; border-radius: 4px; white-space: nowrap; font-weight: bold; } @media (min-width: 768px) { .dcPromoBar__badge { padding: 3px 12px; } } .dcPromoBar__text { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dcPromoBar__textWrapper { display: flex; align-items: center; gap: 6px; max-width: 100%; } @media (min-width: 768px) { .dcPromoBar__textWrapper { gap: 12px; } } .dcPromoBar__arrow { flex: 0 0 auto; font-size: 22px; line-height: 1; margin-bottom: 2px; transition: transform 0.2s ease; } .dcPromoBar[href]:hover, .dcPromoBar[href]:focus, .dcPromoBar[href]:active { text-decoration: none; } .dcPromoBar[href]:hover .dcPromoBar__arrow, .dcPromoBar[href]:focus .dcPromoBar__arrow, .dcPromoBar[href]:active .dcPromoBar__arrow { transform: translateX(4px); } #container:has(.dcPromoBar) #header:not(.is-sticky) { top: 64px; } @media (min-width: 768px) { #container:has(.dcPromoBar) #header:not(.is-sticky) { top: 56px; } } .promoBarModalAnchor { position: sticky; bottom: 0; height: 0; z-index: 102; } .promoBarModalAnchor:has(.promoBarModal[hidden]) { display: none; } .promoBarModal { position: absolute; right: 0; bottom: 0; z-index: 102; width: 424px; padding: 12px; max-width: 100vw; } .promoBarModal, .promoBarModal * { box-sizing: border-box; } @media (max-width: 767px) { .promoBarModal { display: none; } } .promoBarModal[hidden] { display: none; } .promoBarModal__body { border-radius: 32px; text-decoration: none; display: block; overflow: hidden; } .promoBarModal__body:hover, .promoBarModal__body:focus, .promoBarModal__body:active { text-decoration: none; } .promoBarModal__close { position: absolute; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--main-color-white); color: var(--main-color-black); font-size: 18px; line-height: 1; cursor: pointer; right: 24px; top: 24px; } @media (min-width: 768px) { .promoBarModal__close { right: 32px; top: 32px; } } .promoBarModal__close:hover, .promoBarModal__close:focus, .promoBarModal__close:active { background: var(--main-color-black); color: var(--main-color-white); } .promoBarModal__content { text-align: center; display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 24px; padding-top: 48px; } @media (min-width: 768px) { .promoBarModal__content { gap: 24px; padding: 32px; padding-top: 58px; } } .promoBarModal__headline { margin: 0; font-size: 2.8rem; line-height: 1.1; } @media (min-width: 768px) { .promoBarModal__headline { font-size: 3.2rem; } } .promoBarModal__text { line-height: 1.4; } .promoBarModal__image { display: none; width: 100%; aspect-ratio: 400/265; object-fit: cover; } @media (min-width: 768px) and (min-height: 800px) { .promoBarModal__image { display: block; } } .dcPromoBar.bg--black, .dcPromoBar.bg--black:hover, .dcPromoBar.bg--black:focus, .dcPromoBar.bg--black:active { color: var(--main-color-white); } .dcPromoBar.bg--black .dcPromoBar__badge { background: var(--main-color-white); color: var(--main-color-black); } .promoBarModal__body.bg--black, .promoBarModal__body.bg--black:hover, .promoBarModal__body.bg--black:focus, .promoBarModal__body.bg--black:active { color: var(--main-color-white); } .promoBarModal__body.bg--black .promoBarModal__cta, .promoBarModal__body.bg--black .promoBarModal__cta:hover, .promoBarModal__body.bg--black .promoBarModal__cta:focus, .promoBarModal__body.bg--black .promoBarModal__cta:active { background: var(--main-color-white); color: var(--main-color-black); border-color: var(--main-color-white); } .dcPromoBar.bg--primary, .dcPromoBar.bg--primary:hover, .dcPromoBar.bg--primary:focus, .dcPromoBar.bg--primary:active { color: var(--main-color-black); } .dcPromoBar.bg--primary .dcPromoBar__badge { background: var(--main-color-black); color: var(--main-color-white); } .promoBarModal__body.bg--primary, .promoBarModal__body.bg--primary:hover, .promoBarModal__body.bg--primary:focus, .promoBarModal__body.bg--primary:active { color: var(--main-color-black); } .promoBarModal__body.bg--primary .promoBarModal__cta, .promoBarModal__body.bg--primary .promoBarModal__cta:hover, .promoBarModal__body.bg--primary .promoBarModal__cta:focus, .promoBarModal__body.bg--primary .promoBarModal__cta:active { background: var(--main-color-black); color: var(--main-color-white); border-color: var(--main-color-black); } .dcPromoBar.bg--danger, .dcPromoBar.bg--danger:hover, .dcPromoBar.bg--danger:focus, .dcPromoBar.bg--danger:active { color: var(--main-color-white); } .dcPromoBar.bg--danger .dcPromoBar__badge { background: var(--main-color-white); color: var(--main-color-black); } .promoBarModal__body.bg--danger, .promoBarModal__body.bg--danger:hover, .promoBarModal__body.bg--danger:focus, .promoBarModal__body.bg--danger:active { color: var(--main-color-white); } .promoBarModal__body.bg--danger .promoBarModal__cta, .promoBarModal__body.bg--danger .promoBarModal__cta:hover, .promoBarModal__body.bg--danger .promoBarModal__cta:focus, .promoBarModal__body.bg--danger .promoBarModal__cta:active { background: var(--main-color-white); color: var(--main-color-black); border-color: var(--main-color-white); } /* AttributesList Markup: Styleguide Shop.AttributesList */ .attributesList { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 1.5rem; } @media (min-width: 1025px) { .attributesList { gap: 8px 12px; font-size: 1.6rem; } } @media (min-width: 1250px) { .attributesList { gap: 8px 16px; } } @media (min-width: 1600px) { .attributesList { gap: 8px 20px; font-size: 1.8rem; } } .attributesList__item { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 6px; } @media (min-width: 1025px) { .attributesList__item { gap: 8px; } } .attributesList__item .icon { border-radius: 50%; background: var(--main-color-light-gray); flex-shrink: 0; display: block; width: 24px; height: 24px; font-size: 14px; position: relative; } @media (min-width: 768px) { .attributesList__item .icon { width: 26px; height: 26px; font-size: 16px; } } @media (min-width: 1025px) { .attributesList__item .icon { width: 28px; height: 28px; font-size: 16px; } } @media (min-width: 1540px) { .attributesList__item .icon { width: 36px; height: 36px; font-size: 18px; } } .attributesList__item .icon:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; line-height: 1; } .attributesList__item--GROESSE span:after { content: " m²"; } .attributesList__item--PERSONENANZAHL span:after { content: " Personen"; } .attributesList__item--GEWICHT { display: none; } .attributesList__item--INKLKUECHE { display: none; } body[data-lang_code=en] .attributesList__item--PERSONENANZAHL span:after { content: " persons"; } .itemboxHospitality__priceLine, .basePrice, .actionPrice { font-weight: var(--main-font-weight-bold); font-size: 2rem; } @media (min-width: 768px) { .itemboxHospitality__priceLine, .basePrice, .actionPrice { font-size: 2.4rem; } } .priceNotice { font-size: 1.4rem; } .categoryNavEila { width: 100%; margin-top: 14px; } @media (min-width: 1025px) { .categoryNavEila { margin-top: 38px; } } .categoryNavEila ul { display: inline; margin: 0; padding: 0; } .categoryNavEila li { margin: 0; padding: 0; list-style-type: none; display: inline; } .categoryNavEila a { border: 1px solid var(--main-color-white); display: inline-flex; color: var(--main-color-white); text-decoration: none; white-space: nowrap; line-height: 20px; padding: 6px 12px; border-radius: 4px; font-weight: var(--main-font-weight-medium); margin-right: 10px; margin-top: 10px; font-size: 1.6rem; } @media (min-width: 1250px) { .categoryNavEila a { font-size: var(--main-font-size-base); padding: 6px 14px; } } @media (min-width: 1540px) { .categoryNavEila a { padding: 10px 28px; font-size: 1.8rem; margin-right: 20px; } } .categoryNavEila a:hover, .categoryNavEila a:focus, .categoryNavEila a:active, .categoryNavEila a.is-active { border-color: var(--main-color-primary); background: var(--main-color-primary); color: var(--main-color-black); } .categoryNavEila > ul > li:has(li.is-active) > a { background: transparent; color: var(--main-color-white); border-color: var(--main-color-white); } .categoryNavEila > ul > li:has(li.is-active) > a:hover, .categoryNavEila > ul > li:has(li.is-active) > a:focus, .categoryNavEila > ul > li:has(li.is-active) > a:active { color: var(--main-color-black); background: var(--main-color-primary); border-color: var(--main-color-primary); } /* Category Specialbox Markup: Neu im Mietpark: Expendable Touchdown Hier ansehen Expendable Touchdown Styleguide Shop.Category Specialbox */ .categorySpecialBox { position: relative; z-index: 1; text-decoration: none; max-width: 100%; display: block; padding-top: 12px; overflow: hidden; aspect-ratio: 420/340; width: 340px; } .categorySpecialBox:hover, .categorySpecialBox:focus, .categorySpecialBox:active { text-decoration: none; } @media (min-width: 1250px) { .categorySpecialBox { width: 420px; } } .categorySpecialBox__subtitle { color: var(--main-color-primary); font-weight: var(--main-font-weight-bold); text-transform: uppercase; display: block; font-size: 1.8rem; margin-left: 10px; } @media (min-width: 1250px) { .categorySpecialBox__subtitle { font-size: 2rem; margin-left: 20px; } } .categorySpecialBox__title { color: var(--main-color-primary); font-weight: var(--main-font-weight-bold); text-transform: uppercase; line-height: 1; display: block; font-size: 3.4rem; } @media (min-width: 1250px) { .categorySpecialBox__title { font-size: 4rem; } } .categorySpecialBox__link { display: inline-flex; margin-left: 20px; margin-top: 6px; } @media (min-width: 1250px) { .categorySpecialBox__link { margin-left: 40px; margin-top: 12px; } } .categorySpecialBox__content { display: block; } .categorySpecialBox__img { position: absolute; z-index: -1; width: 100%; text-align: center; top: 10px; right: -30px; } @media (min-width: 1250px) { .categorySpecialBox__img { right: -40px; } } .categorySpecialBox__img:before { content: ""; display: block; aspect-ratio: 1; width: 100%; background: #333333; border-radius: 50%; pointer-events: none; z-index: -1; position: absolute; } .categorySpecialBox__img img { aspect-ratio: 1; object-fit: contain; object-position: center center; width: 100%; height: 100% !important; } .categoryInfo { background: var(--main-color-black); color: var(--main-color-white); position: relative; display: flex; align-items: flex-end; min-height: 0; } @media (min-width: 768px) { .categoryInfo { min-height: 475px; } } @media (min-width: 1025px) { .categoryInfo { min-height: 530px; } } .categoryInfo__content { width: 100%; } @media (min-width: 1025px) { .categoryInfo__content { padding-bottom: 12px; } } .categoryInfo h1 { color: var(--main-color-primary); } .categoryInfo .buttonLink { color: var(--main-color-white); } .categoryInfo .categorySpecialBox { position: absolute; right: 0; bottom: 0; max-width: 40%; } @media (max-width: 767px) { .categoryInfo .categorySpecialBox { display: none; } } .categoryInfo .categoryNav { margin-top: 48px; } .categoryMain { overflow: hidden; } .categoryContent--inventar .categoryBox { padding: 16px 12px; } @media (min-width: 768px) { .categoryContent--inventar .categoryBox { padding: 24px 16px; } } .categoryContent--inventar .categoryList { margin-bottom: 24px; } @media (min-width: 768px) { .categoryContent--inventar .categoryList { margin-bottom: 48px; } } .filterBox .customSelect__selected { border-left: 0; border-top: 0; border-right: 0; border-radius: 0; font-size: 1.6rem; padding: 12px 30px 12px 0; line-height: 1; } .filterBox .customSelect__selected:after { right: 0; } @media (max-width: 767px) { .filterBox__content { all: unset; } } .filterBox__mobileButton, .filterBox__contentHeader { display: none; } .categoryFilterWrapper { display: flex; z-index: 2; position: relative; max-width: 370px; margin-left: auto; } .categoryInfo .filterSortLine { margin-bottom: -20px; } .categoryInfo .filterBox .customSelect__selected { background: transparent; border-color: var(--main-color-white); color: var(--main-color-white); } .categoryInfo .filterBox__filter .row > * { width: auto; } .categoryContent .js-filterWrapper { display: none; } .itemcardEilaSummary { font-size: 2rem; line-height: 1.05; } @media (min-width: 768px) { .itemcardEilaSummary { font-size: 2.2rem; } } @media (min-width: 1025px) { .itemcardEilaSummary { font-size: 2.8rem; } } @media (min-width: 1250px) { .itemcardEilaSummary { font-size: 3.4rem; } } @media (min-width: 1540px) { .itemcardEilaSummary { font-size: 4rem; } } .itemcardEilaHeadline { margin-bottom: 0; } .itemcardEilaAttributes .attributesList { gap: 8px 10px; font-size: 1.6rem; } @media (min-width: 1025px) { .itemcardEilaAttributes .attributesList { gap: 8px 12px; font-size: 1.6rem; } } @media (min-width: 1250px) { .itemcardEilaAttributes .attributesList { gap: 8px 16px; } } @media (min-width: 1540px) { .itemcardEilaAttributes .attributesList { gap: 12px 32px; font-size: 1.8rem; } } .itemcardEilaAttributes .attributesList__item { gap: 8px; } .itemcardEilaAttributes .attributesList__item .icon { background: var(--main-color-dark-gray); color: var(--main-color-primary); width: 32px; height: 32px; font-size: 16px; } @media (min-width: 1540px) { .itemcardEilaAttributes .attributesList__item .icon { width: 36px; height: 36px; font-size: 18px; } } .itemcardEilaTopGallery { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; } @media (min-width: 768px) { .itemcardEilaTopGallery { width: 60%; gap: 20px; } } @media (min-width: 1250px) { .itemcardEilaTopGallery { width: 50%; gap: 48px; } } .itemcardEilaTopGallery__item { opacity: 0; } .itemcardEilaTopGallery__item:nth-child(4n+1) { width: calc(90% - 10px); margin-left: 24px; } @media (min-width: 1025px) { .itemcardEilaTopGallery__item:nth-child(4n+1) { width: calc(50% - 10px); margin-top: 48px; } } @media (min-width: 1250px) { .itemcardEilaTopGallery__item:nth-child(4n+1) { width: calc(50% - 24px); } } .itemcardEilaTopGallery__item:nth-child(4n+2) { width: calc(70% - 10px); } @media (min-width: 1025px) { .itemcardEilaTopGallery__item:nth-child(4n+2) { width: calc(50% - 10px); } } @media (min-width: 1250px) { .itemcardEilaTopGallery__item:nth-child(4n+2) { width: calc(50% - 24px); } } @media (max-width: 1024px) { .itemcardEilaTopGallery__item:nth-child(4n+2) { margin-left: auto; margin-right: auto; } } .itemcardEilaTopGallery__item:nth-child(4n+3) { width: calc(80% - 10px); display: flex; justify-content: flex-end; margin-left: auto; } @media (min-width: 1025px) { .itemcardEilaTopGallery__item:nth-child(4n+3) { width: calc(65% - 10px); margin-left: 10%; } } @media (min-width: 1250px) { .itemcardEilaTopGallery__item:nth-child(4n+3) { width: calc(65% - 24px); } } .itemcardEilaTopGallery__item:nth-child(4n) { width: calc(60% - 10px); } @media (min-width: 1025px) { .itemcardEilaTopGallery__item:nth-child(4n) { width: calc(45% - 10px); } } @media (min-width: 1250px) { .itemcardEilaTopGallery__item:nth-child(4n) { width: calc(45% - 24px); } } .itemcardEilaTopGallery__item img { min-width: 100%; } .itemcardEilaTopGallery__item:not(.itemcardEilaTopGallery__item--2):not(.itemcardEilaTopGallery__item--3):not(.itemcardEilaTopGallery__item--4):not(.itemcardEilaTopGallery__item--5):not(.itemcardEilaTopGallery__item--6) { display: none; } .itemcardEilaTopGalleryWrapper .container { padding-left: 10px; padding-right: 10px; } .itemcardEilaTop { position: relative; z-index: 1; overflow: hidden; padding-top: 80px; } @media (min-width: 768px) { .itemcardEilaTop { padding-top: 160px; } } @media (min-width: 1025px) { .itemcardEilaTop { padding-top: 180px; } } @media (min-width: 1250px) { .itemcardEilaTop { padding-top: 240px; } } @media (min-width: 1540px) { .itemcardEilaTop { padding-top: 300px; } } .itemcardEilaTopVideo { pointer-events: none; overflow: hidden; } @media (min-width: 768px) { .itemcardEilaTopVideo { position: absolute; top: 0; right: 0; width: 100%; z-index: -1; height: 100%; } } @media (max-width: 767px) { .itemcardEilaTopVideo { position: relative; aspect-ratio: 4/2; margin-bottom: 10px; } } .itemcardEilaTopVideo video { display: block; max-height: 100vh; max-height: 100svh; } @media (min-width: 768px) { .itemcardEilaTopVideo video { object-fit: contain; object-position: bottom right; width: 100%; position: sticky; right: 0; bottom: 0; max-width: none !important; aspect-ratio: 1920/1080; } } @media (min-width: 768px) and (max-width: 1024px) { .itemcardEilaTopVideo video { width: 140%; transform: translateX(-20%); aspect-ratio: 5/3; } } @media (max-width: 767px) { .itemcardEilaTopVideo video { width: 160%; max-width: none !important; position: absolute; right: 0; top: 40%; transform: translateY(-50%); } } .itemcardEilaTopStickyArea { position: relative; } .itemcardEilaConfigBadgeWrap { position: absolute; z-index: 3; top: 90px; right: 16px; bottom: 0; width: 118px; pointer-events: none; } @media (min-width: 768px) { .itemcardEilaConfigBadgeWrap { top: 120px; right: 32px; width: 150px; } } @media (min-width: 1250px) { .itemcardEilaConfigBadgeWrap { top: 150px; right: 48px; width: 168px; } } .itemcardEilaConfigBadge { position: absolute; top: 0; pointer-events: auto; width: 118px; height: 118px; border-radius: 50%; background: var(--main-color-primary); color: var(--main-color-black) !important; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-weight: var(--main-font-weight-bold); font-size: 15px; line-height: 1.2; hyphens: auto; text-decoration: none; transition: transform 0.2s ease-in-out, background 0.2s linear; transform: rotate(-6deg); margin-bottom: 60px; } @media (min-width: 768px) { .itemcardEilaConfigBadge { top: 120px; width: 150px; height: 150px; font-size: 17px; position: sticky; } } @media (min-width: 1250px) { .itemcardEilaConfigBadge { top: 150px; width: 168px; height: 168px; font-size: 24px; } } .itemcardEilaConfigBadge:hover, .itemcardEilaConfigBadge:focus { background: var(--main-color-primary-dark); color: var(--main-color-black) !important; text-decoration: none; transform: scale(1.05); } .itemcardEilaCrossseller .itemboxList.swiper .itemboxHospitality--isItemcard { width: 100%; } .itemcardEilaCrossseller .itemboxList.swiper .swiper-button-prev, .itemcardEilaCrossseller .itemboxList.swiper .swiper-button-next { color: var(--main-color-primary); } @media (max-width: 1539px) { .itemcardEilaCrossseller .itemboxList.swiper .swiper-button-prev, .itemcardEilaCrossseller .itemboxList.swiper .swiper-button-next { display: none; } } .itemcardEilaCrossseller .itemboxList.swiper .swiper-button-prev { left: 0; } .itemcardEilaCrossseller .itemboxList.swiper .swiper-button-next { right: 0; } .itemcardEilaCrossseller .itemboxList.swiper .swiper-pagination-bullet { border-color: var(--main-color-black); } .itemcardEilaCrossseller .itemboxList.swiper .swiper-pagination-bullet:after { background-color: var(--main-color-black); } .itemcardEilaCrossseller .itemboxList.swiper .swiper-slide:not(.swiper-slide-visible) { opacity: 1; } .itemcardEilaCrossseller .itemboxList.swiper .swiper-slide:not(.swiper-slide-visible):not(.swiper-slide-active) { scale: 1 !important; } .itemcardEilaCrossseller .itemboxList.swiper:not(.swiper-initialized) > .swiper-wrapper > * { width: 100% !important; } @media (min-width: 768px) { .itemcardEilaCrossseller .itemboxList.swiper:not(.swiper-initialized) > .swiper-wrapper > * { width: 50% !important; } } @media (min-width: 1025px) { .itemcardEilaCrossseller .itemboxList.swiper:not(.swiper-initialized) > .swiper-wrapper > * { width: 33.3333333333% !important; } } @media (max-width: 767px) { .itemcardEilaTitleBox:has(.itemcardEilaTopVideo) { min-height: 75vh; } } .itemcardEilaPrices .basePrice { font-size: 2.6rem; line-height: 1.1; } @media (min-width: 768px) { .itemcardEilaPrices .basePrice { font-size: 3.2rem; } } @media (min-width: 1540px) { .itemcardEilaPrices .basePrice { font-size: 3.6rem; } } .itemcardEilaTopGalleryWrapper:has(.letter) { position: relative; margin-top: 60px; } @media (min-width: 768px) { .itemcardEilaTopGalleryWrapper:has(.letter) { margin-top: 100px; } } @media (min-width: 1025px) { .itemcardEilaTopGalleryWrapper:has(.letter) { margin-top: 120px; } } @media (min-width: 1250px) { .itemcardEilaTopGalleryWrapper:has(.letter) { margin-top: 150px; } } @media (min-width: 1540px) { .itemcardEilaTopGalleryWrapper:has(.letter) { margin-top: 300px; } } .itemcardEilaTopGalleryWrapper:has(.letter) .letter { z-index: -1; background-size: 100%; aspect-ratio: 13/15; width: 40%; } @media (min-width: 768px) { .itemcardEilaTopGalleryWrapper:has(.letter) .letter { width: 25%; } } @media (min-width: 1540px) { .itemcardEilaTopGalleryWrapper:has(.letter) .letter { width: 30%; } } .itemcardInUse:has(.letter) { position: relative; z-index: 1; } .itemcardInUse:has(.letter) .letter { z-index: -1; aspect-ratio: 121/31; background-size: 100%; background-position: bottom left; transform: none; } .itemcardEilaCrossseller:has(.letter) { position: relative; z-index: 1; } .itemcardEilaBottomTop:has(.letter) { position: relative; z-index: 1; } .itemcardFactboxContainer:has(#plusContentSiteParts:empty) { display: none; } .itemcardGallery:has(#plusContentSiteParts:empty) { display: none; } .itemcardInUse:has(#plusContentSiteParts:empty) { display: none; } .button--configuratorLink { display: none; } .button--configuratorLink.is-visible { display: inline-flex; } .itemcard .orderbox .inventoryWrapper, .itemcard .orderbox .orderButtonWrapper, .itemcard .orderbox .prices { display: none; } .itemcardBuybox { box-shadow: none; border-radius: 4px; } .itemcardBuybox__head { padding: 0; } .itemcardBuybox__main { padding-left: 0; padding-right: 0; padding-bottom: 0; } .itemboxList.swiper { padding: 0; max-width: none; margin: 0; } .itemboxList.swiper > .swiper-wrapper > * { padding: 0; } .itemboxList.swiper .swiper-slide:not(.swiper-slide-visible) { opacity: 1; } .itemboxList.swiper .swiper-button-next, .itemboxList.swiper .swiper-button-prev { display: block; } .itemboxHospitality { display: flex; flex-direction: column; color: var(--main-color-black); text-decoration: none; } .itemboxHospitality:hover, .itemboxHospitality:focus { color: var(--main-color-black); text-decoration: none; } .itemboxHospitality:hover .attributesList__item .icon, .itemboxHospitality:focus .attributesList__item .icon { background: var(--main-color-primary); } .itemboxHospitality.hoverintent .itemboxHospitality__content:after { right: 10px; } @media (min-width: 768px) { .itemboxHospitality.hoverintent .itemboxHospitality__content:after { right: 20px; } } @media (min-width: 1540px) { .itemboxHospitality.hoverintent .itemboxHospitality__content:after { right: 50px; } } .itemboxHospitality:has(.itemboxHospitality__imageSrc--hover).hoverintent .itemboxHospitality__imageSrc:not(.itemboxHospitality__imageSrc--hover) { opacity: 0; } .itemboxHospitality:has(.itemboxHospitality__imageSrc--hover).hoverintent .itemboxHospitality__imageSrc--hover { opacity: 1; } .itemboxHospitality__imageSrc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity 0.4s ease-in-out; } .itemboxHospitality__imageSrc--hover { opacity: 0; z-index: 1; } .itemboxHospitality__image { aspect-ratio: 400/225; position: relative; } .itemboxHospitality__image img { aspect-ratio: 400/225 !important; width: 100%; } .itemboxHospitality__badges { position: absolute; display: flex; gap: 5px; flex-direction: column; top: 16px; left: 16px; z-index: 1; } @media (min-width: 768px) { .itemboxHospitality__badges { top: 30px; left: 30px; } } @media (min-width: 1540px) { .itemboxHospitality__badges { top: 30px; left: 60px; } } .itemboxHospitality__badges .promotion--attribute:not(.promotion--GEWICHT):not(.promotion--INKLKUECHE) { display: none; } .itemboxHospitality__badges--right { left: auto; right: 16px; } @media (min-width: 768px) { .itemboxHospitality__badges--right { right: 30px; } } @media (min-width: 1540px) { .itemboxHospitality__badges--right { right: 60px; } } .itemboxHospitality__head { position: relative; } .itemboxHospitality__name { line-height: 1.2; font-weight: var(--main-font-weight-bold); text-transform: uppercase; font-size: 2rem; } @media (min-width: 768px) { .itemboxHospitality__name { font-size: 2.4rem; } } .itemboxHospitality__priceWrapper { text-align: right; flex-shrink: 0; width: 120px; line-height: 1.2; } .itemboxHospitality__priceLine { display: flex; align-items: baseline; justify-content: flex-end; } .itemboxHospitality__contentHead { display: flex; justify-content: space-between; align-items: baseline; flex-grow: 1; width: 100%; gap: 16px; margin-bottom: 16px; } @media (min-width: 768px) { .itemboxHospitality__contentHead { gap: 24px; margin-bottom: 24px; } } .itemboxHospitality__contentHead:last-child { margin-bottom: 36px; } .itemboxHospitality__attributes { width: 100%; padding-right: 26px; } .itemboxHospitality__attributes .attributesList__item .icon { transition: 0.2s ease-in-out; } .itemboxHospitality__attributes .attributesList__item--PERSONENANZAHL span:after { display: none; } .itemboxHospitality__content { flex-grow: 1; display: flex; flex-direction: column; padding-top: 24px; position: relative; } .itemboxHospitality__content:after { content: var(--base-icon-arrow-right); font-family: "icons", Helvetica, Arial, sans-serif; color: var(--main-color-primary); position: absolute; font-size: 2.4rem; transition: 0.2s ease-in-out; right: 16px; bottom: 46px; } @media (min-width: 768px) { .itemboxHospitality__content:after { right: 30px; bottom: 30px; } } @media (min-width: 1540px) { .itemboxHospitality__content:after { right: 60px; bottom: 60px; } } .itemboxList:has(.itemboxHospitality) { display: flex; flex-wrap: wrap; gap: 0; overflow: hidden; } .itemboxList:has(.itemboxHospitality) .itemboxHospitality { width: 100%; } .itemboxList:has(.itemboxHospitality) .itemboxHospitality__content { padding: 0 16px 48px 16px; } @media (min-width: 768px) { .itemboxList:has(.itemboxHospitality) .itemboxHospitality { width: 50%; } .itemboxList:has(.itemboxHospitality) .itemboxHospitality__content { padding: 0 30px 30px 30px; } } @media (min-width: 1250px) { .itemboxList:has(.itemboxHospitality) .itemboxHospitality { width: 33.3333333333%; } } @media (min-width: 1540px) { .itemboxList:has(.itemboxHospitality) .itemboxHospitality__content { padding: 0 60px 60px 60px; } } .itemboxList:has(.itemboxHospitality) .itemboxHospitality { position: relative; } .itemboxList:has(.itemboxHospitality) .itemboxHospitality:before, .itemboxList:has(.itemboxHospitality) .itemboxHospitality:after { content: ""; height: 1px; position: absolute; width: 260px; opacity: 0.8; background: linear-gradient(90deg, #FFF 0%, #CCC 20.19%, #CCC 77.88%, #FFF 100%); left: -130px; top: 0; display: block; } .itemboxList:has(.itemboxHospitality) .itemboxHospitality:before { rotate: 90deg; } @media (max-width: 767px) { .itemboxList:has(.itemboxHospitality) .itemboxHospitality:before { display: none; } .itemboxList:has(.itemboxHospitality) .itemboxHospitality:after { left: 50%; margin-left: -130px; } .itemboxList:has(.itemboxHospitality) .itemboxHospitality:first-child:after { display: none; } } @media (min-width: 768px) and (max-width: 1249px) { .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(-n+2):before, .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(-n+2):after, .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(2n+1):before, .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(2n+1):after { display: none; } } @media (min-width: 1250px) { .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(-n+3):before, .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(-n+3):after, .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(3n+1):before, .itemboxList:has(.itemboxHospitality) .itemboxHospitality:nth-child(3n+1):after { display: none; } } .itemboxSliderHospitality { width: 100%; text-align: center; text-decoration: none; } .itemboxSliderHospitality__image img { aspect-ratio: 125/71; object-fit: contain; min-width: 100%; } .itemboxSliderHospitality__name { text-transform: uppercase; font-weight: var(--main-font-weight-medium); opacity: 1; transition: 0.6s ease-in-out; font-size: 2.4rem; } @media (min-width: 768px) { .itemboxSliderHospitality__name { font-size: 3.2rem; } } @media (min-width: 1540px) { .itemboxSliderHospitality__name { font-size: 3.6rem; } } .itemboxSliderHospitality__content { margin-top: 20px; } .itemboxSliderHospitality:hover, .itemboxSliderHospitality:focus, .itemboxSliderHospitality:active { text-decoration: none; color: var(--main-color-primary); } .bg--black .itemboxSliderHospitality:hover, .bg--black .itemboxSliderHospitality:focus, .bg--black .itemboxSliderHospitality:active { color: var(--main-color-primary); } .bg--primary .itemboxSliderHospitality:hover, .bg--primary .itemboxSliderHospitality:focus, .bg--primary .itemboxSliderHospitality:active { color: var(--main-color-black); } .itemboxSliderHospitalityList.swiper { padding: 0; margin: 0; max-width: 2100px; margin-left: auto; margin-right: auto; } .itemboxSliderHospitalityList.swiper .swiper-slide:not(.swiper-slide-visible) { opacity: 0.5; } .itemboxSliderHospitalityList.swiper .swiper-slide:not(.swiper-slide-visible).swiper-slide-active { opacity: 1; } .itemboxSliderHospitalityList.swiper .swiper-slide:not(.swiper-slide-visible):not(.swiper-slide-active) .itemboxSliderHospitality__name { opacity: 0; } @media (min-width: 768px) { .itemboxSliderHospitalityList.swiper .swiper-slide:not(.swiper-slide-visible) { /*&.swiper-slide-prev { &:not(.swiper-slide-active) { scale:0.8; } } &.swiper-slide-next { &:not(.swiper-slide-active) { scale:0.8 } }*/ } .itemboxSliderHospitalityList.swiper .swiper-slide:not(.swiper-slide-visible):not(.swiper-slide-active) { scale: 0.8; } } .itemboxSliderHospitalityList.swiper .swiper-wrapper > * { padding: 0; margin: 0; } .itemboxSliderHospitalityList.swiper .swiper-button-next, .itemboxSliderHospitalityList.swiper .swiper-button-prev { display: block; color: var(--main-color-white); } .itemboxSliderHospitalityList.swiper .swiper-button-next:hover, .itemboxSliderHospitalityList.swiper .swiper-button-next:focus, .itemboxSliderHospitalityList.swiper .swiper-button-next:active, .itemboxSliderHospitalityList.swiper .swiper-button-prev:hover, .itemboxSliderHospitalityList.swiper .swiper-button-prev:focus, .itemboxSliderHospitalityList.swiper .swiper-button-prev:active { color: var(--main-color-primary); } .itemboxSliderHospitalityList.swiper .swiper-button-prev { left: 20px; } @media (min-width: 1540px) { .itemboxSliderHospitalityList.swiper .swiper-button-prev { left: 40px; } } .itemboxSliderHospitalityList.swiper .swiper-button-next { right: 20px; } @media (min-width: 1540px) { .itemboxSliderHospitalityList.swiper .swiper-button-next { right: 40px; } } .itemboxSliderHospitalityList.swiper:not(.swiper-initialized) > .swiper-wrapper > * { width: 100% !important; } @media (min-width: 1025px) { .itemboxSliderHospitalityList.swiper:not(.swiper-initialized) > .swiper-wrapper > * { width: 50% !important; } } .itemboxSliderHospitalityList.swiper:not(.swiper-initialized) > .swiper-wrapper > *:nth-child(2) { scale: 1; opacity: 1; } .mobileMenuEila { backdrop-filter: blur(15px); background: rgba(15, 15, 15, 0.9); color: var(--main-color-white); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding-top: 24px; padding-bottom: 24px; display: none; max-width: 1716px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .mobileMenuEila { padding-top: 40px; padding-bottom: 40px; max-width: 1732px; } } @media (min-width: 1540px) { .mobileMenuEila { max-width: 1760px; } } .mobileMenuEila.is-open { display: block; } .mobileMenuEila a { color: var(--main-color-white); } .mobileMenuEila a:hover, .mobileMenuEila a:focus, .mobileMenuEila a:active { text-decoration: underline; color: var(--main-color-white); } .mobileMenuEila .navgroup span { color: var(--main-color-white); } .mobileMenuEila li:hover > a, .mobileMenuEila li:focus > a, .mobileMenuEila li:active > a { text-decoration: underline; color: var(--main-color-white); } .mobileMenuEila .mobileMenuEilaParkLink .bigLink { color: var(--main-color-black); text-decoration: none; } .mobileMenuEila .mobileMenuEilaNavigation { flex-grow: 1; margin-bottom: 36px; } @media (min-width: 1025px) { .mobileMenuEila .mobileMenuEilaNavigation { padding-right: 20px; margin-bottom: 0; } } @media (min-width: 1025px) { .mobileMenuEila .mobileMenuEilaMain { display: flex; } } @media (min-width: 768px) { .mobileMenuEila .navChildrenToggle { display: none; } } .mobileMenuEila .mobileMenuEilaLangSwitch { margin-top: 16px; } .headerAccount .iconbarItem:not(.iconbarItem--account):not(.iconbarItem--contact) { display: none; } #header { width: 100%; padding: 10px; position: absolute; left: 0; top: 0; z-index: 100; background: linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 0) 84.62%); } @media (min-width: 768px) { #header { padding: 20px 10px; } } @media (min-width: 1250px) { #header { padding-top: 40px; padding-bottom: 40px; } } @media (max-width: 1249px) { #header.header--is-itemcard .headerMainWrapper .headerAccount { margin-left: auto; } #header.header--is-itemcard .headerMainWrapper .headerMainNavigation { display: flex; } } @media (max-width: 767px) { #header.header--is-itemcard .headerMainWrapper .headerMainNavigation > ul > li { display: none; } #header.header--is-itemcard .headerMainWrapper .headerMainNavigation > ul > li:has(.mainnav__backlink) { display: block; } } .headerMainWrapper { box-shadow: none; display: flex; justify-content: space-between; align-items: center; width: 100%; border-radius: 6px; margin-left: auto; margin-right: auto; padding: 4px 8px; max-width: 1716px; } @media (min-width: 768px) { .headerMainWrapper { border-radius: 8px; padding: 8px 16px; max-width: 1732px; } } @media (min-width: 1540px) { .headerMainWrapper { padding: 16px 42px; max-width: 1760px; } } .headerMainWrapper .headerMainNavigation { display: flex; flex-grow: 1; } @media (max-width: 767px) { .headerMainWrapper .headerMainNavigation { display: none; } } .headerMainWrapper .headerAccount .textcontent { display: flex; margin-left: 12px; gap: 4px; } @media (min-width: 1025px) { .headerMainWrapper .headerAccount .textcontent { gap: 8px; margin-left: 24px; } } @media (max-width: 767px) { .headerMainWrapper .headerAccount .textcontent .iconbarIcon__icon { font-size: 20px; width: 32px; height: 32px; } } .headerMainWrapper .headerNavToggler { display: block; margin-left: 4px; } @media (min-width: 1025px) { .headerMainWrapper .headerNavToggler { margin-left: 8px; } } .headerMainWrapper .headerLogo { margin-right: 24px; max-width: 50px; margin-bottom: -2px; } @media (min-width: 768px) { .headerMainWrapper .headerLogo { max-width: 80px; margin-bottom: 3px; } } @media (min-width: 1540px) { .headerMainWrapper .headerLogo { max-width: 96px; margin-right: 36px; } } .headerMainWrapper .headerLogo a, .headerMainWrapper .headerLogo img, .headerMainWrapper .headerLogo svg { display: block; padding-bottom: 2px; } .headerMainWrapper .headerCTAButton { margin-left: auto; } @media (min-width: 1025px) { .headerMainWrapper .headerCTAButton { margin-left: 0; } } .headerMainWrapper .headerCTAButton .button { font-size: 1.4rem; padding: 2px 8px; line-height: 20px; } .headerMainWrapper .headerCTAButton .button .icon { margin-top: -1px; font-size: 1em; } @media (min-width: 768px) { .headerMainWrapper .headerCTAButton .button { padding: 2px 12px; line-height: 26px; font-size: 1.8rem; } } .headerMainWrapper { color: var(--main-color-black); background: transparent; } .headerMainWrapper .mainnav a { color: var(--main-color-black); } .headerMainWrapper .mainnav > ul > li > a, .headerMainWrapper .mainnav > ul > li > span { color: var(--main-color-black); font-weight: var(--main-font-weight-medium); } .headerMainWrapper .navToggler__bar { background: var(--main-color-black); } .headerMainWrapper .navToggler:hover .navToggler__bar, .headerMainWrapper .navToggler:focus .navToggler__bar, .headerMainWrapper .navToggler:active .navToggler__bar { background: var(--main-color-primary); } .headerMainWrapper .headerLogo .logoCharacter { fill: var(--main-color-black); } .headerMainWrapper.is-sticky { color: var(--main-color-white); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: rgba(15, 15, 15, 0.7); } .headerMainWrapper.is-sticky .mainnav a { color: var(--main-color-white); } .headerMainWrapper.is-sticky .mainnav > ul > li > a, .headerMainWrapper.is-sticky .mainnav > ul > li > span { color: var(--main-color-white); } .headerMainWrapper.is-sticky .navToggler__bar { background: var(--main-color-white); } .headerMainWrapper.is-sticky .headerLogo .logoCharacter { fill: var(--main-color-white) !important; } .headerMainWrapper.is-invert { color: var(--main-color-white); background: transparent; } .headerMainWrapper.is-invert .mainnav a { color: var(--main-color-white); } .headerMainWrapper.is-invert .mainnav > ul > li > a, .headerMainWrapper.is-invert .mainnav > ul > li > span { color: var(--main-color-white); } .headerMainWrapper.is-invert .navToggler__bar { background: var(--main-color-white); } .headerMainWrapper.is-invert .headerLogo .logoCharacter { fill: var(--main-color-white); } .headerMainWrapper.is-invert .linkWithIcon { color: var(--main-color-white); } #header.is-open-menu { background: transparent; } #header.is-open-menu .headerMainWrapper { color: var(--main-color-white); backdrop-filter: blur(15px); background: rgba(15, 15, 15, 0.9); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } #header.is-open-menu .headerMainWrapper .mainnav a { color: var(--main-color-white); } #header.is-open-menu .headerMainWrapper .mainnav > ul > li > a, #header.is-open-menu .headerMainWrapper .mainnav > ul > li > span { color: var(--main-color-white); } #header.is-open-menu .headerMainWrapper .navToggler__bar { background: var(--main-color-white); } #header.is-open-menu .headerMainWrapper .headerLogo .logoCharacter { fill: var(--main-color-white) !important; } #header.is-sticky { position: fixed; top: 0; animation: showStickyHeader 0.3s forwards; background: transparent; } #header.header--is-landingpage .headerMainWrapper { justify-content: flex-start; } @keyframes showStickyHeader { 0% { opacity: 0; } 100% { opacity: 1; } } .footerSocialMedia .h3 { text-transform: uppercase; font-weight: var(--main-font-weight-bold); margin-bottom: 8px; } @media (min-width: 768px) { .footerSocialMedia .h3 { margin-bottom: 20px; } } .footerEilaMain { border-top: 1px solid var(--main-color-black); padding-top: 24px; padding-bottom: 24px; width: 100%; display: grid; gap: 32px; grid-template-areas: "footerSocialMedia" "footerNavigation" "footerRentalParkLink"; } @media (min-width: 768px) { .footerEilaMain { padding-bottom: 40px; grid-template-rows: auto auto; grid-template-columns: repeat(3, 1fr); grid-template-areas: "footerSocialMedia footerRentalParkLink footerRentalParkLink" "footerNavigation footerNavigation footerNavigation"; } } @media (min-width: 1025px) { .footerEilaMain { gap: 16px; padding-bottom: 64px; grid-template-columns: repeat(5, 1fr); grid-template-areas: "footerSocialMedia footerSocialMedia footerSocialMedia footerSocialMedia footerRentalParkLink" "footerNavigation footerNavigation footerNavigation footerNavigation footerRentalParkLink"; } } @media (min-width: 1250px) { .footerEilaMain { gap: 32px; padding-bottom: 40px; grid-template-rows: auto; grid-template-columns: repeat(7, 1fr); grid-template-areas: "footerSocialMedia footerSocialMedia footerNavigation footerNavigation footerNavigation footerNavigation footerRentalParkLink"; } } .footerEilaMain .footerSocialMedia { grid-area: footerSocialMedia; } @media (min-width: 768px) { .footerEilaMain .footerSocialMedia { padding-top: 24px; } } .footerEilaMain .footerNavigation { grid-area: footerNavigation; } @media (min-width: 768px) { .footerEilaMain .footerNavigation { padding-top: 24px; } } .footerEilaMain .footerRentalParkLink { grid-area: footerRentalParkLink; } .footerEilaBottom { width: 100%; padding-bottom: 30px; font-size: 1.4rem; line-height: 28px; display: grid; align-items: flex-end; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "footerLanguage footerCopyright footerCopyright" "footerLegal footerLegal footerLegal" "footerClaim footerClaim footerClaim"; } @media (min-width: 768px) { .footerEilaBottom { display: grid; align-items: flex-end; grid-template-rows: 1fr auto auto; grid-template-columns: 380px 1fr; grid-template-areas: "footerClaim footerLanguage" "footerClaim footerCopyright" "footerClaim footerLegal"; gap: 10px 40px; } } @media (min-width: 1025px) { .footerEilaBottom { padding-bottom: 42px; } } @media (min-width: 1250px) { .footerEilaBottom { grid-template-columns: 500px 80px 190px 1fr; grid-template-rows: 1fr; grid-template-areas: "footerClaim footerLanguage footerCopyright footerLegal"; } } @media (min-width: 1540px) { .footerEilaBottom { grid-template-columns: 635px 80px 190px 1fr; } } @media (min-width: 1700px) { .footerEilaBottom { gap: 10px 60px; } } .footerEilaBottom .footerClaim { grid-area: footerClaim; margin-top: 60px; } @media (min-width: 768px) { .footerEilaBottom .footerClaim { margin-top: 0; } } .footerEilaBottom .footerClaim .textcontent { font-weight: var(--main-font-weight-xbold); line-height: 0.9; text-transform: uppercase; position: relative; z-index: 1; font-size: 5.2rem; } @media (min-width: 768px) { .footerEilaBottom .footerClaim .textcontent { font-size: 6.2rem; } } @media (min-width: 1250px) { .footerEilaBottom .footerClaim .textcontent { font-size: 8.2rem; } } @media (min-width: 1540px) { .footerEilaBottom .footerClaim .textcontent { font-size: 10.8rem; } } .footerEilaBottom .footerClaim .textcontent:before { content: ""; display: block; background: var(--main-color-primary); aspect-ratio: 1; border-radius: 50%; pointer-events: none; position: absolute; right: -5%; top: -63%; width: 140%; z-index: -1; } .footerEilaBottom .footerLanguage { grid-area: footerLanguage; } @media (min-width: 768px) { .footerEilaBottom .footerLanguage { display: flex; justify-content: flex-end; } } .footerEilaBottom .footerLanguage .languageSwitchButton { font-size: 1.4rem; } .footerEilaBottom .footerCopyright { grid-area: footerCopyright; text-align: right; } @media (min-width: 1540px) { .footerEilaBottom .footerCopyright { text-align: left; } } .footerEilaBottom .footerLegal { grid-area: footerLegal; } @media (min-width: 768px) { .footerEilaBottom .footerLegal .nav { justify-content: flex-end; } .footerEilaBottom .footerLegal .nav > ul { justify-content: flex-end; } } .footerEila { overflow: hidden; margin-top: -1px; } .footerEila .container { max-width: 1700px; } /*# sourceMappingURL=eila.css.map */