#index-produkte{
	left: 0;
	width: 100vw;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.index-bilder, #produkte img{
	height: 100%;
	width: 100%;
	object-fit: cover;
    overflow: hidden;
    background-size: cover;
}

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

#index-bilder1{
	background-position: center top;
	position: absolute;
	animation: slider1 49s infinite ease-in;
}


#index-bilder2{
	background-position: center top;
	position: absolute;
	left: 100%;
	animation: slider2 49s infinite ease-in;
}

#index-bilder3{
    background-position: center top;
    position: absolute;
	left: 100%;
	animation: slider3 49s infinite ease-in;
}

#index-bilder4{
	background-position: center top;
	position: absolute;
	left: 100%;
	animation: slider4 49s infinite ease-in;
}

#index-bilder5{
	background-position: center top;
	position: absolute;
	left: 100%;
	animation: slider5 49s infinite ease-in;
}

#index-bilder6{
	background-position: center top;
	position: absolute;
	left: 100%;
	animation: slider6 49s infinite ease-in;
}



@keyframes slider1{
	 0% {transform: translate(0);z-index: 2; display: block;}
	15% {transform: translate(0);z-index: 2;}
	17% {transform: translate(-100%);z-index: 0;}
	18% {transform: translate(-100%);z-index: -1;}
	19% {transform: translate(100%);z-index: -1;}
	97% {transform: translate(100%);z-index: -1;}
	98% {transform: translate(100%);z-index: 0;}
	100% {transform: translate(0);z-index: 0;}
}

@keyframes slider2{
	 0% {transform: translate(0);z-index: 0;display: block;}
	15% {transform: translate(0);z-index: 0;}
	17% {transform: translate(-100%);z-index: 0;}
	32% {transform: translate(-100%);z-index: -1;}
	34% {transform: translate(-200%);z-index: -1;}
	35% {transform: translate(00%);z-index: -1;display:none;}
	100% {transform: translate(00%);z-index: -1;display:none;}
}

@keyframes slider3{
	 0% {transform: translate(0);z-index: 0;display: block;}
	32% {transform: translate(0); z-index: 0;}
	34% {transform: translate(-100%);z-index: 0;}
	49% {transform: translate(-100%);z-index: -1;}
	51% {transform: translate(-200%);z-index: -1;}
	52% {transform: translate(00%);z-index: -1;display:none;}
	100% {transform: translate(00%);z-index: -1;display:none;}
}

@keyframes slider4{
	 0% {transform: translate(0);z-index: 0;display: block;}
	49% {transform: translate(0);z-index: 0;}
	51% {transform: translate(-100%);z-index: 0;}
	66% {transform: translate(-100%);z-index: -1;}
	68% {transform: translate(-200%);z-index: -1;}
	69% {transform: translate(00%);z-index: -1;display:none;}
	100% {transform: translate(00%);z-index: -1; display:none;}
}

@keyframes slider5{
	 0% {transform: translate(0);z-index: 0;display: block;}
	66% {transform: translate(0);z-index: 0;}
	68% {transform: translate(-100%);z-index: 0;}
	83% {transform: translate(-100%);z-index: -1;}
	85% {transform: translate(-200%);z-index: -1;}
	86% {transform: translate(00%);z-index: -1;display:none;}
	100% {transform: translate(00%);z-index: -1;display:none;}
}

@keyframes slider6{
	 0% {transform: translate(0);z-index: -1;}
	 1% {transform: translate(0);z-index: 0;}
	83% {transform: translate(0);z-index: 0;}
	85% {transform: translate(-100%);z-index: 0;}
	98% {transform: translate(-100%);z-index: 0;}
	100% {transform: translate(-200%);}
}

/*P U N K T E
-------------
*/


#index_produkte_punkte{
	width: 16vw;
	height: 2vw;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	z-index: 4;
	position: absolute;
	left: calc(50% - 8vw);
	bottom: 100px;
	top: auto;
	
}

.index_punkte{
    width: 1vw;
    height: 1vw;
    background-color:white;
    opacity: 0.8;
    border-radius: 16vw;
}

