/* ------------------------------ */
/* ----------- Teaser ----------- */
/* ------------------------------ */

.teaser_container--two > .teaser:nth-child(n+3), .teaser_container--two-small > .teaser:nth-child(n+3),
.teaser_container--three > .teaser:nth-child(n+4), .teaser_container--four > .teaser:nth-child(n+5) {
    margin-top: var(--spacing-5-5);
}

.teaser {
    text-align: left;
}

.teaser .picture_container img, .teaser .video_container video, .tile .picture_container img, .tile .video_container video {
    width: 100%;
}

.teaser .picture_container:not(.picture_container--cover) img, .teaser .video_container:not(.video_container--cover) video, .tile .picture_container:not(.picture_container--cover) img, .tile .video_container:not(.video_container--cover) video {
    height: auto;
}

.teaser__media--video {
    position: relative;
    aspect-ratio: 440 / 600;
}


/* Kacheln */
.section > .section__two_column_content + .section__tiles--full {
    padding-top: var(--spacing-9);
}

.section__tiles.section__tiles--full .row {
    margin-right: 0;
    margin-left: 0;
}

.section__tiles.section__tiles--full .tile {
    padding-right: 0;
    padding-left: 0;
}

.section__tiles .video {
    position: relative;
}

.section__tiles .video--cover {
    width: 100%;
    height: 100%;
}

.section__tiles:not(.section__tiles--full) .tile--border .picture_container, .section__tiles:not(.section__tiles--full) .tile--border .video_container, .section__tiles:not(.section__tiles--full) .tile--border .color_container {
    outline: 1px solid var(--brand-black);
    outline-offset: -1px;
}

.section__tiles .tile__content span.tile__title {
    display: block;
    margin-top: var(--spacing-3-5);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-1);
    font-weight: normal;
}

.section__tiles .tile__content p {
    margin-top: var(--spacing-2);
    text-align: left;
}

.section__tiles .tile__content p b {
    font-weight: normal;
}

.section__tiles .tile__content .color {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: var(--font-size-0-5);
    font-weight: 400;
}

.section__tiles .tile__content .color__info {
    width: 100px;
    padding-right: 15px;
}

