@-moz-keyframes Schieben {
 0% {
   margin-left:0%;
 }
 15.7% {
   margin-left:0%;
 }
 16.7% {margin-left:-100%;
 }
 32.4% {margin-left:-100%;
 }
 33.4% {
   margin-left:-200%;
 }
 49.1% {
 margin-left:-200%;
 }
 50.1% {
 	margin-left:-300%;
 }
 65.8% {
 	margin-left:-300%;
 }
 66.8% {
   margin-left:-400%;
 }
 82.5% {
   margin-left:-400%;
 }
 83.5% {
   margin-left:-500%;
 }
 99%  {
   margin-left:-500%;
 }
 100% {
   margin-left:0;
 }
}

/*@-webkit-keyframes Schieben {
 0% {
   margin-left:0%;
 }
 15.7% {
   margin-left:0%;
 }
 16.7% {margin-left:-100%;
 }
 32.4% {margin-left:-100%;
 }
 33.4% {
   margin-left:-200%;
 }
 49.1% {
 margin-left:-200%;
 }
 50.1% {
 	margin-left:-300%;
 }
 65.8% {
 	margin-left:-300%;
 }
 66.8% {
   margin-left:-400%;
 }
 82.5% {
   margin-left:-400%;
 }
 83.5% {
   margin-left:-500%;
 }
 99%  {
   margin-left:-500%;
 }
 100% {
   margin-left:0;
 }
}*/

@-moz-keyframes Stapeln {
0% {
	opacity:1;
}
24.1% {					/* ursprünglich 25, jetzt probiere ich es mit - 0,9, also 24,1 %, damit verläuft der Wechsel knackiger*/
	opacity:1;			/*entspricht dem Gesamtzeitraum eines Durchlaufs durch die Anzahl der Bilder, 100% durch x-Anzahl Bilder*/
}
30.4% {					/*Übergang immer 6.3%*/
	opacity:0;
}
94.7% {					/* eigentlich 93.7%, so wird das Bilder aber etwas zügiger eingeblendet */
	opacity:0;
}
100% {
	opacity:1;
}
}


@-webkit-keyframes Stapeln {
0% {
	opacity:1;
}
24.1% {					/* ursprünglich 25, jetzt probiere ich es mit - 0,9, also 24,1 %, damit verläuft der Wechsel knackiger*/
	opacity:1;			/*entspricht dem Gesamtzeitraum eines Durchlaufs durch die Anzahl der Bilder, 100% durch x-Anzahl Bilder*/
}
30.4% {					/*Übergang immer 6.3%*/
	opacity:0;
}
94.7% {					/* eigentlich 93.7%, so wird das Bilder aber etwas zügiger eingeblendet */
	opacity:0;
}
100% {
	opacity:1;
}
}



@-moz-keyframes Faerben {
0% {
	background: #bbb;
}
3% {
	background: #333;
	border-color: #333 !important;
}
24.1% {									/*entspricht dem Gesamtzeitraum eines Durchlaufs durch die Anzahl der Buttons, 100% durch x-Anzahl Buttons, muss gleich zum Wert bei den Bildern sein*/
	background: #333;					/* ursprünglich 25, jetzt probiere ich es mit - 0,9, also 24,1 %, damit verläuft der Wechsel knackiger*/
	border-color: #333 !important;			/*Übergang sichtbar/ nicht sichbar bzw. #bbb und #333 wie immer 6,3%*/
}
30.4% {
	background: #bbb;
}
100% {
	background: #bbb;
}
}

@-webkit-keyframes Faerben {
0% {
	background: #bbb;
}
3% {
	background: #333;
	border-color: #333 !important;
}
24.1% {									/*entspricht dem Gesamtzeitraum eines Durchlaufs durch die Anzahl der Buttons, 100% durch x-Anzahl Buttons, muss gleich zum Wert bei den Bildern sein*/
	background: #333;					/* ursprünglich 25, jetzt probiere ich es mit - 0,9, also 24,1 %, damit verläuft der Wechsel knackiger*/
	border-color: #333 !important;			/*Übergang sichtbar/ nicht sichbar bzw. #bbb und #333 wie immer 6,3%*/
}
30.4% {
	background: #bbb;
}
100% {
	background: #bbb;
}
}








input {
float: left;
display: none;
}



/*#knopf1:checked ~ #sliderbox .first{background-position: 0 0, 1920px 0, 3840px 0, 5760px 0;}*/
#knopf1:checked ~ #sliderbox .first{background-position: 0 0, -10100% 0, -20200% 0, -30300% 0;} /*die Bilder werden je nach Viewport-Breite nebeneinander positioniert :-)*/
#knopf1:checked ~ #sliderbox .first .box1{opacity: 1; transition: margin-top 0.5s ease-in-out, opacity 1.5s ease-in-out 1.8s;}
/*#knopf1:checked ~ #sliderbox .first .box2{transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}
#knopf1:checked ~ #sliderbox .first .box3{transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}
#knopf1:checked ~ #sliderbox .first .box4{transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}*/





 
	#knopf1:checked ~ #bilderstapel section:nth-of-type(1) {-moz-animation-name: Stapeln; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}
	#knopf1:checked ~ #bilderstapel section:nth-of-type(2) {-moz-animation-name: Stapeln; -moz-animation-delay: 20s; -moz-animation-play-state: paused;} /* Stopt Stapeln und gibt Verzögerung an, wenn einer der Buttons gedrückt */
	#knopf1:checked ~ #bilderstapel section:nth-of-type(3) {-moz-animation-name: Stapeln; -moz-animation-delay: 10s; -moz-animation-play-state: paused;} /*	wird, um auf Info-Text zuzugreifen, höchste Verzögerung beginnt */
	#knopf1:checked ~ #bilderstapel section:nth-of-type(4) {-moz-animation-name: Stapeln; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}

		#knopf1:checked ~ #activeknopf label:nth-child(1) {-moz-animation-name: Faerben; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}  /* Stopt Färben und gibt Verzögerung an, wenn einer der Buttons gedrückt */
		#knopf1:checked ~ #activeknopf label:nth-child(2) {-moz-animation-name: Faerben; -moz-animation-delay: 10s; -moz-animation-play-state: paused;}	/*	wird, um auf Info-Text zuzugreifen, niedrigste Verzögerung beginnt */	
		#knopf1:checked ~ #activeknopf label:nth-child(3) {-moz-animation-name: Faerben; -moz-animation-delay: 20s; -moz-animation-play-state: paused;}
		#knopf1:checked ~ #activeknopf label:nth-child(4) {-moz-animation-name: Faerben; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}



