/* In diesem Dokument werden alle grundsätzlichen Formatierungen definiert */


/* Zuerst die allgemeinen Selektoren und die .class Selektoren, welche für die Formatierung der wichtigen Seitenteile genützt werden, hier zum 
Beispiel für alles*, den Body / Wrapper / Logo / Navigation / Inhalt und Infosektion 		 */


*									{ 	padding:0px;		
										margin:0px; 													}		/*	Reset für alle margin und padding	*/
									
									


body								{	font-family: Verdana, Arial, Helvetica, sans-serif;	
										font-size:16px;
										background-color:#333333;										}		/*	Allgemeine Angaben die für das ganze Dokument gelten		*/




.wrapper							{	max-width: 1200px;
										min-width:300px;
										height:auto;
										margin:0px auto;												}		/*	Inhalts Container. Er wird vom Body umschlossen
																												und umschliesst den ganzen Inhalt	*/



.logo								{	float:left;
										width:100%;
										min-height:50px;
										padding:10px 0px 10px 0px;
										background-color:#FFFF00;
										border-radius:10px;
										border-bottom: black solid 1px;									}		/*	Lüscher Logo Container	*/
									
	

.logo img							{	width: 90%; margin:10px 5%;										}		/*	Lüscher Logo Bild	*/



.mobileNav 							{	display:none;				}



.nav								{	float:left;
										width:100%;														}		/*	Navigations Container	*/



.slider								{	width: 100%;
										height: 180px;
										overflow: hidden;
										border-radius: 10px;			}		/*	Bildserie unter der Navigation in Desktop Ansicht	*/





.slides								{	display:block;
										width: 6000px;
										height: 180px;
										margin:0;
										padding:0;						}
		


.slide								{	float:left;
										list-style-type:none;
										height:180px;
										width:1200px;					}

	
.full-content						{
										float:left;
										position:relative;
										width: 100%;
										min-height: 1500px;				}		/*	Der eigentliche, ganze Inhalt( bestehend aus content / info-section )	*/



.content							{
										width:100%;
										min-height: 1500px;
										position:relative;
										background-color:#FFFFFF;
										}		/*	Der Inhalt. Dieser variiert von Seite zu Seite	*/

									


.info-section						{	width:100%;
										position:relative;
										text-align:center;								
										background-color:#FFFF00;										}		/*	Der Info-Balken der auf jeder Seite gleich ist.
																												Beinhaltet Kontaktinfos etc.	*/

			
									
								
/* Allgemeine Abstände (paddings) */



p									{  	padding:5px 20px 5px 20px;										}		/*	Textformatierungen		*/



h1,h2,h3,h4,h5,h6					{ 	padding:10px 20px 10px 20px;									}		/*	Titelformatierungen	*/



.center								{ 	text-align:center;												}


.liste								{   margin-left: 50px;												}



/* .class Selektoren, und andere Selektoren welche für die Formatierung und Funktion der Navigation genützt werden	 */


.liste								{ 	padding-left:50px;									}
			


.videoWrapper {
	position: relative;
	left:10%;
	width:80%;
	padding-bottom: 45%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.imageWrapper		{ 
	text-align:center
}

.imageWrapper img		{ 
	width:80%;

}




/*--Ab hier ist das Layout der Paragraphen (<p></p> tags) beschrieben-----------*/
	
	
p 				{	font-size: 1em;													}


.red			{	color:red;														}
				
			
/*--Hier werden die Links definiert. Zustände wie z.B. die Farbe, was passiert
wenn man mit dem Zeiger über den link Fährt, wie der link aussieht wenn man ihn 
schon besucht hat usw.-----------------------------------------------*/


a:link			{	text-decoration:none;
					color: blue;		}
		

a:hover 		{	text-decoration: none;
					color: red;				}
		

a:visited		{/* color: purple; */}	
		



li a:link				{	color:black;					}						
			
li:hover > a 			{	background-color: red;
							color:white !important;	
							font-weight:normal;		}						


li a:visited			{ 	color: black;					}	



			
		



/* 		Navigationsbereich 	*/

nav									{																	}		/*	nav Bereich	*/	



nav a								{	display:block;
										text-decoration:none;
										white-space:nowrap;
										color:black;
										font-size:18px;
										text-align:center;												}		/*	alle Links im nav Bereich	*/
	


nav ul								{/* width: 100%; */}		/*	Navigations Menu	*/									
						
nav ul li							{	line-height:50px;
										float:left;
										list-style:none;
										position:relative;
										}		/*	Menu list items. Position relative für die positionierung
																													der ul Submenu 1 */	

			
nav ul li a							{
										border-radius:10px;
										background-color:#FFFF00;
										border-right:1px solid #333333;
										border-bottom:1px solid #333333;
										}		/*	Button Links	*/
			

									
									
nav ul ul li a						{	padding:0px 20px;background-color:#808080;						}		/*	Submenu 1 Links		*/									



nav ul ul ul li a					{	padding:0px 20px;	background-color:#C0C0C0;					}		/*	Submenu 2 Links		*/




nav ul ul							{position:absolute;}		/*	der Block der alle list items des Submenu 1 beinhaltet (ul)	
																												wird absolut zum jeweiligen Button list item (ul li)
																												ausgerichtet. oben bündig und rechts daneben	*/
	
						
nav ul ul li						{	min-width:150px;
										width:100%;
										position:relative;
										z-index:3;														}		/*	position relative für die positionierung der ul Submenu 2	*/	
			
			


nav ul ul ul						{
										/* position:absolute; */
										left:100%;
										top:0px;
										}		/*	der Block der alle list items des Submenu 2 beinhaltet (ul)	
																											 	wird absolut zum jeweiligen Submenu 1 list item (ul ul li)
																												ausgerichtet. oben bündig und rechts daneben	*/
																											  


nav ul ul li a,
nav ul ul ul li a				{border-radius:0px;}		
									

nav ul ul li:first-of-type > a		{		border-top-right-radius:10px;
											border-top-left-radius:10px;		}

nav ul ul li:last-of-type > a		{		border-bottom-right-radius:10px;
											border-bottom-left-radius:10px;		}


nav ul ul ul li:first-of-type a		{	border-top-right-radius:10px;
										border-top-left-radius:10px;			}


nav ul ul ul li:last-of-type a		{	border-bottom-right-radius:10px;
										border-bottom-left-radius:10px;			}
		
				










/* @media screen spezifische Angaben zur Formatierung */



/* Ab 1031px Breite: */
@media only screen and (min-width:1031px)


					{
			
.content							{	width:70%;
										border-top-left-radius:10px;
										border-bottom-left-radius:10px;									}		/*	Ansicht in der jeweiligen Bildschirmgrösse für den Inhalt	*/
									
															
.info-section						{   position:absolute;
										top:0px;
										right:0px;
										bottom:0px;
										width:30%;
										border-top-right-radius:10px;
										border-bottom-right-radius:10px;								}		/*	Ansicht in der jeweiligen Bildschirmgrösse für den Info-Balken	*/


.top-banner							{	display:block;													}		/*	Lässt  in der jeweiligen Bildschirmgrösse die Bildserie
																												unter der Navigation erscheinen*/
.subMenu							{ 	display:none;	}


nav ul li 							{	width:10%;	}


nav ul li:hover > ul {	display:block;
						position:absolute;
						z-index:3; }	/* lässt die Untermenüs wieder erscheinen wenn man mit der Maus darüber fährt */
	


					}



/* Zwischen 741px und 1030px Breite: */
@media only screen and (min-width:741px) and (max-width:1030px) 


					{
					
.wrapper							{	margin: 5px;													}		/*	Optionen in der jeweiligen Bildschirmgrösse für den wrapper		*/		

nav ul li							{	width:20%;														}		/*	Optionen in der jeweiligen Bildschirmgrösse für die Menu list items	*/

.subMenu								{	width:100%;														}		/*	Optionen in der jeweiligen Bildschirmgrösse für die Submenu 1	*/


#left								{	left:-100%;
										right:100%;														}		/*	Optionen in der jeweiligen Bildschirmgrösse für Elemente mit
																												der ID=left		*/	


	
.content							{	border-top-left-radius:10px;
										border-top-right-radius:10px;									}		/*	Ansicht in der jeweiligen Bildschirmgrösse für den Inhalt	*/



.info-section						{	border-bottom-left-radius:10px;
										border-bottom-right-radius:10px;								}		/*	Ansicht in der jeweiligen Bildschirmgrösse für den Info-Balken	*/

.subMenu								{ 	display:none;	}	

.slider								{ display:none;						}		/*	verstekt den Bildstreifen unter der Navigation	*/


					}


/* 	Bis 740px Breite: 	*/
@media only screen and (max-device-width:740px), (max-width:740px)
					
					
					{


.wrapper							{	margin: 5px;													}		/*	Optionen in der jeweiligen Bildschirmgrösse für den wrapper		*/

							
.logo img							{	padding-top:5px;												}		/*	Optionen in der jeweiligen Bildschirmgrösse für das logo Bild	*/

	
								
.mobileNav							{	display:block;
										background-color:#FFFF00;
										width:100%;
										height:50px;
										border-radius:10px;
										border-bottom:1px solid #333333;								}		/*	Menu Knopf (label)		*/	

									
.hamburger							{	position:relative;
										top:9px;
										left:47%;											}







.mobile-nav-checkbox:checked + ul	{	display:block;													}		/*	Lässt das Menü erscheinen	*/



nav ul									{
										position:absolute;
										z-index:3;
										min-width:250px;
										/* width:100%; */
										}		/*	Optionen in der jeweiligen Bildschirmgrösse für den wrapper		*/	
								


nav ul li							{
										float:none;
										/* min-width: 200px; */
										/* width:50%; */
										}		/*	Optionen in der jeweiligen Bildschirmgrösse für die Button list items	*/
										
										
										
.slider								{ display:none;						}		/*	verstekt den Bildstreifen unter der Navigation	*/
										


.content					{	border-top-left-radius:10px;
										border-top-right-radius:10px;									}		/*	Ansicht in der jeweiligen Bildschirmgrösse für den Inhalt und
																												den ersten Link in den list items 	*/


.info-section					{	border-bottom-left-radius:10px;
										border-bottom-right-radius:10px;								}		/*	Ansicht in der jeweiligen Bildschirmgrösse für den Info-Balken und
																												den letzten Link in den list items 	*/

	
nav ul li a,
nav ul ul li a,
nav ul ul ul li a				{border-radius:0px;}	

								
nav > ul > li:first-of-type> a		{	border-top-right-radius:10px;
											border-top-left-radius:10px;
														}

nav > ul > li:last-of-type> a		{	border-bottom-right-radius:10px;
											border-bottom-left-radius:10px;			}
									
									
									




nav ul ul						{	position:static;		}
				
.subMenu						{	display:none;			}			


.topMenu						{	display:none;			}			
		
	


					}


/* 	Ende Breite		*/