@media (max-width:300em) 

header {background: #c0c; }



header {
	position: fixed;
	width: 100%;
	height:105px;
	margin-left: -10px;
	margin-right: -10px;
	text-align: center;
	z-index: 100;
	background-color:#fff;
	background-repeat: repeat-x;
	margin-top:-10px;
	background-image: url(../bildermedien/Erleuchtung2.jpg);
	transition:1s;
}

.header2 {
	position: fixed;
	width: 100%;
	height:0px;
	margin-left: -10px;
	margin-right: -10px;
	text-align: center;
	z-index: 100;
	background-color:#fff;
	background-repeat: repeat-x;
	margin-top:-10px;
	background-image: url(../bildermedien/Erleuchtung2.jpg);
	transition:1s;
}



.headerslide {
	position: fixed;	
	
	background: rgba(255,255,255, 0.96);
	border: 1px solid #939393;
	text-align: center;
	z-index: 120;
	border-radius: 100px;
	
	right: 0%;
	top: 0px;
	font-size: 9px;	
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 5px;
	padding-left: 5px;
	width: 55px;
	height:38px;
}



#farbeaendern:hover{
	font-weight: 600;
	cursor: pointer;
	}


h1 {
	position: absolute;
	height: 40px;
	width: 440px;
	top: -5px;
	margin-left: -225px;
	left: 50%;
	padding-top:10px;
	padding-bottom:10px;
	background-color: rgba(255,255,255, 0.96);
	opacity: 1;
	border-radius: 25px;
	font-size: 30px;
	font-weight: 500;	
	z-index: 100;
	}
	
	
nav {
	position: fixed;
	float: left;
	top: 103px;
	width: 84%;
	height: auto;
	
	margin-left: -37%;
	left: 50%;
	
	
	text-align: center;
	z-index: 100;
	background-color: #fff;
	font-size:14px !important;
	font-weight:400;
	transition: 1s;
}

.nav2 {
	position: fixed;
	float: left;	
	top: 0px;
	width: 84%;
	height: auto;
	margin-left: -37%;
	left: 50%;		
	text-align: center;	
	z-index: 100;
	background-color: #FFF;
	transition:1s;
}




.navDivBilder  {
	position: relative;
	float: left;	
	height: auto;
	width: 8%;
}

.navtext {
	font-size: 0.9em;
	font-weight: 600;
	margin-bottom:5px;
		
	
}


main {
	position: relative;
	float:left;		
	width:80%;
	height:auto;	
	top:137px;
	left: 10%;
	right: 10%;
	padding-bottom:50px;
	z-index: 10;	
	transition:1s;
}


.main2 {
	position: relative;
	float:left;
	height:auto;
	width:80%;
	top:227px;
	left: 10%;
	right: 10%;
	padding-bottom:50px;
	z-index: 10;
	margin-bottom: 20px;	
	}

article
 {
	position: relative;
	float:left;	
	width: 100%;
	height: auto;
		
	margin-bottom:30px;	
	text-align:center;
	z-index:200;	
}

.textarticle{
	position:relative;
	font-size: 18px;
	font-weight: 600;
	border:#C8C8C8 solid 3px;
	border-radius: 40px;
	padding-top:13px;
	height:40px;
	
	width: 220px;
	
	margin-left:-115px;
	left: 50%;

	}

h2 {font-style: italic;
	color: #F03;
	padding-left:3%;
	margin-top:-5px;
	margin-bottom:15px;
	font-size: 16px;
	line-height: 25px;
	
	}

h3 {font-style: italic;
	color: #30C;
	padding-left:3%;
	margin-top:-5px;
	margin-bottom:15px;
	font-size: 16px;
	line-height: 25px;
	
	}
	
	

h4 {
	font-style: italic;
	font-size: 16px;
	color: #5200CC;
	font-weight: 600;
	}


	
	