/*#knopf1:checked ~ #sliderbox {display: none;} 
	#knopf1:checked ~ #bilderstapel section:nth-of-type(1) {opacity: 0; z-index: 0;}
	#knopf1:checked ~ #bilderstapel section:nth-of-type(2) {opacity: 0; z-index: 0;}
	#knopf1:checked ~ #bilderstapel section:nth-of-type(3) {opacity: 0; z-index: 0;}
	#knopf1:checked ~ #bilderstapel section:nth-of-type(4) {opacity: 1; z-index: 100;}
	#knopf1:checked ~ #bilderstapel section:nth-of-type(4) .box {z-index: 200; opacity: 1; 
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
	}*/
	
@media only screen
and (min-width: 70em) {

#knopf1:checked ~ #bilderstapel {height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf1:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {height: 0;}
#knopf1:checked ~ #bilderstapel {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf1:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf1:checked ~ #sliderbox .first .box1{margin-top: 47vh;}
	
} /* Ende @media only screen and (min-width: 70em)  */


@media only screen
and (max-width: 69.9em) {

#knopf1:checked ~ #bilderstapel {height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf1:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {height: 0;}
#knopf1:checked ~ #bilderstapel {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf1:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf1:checked ~ #sliderbox .first .box1{margin-top: 25vh;}
	
} /* Ende @media only screen and (min-width: 50em)  */


@media only screen
and (max-width: 49.9em) {

#knopf1:checked ~ #bilderstapel {height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf1:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {height: 0;}
#knopf1:checked ~ #bilderstapel {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf1:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf1:checked ~ #sliderbox .first .box1{margin-top: 15vh;}
	
} /* Ende @media only screen and (min-width: 30em)  */


@media only screen
and (max-width: 29.9em) {

#knopf1:checked ~ #bilderstapel {height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf1:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {height: 0;}
#knopf1:checked ~ #bilderstapel {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf1:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf1:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf1:checked ~ #sliderbox .first .box1{margin-top: 50%; transition: margin-top 0.5s ease-in-out, opacity 0.2s ease-in-out 0.2s;}
	
} /* Ende @media only screen and (max-width: 29.9em)  */




/*#knopf2:checked ~ #sliderbox .first{background-position: -1920px 0, 0px 0, 1920px 0, 3840px 0;} /* Verschieben der Hintergrundbilder */
#knopf2:checked ~ #sliderbox .first{background-position: 10100% 0, 0 0, -10100% 0, -20200% 0;} /*die Bilder werden je nach Viewport-Breite nebeneinander positioniert :-)*/
/*#knopf2:checked ~ #sliderbox .first .box1{margin-left: -1920px; transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out}	*/	
#knopf2:checked ~ #sliderbox .first .box2{opacity: 1; transition: margin-top 0.5s ease-in-out, opacity 1.5s ease-in-out 1.5s;}	
/*#knopf2:checked ~ #sliderbox .first .box3{transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}
#knopf2:checked ~ #sliderbox .first .box4{transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}*/



	#knopf2:checked ~ #bilderstapel section:nth-of-type(1) {-moz-animation-name: Stapeln; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(2) {-moz-animation-name: Stapeln; -moz-animation-delay: 20s; -moz-animation-play-state: paused;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(3) {-moz-animation-name: Stapeln; -moz-animation-delay: 10s; -moz-animation-play-state: paused;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(4) {-moz-animation-name: Stapeln; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}
	
		#knopf2:checked ~ #activeknopf label:nth-child(1) {-moz-animation-name: Faerben; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}
		#knopf2:checked ~ #activeknopf label:nth-child(2) {-moz-animation-name: Faerben; -moz-animation-delay: 10s; -moz-animation-play-state: paused;}
		#knopf2:checked ~ #activeknopf label:nth-child(3) {-moz-animation-name: Faerben; -moz-animation-delay: 20s; -moz-animation-play-state: paused;}
		#knopf2:checked ~ #activeknopf label:nth-child(4) {-moz-animation-name: Faerben; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}



/*#knopf2:checked ~ #sliderbox {display: none;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(1) {opacity: 0; z-index: 0;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(2) {opacity: 0; z-index: 0;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(3) {opacity: 1; z-index: 100;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(4) {opacity: 0; z-index: 0;}
	#knopf2:checked ~ #bilderstapel section:nth-of-type(3) .box {z-index: 200; opacity: 1; 
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
	} */
	
	
@media only screen
and (min-width: 70em) {

#knopf2:checked ~ #bilderstapel {height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf2:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {height: 0;}
#knopf2:checked ~ #bilderstapel {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf2:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf2:checked ~ #sliderbox .first .box2{margin-top: 47vh;}
	
} /* Ende @media only screen and (min-width: 70em)  */


@media only screen
and (max-width: 69.9em) {

#knopf2:checked ~ #bilderstapel {height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf2:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {height: 0;}
#knopf2:checked ~ #bilderstapel {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf2:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf2:checked ~ #sliderbox .first .box2{margin-top: 25vh;}
	
} /* Ende @media only screen and (min-width: 50em)  */


@media only screen
and (max-width: 49.9em) {

#knopf2:checked ~ #bilderstapel {height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf2:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {height: 0;}
#knopf2:checked ~ #bilderstapel {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf2:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf2:checked ~ #sliderbox .first .box2{margin-top: 15vh;}
	
} /* Ende @media only screen and (min-width: 30em)  */