#punkt1{
    background-color: rgba(44,62,102,1);
    animation: punktwechsel1 49s infinite;
}
#punkt2{
    background-color: white;
    animation: punktwechsel2 49s infinite;
}
#punkt3{
    background-color: vwhite;
    animation: punktwechsel3 49s infinite ease-in;
}
#punkt4{
    background-color: white;
    animation: punktwechsel4 49s infinite;
}
#punkt5{
    background-color: white;
    animation: punktwechsel5 49s infinite;
}
#punkt6{
    background-color: white;
    animation: punktwechsel6 49s infinite;
}

@keyframes punktwechsel1{
      0% {background-color: rgba(44,62,102,1);}
     15% {background-color: rgba(44,62,102,1);}
     17% {background-color: white;}
     98% {background-color: white;}
    100% {background-color: rgba(44,62,102,1);} 
}

@keyframes punktwechsel2{
      0% {background-color: white;}
     15% {background-color: white;}
     17% {background-color: rgba(44,62,102,1);}
     32% {background-color: rgba(44,62,102,1);}
     33% {background-color: white;}
    
}

@keyframes punktwechsel3{
      0% {background-color: white;}
     32% {background-color: white;}
     34% {background-color: rgba(44,62,102,1);}
     49% {background-color: rgba(44,62,102,1);}
     51% {background-color: white;}
    
}

@keyframes punktwechsel4{
      0% {background-color: white;}
     49% {background-color: white;}
     51% {background-color: rgba(44,62,102,1);}
     66% {background-color: rgba(44,62,102,1);}
     68% {background-color: white;}
    
}

@keyframes punktwechsel5{
      0% {background-color: white;}
     66% {background-color: white;}
     68% {background-color: rgba(44,62,102,1);}
     83% {background-color: rgba(44,62,102,1);}
     85% {background-color: white;}
    
}

@keyframes punktwechsel6{
      0% {background-color: white;}
     83% {background-color: white;}
     85% {background-color: rgba(44,62,102,1);}
     98% {background-color: rgba(44,62,102,1);}
    100% {background-color: white;}
    
}



.index_produkte_inhalt{
    width: 60%;
	max-width: 500px;
    position: absolute;
    left:50%;
    top:40%;
    font-size: 1.3em;
	transform: translate(-50%,0);

}

.index_produkte_ueberschrift{
	color: white;
    font-weight: bold;
    font-size: 1.6em;
    text-shadow: 0 0 5px black;
}

.index_produkte_text{
    background-color: white;
	opacity: 0.8;
	min-height: 6em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	display: none;
}

.index_mehr_erfahren{
	display: inline-block;
	margin-top: 0.2em;
	color: white;
	opacity: .8;
	text-align: right;
	text-shadow: 0 0 5px black;
}

.index_besonders{
	font-size: 1.2em;
	color: rgba(44,62,102,1);
	font-weight: bold;
	display: inline;
}

#produkt1{
    display: block;
    animation: ani_text1 25s infinite;    
}

#produkt2{
    display: block;
    animation: ani_text2 49s infinite;    
}

#produkt3{
    display: block;
    animation: ani_text3 49s infinite;    
}

#produkt4{
    display: block;
    animation: ani_text4 49s infinite;    
}

#produkt5{
    display: block;
    animation: ani_text5 49s infinite;    
}

#produkt6{
    display: block;
    animation: ani_text6 49s infinite;    
}


@keyframes ani_text1{
      0%{opacity: 0;}
      3%{opacity: 0;}
      6%{opacity: 1;}
     98%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes ani_text2{
      0%{opacity: 0;}
     20%{opacity: 0;}
     23%{opacity: 1;}
     98%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes ani_text3{
      0%{opacity: 0;}
     37%{opacity: 0;}
     40%{opacity: 1;}
     98%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes ani_text4{
      0%{opacity: 0;}
     54%{opacity: 0;}
     57%{opacity: 1;}
     98%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes ani_text5{
      0%{opacity: 0;}
     71%{opacity: 0;}
     74%{opacity: 1;}
     98%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes ani_text6{
      0%{opacity: 0;}
     88%{opacity: 0;}
     91%{opacity: 1;}
     98%{opacity: 1;}
    100%{opacity: 0;}
}

@media screen and (min-width:1000px){
	.index_punkte{
		bottom: 130px;
	}
		
	#index-produkte{
		height: 100%;
	}
}