.AD19_StageTeaser { font-size: 1rem; line-height: 1.875rem; margin-bottom: 150px; overflow: hidden; position: relative; width: 100%; z-index: 0; } .AD19_StageTeaser .image-overlay { position: absolute; z-index: 3; } .AD19_StageTeaser .AD19_StageTeaser-image { display: none; z-index: 0; } .AD19_StageTeaser .AD19_StageTeaser-image img { display: block; width: 100%; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper { background-color: #F5F8FD; background-position: 0 0; background-repeat: no-repeat; background-size: 101vw auto; margin-left: -6%; max-height: calc(100vh - 54px); min-height: 613px; padding: 0 6%; position: relative; width: calc(100% + 12%); z-index: 2; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content { bottom: 16%; color: #11284e; display: block; max-width: 290px; padding: 0 15px; position: absolute; z-index: 2; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content h2 { font-size: 2.1875rem; font-style: italic; font-weight: 700; line-height: 2.2rem; margin-bottom: 10px; text-shadow: 1px 1px 1px rgba(255,255,255,.5); } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content .AD19_StageTeaser-content__copy { margin-bottom: 21px; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content a.cta { background-color: #62bb46; border-bottom-left-radius: 100% 1000px; border-bottom-right-radius: 100% 1000px; border-top-left-radius: 100% 1000px; border-top-right-radius: 100% 1000px; color: #fff; display: inline-block; font-size: 1rem; font-weight: 700; line-height: 1.375rem; padding: 12px 40px; position: relative; text-decoration: none; white-space: nowrap; } .AD19_StageTeaser .AD19_StageTeaser__overlapping_box { bottom: 0; height: 74.0619%; left: 0; position: absolute; width: 100%; z-index: 1; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.text-center { text-align: center; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.text-left { text-align: left; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.center { -ms-flex-item-align: center; align-self: center; } .AD19_StageTeaser .AD19_StageTeaser-image picture { width: 100%; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.text-right { text-align: right; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.left { -ms-flex-item-align: start; align-self: flex-start; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.right { -ms-flex-item-align: end; align-self: flex-end; } @media (min-width: 420px) { .AD19_StageTeaser .AD19_StageTeaser-content-wrapper { background-position:0 -15vw; height: 100vh; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content { bottom: 5%; max-width: 50vw; } } @media (min-width: 768px) { .AD19_StageTeaser .AD19_StageTeaser-image { display: block; width: 118%; } .AD19_StageTeaser .AD19_StageTeaser-image img { left: -15%; position: relative; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper { -ms-flex-direction: column; -webkit-box-direction: normal; -webkit-box-orient: vertical; background: 0 0!important; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; height: auto; margin-left: 0; padding: 0; position: absolute; top: 0; width: 100%; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser__overlapping_box { display: none; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content { bottom: initial; max-width: 310px; padding: 0 45px; top: 5%; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content h2 { line-height: 3.75rem; margin-bottom: 16px; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content .AD19_StageTeaser-content__copy { margin-bottom: 42px; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.desktop-left { -ms-flex-item-align: start; align-self: flex-start; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.desktop-center { -ms-flex-item-align: center; align-self: center; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.desktop-right { -ms-flex-item-align: end; align-self: flex-end; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.text-desktop-left { text-align: left; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.text-desktop-right { text-align: right; } .AD19_StageTeaser .AD19_StageTeaser__overlapping_box { bottom: unset; height: 100%; left: unset; right: 0; top: 0; width: 50%; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content.text-desktop-center { text-align: center; } } @media (min-width: 1024px) { .AD19_StageTeaser { font-size: 1.25rem; line-height: 2.25rem; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content { max-width: 443px; top: 15%; } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content h2 { font-size: 3.125rem; } } @media (min-width: 1440px) { .AD19_StageTeaser .AD19_StageTeaser-image { margin-left: 0; width: 100%; } .AD19_StageTeaser .AD19_StageTeaser-image img { left: 0; } } .AD19_StageTeaser .AD19_StageTeaser-content-wrapper .AD19_StageTeaser-content { bottom: 5%; top: unset; } .AD19_StageTeaser-content__copy li { background: url(../icons-vorlagen/icon-check-blue.svg) left 7px no-repeat; padding-left: 25px; background-size: 20px; } @media (min-width: 1024px){ .AD19_StageTeaser-content__copy li { background: url(../icons-vorlagen/icon-check-blue.svg) left 10px no-repeat; padding-left: 30px; background-size: initial; } }