@media only screen
and (max-width: 29.9em) {

#knopf2:checked ~ #bilderstapel {height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf2:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {height: 0;}
#knopf2:checked ~ #bilderstapel {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf2:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf2:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf2:checked ~ #sliderbox .first .box2{margin-top: 50%; transition: margin-top 0.5s ease-in-out, opacity 0.2s ease-in-out 0.2s;}
	
} /* Ende @media only screen and (max-width: 29.9em)  */



/*#knopf3:checked ~ #sliderbox .first{background-position: -3840px 0, -1920px 0, 0px 0, 1920px 0;}*/
#knopf3:checked ~ #sliderbox .first{background-position: 20200% 0, 10100% 0, 0 0, -10100% 0;} /*die Bilder werden je nach Viewport-Breite nebeneinander positioniert :-)*/
/*#knopf3:checked ~ #sliderbox .first .box1{margin-left: -3840px; transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}	
#knopf3:checked ~ #sliderbox .first .box2{margin-left: -1920px; transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}*/		
#knopf3:checked ~ #sliderbox .first .box3{opacity: 1; transition: margin-top 0.5s ease-in-out, opacity 1.5s ease-in-out 1.5s;}		
/*#knopf3:checked ~ #sliderbox .first .box4{transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}	*/


	#knopf3:checked ~ #bilderstapel section:nth-of-type(1) {-moz-animation-name: Stapeln; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}
	#knopf3:checked ~ #bilderstapel section:nth-of-type(2) {-moz-animation-name: Stapeln; -moz-animation-delay: 20s; -moz-animation-play-state: paused;}
	#knopf3:checked ~ #bilderstapel section:nth-of-type(3) {-moz-animation-name: Stapeln; -moz-animation-delay: 10s; -moz-animation-play-state: paused;}
	#knopf3:checked ~ #bilderstapel section:nth-of-type(4) {-moz-animation-name: Stapeln; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}
	
		#knopf3:checked ~ #activeknopf label:nth-child(1) {-moz-animation-name: Faerben; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}
		#knopf3:checked ~ #activeknopf label:nth-child(2) {-moz-animation-name: Faerben; -moz-animation-delay: 10s; -moz-animation-play-state: paused;}
		#knopf3:checked ~ #activeknopf label:nth-child(3) {-moz-animation-name: Faerben; -moz-animation-delay: 20s; -moz-animation-play-state: paused;}
		#knopf3:checked ~ #activeknopf label:nth-child(4) {-moz-animation-name: Faerben; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}


/*
#knopf3:checked ~ #sliderbox {display: none;} 
	#knopf3:checked ~ #bilderstapel section:nth-of-type(1) {opacity: 0; z-index: 0;}
	#knopf3:checked ~ #bilderstapel section:nth-of-type(2) {opacity: 1; z-index: 100;}
	#knopf3:checked ~ #bilderstapel section:nth-of-type(3) {opacity: 0; z-index: 0;}
	#knopf3:checked ~ #bilderstapel section:nth-of-type(4) {opacity: 0; z-index: 0;}
	#knopf3:checked ~ #bilderstapel section:nth-of-type(2) .box {z-index: 200; opacity: 1; 
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
	}*/
	
@media only screen
and (min-width: 70em) {

#knopf3:checked ~ #bilderstapel {height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf3:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {height: 0;}
#knopf3:checked ~ #bilderstapel {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf3:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf3:checked ~ #sliderbox .first .box3{margin-top: 47vh;}
	
} /* Ende @media only screen and (min-width: 70em)  */	


@media only screen
and (max-width: 69.9em) {

#knopf3:checked ~ #bilderstapel {height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf3:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {height: 0;}
#knopf3:checked ~ #bilderstapel {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf3:checked ~ #bilderstapel {margin: 0;}  											/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf3:checked ~ #sliderbox .first .box3{margin-top: 25vh;}                            				
	
} /* Ende @media only screen and (min-width: 50em)  */


@media only screen
and (max-width: 49.9em) {

#knopf3:checked ~ #bilderstapel {height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf3:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {height: 0;}
#knopf3:checked ~ #bilderstapel {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf3:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf3:checked ~ #sliderbox .first .box3{margin-top: 15vh;}
	
} /* Ende @media only screen and (min-width: 30em)  */


@media only screen
and (max-width: 29.9em) {

#knopf3:checked ~ #bilderstapel {height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf3:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {height: 0;}
#knopf3:checked ~ #bilderstapel {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf3:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf3:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf3:checked ~ #sliderbox .first .box3{margin-top: 50%; transition: margin-top 0.5s ease-in-out, opacity 0.2s ease-in-out 0.2s;}
	
} /* Ende @media only screen and (max-width: 29.9em)  */



/*#knopf4:checked ~ #sliderbox .first{background-position: -5760px 0, -3840px 0, -1920px 0, 0 0; }*/
#knopf4:checked ~ #sliderbox .first{background-position: 30300% 0, 20200% 0, 10100% 0, 0 0; } /*die Bilder werden je nach Viewport-Breite nebeneinander positioniert :-)*/
/* #knopf4:checked ~ #sliderbox .first .box1{margin-left: -5760px; transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}		
#knopf4:checked ~ #sliderbox .first .box2{margin-left: -3840px; transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}		
#knopf4:checked ~ #sliderbox .first .box3{margin-left: -1920px; transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out, opacity 1.5s ease-in-out;}	*/		
#knopf4:checked ~ #sliderbox .first .box4{opacity: 1; transition: margin-top 0.5s ease-in-out, opacity 1.5s ease-in-out 1.5s;}	


	#knopf4:checked ~ #bilderstapel section:nth-of-type(1) {-moz-animation-name: Stapeln; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}
	#knopf4:checked ~ #bilderstapel section:nth-of-type(2) {-moz-animation-name: Stapeln; -moz-animation-delay: 20s; -moz-animation-play-state: paused;}
	#knopf4:checked ~ #bilderstapel section:nth-of-type(3) {-moz-animation-name: Stapeln; -moz-animation-delay: 10s; -moz-animation-play-state: paused;}
	#knopf4:checked ~ #bilderstapel section:nth-of-type(4) {-moz-animation-name: Stapeln; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}
	
		#knopf4:checked ~ #activeknopf label:nth-child(1) {-moz-animation-name: Faerben; -moz-animation-delay:  0s; -moz-animation-play-state: paused;}
		#knopf4:checked ~ #activeknopf label:nth-child(2) {-moz-animation-name: Faerben; -moz-animation-delay: 10s; -moz-animation-play-state: paused;}
		#knopf4:checked ~ #activeknopf label:nth-child(3) {-moz-animation-name: Faerben; -moz-animation-delay: 20s; -moz-animation-play-state: paused;}
		#knopf4:checked ~ #activeknopf label:nth-child(4) {-moz-animation-name: Faerben; -moz-animation-delay: 30s; -moz-animation-play-state: paused;}

