/* ------------------------------ */
/* ----------- Teaser ----------- */
/* ------------------------------ */

.section > div.section__teaser {
    max-width: var(--width-container);
}

.section__teaser + .section__teaser, .section__coins_preview + .section__teaser {
    margin-top: 0;
}

.teaser.row {
    margin: 0;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    min-height: 850px;
}

.teaser__content--bg {
    background-color: var(--brand-gold-light);
}

.teaser.row > div {
    padding: 0;
}
  
.teaser__media {
    position: relative;
    overflow: hidden;
}

.section__teaser:not(.section__teaser--magazine) .teaser__content__inside, .magazine--normal .teaser__content__inside  {
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; 
}   

.section__teaser:not(.section__teaser--magazine) .teaser__content:not(.teaser__content--center) .teaser__content__inside  {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
} 

.section__teaser .teaser__content--center .teaser__content__inside, .section__magazines .teaser__content--center .teaser__content__inside {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.teaser__content--center h2, .teaser__content--center h3, .teaser__content--center .teaser__content__container {
    text-align: center;
}

.teaser__content--center h2, .teaser__content--center h3 {
    max-width: var(--width-text-medium);
}

.teaser__content__container p {
    max-width: var(--width-text-small);   
}

.teaser__content__container .button {
    margin-top: 0;
    margin-bottom: -11px;
}


/* Teaser Coin */
.section__teaser .teaser__media--coin {
    background-color: var(--brand-gold);
}

.teaser__media--coin .teaser__media__row {
    height: 100%;
}


/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1600px) {

    .section__teaser:not(.section__teaser--magazine) .teaser__content__inside, .magazine--normal .teaser__content__inside {
        padding: var(--spacing-9);
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1440px) {

    .teaser.row {
        min-height: 675px;
    }

    .section__teaser:not(.section__teaser--magazine) .teaser__content__inside, .magazine--normal .teaser__content__inside {
        padding: var(--spacing-8);
    }

}


@media all and (max-width: 1439.98px) and (min-width: 1280px) {

    .teaser.row {
        min-height: 600px;
    }

    .section__teaser:not(.section__teaser--magazine) .teaser__content__inside, .magazine--normal .teaser__content__inside {
        padding: var(--spacing-7);
    }

}


@media all and (max-width: 1279.98px) and (min-width: 992px) {

    .teaser.row {
        min-height: 550px;
    }

    .section__teaser:not(.section__teaser--magazine) .teaser__content__inside, .magazine--normal .teaser__content__inside {
        padding: var(--spacing-6);
    }

}


@media all and (min-width: 992px) {

    .section > div.section__teaser {
        padding-left: 0;
        padding-right: 0;
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .section__teaser:not(.section__teaser--magazine) .teaser__content__inside, .magazine--normal .teaser__content__inside {
        padding: 30px 0 0;
    }

}


@media all and (max-width: 991.98px) {

    .teaser.row {
        min-height: unset;
    }

    .teaser__media .picture_container--cover, .teaser__media .picture_container--cover picture {
        position: relative;
        height: auto;
    }

    .section__teaser + .section__teaser, .section__coins_preview + .section__teaser {    
        margin-top: var(--spacing-9);
    }

}


@media all and (max-width: 767.98px) {

    .section > div:not(.fullwidth).section__teaser {
        padding-left: 0;
        padding-right: 0;
    }

    .section__teaser:not(.section__teaser--magazine) .teaser__content__inside, .magazine--normal .teaser__content__inside {
        padding: var(--spacing-6) var(--spacing-5-5) 0;
    }


}