* { padding: 0; margin: 0; }

#slider-hero-wrapper {
  display:none;
}
@media screen and (min-width:57.5em) {
  /* nur zur Deko */
#slider-hero-wrapper {
  display: flex;
	background-color: #251A13;
  position: relative;
  padding:0;
  margin:0;
  width:100%;
  height:26rem;
}
.slide01,.slide02,.slide03,.slide04 {
  height: 26rem;
}
.slideList img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.slider-textbg {
	display: flex;
	flex-flow: row;
	justify-content: flex-end;
	position: absolute;
    bottom: 4.5rem;
    left: 0;
  background: rgba(37,26,19,0.5);
  color: #fff;
  padding: 2.1em .7rem;
	width: 40%;
	height: auto;
}
.slider-text {
	width: 25rem;
	font-weight: 300;
	height: auto;
}
.slider-text ul {
	margin-left: 1.8rem;
	margin-top: .7em;
	padding-bottom: 1.4em;
}
.slider-text ul li {
	list-style: disc;	
}

.slider-text h2 {
	margin-top: 0;
	font-size: 1.2em;
	font-weight: 400;
}
.slider-text p {
	margin-top: .7em;
	margin-bottom: 1.4em;
}
.slider-text a.button {
	border-radius: 7px;
  box-shadow: -4px 4px 9px -1px rgba(37,26,19,0.3);
  color: #ffffff;
  font-size: 1.1em;
	font-weight: 500;
  background: #F06C1D;
  padding: .25em .7rem .35em;
	margin: .7em .7rem .7em 0;
  text-decoration: none;
}
.slider-text .button:hover {
	background: #B7252B;
  text-decoration: none;
	box-shadow: none;
}
/*Arrow down Definitionen*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.arrow-down-go-to {
  display: flex;
  justify-content: center;
  
  width: 100%;
  /*text-align: center;*/
  cursor: pointer;
  position: absolute;
    bottom: 2.5rem;
  transition: top .45s cubic-bezier(.44, .99, .48, 1);
	z-index: 5;
}
.arrow-down-go-to:before, .arrow-down-go-to:after {
  position: absolute;
}