/*{
#knopf4:checked ~ #sliderbox {display: none;} 
	#knopf4:checked ~ #bilderstapel section:nth-of-type(1) {opacity: 1; z-index: 100;}
	#knopf4:checked ~ #bilderstapel section:nth-of-type(2) {opacity: 0; z-index: 0;}
	#knopf4:checked ~ #bilderstapel section:nth-of-type(3) {opacity: 0; z-index: 0;}
	#knopf4:checked ~ #bilderstapel section:nth-of-type(4) {opacity: 0; z-index: 0;}
	#knopf4:checked ~ #bilderstapel section:nth-of-type(1) .box {z-index: 200; opacity: 1; 
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
	}*/

@media only screen
and (min-width: 70em) {

#knopf4:checked ~ #bilderstapel {height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf4:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {height: 0;}
#knopf4:checked ~ #bilderstapel {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf4:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf4:checked ~ #sliderbox .first .box4{margin-top: 47vh;}
	
} /* Ende @media only screen and (min-width: 70em)  */	



@media only screen
and (max-width: 69.9em) {

#knopf4:checked ~ #bilderstapel {height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf4:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {height: 0;}
#knopf4:checked ~ #bilderstapel {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf4:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf4:checked ~ #sliderbox .first .box4{margin-top: 25vh;}
	
} /* Ende @media only screen and (min-width: 50em)  */	


@media only screen
and (max-width: 49.9em) {

#knopf4:checked ~ #bilderstapel {height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf4:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {height: 0;}
#knopf4:checked ~ #bilderstapel {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf4:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf4:checked ~ #sliderbox .first .box4{margin-top: 15vh;}
	
} /* Ende @media only screen and (min-width: 30em)  */	


@media only screen
and (max-width: 29.9em) {

#knopf4:checked ~ #bilderstapel {height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {height: 0;}                                      /* Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */
#knopf4:checked ~ #bilderstapel .zwei {height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {height: 0;}
#knopf4:checked ~ #bilderstapel {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .eins {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .zwei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .drei {min-height: 0;} 
#knopf4:checked ~ #bilderstapel .vier {min-height: 0;}
#knopf4:checked ~ #bilderstapel {margin: 0;}                              				/* Ende Ausblenden des Bilderstapels bei gleichzeitiger Responsivität */

#knopf4:checked ~ #sliderbox .first .box4{margin-top: 50%; transition: margin-top 0.5s ease-in-out, opacity 0.2s ease-in-out 0.2s;}
	
} /* Ende @media only screen and (max-width: 29.9em)  */	





#knopf9:checked ~ #bilderstapel section {-moz-animation-name: Stapeln; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 40s;-webkit-animation-name: Stapeln; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 40s;} /*Muss um Grunddauer der Funktion mal*/
#knopf9:checked ~ #sliderbox {display:none}																																		/*Anzahl Bilder erhöht werden, hier */
																																														/*also 10s mal Anzahl*/
																												/*letzter knopf ist immer der, der die knopfshow wieder stapelt*/
#knopf9:checked ~ #bilderstapel section:nth-of-type(1) {-moz-animation-name: Stapeln; -moz-animation-play-state: paused; -webkit-animation-name: Stapeln; -webkit-animation-play-state: paused;} /*Das untere bzw. erste Bild ist immer sichtbar, verhindert ein Durchschimmern des Hintergrunds */
#knopf9:checked ~ #bilderstapel section:nth-of-type(2) {-moz-animation-name: Stapeln; -moz-animation-delay: 20s; -webkit-animation-name: Stapeln; -webkit-animation-delay: 20s;} /*Hier immer eine knopf-Zeile mit höchster Verzögerung und mit nth-of-type(2) draufsetzen*/
#knopf9:checked ~ #bilderstapel section:nth-of-type(3) {-moz-animation-name: Stapeln; -moz-animation-delay: 10s; -webkit-animation-name: Stapeln; -webkit-animation-delay: 10s;}
#knopf9:checked ~ #bilderstapel section:nth-of-type(4) {-moz-animation-name: Stapeln; -moz-animation-delay: 0s; -webkit-animation-name: Stapeln; -webkit-animation-delay: 0s;}


#knopf9:checked ~ #activeknopf label:nth-child(1) {-moz-animation-name: Faerben; -moz-animation-iteration-count: infinite; -moz-animation-duration: 40s; -moz-animation-delay: 0s; -webkit-animation-name: Faerben; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 40s; -webkit-animation-delay: 0s;} /*beginnt das Färben der anderen Buttons*/
#knopf9:checked ~ #activeknopf label:nth-child(2) {-moz-animation-name: Faerben; -moz-animation-iteration-count: infinite; -moz-animation-duration: 40s; -moz-animation-delay: 10s; -webkit-animation-name: Faerben; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 40s; -webkit-animation-delay: 10s;} /*Gesamtdauer der Animation anpassen*/
#knopf9:checked ~ #activeknopf label:nth-child(3) {-moz-animation-name: Faerben; -moz-animation-iteration-count: infinite; -moz-animation-duration: 40s; -moz-animation-delay: 20s; -webkit-animation-name: Faerben; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 40s; -webkit-animation-delay: 20s;}
#knopf9:checked ~ #activeknopf label:nth-child(4) {-moz-animation-name: Faerben; -moz-animation-iteration-count: infinite; -moz-animation-duration: 40s; -moz-animation-delay: 30s; -webkit-animation-name: Faerben; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 40s; -webkit-animation-delay: 30s;}

