html, body {
  margin: 0; padding: 0;
}

.slider-wrap {                                  /*------ Aus dem Bereich /css/main.css class "header" hierhin kopiert ------*/
z-index: -1;                                    /*------ ein Layer nach Hinten damit das Logo sichtbar ist ------*/
max-width: 1920px;
max-height:500px;
position: relative;
padding-bottom: calc(40%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 10px solid #4166aa;            /*<--- Hier Farbe für die Trennlinie ---*/
}

.single-slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
animation: slider-animation;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
background-size: cover;
}

#slide-1 {background-color: white; background-image: url(../img/sliderimage01.jpg);}                             /*<--- Hier Farbe für den Übergang von einem Bild zum anderen ---*/
#slide-2 {background-color: white; animation-delay: 5s; background-image: url(../img/sliderimage02.jpg);}
#slide-3 {background-color: white; animation-delay: 10s; background-image: url(../img/sliderimage03.jpg);}
#slide-4 {background-color: white; animation-delay: 15s; background-image: url(../img/sliderimage04.jpg);}

@keyframes slider-animation {

0% {
    opacity: 0;
}
12% {
    opacity: 1;
}
24% {
    opacity: 1;
}
48% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}