.kss-slider {

    position: relative;
    width: 100%;
    min-height: 420px;
    overflow: visible;
    padding: 40px 70px 120px;

}


/*
----------------------------------------
Swiper Grundlayout
----------------------------------------
*/

.kss-slider .swiper-wrapper {

    align-items: center;
    overflow: visible;
}

.kss-slider .swiper-wrapper {
    overflow: visible;
}


.kss-slider .swiper-slide {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: .85;
    transition:
        transform .45s ease,
        opacity .45s ease;
}


/*
----------------------------------------
Bilder
----------------------------------------
*/

.kss-slider .kss-image {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 4px;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


/*
----------------------------------------
Hover
----------------------------------------
*/

.kss-slider .swiper-slide:hover .kss-image {

    transform: translateY(-8px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.25);

}


/*
----------------------------------------
Center Slide
----------------------------------------
*/

.kss-slider .swiper-slide-active {

    opacity: 1;

    z-index: 5;

}


.kss-slider .swiper-slide-active .kss-image {

    transform: scale(1.16) translateY(8px);
    position: relative;
    z-index: 5;

    box-shadow:
        0 20px 45px rgba(0,0,0,.30);

}


/*
----------------------------------------
Titel
----------------------------------------
*/

.kss-title {

    opacity: 0;

    min-height: 70px;

    margin-top: 35px;

    font-size: 1.5rem;

    line-height: 1.3;

    font-weight: 700;

    text-align: center;

    transition: opacity .35s ease;

}


.kss-slider .swiper-slide-active .kss-title {

    opacity: 1;

}


/*
----------------------------------------
Pfeile
----------------------------------------
*/

.kss-button-prev,
.kss-button-next {

    position: absolute;

    top: 45%;

    transform: translateY(-50%);

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    color: #222;

    font-size: 34px;

    line-height: 1;

    cursor: pointer;

    z-index: 20;

    box-shadow:
        0 5px 18px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        background .25s ease;

}


.kss-button-prev {

    left: 15px;

}


.kss-button-next {

    right: 15px;

}


.kss-button-prev:hover,
.kss-button-next:hover {

    transform:
        translateY(-50%)
        scale(1.1);

    background:#fff;

}


/*
----------------------------------------
Tablet
----------------------------------------
*/

@media(max-width: 1200px) {


    .kss-slider {

        padding-left:40px;

        padding-right:40px;

    }


    .kss-slider .swiper-slide-active .kss-image {

        transform:scale(1.08);

    }


}


/*
----------------------------------------
Mobil
----------------------------------------
*/

@media(max-width: 767px) {


    .kss-slider {

        padding:

        25px 35px 70px;

    }


    .kss-slider .swiper-slide-active .kss-image {

        transform:scale(1);

    }


    .kss-title {

        font-size:1.25rem;

    }

.kss-button-prev svg,
.kss-button-next svg {

    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.kss-button-prev,
.kss-button-next {
    display:flex;
    align-items:center;
    justify-content:center;
}


}