footer {
	position: fixed;
	background-color: #E2E2E2;	
	height: 20px;
	width: 100%;
	font-size: 0.7em;
	margin-left: -10px;
	text-align: right;
	padding-right: 80px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #cacaca;
	color: #333;
	bottom: 0px;
	padding-top: 3px;
	z-index: 100;
}



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

.ImgNavig {
	width: 60%;
	max-width: 80px;
	min-width:60px;	
	height: auto;
}

nav {
	width: 84%;
	max-width:105em;
}

.nav2 {
	width: 84%;
	max-width: 105 em;
}

}

@media only screen and (max-width: 71.875em) {
	
.headerslide
 {
	right: 0%;
	top: 0px;
	font-size: 8px;
	width: 45px;
	height:33px;
	padding-top: 10px;
	padding-bottom: 12px;
}
}


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

 {
	 
main {
	top:87px;
	}


.main2 {
	top:200px;
}
	 


nav {
	font-size:	10px !important;
	width:100%;
	margin-left: -44%;
	left: 50%;
	
}

.nav2 {
	font-size: 10px !important;
	width:100%;
	margin-left: -44%;
	left: 50%;
	}
	
.ImgNavig {
	width: 75% !important;
	height: auto;
	padding-left: 6%;
	margin-left:-8px;
}

h1 {
	margin-left: -145px;
	left: 50%;
	font-size: 23px;
	font-weight:500;
	padding-top:10px;
	margin-top:25px;
	width: 300px;
	height: 33px;
}



	
}



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

nav {
	font-size:9px;
	
	top: 88px;
	padding-top:10px;
	padding-right:;
	padding-left:1em;
	
	width: 100%;
	float: none;
	margin-left: 0%;
	left:0%;
	text-align:center;
	background-color:#E2E2E2;
	z-index:100;
}


.ImgNavig {
	
	width: 75% !important;
	height: 0px;

}

.headerslide {
	visibility: hidden;

}

h1 {
	margin-left: -100px;
	left: 50%;
	font-size: 23px;
	font-weight:500;
	padding-top:10px;
	margin-top:25px;
	width: 300px;
	height: 33px;
}
}
/*

@media only screen and (max-width: 0px)

 {
 
h1 {
	margin-left: 18%;	
}

.headerslide {
	visibility: hidden;

}

nav {
	font-size:10px;
	top: 130px;
	padding-top:20px;
	padding-right:5px;
	padding-left: 10px;
	width: 50px;
	float: none;
	margin-left: 0%;
	left:0%;
	text-align:left;
	background-color:#E2E2E2;
	z-index:100;
	
}

.navDivBilder  {

	position: relative;
	float: left;	
	height: auto;
	width: 43px;
	padding-bottom:10px;
}

.ImgNavig {
	width: 75% !important;
	height: 0px;
}




	
h2 {
	
	
	margin-left:-115px;
	left: 50%;

	}

	
main {
	top:87px;
}

.main2 {
	top:120px;
}
}

*/


/*
für Smartphones:

@(min-width:4em) and (max-width:37em)


@media only screen and (max-width: 630px)



1. 320- oder 480-Pixel-Breite für Smartphones: Die Größe hängt davon ab, ob Sie die Webseite für horizontales oder vertikales Betrachten optimieren wollen. Wir empfehlen Ihnen die Webseite für die Vertikale, mit einer Breite von 320 Pixeln, zu optimieren.


2. 768- oder 1024-Pixel für Tablets: Auch hier haben Sie die Wahl. Wobei wir 1024 für Tablets empfehlen würden.


3. Welche Breite bevorzugen Sie bei Desktop-Browsern? Auch hier können Sie 1024-Pixel verwenden, insbesondere wenn Sie davon ausgehen, dass die Webseite mit 17-Zoll-Monitoren, die am meisten verwendet werden, aufgerufen wird.

Archiv CSS: 
header2 {
	position: fixed;	
	width: 100%;
	height:0px;		
	text-align: center;
	z-index: 100;
	transition:1s;
}



<*------------*>

*/