.component.teaser{display:block}
.component.teaser .hero{min-height:200px;position:relative}
.component.teaser .hero img{height:100%}
.component.teaser>.hero + .content .flexible{padding-top:24px}
.component.teaser .content{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.component.teaser .element.background{padding:0 !important;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
.component.teaser .element.background .content{padding:24px}
.component.teaser .component.headline + .component.rte{margin-top:12px}
.component.teaser .component.image{height:100%}
.component.teaser .links{margin-top:24px;display:-webkit-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-align-items:flex-start;align-items:flex-start;gap:6px}
@media screen and (min-width:37.5em){.component.teaser.block-a .background,.component.teaser.block-b .background{display:-webkit-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}
.component.teaser.block-a .content:not(.component.teaser.block-b .content),.component.teaser.block-b .content:not(.component.teaser.block-b .content){padding:40px !important}
.component.teaser.block-a .hero,.component.teaser.block-b .hero,.component.teaser.block-a .content,.component.teaser.block-b .content{-webkit-flex:1 0 50%;-ms-flex:1 0 50%;flex:1 0 50%}
.component.teaser.block-a .hero,.component.teaser.block-b .hero{height:auto;min-height:350px;max-height:600px}
.component.teaser.block-a .hero.right-image,.component.teaser.block-b .hero.right-image{-webkit-order:1;-ms-order:1;order:1}
.component.teaser.block-b,.component.teaser.block-c,.component.teaser.block-d{height:100%}
}
@media screen and (min-width:56.5625em){.component.teaser .block-b .component.teaser .hero + .content{height:calc(100% - 270px)}
.component.teaser .block-c .component.teaser .hero + .content{height:calc(100% - 200px)}
.component.teaser .block-d .component.teaser .hero + .content{height:calc(100% - 200px)}
.component.teaser .content:not(.teaser.block-a .content){height:100%}
.component.teaser.block-d .hero{height:200px}
.component.teaser.block-b .hero,.component.teaser.block-c .hero{min-height:270px}
.component.teaser.wide .hero{height:450px}
.component.teaser.wide .block-b .component.teaser .hero + .content{height:calc(100% - 300px)}
.component.teaser.wide .block-c .component.teaser .hero + .content{height:calc(100% - 270px)}
.component.teaser.wide .block-d .component.teaser .hero + .content{height:calc(100% - 200px)}
.component.teaser.wide .block-b .component.teaser .hero{height:300px}
.component.teaser.wide .block-c .component.teaser .hero{height:270px}
.component.teaser.wide .block-d .component.teaser .hero{height:200px}
.component.teaser .content .component{height:auto}
.component.teaser .element.background{height:100%;display:-webkit-flex;display:-ms-flexbox;display:-ms-flex;display:flex}
.component.teaser.color .content .flexible{-webkit-flex:1;-ms-flex:1;flex:1}
.component.teaser .content{display:-webkit-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
}