.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;
}

/*
StörerKlassen
*/

.kss-slider .kss-slide {
    position: relative;
}

.kss-slider .kss-status {

    position: absolute;
    top: 50%;
    left: 50%;

    width: 150%;

    padding: 12px 0;

    background: #d00000;
    color: #fff;

    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    transform: translate(-50%, -50%) rotate(-45deg);

    z-index: 10;

    pointer-events: none;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.kss-slider .kss-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.kss-slider .kss-media .kss-image-ausverkauft {
    filter: grayscale(100%);
}
/*
----------------------------------------
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: 45px;
    font-size: 1.7rem;
    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;
}


}