/* Animation */

/*@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 20% 0; }
}*/

#sliderbox {
	transition: background-position 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000) /*ease-out*/;     				/* animiert die Verschiebung des Hintergrundes in eine fließende Bewegung */
}

#sliderbox .box1, #sliderbox .box2, #sliderbox .box3,  #sliderbox .box4{	/* animiert das Reinschieben der Textboxen */
	transition: margin-left 2s ease-in-out, margin-top 3s ease-in-out;						/* mit Verlängerung wird das Reinschieben betont, weil es noch sichtbar ist, opacity-transition sorgt für sanftes Ausblenden */
}

/*#sliderbox .box1, #sliderbox .box2, #sliderbox .box3,  #sliderbox .box4{	/* animiert das Einblenden der Textboxen */
	/*transition: opacity .5s ease-in 2s;
}*/

/*@keyframes fadeout {
	0% {opacity: 1}
	100%  {opacity: 0}
}*/

/*@keyframes fadein {														/* animiert das Einblenden der Textboxen */
	/*0% {opacity: 0}
	100%  {opacity: 1}
}*/



/*#sliderbox .box {
	transition: opacity 500ms ease-in;
	transition-delay: 2s;
}*/

/*#sliderbox {
	-moz-transition: background-position 2s;
	-moz-transition-timing-function: ease-in-out;}*/





#sliderbox   .inner {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /*easeInOutQuart*/ /*gibt an, mit welcher Geschwindigkeitskurve die Bilder ein- und ausgeblendet/ rein- und rausgeschoben werden*/

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart*/  
}

/*Desktop (landscape) -----------*/ 
	@media only screen
	and (min-device-width : 1400px)
	/*and (orientation: landscape)*/ {
#knopf1:checked ~ #sliderbox article:nth-child(1) .info,			/*gibt an, wie die Info-Texte in den Bildern ein- und ausgeblendet werden*/
#knopf2:checked ~ #sliderbox article:nth-child(2) .info,
#knopf3:checked ~ #sliderbox article:nth-child(3) .info,
#knopf4:checked ~ #sliderbox article:nth-child(4) .info,
#knopf5:checked ~ #sliderbox article:nth-child(5) .info,
#knopf6:checked ~ #sliderbox article:nth-child(6) .info,
#knopf7:checked ~ #sliderbox article:nth-child(7) .info,
#knopf8:checked ~ #sliderbox article:nth-child(8) .info  {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}
} /*Ausgabegerät-Weiche*/

/*Tablet (landscape) -----------*/ 
	@media only screen
	and (max-device-width : 1399px)
	/*and (orientation: landscape)*/ {
#knopf1:checked ~ #bilderstapel section:nth-child(4) .box,			/*gibt an, wie die Box-Texte im Bilderstapel ein- und ausgeblendet werden*/
	#knopf2:checked ~ #bilderstapel section:nth-child(3) .box,
	#knopf3:checked ~ #bilderstapel section:nth-child(2) .box,
	#knopf4:checked ~ #bilderstapel section:nth-child(1) .box {
	
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;

}	
} /*Ausgabegerät-Weiche*/


body {
overflow-x: hidden;													/*blendet "überlappende" Bilder aus */
}

#header {
position: fixed;                                           
z-index: 1002;														/* neu: schiebt Menü vor Slider-Kontrollknöpfe */
}

#bilderstapel {														/*positioniert den Bilderstapel*/
float: left;
/*position: relative;*/
/*height: 415px;*/													/*neue angepasste Höhe*/
/*height: 900px;*/
width: 100%;
/*width: 1230px;*/
margin: 50px auto 0px auto;
}

.eins {																/*versorgt per Klassen jede Sektion mit einem anderen Hintergrund*/
position: relative;
margin-bottom:50px;
background: url('../img/Schreibmaschine.png') no-repeat 0 0;       /*responsive Dia-Show, Bilderstapel muss unterhalb des Menüs bleiben. Neu: no-repeat 0 0 statt no-repeat fixed 0 50px, um keinen Größensprung zur Sliderbox zu machen! */
height: inherit; 
width: inherit;
/*background-size: cover;*/												/*zu Testzwecken: Füllt den gesamten Hintergrund aus*/
/*background-size: 100%;*/													/*passt die Größe entsprechend der Sliderbox-Hintergründe an*/		
background-size: 101% auto;	                                         /*responsive Dia-Show*/
}

.zwei {
position: relative;
background: url('../img/Seelenschwester_Cover.png') no-repeat 0 0;		/*responsive Dia-Show, Bilderstapel muss unterhalb des Menüs bleiben. Neu: no-repeat 0 0 statt no-repeat fixed 0 50px, um keinen Größensprung zur Sliderbox zu machen! */
height: inherit; 
width: inherit;
/*background-size: 100%;*/	
background-size: 101% auto;											/*responsive Dia-Show*/
}

.drei{
position: relative;
background: url('../img/samurai.png') no-repeat 0 0;		/*responsive Dia-Show, Bilderstapel muss unterhalb des Menüs bleiben. Neu: no-repeat 0 0 statt no-repeat fixed 0 50px, um keinen Größensprung zur Sliderbox zu machen! */
height: inherit; 
width: inherit;
/*background-size: 100%;*/
background-size: 101% auto;											/*responsive Dia-Show*/
}

