:root {
  --farbeTürkis1: rgb(31, 143, 168);
  /* ! für weitere Bilder hier hochzählen 
       ! und auch weiter unten    
    */
  --anzahlBilder: 8;
  --breiteElement: calc(100% / var(--anzahlBilder));
}

.sliderElements,
.sliderElements figure,
.sliderControls {
  margin: 0;
}

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

.cssSlider {
  overflow-x: hidden;
  /* width: 70%; */
}

.sliderElements {
  list-style: none;
  position: relative;
  left: 0;
  width: calc(
    100% * var(--anzahlBilder)
  ); /* Summe der Einzelbreiten der Slides */
  margin-bottom: 0.8em;
  padding: 0;
  -webkit-transition: left 0.8s ease-in-out;
  -moz-transition: left 0.8s ease-in-out;
  -o-transition: left 0.8s ease-in-out;
  transition: left 0.8s ease-in-out;
}

.sliderElements > li {
  float: left;
  width: var(--breiteElement); /* 100 durch Anzahl der Slides */
  position: relative;
}

/* 
! Hier anpassen für weitere Slides 

*/

#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%;
}

/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
  display: block;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 1em;
  padding: 0.4em;
  background: rgba(0, 0, 0, 0.5);
}

/* Bilder responsive */
.sliderElements img {
  /* width: 100%; */
  height: auto;
  /* height: 400px; */
  width: 100%;
}

/* inputs aus dem Blickfeld schieben */
.cssSlider input {
  position: absolute;
  left: -99999px; /* TODO: ich weiß nicht wofür diese Einstellung ist */
}

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

/* 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: var(--farbeTürkis1);
  color: var(--farbeTürkis1);
}

/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
/*
    ! Hier anpassen für weitere Slides 
 */
.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"] {
  background: #ddd;
  color: #ddd;
}