
.teaser-main-wrapper {
    position: relative;
}

.teaser-center {
    width: 1200px;
    margin: 0px auto;
    padding: 20px 0px;
    box-sizing: border-box;
}

.teaser-box {
    position: relative;
    width: 260px;
    margin: 0px 20px;
    float: left;
    text-align: center;
}

.teaser-header {
    font-size: 30px;
    padding: 10px 0px;
}

.teaser-text {

}

.teaser-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.teaser-box img {
    transition: box-shadow .3s ease;
}

.teaser-box:hover img {
    box-shadow:  0px 10px 50px rgba(0,0,0,0.2);
}

.teaser-main-wrapper .teaser_top_seg.waves {
    content: "";
    position: relative;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    background-position: center top;
    background-repeat: repeat-x;
    -webkit-mask-image: url(/typo3conf/ext/kmbasicsitepackage/Resources/Public/Grafiken/wave.svg);
    mask-image: url(/typo3conf/ext/kmbasicsitepackage/Resources/Public/Grafiken/wave.svg);
}

.teaser-main-wrapper .teaser_top_seg.bigwave {
    content: "";
    position: relative;
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    background-position: center top;
    background-repeat: repeat-x;
    -webkit-mask-image: url(/typo3conf/ext/kmbasicsitepackage/Resources/Public/Grafiken/bigwave.svg);
    mask-image: url(/typo3conf/ext/kmbasicsitepackage/Resources/Public/Grafiken/bigwave.svg);
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@media (min-width: 1350px) {
    .teaser-main-wrapper .teaser_top_seg.bigwave {
        height: 100px;
    }
}

.teaser-main-wrapper .swiper-container {
    overflow: unset;
}


/* Responsive Anpassung ================================================================= */

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {

    /* Mobile: Teaserboxen */
    .teaser-main-wrapper {
        width: 100%;
        overflow: hidden;
    }

    .teaser-center {
        width: 100%;
    }

    .teaser-main-wrapper .swiper-button-next,
    .teaser-main-wrapper .swiper-button-prev {
        display: block!important;
    }

    .teaser-main-wrapper .swiper-container {
        overflow: hidden;
    }

    .teaser-main-wrapper .teaser_top_seg.bigwave {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

}