.vier {
position: relative;
background: url('../img/malena.png') no-repeat 0 0;			/*responsive Dia-Show, Bilderstapel muss unterhalb des Menüs bleiben. Neu: no-repeat 0 0 statt no-repeat fixed 0 50px, um keinen Größensprung zur Sliderbox zu machen! */
height: inherit; 
width: inherit;
/*background-size: 100%;*/
background-size: 101% auto;											/*responsive Dia-Show*/
}

#bilderstapel section {                                                /*positioniert die Hintergründe übereinander*/
position: absolute;
left: 0; 
margin-top: 0;
}


/*#bilderstapel img {													/*positioniert die Bilder übereinander*/
/*position: absolute;
left: 0; 
margin-top: 0;
/*}*/

#bilderstapel .box {
position: absolute;
left: 0;
line-height: 20px;
	width: 20%;
	min-width: 20%;
	margin-left: 74.5%;
	position: absolute;
	font-style: italic;
	padding: 30px 30px;
	opacity: 0;
	color: #000;
	text-align: left;
	/*background-color: rgba(247,207,159,.5);*/
	background-color: rgba(247,207,159,.8);
	display: block;
}

#sliderbox .box1, #sliderbox .box2, #sliderbox .box3,  #sliderbox .box4{
float: left; 
position: absolute;
width: 96%;
margin-left: 2%;
margin-right: auto;
/*margin-top: 400px;*/
/* margin-top: 200px; 	*/					/* neuer Rand sorgt für eine Verschiebung von oben */
/*width: 960px;*/
/*width: 1100px;*/
/*display: none;*/
height: auto;
opacity: 0; 
background: /*-moz-linear-gradient(left, rgba(1,1,1,1) 25%,*/ rgba(1,1,1,0.4) /*75%)*/;
}

@media only screen
and (max-width: 29.9em) {
	#sliderbox .box1, #sliderbox .box2, #sliderbox .box3,  #sliderbox .box4 {
	background: black;
	/*height:15vh;
	min-height: 150px;
	max-height: 200px;*/
	width: 100%;
	margin-left:0;
	}
	#sliderbox {
	height:30vh;
	min-height: 390px;
	/*border: 1px solid red;*/
	}	
	.first {
    height:30vh;
	min-height: 390px;	
	/*border: 1px solid purple;*/
	}

}


@media only screen
and (min-width: 70em) {
	#sliderbox .box1 h1, #sliderbox .box2 h1, #sliderbox .box3 h1,  #sliderbox .box4 h1 { /* individuelle Schriftgröße je nach Bildschirmgröße */
	font-size: 45px;
	margin-left: 2%;
	}
	#sliderbox .box1 p, #sliderbox .box2 p, #sliderbox .box3 p,  #sliderbox .box4 p {
	padding: 2%;
	}
}

@media only screen
and (max-width: 69.9em) {
	#sliderbox .box1 h1, #sliderbox .box2 h1, #sliderbox .box3 h1,  #sliderbox .box4 h1 { /* individuelle Schriftgröße je nach Bildschirmgröße */
	font-size: 35px;
	margin-left: 3%;
	}
	#sliderbox .box1 p, #sliderbox .box2 p, #sliderbox .box3 p,  #sliderbox .box4 p {
	padding: 3%;
	}
}


@media only screen
and (max-width: 49.9em) {
	#sliderbox .box1 h1, #sliderbox .box2 h1, #sliderbox .box3 h1,  #sliderbox .box4 h1 { /* individuelle Schriftgröße je nach Bildschirmgröße */
	font-size: 30px;
	margin-left: 4%;
	}
	#sliderbox .box1 p, #sliderbox .box2 p, #sliderbox .box3 p,  #sliderbox .box4 p {
	padding: 4%;
	}
}


@media only screen
and (max-width: 29.9em) {	
	#sliderbox .box1 h1, #sliderbox .box2 h1, #sliderbox .box3 h1,  #sliderbox .box4 h1 { /* individuelle Schriftgröße je nach Bildschirmgröße */
	font-size: 26px;
	margin-left: 4%;
	}
	
	#sliderbox .box1 p, #sliderbox .box2 p, #sliderbox .box3 p,  #sliderbox .box4 p {
	padding: 4%;
	}
}

#sliderbox .box1 h1, #sliderbox .box2 h1, #sliderbox .box3 h1,  #sliderbox .box4 h1 {
	padding-bottom: 0;
	margin-bottom: 0;
	/*margin: 20px auto 10px auto;*/
	color: #FF6600;
	font-family: 'Trade Winds', cursive;
	/*font-size: 26px;*/     /* muss je nach Bildschirm-Größe individualisiert werden */
	line-height: 0.8em;
	/*margin-left: 2%;*/     /* muss je nach Bildschirm-Größe individualisiert werden */
	font-weight: normal; /*um den bold-Standard aufzuheben*/
}

#sliderbox .box1 p, #sliderbox .box2 p, #sliderbox .box3 p,  #sliderbox .box4 p {
	color: #FF6600;
	/*padding: 0 250px 20px 250px;*/
	/*padding: 2%;*/ /* Padding je nach Bildschirmgröße anpassen */
	padding-top: 0; /*damit der Abstand nach oben nicht zu groß wird*/
	/*font-family: 'Nanum Gothic', sans-serif; */
	font-family: 'Roboto', sans-serif;
	font-size: 17px; /*auf dieser Größe ein paar Schriften testen!*/
	line-height: 1.3em; /* mehr Platz fürs Auge schaffen */
	letter-spacing: 0.03em /* mehr Platz fürs Auge schaffen */
}

#sliderbox .box1 p a, #sliderbox .box2 p a, #sliderbox .box3 p a,  #sliderbox .box4 p a {
text-decoration: none;
color: #FF6600;
font-weight: bold;
transition: all 0.5s ease;
}

