/* Slider für 5 Bilder mit 480 x 320 Pixel */

/* Allgemeiner Teil für beliebig viele Bilder */
.bilder_slider { width: 480px; height: 320px; overflow: hidden; }

/* Bildbeschriftung */
figcaption {
    position: absolute;
    top: 10px;
    left: 0;
    background-color: #84cee4;

    font-family: sans-serif;
    font-size: 1.2em;
    padding: 0.2em 1em;

    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;    

    color: white;
    text-shadow: 2px 2px 1px black;
    text-shadow: 1px 1px 1px black;    
}

/* **************************** */
/* Spezieller Code für 5 Bilder */

/* Button zum Anhalten - Position mit 665 Pixeln von links auf Navigationsmenü+Bildbreite angepasst */
input#slidestatus_5 { display: none; }
label[for="slidestatus_5"] { color: olive; font-size: small; font-weight: bold; background-color: #d2d2d2; position: absolute; left: 665px; float: right; padding: 2px 5px; border: solid 2px #787878; border-top-right-radius: .5em; border-top-left-radius: .5em; border-bottom-right-radius: .5em; border-bottom-left-radius: .5em; }
#slidestatus_5 ~ label[for="slidestatus_5"]::after {
   content: "||";
}
#slidestatus_5:checked ~ label[for="slidestatus_5"]::after {
   content: ">";
}

.bilder_slider_alle_5 { 
	background-color: olive;
	width: 2880px; 
	height: 320px; 
	position: relative;    
    animation: 20s slideranimation_5 infinite;
}

@keyframes slideranimation_5 {
    0% {left: 0;}
    15% {left: 0;}
    20% {left: -480px;}
    35% {left: -480px;}
    40% {left: -960px;}
    55% {left: -960px;}
    60% {left: -1440px;}
    75% {left: -1440px;}
    80% {left: -1920px;}
    95% {left: -1920px;} 
    100% {left: -2400px;}
}
.bilder_slider_alle_5 figure { position: relative; float: left; margin: 0; padding: 0; }
.bilder_slider_alle_5 figure img { width: 480px; height: 320px; object-fit: cover; }
.bilder_slider:hover .bilder_slider_alle_5 {animation-play-state: paused;}
#slidestatus_5:checked ~ .bilder_slider .bilder_slider_alle_5 {
   animation-play-state: paused;
}
/* **************************** */
/* Spezieller Code für 4 Bilder */

/* Button zum Anhalten - Position mit 665 Pixeln von links auf Navigationsmenü+Bildbreite angepasst */
input#slidestatus_4 { display: none; }
label[for="slidestatus_4"] { color: olive; font-size: small; font-weight: bold; background-color: #d2d2d2; position: absolute; left: 665px; float: right; padding: 2px 5px; border: solid 2px #787878; border-top-right-radius: .5em; border-top-left-radius: .5em; border-bottom-right-radius: .5em; border-bottom-left-radius: .5em; }
#slidestatus_4 ~ label[for="slidestatus_4"]::after {
   content: "||";
}
#slidestatus_4:checked ~ label[for="slidestatus_4"]::after {
   content: ">";
}

.bilder_slider_alle_4 { 
	background-color: olive;
	width: 2400px; 
	height: 320px; 
	position: relative;    
    animation: 16s slideranimation_4 infinite;
}

@keyframes slideranimation_4 {
    0% {left: 0;}
    20% {left: 0;}
    25% {left: -480px;}
    45% {left: -480px;}
    50% {left: -960px;}
    70% {left: -960px;}
    75% {left: -1440px;}
    95% {left: -1440px;}
    100% {left: -1920px;}
}
.bilder_slider_alle_4 figure { position: relative; float: left; margin: 0; padding: 0; }
.bilder_slider_alle_4 figure img { width: 480px; height: 320px; object-fit: cover; }
.bilder_slider:hover .bilder_slider_alle_4 {animation-play-state: paused;}
#slidestatus_4:checked ~ .bilder_slider .bilder_slider_alle_4 {
   animation-play-state: paused;
}
/* **************************** */
/* Spezieller Code für 3 Bilder */

/* Button zum Anhalten - Position mit 665 Pixeln von links auf Navigationsmenü+Bildbreite angepasst */
input#slidestatus_3 { display: none; }
label[for="slidestatus_3"] { color: olive; font-size: small; font-weight: bold; background-color: #d2d2d2; position: absolute; left: 665px; float: right; padding: 2px 5px; border: solid 2px #787878; border-top-right-radius: .5em; border-top-left-radius: .5em; border-bottom-right-radius: .5em; border-bottom-left-radius: .5em; }
#slidestatus_3 ~ label[for="slidestatus_3"]::after {
   content: "||";
}
#slidestatus_3:checked ~ label[for="slidestatus_3"]::after {
   content: ">";
}

.bilder_slider_alle_3 { 
	background-color: olive;
	width: 1920px; 
	height: 320px; 
	position: relative;    
    animation: 12s slideranimation_3 infinite;
}

@keyframes slideranimation_3 {
    0% {left: 0;}
    28% {left: 0;}
    33% {left: -480px;}
    61% {left: -480px;}
    66% {left: -960px;}
    94% {left: -960px;}
    100% {left: -1440px;}
}
.bilder_slider_alle_3 figure { position: relative; float: left; margin: 0; padding: 0; }
.bilder_slider_alle_3 figure img { width: 480px; height: 320px; object-fit: cover; }
.bilder_slider:hover .bilder_slider_alle_3 {animation-play-state: paused;}
#slidestatus_3:checked ~ .bilder_slider .bilder_slider_alle_3 {
   animation-play-state: paused;
}