<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.sliderElements,
.sliderElements figure,
.sliderControls {
	margin: 0;
	margin-bottom:5px;
}

.sliderElements:after {
	content: ".";
	display: block;
	height: .1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
}

.cssSlider {
	overflow-x: hidden;
	width:450px;
	border: 0px solid #cdcdcd; 
	padding-left:0px;
	
}

.sliderElements {
	list-style: none;
	position: relative;
	left: 0;
	width: 1000%; /*vorher 500% Stiller 21.08.2017  */
	margin-bottom: .8em;
	-webkit-transition: left .6s ease-in-out;
	-moz-transition: left .6s ease-in-out;
	-o-transition: left .6s ease-in-out;
	transition: left .6s ease-in-out;
}

.sliderElements &gt; li {
	float: left;
	width: 10%;  /* vorher 20% Stiller 21.08.2017  */
	position: relative;
	}

#slide02:checked ~ .sliderElements {
	left: -100%;
}

#slide03:checked ~ .sliderElements {
	left: -200%;
}

#slide04:checked ~ .sliderElements {
	left: -300%;
}

#slide05:checked ~ .sliderElements {
	left: -400%;
}

#slide06:checked ~ .sliderElements {
	left: -500%;
}

#slide07:checked ~ .sliderElements {
	left: -600%;
}

#slide08:checked ~ .sliderElements {
	left: -700%;
}

#slide09:checked ~ .sliderElements {
	left: -800%;
}

/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
	display: block;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	padding: .4em;
	background: rgba(108,108,108,.8);
	width:100%;
}

/* inputs aus dem Blickfeld schieben */
.cssSlider input {
	position: absolute;
	left: -99999px;
}

/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
	text-align: center;
}

/* Controls nebeneinander bringen */
.sliderControls li {
	display: inline-block;
}

/* Controls auf einheitliche MaÃŸe bringen und die Ecken abrunden */
.sliderControls label {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	display: block;
	cursor: pointer;
	background: #709aff;
	color: #fff;
}

/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"],
#slide05:checked ~ .sliderControls label[for="slide05"],
#slide06:checked ~ .sliderControls label[for="slide06"],
#slide07:checked ~ .sliderControls label[for="slide07"],
#slide08:checked ~ .sliderControls label[for="slide08"],
#slide09:checked ~ .sliderControls label[for="slide09"] {
	background: #ddd;
	color: #999;
}</pre></body></html>