/* body font aus Kevin Powell Video vom 20.3.19 calc() lets you do.some real CSS magic */
body {
  /* font-family: basic-sans, sans-serif; */
  min-height: 100vh;
  font-size: 1.125em;
  line-height: 1.6;
  color: #333;
} 

.carousel {
  position: relative;
  height: 460px;
  width: 80%;
  margin: 0 auto;
}

.carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__track-container {
  background: lightgreen;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.carousel__track {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  height: 100%;
  transition: transform 250ms ease-in;
}

.carousel__slide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.carousel__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  z-index: 3;
}

.carousel__button--left {
  left: -25px;
}

.carousel__button--right {
  right: -25px;
}

.carousel__button img {
  width: 32px;
}

.carousel__button--leftArrow,
.carousel__button--rightArrow {
  fill: none;
  stroke: green;
  stroke-width: 3;
  stroke-linecap: round;
  /* stroke-linejoin: round;   Ecken runden */
  transition: 0.4s;
}

.carousel__button--leftArrow:hover,
.carousel__button--rightArrow:hover {
  stroke-width: 5;
}

.carousel__button--leftArrow:hover path {
  /* d: path("M16 8 L8 16 L16 24"); */
}

#carousel__text-container {
  display: flex;
  justify-content: space-between;
  background: rgba(0,0,0,.85);
}

#carousel__imgText {
  padding-left: 5px;
  color: white;
  overflow: hidden;
}

#carousel__imgNumbers {
  padding-right: 5px;
  color: yellow;
  overflow: hidden;
}
  
.carousel__nav {
  /* background: pink; */
  display: flex;
  justify-content: center;
  padding: 15px 0;
  overflow: hidden;
}

.carousel__indicator {
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  width: 15px;
  height: 15px;
  margin: 0 15px;
  padding: 0;
  cursor: pointer;
}

.carousel__indicator.current-slide { background: rgba(0,0,0,.75); }

#carousel__button--slideshow {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: red;
  color: white;
  opacity: 0.8;
  cursor: pointer;
}

@media screen and (max-width: 1040px) {
  .carousel { height: 350px;width: 100%; } 
  .carousel__button--left { left: 0px; }
  .carousel__button--right { right: 0px; }
  #carousel__imgText, #carousel__imgNumbers  { font-size: 14px; }
}