.AD19_AboutTeaser { -ms-flex-align: center; -ms-flex-wrap: wrap; -webkit-box-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin-left: auto; margin-right: auto; max-width: 100%; } .AD19_AboutTeaser { -ms-flex-pack: center; -webkit-box-pack: center; color: #11284e; font-size: 1rem; justify-content: center; position: relative; text-align: center; z-index: 1; } .AD19_AboutTeaser.bg-blue-wave { background-image: url(../icons-vorlagen/teasti-teaser-pattern-mobile.png); background-position: calc(50% - 19px) 100%; background-repeat: repeat-y; background-size: 283px; padding-bottom: 16px; } .AD19_AboutTeaser.bg-blue-wave .AD19_AboutTeaser-content-wrapper { -webkit-box-shadow: none; bottom: 16px; box-shadow: none; max-width: 100%; width: 283px; } .AD19_AboutTeaser.bg-blue .AD19_AboutTeaser-image { background: #f5f8fd; min-height: 308px; } .AD19_AboutTeaser.footer { bottom: -239px; } .AD19_AboutTeaser .AD19_AboutTeaser-image { margin-bottom: 238px; width: 100%; } .AD19_AboutTeaser .AD19_AboutTeaser-image picture { width: 100%; } .AD19_AboutTeaser .AD19_AboutTeaser-image img { vertical-align: top; width: 100%; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper { -ms-transform: translateX(-50%); -webkit-box-shadow: 0 0 12px 0 rgba(0,0,0,.2); -webkit-transform: translateX(-50%); background-color: #fff; bottom: 10px; box-shadow: 0 0 12px 0 rgba(0,0,0,.2); left: 50%; max-height: 90%; max-width: 90%; overflow-y: auto; padding: 32px 26px 34px; position: absolute; text-align: center; transform: translateX(-50%); width: 335px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content { line-height: 1.625rem; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content h2 { margin-bottom: 16px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content .AD19_AboutTeaser-content__copy { font-size: .875rem; margin-bottom: 26px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content .cta-text { background: url(../icons-vorlagen/icon-arrow_right-green.svg) center left no-repeat; color: #62bb46; display: inline-block; font-size: .875rem; font-weight: 700; padding-left: 25px; text-decoration: none; } .AD19_AboutTeaser.bg-blue .AD19_AboutTeaser-image img,.AD19_AboutTeaser.bg-blue .AD19_AboutTeaser-image picture { display: none; } #AD19_AboutTeaser-kfz_versicherung.AD19_AboutTeaser,#AD19_AboutTeaser-kontakt.AD19_AboutTeaser,#AD19_AboutTeaser-ratgeber.AD19_AboutTeaser { margin-top: -350px; } @media (min-width: 768px) { .AD19_AboutTeaser.bg-blue-wave { background-size: 676px; padding-bottom: 26px; } .AD19_AboutTeaser.bg-blue-wave .AD19_AboutTeaser-content-wrapper { bottom: 39px; width: 700px; } .AD19_AboutTeaser .AD19_AboutTeaser-image { margin-bottom: 93px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper { bottom: 13px; width: 630px; } } @media (min-width: 1024px) { .AD19_AboutTeaser { max-width:1320px; } .AD19_AboutTeaser.bg-blue-wave { background-image: url(../icons-vorlagen/teasti-teaser-pattern-desktop-975x9sehrflach.png); background-position: calc(50% - 42px); background-size: 975px; } .AD19_AboutTeaser.bg-blue-wave .AD19_AboutTeaser-content-wrapper { bottom: 39px; width: 980px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper { padding: 40px 55px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content { line-height: 1.875rem; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content h2 { margin-bottom: 24px; margin-top: 40px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content .AD19_AboutTeaser-content__copy { font-size: 1rem; margin-bottom: 32px; } .AD19_AboutTeaser.footer { bottom: -93px; } .AD19_AboutTeaser .AD19_AboutTeaser-content-wrapper .AD19_AboutTeaser-content .cta-text { font-size: 1rem; } } @media (min-width: 1024px) { .AD19_AboutTeaser.bg-blue-wave { background-position:calc(50% - 55px); background-repeat: space; } } .AD19_AboutTeaser.footer { margin-bottom: 0; margin-top: -238px; } @media (min-width: 768px) { .AD19_AboutTeaser.footer { bottom:-93px; margin-top: -93px; } } @media (min-width: 1024px){ .AD19_AboutTeaser.highlight .AD19_AboutTeaser-image { width: 980px; margin-bottom: 153px; } } .AD19_AboutTeaser.highlight .AD19_AboutTeaser-content-wrapper { width: 632px; } .AD19_AboutTeaser.highlight.bg-blue-wave { background-image: url(../icons-vorlagen/teasti_teaser_pattern_desktop_highlight.png); background-repeat: repeat-y; background-size: 632px; max-height: 632px; }