#sliderbox .box1 p a:hover, #sliderbox .box2 p a:hover, #sliderbox .box3 p a:hover,  #sliderbox .box4 p a:hover {
color: #FF8600; 
text-shadow: 	 
					0 0 5px white,
                 0 0 10px white,
                 0 0 20px yellow,
                 0 0 40px yellow,
                 0 0 60px yellow,
                 0 0 90px yellow,
                 0 0 120px yellow,
                 0 0 160px yellow;
				 transition: all 0.5s;
}

/*#sliderbox .box1 p a:visited, #sliderbox .box2 p a:visited, #sliderbox .box3 p a:visited,  #sliderbox .box4 p a:visited {
text-decoration: none;
color: #FF6600;
font-weight: bold;
transition: all 0.5s ease;
}*/

/*#sliderbox .box1 {						/* regelt die Abstände der einzelnen Boxen, so liegen sie nicht übereinander beim Ein- und Ausblenden */
/*background: red;
margin-left: 480px 410px;
}

#sliderbox .box2 {
background: green;
margin-left: 480px 410px;
}

#sliderbox .box3 {
background: blue;
margin-left: 480px 410px;
}

#sliderbox .box4 {
background: orange;
margin-left: 480px 410px;
}*/

/*#sliderbox .box3 {
float: left; 
position: absolute;
margin-left: 480px;
margin-top: 400px;
width: 960px;
height: auto;
background-color: blue;
opacity: 0; 
}*/
 
/*left: 0;
line-height: 20px;
	width: 20%;
	min-width: 20%;
	margin-left: 74.5%;
	position: absolute;
	font-style: italic;
	padding: 30px 30px;
	opacity: 0;
	color: #000;
	text-align: left;
	/*background-color: rgba(247,207,159,.5);*/
	/*background-color: rgba(247,207,159,.8);
	display: block;
}*/

#bilderstapel .box h3 {
	color: #910003;
	/*color: #B32B05;*/
	margin-bottom: 5px;
	text-align: center;
	font-weight: normal;
	font-size: 22px;
	font-style: normal;
}

#bilderstapel .box p {
	color: #000000;
	font-size: 18px;
}

#bilderstapel .box a {
	color: #910003;
	/*color: #FF6600;*/
} 

#sliderbox {														/* positioniert den Container mit den durchrutschenden Info-Bildern*/	
/*float: left;*/
/*height: 900px;*/
/*height: 900px;
height: 100%;
min-height: 315px; 
max-height: 900px;*/
height: 40vh;											/* Die obere Box wird der Höhe der Browser-Fläche angepasst :-)*/
/*width: 5760px;												/* muss Platz für vier Bilder schaffen, die nebeneinander gefloatet werden */
/*width: 320em; 												/* entspricht 4x Ausdehnung des main-Containers von max-width: 80em */
/*width: auto; */	
/*max-width: 80em;*/
min-width: 10em; 
/*max-width: 80em; */                                       			
margin: 0px auto 0px auto;
}

@media (max-width: 29.9em) {								/* Media-Gabel erhöht die Größe der Sliderbox für große Bildschirme deutlich! :-) */
	/*#sliderbox {
	height:15vh;
	min-height: 150px;
    max-height: 200px;	
	}	
	.first {
    height:15vh;
	min-height: 150px;
	max-height: 200px;		
	}*/
	
	#bilderstapel {                                         /* responsive Diashow */
	/*border: 3px solid yellow;*/
	/*height:15vh;*/
	height:35vh;
	min-height: 150px;
	/*max-height: 200px;*/
	max-height: 300px;	
	}
	
	.eins, .zwei, .drei, .vier {
	/*height:15vh;*/
	height:35vh;
	min-height: 150px;
	/*max-height: 200px;*/
	max-height: 300px;
	}														/* Ende responsive Diashow */
	
}

@media (min-width: 30em) {								/* Media-Gabel erhöht die Größe der Sliderbox für große Bildschirme deutlich! :-) */
	#sliderbox {
	height:30vh;
	min-height: 315px;
	}	
	.first {
    height:30vh;
	min-height: 315px;	
	}
	
	#bilderstapel {										/* responsive Diashow */
	/*border: 3px solid red;*/
	height:30vh;
	min-height: 315px;
	}
	
	.eins, .zwei, .drei, .vier {
		height:30vh;
		min-height: 315px;
	}													/* Ende responsive Diashow */
	
}

@media (min-width: 50em) {								/* Media-Gabel erhöht die Größe der Sliderbox für große Bildschirme deutlich! :-) */
	#sliderbox {
	height:35vh;
	min-height: 415px;
	}	
	.first {
    height:35vh;
	min-height: 415px;	
	}
	
	#bilderstapel {										/* responsive Diashow */
	/*border: 3px solid blue;*/
	height:35vh;
	min-height: 415px;
	}
	
	.eins, .zwei, .drei, .vier {
	height:35vh;
	min-height: 415px;
	}													/* Ende responsive Diashow */
}



@media (min-width: 70em) {								/* Media-Gabel erhöht die Größe der Sliderbox für große Bildschirme deutlich! :-) */
	#sliderbox {
	height:70vh;		
	}	
	.first {
    height:70vh;
	}
	
	#bilderstapel {										/* responsive Diashow */
	/*border: 3px solid purple;*/
	height:70vh;
	}
	
	.eins, .zwei, .drei, .vier {
	height:70vh;
	}													/* Ende responsive Diashow */
}