/*---für Icons von Font Awesome 5, für ein anderes Icon den Code in 'Content' austauschen----*/
.iconsfontawesome:after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.arrow-down-go-to:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
	color: #fff;
  content: "\f078";
	font-size:2.1em;
  -webkit-animation: sudo .90s linear infinite alternate;
  animation: sudo .90s linear infinite alternate;
}
@keyframes sudo {
  from {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  to {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
}
/* Definition der Animationen */
/* 1. Bewegung des Sliders */
@keyframes slidesStart01 {
    0%, 20.33% {left: 0;}
    33.33%, 53.66% {left: -100%;}
    66.66%, 86.99% {left: -200%;}
    100% {left: -300%;}
}
 
@-webkit-keyframes slidesStart01 {
    0%, 20.33% {left: 0;}
    33.33%, 53.66% {left: -100%;}
    66.66%, 86.99% {left: -200%;}
    100% {left: -300%;}
}
 
@keyframes slidesStart101 {
    0%, 20.33% {left: 0;}
    33.33%, 53.66% {left: -100%;}
    66.66%, 86.99% {left: -200%;}
    100% {left: -300%;}
}
 
@-webkit-keyframes slidesStart101 {
    0%, 20.33% {left: 0;}
    33.33%, 53.66% {left: -100%;}
    66.66%, 86.99% {left: -200%;}
    100% {left: -300%;}
}
 
@keyframes slidesStart02 {
    87% {left: 0;}
    0%, 20.33%, 100% {left: -100%;}
    33.33%, 53.66% {left: -200%;}
    66.66%, 86.99% {left: -300%;}
}
 
@-webkit-keyframes slidesStart02 {
    87% {left: 0;}
    0%, 20.33%, 100% {left: -100%;}
    33.33%, 53.66% {left: -200%;}
    66.66%, 86.99% {left: -300%;}
}
 
@keyframes slidesStart102 {
    87% {left: 0;}
    0%, 20.33%, 100% {left: -100%;}
    33.33%, 53.66% {left: -200%;}
    66.66%, 86.99% {left: -300%;}
}
 
@-webkit-keyframes slidesStart102 {
    87% {left: 0;}
    0%, 20.33%, 100% {left: -100%;}
    33.33%, 53.66% {left: -200%;}
    66.66%, 86.99% {left: -300%;}
}
 
@keyframes slidesStart03 {
    53.67% {left: 0;}
    0%, 20.33%, 100% {left: -200%;}
    33.33%, 53.66% {left: -300%;}
    66.66%, 86.99% {left: -100%;}
}
 
@-webkit-keyframes slidesStart03 {
    53.67% {left: 0;}
    0%, 20.33%, 100% {left: -200%;}
    33.33%, 53.66% {left: -300%;}
    66.66%, 86.99% {left: -100%;}
}
 
@keyframes slidesStart103 {
    53.67% {left: 0;}
    0%, 20.33%, 100% {left: -200%;}
    33.33%, 53.66% {left: -300%;}
    66.66%, 86.99% {left: -100%;}
}
 
@-webkit-keyframes slidesStart103 {
    53.67% {left: 0;}
    0%, 20.33%, 100% {left: -200%;}
    33.33%, 53.66% {left: -300%;}
    66.66%, 86.99% {left: -100%;}
}
 
/* 2. Wechsel des ersten Slides ans Ende und zurück */
@keyframes slide01ToEndStart01 {
    86.98% {left: 0;}
    86.99%, 100% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart01 {
    86.98% {left: 0;}
    86.99%, 100% {left: 100%;}
}
 
@keyframes slide01ToEndStart101 {
    86.98% {left: 0;}
    86.99%, 100% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart101 {
    86.98% {left: 0;}
    86.99%, 100% {left: 100%;}
}
 
@keyframes slide01ToEndStart02 {
    /*66.65%, 87% {left: 0;}
    66.66%, 86.99% {left: 100%;}*/
    33.32%, 87% {left: 0;}
    33.33%, 86.99% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart02 {
    33.32%, 87% {left: 0;}
    33.33%, 86.99% {left: 100%;}
}
 
@keyframes slide01ToEndStart102 {
    33.32%, 87% {left: 0;}
    33.33%, 86.99% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart102 {
    33.32%, 87% {left: 0;}
    33.33%, 86.99% {left: 100%;}
}
 
@keyframes slide01ToEndStart03 {
    53.67% {left: 0;}
    0%, 53.66% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart03 {
    53.67% {left: 0;}
    0%, 53.66% {left: 100%;}
}
 
@keyframes slide01ToEndStart103 {
    53.67% {left: 0;}
    0%, 53.66% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart103 {
    53.67% {left: 0;}
    0%, 53.66% {left: 100%;}
}
 
/* 3. Animationen für den Farbwechsel in den Controls */
@keyframes slideControl01 {
    33.32% {background: #fff;}
    33.33%, 100% {background: none;}
}
 
@-webkit-keyframes slideControl01 {
    33.32% {background: #fff;}
    33.33%, 100% {background: none;}
}
 
@keyframes slideControl101 {
    33.32% {background: #fff;}
    33.33%, 100% {background: none;}
}
 
@-webkit-keyframes slideControl101 {
    33.32% {background: #fff;}
    33.33%, 100% {background: none;}
}
 
@keyframes slideControl02 {
    33.32%, 66.66% {background: none;}
    33.33%, 66.65% {background: #fff;}
}
 
@-webkit-keyframes slideControl02 {
    33.32%, 66.66% {background: none;}
    33.33%, 66.65% {background: #fff;}
}
 
@keyframes slideControl102 {
    33.32%, 66.66% {background: none;}
    33.33%, 66.65% {background: #fff;}
}
 
@-webkit-keyframes slideControl102 {
    33.32%, 66.66% {background: none;}
    33.33%, 66.65% {background: #fff;}
}
 
@keyframes slideControl03 {
    66.65% {background: none;}
    66.66%, 100% {background: #fff;}
}
 
@-webkit-keyframes slideControl03 {
    66.65% {background: none;}
    66.66%, 100% {background: #fff;}
}
 
@keyframes slideControl103 {
    66.65% {background: none;}
    66.66%, 100% {background: #fff;}
}
 
@-webkit-keyframes slideControl103 {
    66.65% {background: none;}
    66.66%, 100% {background: #fff;}
}
 
/* Basisfunktionalität des Sliders */
.slider-hero {
    overflow: hidden;
}
 
.slider-hero input {
    position: absolute;
    left: -10000px;
    top: 0;
}
 
.slideList {
    width: 300%; /* Anzahl der Slides mal 100 */
    position: relative; /* über die relative Positionierung wird der Slider durchs Sichtfenster geschoben */
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s; /* für den fließenden Schub */
    margin: 0;
    padding: 0;
}
 
.slideList:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}
 
.slide {
    list-style: none;
    width: 33.33%; /* Breite gleich 100 / Anzahl Slides */
    float: left;
    position: relative;
    left: 0;
    -webkit-transition: left 0s .5s;
    -moz-transition: left 0s .5s;
    -o-transition: left 0s .5s;
    transition: left 0s .5s; /*bei Klick auf ein Control werden alle Slides wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slides-Verschiebung beginnt, kommt ein delay hinzu*/
}
 
#slide03:checked ~ .slideList .slide,
#slide103:checked ~ .slideList .slide {
    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s; /* damit er nicht zu früh zurückrutscht */
}

/* Zuweisung der Keyframe-Animationen */
.slideList,
.slide,
.slideControl label {
    -webkit-animation: 20s 2s infinite;
    animation: 20s 2s infinite; /* allgemeingültige Werte für die Keyframe-Animation */
}
 
/* Positionierung und Aufruf der passenden Animation in Abhängigkeit des Status der Radiobuttons */
#slide01:checked ~ .slideList {
    -webkit-animation-name: slidesStart01;
    animation-name: slidesStart01;
    left: 0;
}
 
#slide02:checked ~ .slideList {
    -webkit-animation-name: slidesStart02;
    animation-name: slidesStart02;
    left: -100%;
}
 
#slide03:checked ~ .slideList {
    -webkit-animation-name: slidesStart03;
    animation-name: slidesStart03;
    left: -200%;
}
 
/* Damit der Wechsel von 01 zu 101, 02 zu 102 usw. klappt, muss jeweils eine andere Animation aufgerufen werden*/
#slide101:checked ~ .slideList {
    -webkit-animation-name: slidesStart101;
    animation-name: slidesStart101;
    left: 0;
}
 
#slide102:checked ~ .slideList {
    -webkit-animation-name: slidesStart102;
    animation-name: slidesStart102;
    left: -100%;
}
 
#slide103:checked ~ .slideList {
    -webkit-animation-name: slidesStart103;
    animation-name: slidesStart103;
    left: -200%;
}
 
/* Der erste Slide wird jeweils zur rechten Zeit an den Anfang oder das Ende gestellt */
#slide01:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart01;
    animation-name: slide01ToEndStart01;
}
 
#slide02:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart02;
    animation-name: slide01ToEndStart02;
}
 
#slide03:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart03;
    animation-name: slide01ToEndStart03;
}
 
/* Separate Animations-Namen für die zweite Steuerung */
#slide101:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart101;
    animation-name: slide01ToEndStart101;
}
 
#slide102:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart102;
    animation-name: slide01ToEndStart102;
}
 
#slide103:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart103;
    animation-name: slide01ToEndStart103;
}

/* Steuerung durch den Benutzer */
.slideControl {
    width: 80px;
    position: absolute;
    bottom:3rem;
    left: 50%;
    margin-left: -30px;
}
 
.control01:checked ~ .slideControl01,
.control02:checked ~ .slideControl02 {
    left: -5000px; /* Blendet die nicht benötigten Labels aus */
}
 
.slideControl li {
    float: left;
    margin: 0 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    text-indent: -10000px;
    border: 1px solid rgba(37,26,19,0.1);
    box-shadow: 0 0 5px 3px rgba(37,26,19,0.1);
    list-style: none;
}
 
.slideControl label {
    display: block;
    cursor: pointer;
    background: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #fff;
}
 
.slideControl label:hover {
    background: #F06C1D!important;
}
 
#slide01:checked ~ .slideControl label[for="slide101"],
#slide02:checked ~ .slideControl label[for="slide102"],
#slide03:checked ~ .slideControl label[for="slide103"] {
    -webkit-animation-name: slideControl01;
    animation-name: slideControl01;
    background: #fff;
}
 
#slide101:checked ~ .slideControl label[for="slide01"],
#slide102:checked ~ .slideControl label[for="slide02"],
#slide103:checked ~ .slideControl label[for="slide03"]  {
    -webkit-animation-name: slideControl101;
    animation-name: slideControl101;
    background: #fff;
}
 
#slide01:checked ~ .slideControl label[for="slide102"],
#slide02:checked ~ .slideControl label[for="slide103"],
#slide03:checked ~ .slideControl label[for="slide101"] {
    -webkit-animation-name: slideControl02;
    animation-name: slideControl02;
}
 
#slide101:checked ~ .slideControl label[for="slide02"],
#slide102:checked ~ .slideControl label[for="slide03"],
#slide103:checked ~ .slideControl label[for="slide01"]  {
    -webkit-animation-name: slideControl102;
    animation-name: slideControl102;
}
 
#slide01:checked ~ .slideControl label[for="slide103"],
#slide02:checked ~ .slideControl label[for="slide101"],
#slide03:checked ~ .slideControl label[for="slide102"]  {
    -webkit-animation-name: slideControl03;
    animation-name: slideControl03;
}
 
#slide101:checked ~ .slideControl label[for="slide03"],
#slide102:checked ~ .slideControl label[for="slide01"],
#slide103:checked ~ .slideControl label[for="slide02"]  {
    -webkit-animation-name: slideControl103;
    animation-name: slideControl103;
}

}
@media screen and (min-width:80em) {
  #slider-hero-wrapper {
    height: 35rem;
  }
  .slide01,.slide02,.slide03 {
    height: 35rem;
  }
}
@media screen and (min-width:100em) {
  #slider-hero-wrapper {
    height: 47rem;
  }
  .slide01,.slide02,.slide03 {
    height: 47rem;
  }
}
@media screen and (min-width:120em) {
  #slider-hero-wrapper {
    height: 50rem;
  }
  .slide01,.slide02,.slide03 {
    height: 50rem;
  }
}