@charset "ISO-8859-1";
<style type="text/css"> 

 <!--
* { margin: 0;
   padding: 0;}




body,html{margin:0;
	padding: 0;
	height: 100%;
	width:100%;
	overflow:hidden;
	font-family: courier;
	font-size: 1em;
	font-weight: bold;
	line-height: 130%;} 



	
#div-nav{position: absolute;
	top:250px;
	left:-2px;
	z-index:3;
	margin:0 ;
	padding: 0;
	text-align: left;
	width:150px;
	overflow: hidden;
	border:0px solid yellow;}
	
#div-scrolling{position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 2;}

#header{position: absolute;
	top:0px;
	left:-2px;
	z-index:3;
	margin:0;
	width:800px;
	height: 150px;
	overflow: hidden;
	text-align: left;
	border:0px solid red;}
	
#header img{position:relative;
	top: 20px;
	left:0px;
	width:60%;
	min-width: 400px;
	margin:0;
	border:0px solid blue;}
	
#div-aufteilung{position: relative;
   top: 220px;
   left: 0px;
   width: 80%;
   height: 100%;
   min-width: 1024px;
   border:0px solid blue;
   z-index:2;}
                  
#div-main{position:relative;
	height: 100%;
	margin-right:20px;
	margin-left:214px;
	text-align: center;
	border:0px solid yellow;}
	
#article{position: relative;
	float: left;
	width: 720px;	
	text-align: left;
	margin-right: 20px;
	margin-bottom: 15px;
	border:0px solid red;
	z-index:2;}
	
#div-Bild{position: absolute;
	display: block;
	margin: 0px;
   top: 0px;
   left: 0px;
   text-align: center;
   width: 100%;
   height: 100%;
   min-width: 1024px;
   border:0px solid blue;
   z-index:1;}

/*720px Artikelbild mit bewegten Bildern*/
#div-720-mov{position: relative;
	width: 720px;
	height:481px;
	margin-bottom: 100px;
	float: left;
	overflow: hidden;
	box-shadow:1px 2px 4px rgba(0,0,0,0.8);
	transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	border:3px solid white;}
	
/*rotes Leuchten des Bildschattens beim hovern.	*/	
#div-720-mov:hover{box-shadow:10px 20px 40px rgba(200, 0, 0, 0.5);}
 
#div-720-mov img{position: absolute;
			top: 0;
			left: 0;
			width:720px;
			height: 481px;
			animation: 20s ease-in-out infinite;
			}
			
#div-720-mov img:nth-of-type(1){animation-name: slider1;}
#div-720-mov img:nth-of-type(2){animation-name: slider2;}
#div-720-mov img:nth-of-type(3){animation-name: slider3;}

@keyframes slider1{
			0%,30%,97%{opacity:1;}
			33%,96%{opacity: 0;}}

@keyframes slider2{
			30%,63%{opacity:1;}
			0%,29%,66%,100%{opacity: 0;}}

@keyframes slider3{
			63%,100%{opacity:1;}
			0%,62%{opacity: 0;}}

#div-720-mov p{position:absolute;
	top: 320px;
	left: 0px;
	width: 720px;
	height:150px;
	background-color: rgba(50,50,50,0.8);}

.foto{float: left;
	margin-right:20px;
	margin-bottom: 15px;
	border:3px solid white;}
	
.foto:hover{transform: rotate(0deg) /*scale(1.3)*/;
			box-shadow:4px 8px 16px rgba(0,0,0,0.9);
			z-index: 3;}
.foto-gross:active{transform:  scale(2);
			box-shadow:4px 8px 16px rgba(0,0,0,0.9);
			z-index: 3;}
			
/*.foto:active{transform: scale(2); 
			box-shadow:4px 8px 16px rgba(0,0,0,0.9);
			z-index: 3;}*/
		
.foto-350{width: 350px;
	height:233px;}
	
.foto-233q{width: 233px;
	height:233px;}
	
.foto-233{width: 233px;
	height:350px;}	
	
.foto-468{width: 468px;
	height:233px;}	
	
.foto div{position:relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height:72px;
	background-color: rgba(0,0,0,0.8);
	text-align: left;
	margin-left:0;
	margin-top:150px; }
	
.foto img{position:absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height:100%;}
				
	
/*.foto img#top:hover { opacity:0 }*/
	
.foto-pos0{position:relative;
			top:0;
			left: 0;
			box-shadow:1px 2px 4px rgba(0,0,0,0.8);}
.foto-pos1{position:relative;
			top:-10px;
			left: 5px;
			box-shadow:2px 4px 8px rgba(0,0,0,0.8);}
.foto-pos2{position:relative;
			top:0px;
			left: -5px;
			box-shadow:1px 4px 4px rgba(0,0,0,0.8);}		
.foto-transform0{transform: rotate(2deg);}
.foto-transform1{transform: rotate(-2deg);}
.foto-transform2{transform: rotate(3deg);}
.foto-rot:hover{box-shadow: 5px 10px 20px rgba(200, 0, 0, 0.5);}
	