.first {																/*versorgt per Klassen jede Sektion mit einem anderen Hintergrund*/
position: relative;
float: left;
/*background: url('../img/luca.jpg') no-repeat fixed 0 0, url('../img/krieger.jpg') no-repeat fixed 1230px 0, url('../img/malena4.jpg') no-repeat fixed 2460px 0, url('../img/viking2.jpg') no-repeat fixed 3690px 0;*/
background: url('../img/malena.png') no-repeat 0 0, url('../img/samurai.png') no-repeat 99% 0, url('../img/Seelenschwester_Cover.png') no-repeat 188% 0, url('../img/Schreibmaschine.png') no-repeat  300% 0; /*die Bilder werden je nach Viewport-Breite nebeneinander positioniert :-)*/
/*height: inherit; */
width: 100%;
/*background-size: cover;*/	
/*background-size: 1230px;*/									/*zu Testzwecken: Füllt den gesamten Hintergrund aus*/
												/*passt die Größe entsprechend der Sliderbox-Hintergründe an*/
transition: background-position 3s;				/*animiert das Schieben der Bilder*/	
/*background-size: contain;	*/
/*background-size: 400px auto;*/	
/*background-size: 25% auto;*/
/*background-size: 100%;*/	
/*background-size: cover;*/							/*das aktuelle Hintergrund-Bild füllt immer die Bild-Box aus :-) */
background-size: 101% auto;					/*das aktuelle Hintergrund-Bild füllt immer die Breite der Bild-Box aus, die Höhe passt sich an :-) */
/*border: 3px solid yellow;*/
margin-top: 50px;	
/*clear: left;		*/
}

.second {
position: relative;
float: left;
background: url('../img/rokweiler1.jpg') no-repeat fixed;
height: inherit; 
width: 25%;
}

.third{
position: relative;
float: left;
background: url('../img/Banner_Totensonne.jpg') no-repeat fixed;
height: inherit; 
width: 25%;
}

.fourth {
position: relative;
float: left;
background: url('../img/Mythenschmiede_Banner1_klein.jpg') no-repeat fixed;
height: inherit; 
width: 25%;
}

#sliderbox article {                                                /*positioniert die hintergründe übereinander*/
position: absolute;
left: 0; 
margin-top: 0;
}

article img {														/* positioniert Bilder in den Info-Boxen*/
width: 100%;
float: left;
} 

#overflow {
overflow: hidden;
display: block;
}

.info {																/* CSS für die Infoboxen*/
	line-height: 20px;
	width: 20%;
	min-width: 20%;
	margin-left: 74.5%;
	position: absolute;
	font-style: italic;
	padding: 30px 30px;
	opacity: 0;
	color: #000;
	text-align: left;
	background-color: rgba(247,207,159,.8);
	display: block;
}

.info h3 {
	color: #910003;
	/*color: #B32B05;*/
	margin-bottom: 5px;
	text-align: center;
	font-weight: normal;
	font-size: 22px;
	font-style: normal;
}

.info p {
	color: #000000;
	font-size: 18px;
}

.info a {
	color: #910003;
	/*color: #FF6600;*/
}  

/* Control Setup */

#controls {                    /* Überflüssig?*/
	margin: -25% 0 0 0;
	width: 100%;
	height: 50px;
}

#controls label { 
	display: none;
	width: 50px;
	height: 50px;
	opacity: 0.3;
}

#activeknopf {
	margin: 0 0 0 0;      /*Abstand stört*/
	text-align: center;
}

#activeknopf label {
	/*-webkit-border-radius: 5px;*/  /*Gestaltung der Slider-Kontrollknöpfe*/
	/*-webkit-border-radius: 25px;*/
	-webkit-border-radius: 10px;
	/*-moz-border-radius: 5px;*/
	/*--moz-border-radius: 25px;*/
	-moz-border-radius: 10px;
	/*border-radius: 5px;*/
	/*-border-radius: 25px;*/
	border-radius: 10px;
	display: inline-block;
	/*width: 10px;*/
	/*-width: 50px;*/
	width: 20px;
	/*height: 10px;*/
	/*-height: 50px;*/
	height: 20px;
	background: #bbb;
	position: relative;
	/*z-index: 1000;*/       /*z-index aufgehoben, damit vertikales Menü in der Mobilansicht davor erscheint */
	margin-top: 10px;
	margin-left: 30px;
	margin-bottom:10px;
}

@media (max-width: 29.9em) {

#activeknopf label {
	margin-top: 25px;
	}
}

#activeknopf label:nth-child(1) {
	margin-left: 0px;;
}	

#activeknopf label:hover {
	background: #ccc;
	border-color: #777 !important;
}

/*#controls label:hover {
	opacity: 0.8;
}

#knopf1:checked ~ #controls label:nth-child(2), 
#knopf2:checked ~ #controls label:nth-child(3), 
#knopf3:checked ~ #controls label:nth-child(4), 
#knopf4:checked ~ #controls label:nth-child(5),
#knopf5:checked ~ #controls label:nth-child(6), 
#knopf6:checked ~ #controls label:nth-child(1) {
	background: url('next.png') no-repeat;
	float: right;
	margin: 0 -70px 0 0;
	display: block;
}


#knopf1:checked ~ #controls label:nth-child(6),
#knopf2:checked ~ #controls label:nth-child(1),
#knopf3:checked ~ #controls label:nth-child(2),
#knopf4:checked ~ #controls label:nth-child(3),
#knopf5:checked ~ #controls label:nth-child(4),
#knopf6:checked ~ #controls label:nth-child(5), {
	background: url('prev.png') no-repeat;
	float: left;
	margin: 0 0 0 -70px;
	display: block;
}*/

#knopf1:checked ~ #activeknopf label:nth-child(1), 									/* sorgt dafür, dass die Kontrollknöpfe eingefärbt werden, sobald man sie anwählt*/
#knopf2:checked ~ #activeknopf label:nth-child(2),
#knopf3:checked ~ #activeknopf label:nth-child(3),
#knopf4:checked ~ #activeknopf label:nth-child(4),
/*#knopf5:checked	~ #activeknopf label:nth-child(5),
#knopf6:checked	~ #activeknopf label:nth-child(6),
#knopf7:checked	~ #activeknopf label:nth-child(7),*/
#knopf9:checked	~ #activeknopf label:nth-child(5) { /* wichtig: child muss richtig angegeben sein (einfach durch zählen der Buttons, hier 3 statt acht, wie in der ID vermerkt*/
	background: #333;
	border-color: #333 !important;
	/*z-index: 1001; */    /*z-index aufgehoben, damit vertikales Menü in der Mobilansicht davor erscheint */
}