/* Allgemain */
.dce-teaser h2 span {display: block; }
.dce-teaser .image img { max-width: 100%; height:auto; outline: none; }
.dce-teaser .button a {text-transform: uppercase; display: block; border: 1px solid; padding: 12px 16px; text-align: center; }

/* Spendenaufruf Ukraine */
.dce-teaser.layout-2 { font-size: .9em; background-color: var(--contentBlue); color: #fff; display: flex; flex-direction: column; text-align: center; align-items: center; padding: 20px 20px 30px; margin-bottom: 50px;  }
.dce-teaser.layout-2 a { color: #fff; }
.dce-teaser.layout-2 h2 { font: 1.84em var(--fontText);}
.dce-teaser.layout-2 .button a { border: 1px solid #fff; padding: 12px 16px; text-align: center; }
.dce-teaser.layout-2 .button a:hover { background-color: #fff; color: var(--contentBlueDark) ; transition: background-color 400ms; }
.dce-teaser.layout-2 img { width: 100%; height: max(267px, 216px); margin: 1.3em 0;}

/* Kampagne Wir für euch, Profilbilder  */
.dce-teaser-group.layout-4 {  display: flex; flex-direction: column; row-gap: 60px;}
.dce-teaser-group.layout-4 .zw-titel p { margin-top:0;}
.dce-teaser-group.layout-4>a, .dce-teaser.layout-4>a {display: none; }
.dce-teaser.layout-4 { display: flex  ; flex-direction: column;  align-items: center; background-color: unset; text-align: center; }
.dce-teaser.layout-4 .button a { color: var(--contentBlueDark); border: 1px solid var(--contentBlue);  padding: 14px 1.4em; text-align: center; margin-top: 30px; }
.dce-teaser.layout-4 .button a:hover { background-color: var(--contentBlue); color: #fff; transition: background-color 450ms; }

/* Content-Banner staatklar, Content-Banner Podcast */
.dce-teaser.layout-5 { display: grid; grid-template: repeat(4, auto) 1fr / auto 1fr; background-color: var(--contentBlue); margin-bottom: 5em; color: #fff; text-align: center; padding: 0 1.8em; font-size: clamp(.8em,3vw,1em); }
.dce-teaser.layout-5 a { color: #fff;}
.dce-teaser.layout-5 a:not(.button a)::before {display: none;}
.dce-teaser.layout-5 .image { grid-area: 1/1/2/-1; margin: 0 -1.8em; }
.dce-teaser.layout-5 h2 { grid-area: 2/1/3/-1; margin: .88em 0 .5em 0; font-size: 2em; }
.dce-teaser.layout-5 .trailer { margin-bottom: 1em; font-size: 1.2em; line-height: 1.3em;  }
.dce-teaser.layout-5 .button {  grid-row: 4/5; align-self: flex-end; margin-bottom: 2em; font-size: 1.1em;}
.dce-teaser.layout-5 .button a:hover { background-color: #fff; color: var(--contentBlue); transition: background-color 400ms; }

/* Content-Banner Jobkompass */
.dce-teaser.layout-6 { background-color: var(--contentBlue); font-size: clamp(.7em,2vw,1em); margin-bottom: 5em; padding: 2.15em 2em 2.4em; }
.dce-teaser.layout-6 .trailer { margin-top: .88em; text-align: center; font-size: 1.16em; }
.dce-teaser.layout-6 .trailer a::before { margin-left: 1px; }



@media (min-width:768px) {

    /* Spendenaufruf Ukraine */
    .dce-teaser.layout-2 {display: grid; grid-template: auto 1fr/ auto auto; padding-bottom: 20px; }
    .dce-teaser.layout-2 .image {grid-row: 1/-1; margin-right: 20px; }
    .dce-teaser.layout-2 h2 { margin-top: 9%; }
    .dce-teaser.layout-2 img {margin: 0;}
    .dce-teaser.layout-2 .button a {  margin-top: 0; }

    /* Kampagne Wir für euch, Profilbilder  */
    .dce-teaser-group.layout-4 { flex-flow: wrap row; column-gap: 4.54%; font-size: .96em;}
    .dce-teaser-group.layout-4>div { width: calc(33.3333% - 3.02666%); }

    /* Content-Banner staatklar, Content-Banner Podcast */
    .dce-teaser.layout-5 { font-size: .815em; grid-template-rows: repeat(2, auto) 1fr;column-gap: 2em; padding: 0 2em 0 0; text-align: left; }
    .dce-teaser.layout-5 .image { grid-area: 1/1/-1/2; margin: 0; }
    .dce-teaser.layout-5 h2 { grid-area: 1/2/2/-1;}
    .dce-teaser.layout-5 .trailer { grid-area: 2/2/3/-1; margin: 0; }
    .dce-teaser.layout-5 .button {  grid-row: 3/4; }

}
@media (min-width:992px) {

    /* Spendenaufruf Ukraine */
    .dce-teaser.layout-2 h2 { font-size: 1.63em; }

    /* Kampagne Wir für euch, Profilbilder */
    .dce-teaser-group.layout-4 { font-size: 1em;}

    /* Content-Banner staatklar, Content-Banner Podcast  */
    .dce-teaser.layout-5 { font-size: .815em; }
    .dce-teaser.layout-5 .trailer { font-size: 1.1em;  }
}

@media (min-width:1200px) {
    /* Spendenaufruf Ukraine */
    .dce-teaser.layout-2 h2 {
        font-size: 2.28em;
    }

    /* Content-Banner staatklar, Content-Banner Podcast */
    .dce-teaser.layout-5 {
        font-size: 1em;
    }
}