.TEG-image-teaser {
--theight: 45rem;
--txt-color: var(--tdk-color-blue);
--txt-color-alt: var(--tdk-color-blue-alt);
--btn-txt-color: var(--tdk-color-white);
--btn-bg-color: var(--tdk-color-blue);
position: relative;
left: 50%;
width: 100vw;
max-width: 220rem;
height: 100vw;
overflow: hidden;
color: var(--txt-color);
background: var(--tdk-color-grey-5);
transform: translateX(-50%);
}
.TEG-image-teaser.teaser-medium {
height: 150vw;
}
.TEG-image-teaser.teaser-big {
--theight: 65rem;
height: 150vw;
/* min-height: 40rem; */
/* @media (min-width: 576px) {
height: auto;
min-height: 64rem;
} */
}
@media (min-width: 576px) {
.TEG-image-teaser {
height: auto !important;
min-height: var(--theight);
}
}
.TEG-image-teaser:hover {
color: var(--txt-color);
}
.TEG-image-teaser * {
color: inherit;
}
.TEG-image-teaser>.elementlist {
width: 100%;
height: 100%;
/* VISUAL MOBILE */
}
@media (min-width: 576px) {
/* VISUAL DESKTOP */
.TEG-image-teaser>.elementlist>div:nth-child(1) {
display: none;
}
}
@media (max-width: 575.98px) {
/* VISUALs */
.TEG-image-teaser>.elementlist>div:nth-child(2) {
display: none;
}
}
.TEG-image-teaser>.elementlist>div:nth-child(1),
.TEG-image-teaser>.elementlist>div:nth-child(2) {
pointer-events: none;
position: absolute;
inset: 0;
}
.TEG-image-teaser>.elementlist>div:nth-child(1) .image-wrapper,
.TEG-image-teaser>.elementlist>div:nth-child(2) .image-wrapper {
height: 100% !important;
margin: 0;
/* @media (min-width: 576px) {
height: 50vw !important;
} */
}
.TEG-image-teaser>.elementlist>div:nth-child(1) .image-wrapper img,
.TEG-image-teaser>.elementlist>div:nth-child(2) .image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.TEG-image-teaser>.elementlist>div:nth-child(1) .video-wrapper,
.TEG-image-teaser>.elementlist>div:nth-child(2) .video-wrapper {
position: absolute;
inset: 0;
margin: 0;
}
.TEG-image-teaser>.elementlist>div:nth-child(1) .video-wrapper.loading::after,
.TEG-image-teaser>.elementlist>div:nth-child(2) .video-wrapper.loading::after {
content: '';
position: relative;
top: 50%;
left: 50%;
display: block;
width: 10em;
height: 10em;
font-size: 10px;
text-indent: -9999em;
border: 1.1em solid var(--tdk-color-blue-30);
border-left: 1.1em solid var(--tdk-color-blue);
border-radius: 50%;
transform: translateZ(0);
translate: -50% -50%;
animation: loading 1s infinite linear;
}
.TEG-image-teaser>.elementlist>div:nth-child(1) .video-wrapper iframe,
.TEG-image-teaser>.elementlist>div:nth-child(2) .video-wrapper iframe {
position: absolute;
inset: 50%;
z-index: 1;
transform: translate(-50%, -50%);
width: 100%;
min-width: calc(var(--theight) / var(--arh, 16) * var(--arw, 9));
height: calc(100vw / var(--arw, 9) * var(--arh, 16));
min-height: var(--theight);
border: 0;
/* LINK/TEXT */
}
.TEG-image-teaser>.elementlist>div:last-child {
display: contents;
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser {
position: absolute;
inset: 0;
display: block;
background-color: transparent !important;
/* CHECK */
padding-inline: var(--tdk-base-padding) !important;
padding: 3rem 1.5rem;
margin: 0 !important;
display: flex;
align-items: flex-end;
/* @media (min-width: 768px) { */
}
@media (min-width: 576px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser {
padding: 6rem 0;
align-items: center;
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser:hover {
color: inherit !important;
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>* {
flex: 1;
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column {
position: relative;
z-index: 1;
display: block;
max-width: unset;
padding: 1.5rem;
margin: 0;
}
@media (min-width: 576px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column {
padding: 0;
margin-inline: 5vw;
}
}
@media (min-width: 1200px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column {
max-width: 1110px;
margin-inline: auto;
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta {
padding: 0;
}
@media (min-width: 576px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta {
max-width: 75%;
}
}
@media (min-width: 768px) {
/* @media (min-width: 992px) {
max-width: 50%;
} */
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta {
max-width: 50%;
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-subtitle {
font-weight: 700;
font-size: 1.4rem;
line-height: 1.15;
text-transform: uppercase;
/* CHECK */
color: var(--tdk-color-steel);
/* opacity: .8; */
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-subtitle {
font-size: 2rem;
margin-bottom: 3rem;
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-title {
font-weight: 700;
font-size: 3rem;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-title {
font-size: 5rem;
letter-spacing: -0.03em;
margin-bottom: calc(var(--tdk-base-padding) * 1.5);
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-text {
/* padding-bottom: 0; */
margin-bottom: var(--tdk-base-padding);
}
@media (max-width: 575.98px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-text {
display: block;
}
}
@media (min-width: 768px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-text {
margin-bottom: calc(var(--tdk-base-padding) * 1.5);
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-text>.richtext {
font-weight: 400;
font-size: 1.5rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-text>.richtext {
font-size: 1.6rem;
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-text>.richtext>p {
line-height: unset;
/* @media (max-width: 379.98px) { */
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta *:has(+ .teaser-more) {
margin-bottom: 0 !important;
/* } */
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-more {
font-weight: 400;
font-size: 1.5rem;
line-height: 1.125;
display: inline-block;
color: var(--btn-txt-color);
background-color: var(--btn-bg-color);
/* border: 3px solid transparent; */
border-radius: 5px;
padding: 1.1rem 3rem;
margin-top: var(--tdk-base-padding);
}
@media (max-width: 379.98px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-more {
display: none !important;
}
}
@media (min-width: 768px) {
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-more {
font-size: 1.6rem;
padding: 1.4rem 3rem;
margin-top: calc(var(--tdk-base-padding) * 1.5);
}
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-more:hover {
background-color: hsl(from var(--btn-bg-color) h calc(s + 30) calc(l + 35)) !important;
background-color: hsl(from var(--btn-bg-color) h s calc(l - 7.5)) !important;
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-more:active {
background-color: hsl(from var(--btn-bg-color) h calc(s + 40) calc(l + 45)) !important;
background-color: hsl(from var(--btn-bg-color) h s calc(l - 10)) !important;
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-more .arrow-link:hover {
color: inherit;
}
.TEG-image-teaser>.elementlist>div:last-child>a.teaser>.text-column>.teaser-meta .teaser-more .arrow-link i.material-icons {
display: none;
}
.TEG-image-teaser.teaser-align-bottom a.teaser-standard {
align-items: flex-end !important;
}
@media (min-width: 576px) {
.TEG-image-teaser.teaser-shape-white .teaser-title {
font-size: 4rem !important;
}
}
.TEG-image-teaser.teaser-shape-white::after {
content: '';
position: absolute;
inset: 0;
opacity: 0.9;
/* background-image: url('data:image/svg+xml;utf8,<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 65L360 0L400 45V400H0V65Z" fill="white"/></svg>'); */
background-image: url('data:image/svg+xml;utf8,<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M400 65L40 0L0 45V400H400V65Z" fill="white"/></svg>');
background-position: top left;
background-repeat: no-repeat;
background-position-y: 80vw;
background-size: cover;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
/* --tdk-shadow-base: 0 5px 5px rgba(0, 0, 0, .1); */
}
@media (min-width: 350px) {
.TEG-image-teaser.teaser-shape-white::after {
background-position-y: 85vw;
}
}
@media (min-width: 380px) {
.TEG-image-teaser.teaser-shape-white::after {
background-position-y: 77vw;
}
}
@media (min-width: 400px) {
.TEG-image-teaser.teaser-shape-white::after {
background-position-y: 80vw;
}
}
@media (min-width: 450px) {
.TEG-image-teaser.teaser-shape-white::after {
background-position-y: 85vw;
}
}
@media (min-width: 500px) {
.TEG-image-teaser.teaser-shape-white::after {
background-position-y: 90vw;
}
}
@media (min-width: 576px) {
.TEG-image-teaser.teaser-shape-white::after {
right: 25%;
/* width: 860px; */
background-image: url('data:image/svg+xml;utf8,<svg width="800" height="400" viewBox="0 0 800 400" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M715 0H0V400H740L800 75L715 0Z" fill="white"/></svg>');
background-position: top right;
/* background-position-x: -70vw; */
/* background-size: cover; */
}
}
@media (min-width: 768px) {
.TEG-image-teaser.teaser-shape-white::after {
right: 35%;
}
}
@media (min-width: 992px) {
/* CHECK */
/* TRANSITIONS */
/* BUTTONS BASED ON .btn */
.TEG-image-teaser.teaser-shape-white::after {
right: 45%;
}
}
.TEG-image-teaser.teaser-white {
--txt-color: var(--tdk-color-white) !important;
--btn-txt-color: var(--tdk-color-white) !important;
/* --btn-bg-color: var(--tdk-color-grey-medium) !important; */
--btn-bg-color: var(--tdk-color-orange) !important;
/* --btn-bg-color: #FF9A2D !important; */
}
.TEG-image-teaser.teaser-white .teaser-subtitle {
color: var(--tdk-color-grey-light) !important;
}
.TEG-image-teaser.teaser-btn-white {
--btn-txt-color: var(--tdk-color-blue) !important;
--btn-bg-color: var(--tdk-color-white) !important;
}
.TEG-image-teaser.teaser-btn-orange {
--btn-txt-color: var(--tdk-color-white) !important;
--btn-bg-color: var(--tdk-color-orange) !important;
/* --btn-bg-color: #FF9A2D !important; */
}
.TEG-image-teaser.teaser-btn-blue {
--btn-txt-color: var(--tdk-color-white) !important;
--btn-bg-color: var(--tdk-color-blue) !important;
/* --btn-bg-color: #467EEC !important; */
}
.TEG-image-teaser.careers {
--txt-color: var(--tdk-color-white) !important;
--btn-txt-color: var(--tdk-color-slate) !important;
--btn-bg-color: var(--tdk-color-white) !important;
}
.TEG-image-teaser.careers::after {
content: '';
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml;utf8,<svg width="4000" height="6000" viewBox="0 0 4000 6000" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1703.55 2793.87C1233.78 2700.52 368.181 2331.79 0 2142.32V6000H4000V2211.84C3956.68 2278.63 3807.02 2452.83 3561.51 2615.31C3254.61 2818.41 3033.43 2821.14 2781.83 2863.39C2496.8 2911.26 2245.46 2901.56 1703.55 2793.87Z" fill="%2368206C" fill-opacity="0.4"/> <path d="M3426.03 2531.39C3796.51 2130.29 3965.9 1343.34 4000 1000V6000H0V3341.04C897.182 3443.79 1323.03 3358.02 2006.29 3250.67C2479.08 3176.39 2962.92 3032.78 3426.03 2531.39Z" fill="%2368206C" fill-opacity="0.7"/> <path d="M0 6000H4000V3178.89C3807.82 3217.11 3404.3 3263.83 3123.65 3238.35C2775.35 3206.73 2512.55 3178.89 1956.77 2962.3C1420.47 2753.31 1196.36 2677.77 901.873 2655.12C578.486 2630.24 168.211 2747.6 0 2836.32V6000Z" fill="%23334069" fill-opacity="0.8"/> </svg>');
background-position-y: bottom;
background-repeat: no-repeat;
background-size: contain;
}
@media (min-width: 350px) {
.TEG-image-teaser.careers::after {
background-position-y: 5vw;
}
}
@media (min-width: 380px) {
.TEG-image-teaser.careers::after {
background-position-y: 0vw;
}
}
@media (min-width: 450px) {
.TEG-image-teaser.careers::after {
background-position-y: 15vw;
}
}
@media (min-width: 500px) {
.TEG-image-teaser.careers::after {
background-position-y: 25vw;
}
}
@media (min-width: 576px) {
.TEG-image-teaser.careers::after {
background-position-y: 25%;
background-size: cover;
}
}
@media (min-width: 768px) {
.TEG-image-teaser.careers::after {
background-position-y: 36%;
}
.TEG-image-teaser.careers .teaser-more {
position: absolute;
right: 0;
bottom: 0;
}
}
@media (min-width: 992px) {
.TEG-image-teaser.careers::after {
background-position-y: 41%;
}
}
@media (min-width: 1200px) {
.TEG-image-teaser.careers::after {
background-position-y: 44%;
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}