.section__tiles .tile__content .color__value {
    width: calc(100% - 100px);
    font-size: var(--font-size-0-5);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 768px) {
    
    .teaser:not(.teaser--full) .teaser__content {
        margin-top: var(--spacing-3-5);
    }

    .teaser_container--two > .teaser, .teaser_container--two-small > .teaser, .tile_container--two > .tile {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .teaser.teaser--full .teaser__content {
        margin-top: var(--spacing-3-5);
    }

    .section__tiles.section__tiles--full .intro-animation--bottom {
        -webkit-transition-delay: unset !important;
        -o-transition-delay: unset !important;
        transition-delay: unset !important;
    }

    .section__tiles .tile__content span.tile__title.color_title  {
        margin-bottom: var(--spacing-3);
    }

    .color_container {
        aspect-ratio: 885 / 1275;
    }

}


@media all and (min-width: 992px) {

    .teaser_container--three > .teaser, .tile_container--three > .tile {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

}


@media all and (min-width: 1240px) {

    .teaser_container--four > .teaser, .tile_container--four > .tile {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .section__tiles--full .tile__content {
        padding-right: var(--spacing-5);
        padding-left: var(--spacing-5);
    }

    .section > .section__two_column_content + .section__tiles:not(.section__tiles--full):not(.section__tiles--almost-full) {
        padding-top: var(--spacing-6);
    }

}


@media all and (min-width: 1400px) {
    
    .teaser_container {
        margin-right: calc(-1 * var(--spacing-2));
        margin-left: calc(-1 * var(--spacing-2));
    }
    
    .teaser {
        padding-right: var(--spacing-2);
        padding-left: var(--spacing-2);
    }

    .teaser .button {
        margin-top: var(--spacing-3);
    }

}


@media all and (min-width: 1600px) {

    .section__tiles:not(.section__tiles--full) .tile_container:not(.tile_container--four) {
        margin: -12px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container:not(.tile_container--four) .tile {
        padding: 12px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container--four {
        margin: -9px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container--four .tile {
        padding: 9px;
    }

    .teaser h3, .tile h3 {
        margin-bottom: var(--spacing-3);
    }

    .section__tiles .tile__content .color {
        margin-top: var(--spacing-1);
    }

}


@media all and (min-width: 1900px) {

    .teaser.teaser--full .teaser__content {
        margin-top: var(--spacing-4);
    }

}


@media all and (max-width: 1899.98px) and (min-width: 1600px) {

    .teaser.teaser--full .teaser__content {
        margin-top: 35px;
    }

    .teaser_container--four .teaser h3, .tile_container--four .teaser h3 {
        font-size: 27px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1240px) {

    .teaser_container--four .teaser h3, .tile_container--four > .tile h3 {
        font-size: 25px;
    }

    .section__tiles .tile__content .color {
        margin-top: 8px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

    .section__tiles:not(.section__tiles--full) .tile_container:not(.tile_container--four) {
        margin: -10px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container:not(.tile_container--four) .tile {
        padding: 10px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container--four {
        margin: -7px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container--four .tile {
        padding: 7px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 768px) {

    .teaser h3, .tile h3 {
        margin-bottom: var(--spacing-2);
    }

}


@media all and (max-width: 1399.98px) and (min-width: 768px) {

    .teaser_container {
        margin-right: -12px;
        margin-left: -12px;
    }
    
    .teaser {
        padding-right: 12px;
        padding-left: 12px;
    }

    .teaser .button {
        margin-top: var(--spacing-2);
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

    .section__tiles:not(.section__tiles--full) .tile_container:not(.tile_container--four) {
        margin: -9px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container:not(.tile_container--four) .tile {
        padding: 9px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container--four {
        margin: -6px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container--four .tile {
        padding: 6px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 576px) {

    .section > .section__two_column_content + .section__tiles:not(.section__tiles--full):not(.section__tiles--almost-full) {
        padding-top: var(--spacing-5-5);
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .section__tiles:not(.section__tiles--full) .tile_container {
        margin: -8px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container .tile {
        padding: 8px;
    }

    .teaser_container--four > .teaser, .tile_container--four > .tile {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .teaser_container--four > .teaser:nth-child(n+4) {
        margin-top: var(--spacing-5-5);
    }

    .section__tiles--full .tile__content {
        padding-right: var(--spacing-5-5);
        padding-left: var(--spacing-5-5);
    }

    .section__tiles .tile__content {
        margin-bottom: var(--spacing-4);   
    }
    
    .section__tiles .tile__content span.tile__title {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-1);
    }

    .section__tiles .tile__content p {
        margin-top: var(--spacing-1);
    }

    .section__tiles .tile__content .color {
        margin-top: 7px;
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .teaser_container--three > .teaser, .teaser_container--four > .teaser, .tile_container--four > .tile, .tile_container--three > .tile {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .teaser_container--three > .teaser:nth-child(n+3), .teaser_container--four > .teaser:nth-child(n+3) {
        margin-top: var(--spacing-5-5);
    }

    .section__tiles--full .tile__content {
        padding-right: var(--spacing-5);
        padding-left: var(--spacing-5);
    }

    .section__tiles .tile__content {
        margin-bottom: var(--spacing-5);   
    }

    .section__tiles:not(.section__tiles--full) .tile_container {
        margin: -7px;
    }

    .section__tiles:not(.section__tiles--full) .tile_container .tile {
        padding: 7px;
    }

    .section__tiles .tile__content span.tile__title {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-1);
    }

    .section__tiles .tile__content p {
        margin-top: var(--spacing-1);
    }

    .section__tiles .tile__content .color {
        margin-top: 7px;
    }

}


@media all and (max-width: 767.98px) {

    .teaser_container--two > .teaser, .teaser_container--two-small > .teaser, .teaser_container--three > .teaser,
    .tile_container--two > .tile, .tile_container--three > .tile {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .teaser_container {
        margin-right: calc(-1 * var(--spacing-1));
        margin-left: calc(-1 * var(--spacing-1));
    }
    
    .teaser {
        padding-right: var(--spacing-1);
        padding-left: var(--spacing-1);
    }
    
    .teaser:not(.teaser--full) .teaser__content {
        margin-top: var(--spacing-3);
    }
    
    .teaser.teaser--full .teaser__content {
        margin-top: var(--spacing-3);
    }

    .teaser .button {
        margin-top: var(--spacing-1);
    }

    .section__tiles:not(.section__tiles--full) .tile_container {
        margin: -7px;
    }

    .section__tiles:not(.section__tiles--full) .tile {
        padding: 7px;
    }

    .section__tiles--full .tile__content {
        padding-right: var(--spacing-4);
        padding-left: var(--spacing-4);
    }

    .color_container {
        aspect-ratio: 1 / 1;
    }

    .teaser + .teaser {
        margin-top: var(--spacing-5-5);
    }

    .section__tiles:not(.section__tiles--full) .tile__content {
        margin-bottom: var(--spacing-3);   
    }

    .section__tiles:not(.section__tiles--full) .color_container + .tile__content {
        margin-bottom: var(--spacing-4);    
    }

    .section__tiles.section__tiles--full .tile__content {
        margin-bottom: calc(var(--spacing-3) + 14px);  
    }

    .section__tiles .tile__content span.tile__title {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-1);
    }

    .section__tiles .tile__content span.tile__title.color_title {
        margin-bottom: var(--spacing-2);
    }

    .section__tiles .tile__content p {
        margin-top: var(--spacing-1);
    }

    .section__tiles .tile__content .color {
        margin-top: 7px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .teaser_container--four > .teaser, .tile_container--four > .tile {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

}


@media all and (max-width: 575.98px) {

    .section > .section__two_column_content + .section__tiles:not(.section__tiles--full):not(.section__tiles--almost-full) {
        padding-top: var(--spacing-5);
    }

    .teaser_container--two > .teaser, .teaser_container--two-small > .teaser, .teaser_container--three > .teaser, .teaser_container--four > .teaser,
    .tile_container--two > .tile, .tile_container--three > .tile {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .teaser + .teaser {
        margin-top: var(--spacing-5-5);
    }

}


@media all and (max-width: 575.98px) and (min-width: 390px) {

    .tile_container--four > .tile {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

}


@media all and (max-width: 389.98px) {

    .tile_container--four > .tile {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

}