.foto  p{font-family: courier;
			font-size: 0.9em;		
			font-weight: bold;
			color: white;
			margin-left: 15px;
			margin-right: 5px;
			margin-top:10px;
			margin-bottom:10px;} 
		

}	
			


/*Formate: (n)normal:350*233, (h)hochkant:233*350, (p)panorama: 700*233, (q)quadrat: 233*233 */	
			
#div-350-n{width: 350px;
	height:233px;
	float: left;
	margin-right:20px;
	margin-bottom: 15px;
	box-shadow:1px 2px 4px rgba(0,0,0,0.8);}
			
#div-350-n div{position:relative;
	top: -92px;
	left: 0px;
	width: 350px;
	height:72px;
	background-color: rgba(0,0,0,0.8);
	text-align: left;}
	
#div-350-n p{font-family: courier;
			font-size: 0.8em;			
			font-weight: bold;
			color: white;
			margin-left: 15px;
			margin-right: 5px;
			margin-top:10px;
			margin-bottom:10px;} 
			
#div-350-n img{width:350px;
			height: 233px;}	
			
/*Formate: (n)normal:350*233, (h)hochkant:233*350, (p)panorama: 700*233, (q)quadrat: 233*233 */	

#div-350-h{width: 233px;
	height:350px;
	float: left;
	margin-right:20px;
	margin-bottom: 15px;
	box-shadow:1px 2px 4px rgba(0,0,0,0.8);}
						
#div-350-h img{width:233px;
			height: 350px;}

/*Formate: (n)normal:350*233, (h)hochkant:233*350, (p)panorama: 468*233, (q)quadrat: 233*233 */	

#div-350-p{width: 468px;
	height:233px;
	float: left;
	margin-right:20px;
	margin-bottom: 15px;
	box-shadow:1px 2px 4px rgba(0,0,0,0.8);}
						
#div-350-p img{width:468px;
			height: 233px;}
			
/*Formate: (n)normal:350*233, (h)hochkant:233*350, (p)panorama: 468*233, (q)quadrat: 233*233 */	

#div-350-q{width: 233px;
	height:233px;
	float: left;
	margin-right:20px;
	margin-bottom: 15px;
	box-shadow:1px 2px 4px rgba(0,0,0,0.8);}
						
#div-350-q img{width:233px;
			height: 233px;}
			
/*#div-streifen{position: relative;
	width: 75%;
	min-width: 720px;
	height:2px;
	background-color: rgba(200, 0, 0, 0.7);
	box-shadow: 0px 0px 8px rgba(200, 0, 0, 0.7);
	border-radius: 2px;
	float:left; 
	margin-top:50px;
	margin-bottom:30px;}		*/
	
#div-abstand{position: relative;
	width:100%;
	height:100px;
	float: left;}

#footer{position: relative;
	top:0;
	left:0;
	float: left;
	width: 100%;
	height: 30px;
	background-color:rgba(0,0,0,0.8);
	color: white;
	margin: auto;
	text-align: left;
	padding-left:15px;}
	
#footer a{padding-left: 20px;
	color:red;}


#div-bilderleiste{width:250px;
	height: 100%;}	

#div-text{width: 100%;
	margin-top: 70px;
	float: right;}

#div-pikto{width:350px;
	height:233px;
	overflow: hidden;
	float: left;
	margin-right:20px;
	margin-bottom: 15px;}
	
#div-pikto2{width:720px;
	overflow: hidden;
	float: left;
	margin-right:20px;
	margin-bottom: 15px;}
	
#div-pikto3{width:350px;
	overflow: hidden;
	float: left;
	margin-right:20px;
	margin-bottom: 15px;}
	
	
#img-nav{text-align: left;
         height:25px;
         border:0px solid #000;
         margin-top:1px;
			transition:all 0.2s ease-out;}

#img-nav:hover{box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.5);
  			-webkit-transform: scale(1.1);
  			transform: scale(1.1);}
  			

         
#img-nav-klein{text-align: left;
         height:15px;
         border:0px solid #000;
         margin-top:1px;
			transition:all 0.2s ease-out;}
         
#img-nav-klein:hover{box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.5);
  			-webkit-transform: scale(1.1);
  			transform: scale(1.1);}
         
#img-adresse{width:250px;}
	
        
#H1{font-size: 2em;
			background-color: rgba(255,255,255,0.5);		
			box-shadow:1px 2px 4px rgba(0,0,0,0.5);}
			
#H2{background-color: rgba(255,255,255,0.5);		
			box-shadow:1px 2px 4px rgba(0,0,0,0.5);}
			
#H3{font-size: 1em;
			background-color: rgba(250,0,0,0.8);		
			box-shadow:1px 2px 3px rgba(0,0,0,0.5);
			line-height: 1.5;
			-moz-hyphens: auto;
  			-o-hyphens: auto;
   		-webkit-hyphens: auto;
   		-ms-hyphens: auto;
   			hyphens: auto;}
					
#rot{color:red;}

a:link {color:white; text-decoration:none; }
a:visited {color:white; text-decoration:none}
a:active {color:white; text-decoration:none}
a:hover {color:black; text-decoration:none}

#center{text-align:left;}

#zitat{font-style:italic;}
		
//-->
</style>