/* Slider — mehrere Bilder sichtbar, Nachbar angeschnitten, einheitlicher Cover-Ausschnitt */

:root {
    --slider-height: 360px;
    --slider-slide-width: 72vh;
}

#slidersektion {
    width: 100%;
    height: 83px;
    position: relative;
}

#slider {
    overflow: hidden;
    width: 100%;
    height: var(--slider-height);
    margin-bottom: 4em;
}

#slider figure {
    position: relative;
    width: 312.5%;
    height: 100%;
    margin: 0;
    left: 0;
    animation: 150s slider infinite;
}

#slider a {
    display: block;
    float: left;
    height: 100%;
}

.item1,
.item2,
.item3,
.item4,
.item5 {
    width: var(--slider-slide-width);
    height: 100%;
    float: left;
    margin: 0 1em 0 2em;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.item1 {
    background-color: #fff;
    background-image: url(../image/bread-2178874_1920.jpg);
    background-position: center 12%;
}

.item2 {
    background-color: #F19496;
    background-image: url(../image/coffee-2390136_1920.jpg);
    background-position: center calc(35% - 30px);
}

.item3 {
    background-color: #D9FD86;
    background-image: url(../image/gift-1196292_1920.jpg);
    background-position: center 20%;
}

.item4 {
    background-color: hsla(283, 48%, 68%, 1);
    background-image: url(../image/junge.jpg);
    background-position: center 41%;
}

.item5 {
    background-color: hsla(190, 65%, 42%, 1);
    background-image: url(../image/placeholder2-alt.png);
    background-position: center center;
}

@keyframes slider {
    0% { left: 0; }
    8% { left: 0; }
    12% { left: -20%; }
    16% { left: -20%; }
    20% { left: -40%; }
    24% { left: -40%; }
    28% { left: -60%; }
    32% { left: -60%; }
    36% { left: -80%; }
    40% { left: -80%; }
    44% { left: -100%; }
    48% { left: -100%; }
    52% { left: -80%; }
    56% { left: -80%; }
    60% { left: -60%; }
    64% { left: -60%; }
    68% { left: -40%; }
    72% { left: -40%; }
    76% { left: -20%; }
    80% { left: -20%; }
    84% { left: 0%; }
    88% { left: 0%; }
    100% { left: 0%; }
}

#buttonverlink {
    position: relative;
    z-index: 50;
    float: right;
    padding-right: 9%;
    bottom: calc(var(--slider-height) + 4px);
}

.buttonsortiert {
    margin-bottom: 10px;
}

.button2 {
    height: 28px;
    background-color: hsla(0, 0%, 100%, 0.84);
    padding: 0.85em 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    color: #D4272A;
    margin-bottom: 8px;
    font-size: 12px;
    width: 99%;
    min-width: 170px;
}

#sliderausrichten {
    position: relative;
    z-index: -10;
    width: 100%;
    top: 6em;
    float: left;
}

@media (max-width: 900px) {
    :root {
        --slider-height: 300px;
        --slider-slide-width: 62vh;
    }
}