@charset "UTF-8";
/* steffens-mediadesign.de 2017 */

body { background-color: #fFF;
	   margin: 0;
	   -webkit-text-size-adjust:none;
	   font-family: Cambria, Calibri, Georgia, Times, serif;
	   background-image: url(../img/schleife-gold.gif);
	   background-repeat: no-repeat;
	   background-position: 40px 40px;
	   background-color: #fff;
	   height: 100%;
	   transition: all, 0.5s;
	   -webkit-text-size-adjust:none;
	   }
	   
img { width:100%;
	  height: auto;
	  border:0;
	  }
	  
a { text-decoration: none; 
	color: #000; 
	transition: color, 0.5s;
	}
	
.hinweis { /*border: 3px solid red; background-color: rgba(255, 0, 0, 0.2);*/
		   padding: 10px; 
		   margin-bottom: 20px;
		   transform: rotate(-1.5deg);
           background: linear-gradient(225deg, transparent 20px, #fdc4a5 0) top right;		
		   }
		   
.rahmen { border: 3px solid #F90; 
		  padding: 5px;
		  }		   
		   
		   
		   

a:hover { color: #fff; }

.klar { clear: both;
		width: 100%;
		font-size: 0.01em;
		 }

.mobil { display: none; }
.desktop { display: block; }

/*
.slidein {
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
    
@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
      
  to {
    margin-left:0%;
    width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

*/





#startlayer { position: absolute;
			  top: 10%;  /*left: auto; Höhe von oben right: auto;*/
			  margin-left: 10%;
			  max-width: 600px;
			  display: block;
			  padding:10px;
			  text-align: left;
			  z-index: 10;
			  background: rgba(256, 20, 20, 0.8);
			  color: #fff;
			  font-size: 1.4em;
			  font-weight: bold;
			  text-shadow: 0px 0px 3px #7A0814;
			  /*transition: left 12s;
			  animation-duration: 1s;
  			  animation-name: slidein;*/
			  }

/*float:right;*/
#startlayer .x { 
				 max-width: 20px;
				 max-height: 20px;
				 }

#startlayer .x a { color: #fff; }

#startlayer p { /*position: absolute;
			    */
				margin-top: 30px; }



#seite { max-width: 1000px;
		 margin-left: auto;
		 margin-right: auto;
		 padding:0;
		 background-color: rgba(255, 255, 255, 0.7);
		 }

/* Titel */
.titel { color: #333;
		 font-size: 1.8em;
		 margin: 20px 0 0 10px;
		 		 }
		
.untertitel { color: #555;
		      font-size: 1.1em;
			  margin: 0 0 0 10px;
		     }

/* Navigation */
#hnav { width: 100%;
		font-size: 1em;
		margin-top: 30px;
		}

#hnav ul { list-style:none;
		   padding: 0;
		   margin: 0;
			}

#hnav ul li { display: block;
			  padding: 5px 10px;
			  background-color: rgba(255, 255, 255, 0);
			  transition: background-color, 0.5s;
			  border-bottom: 1px dashed #999;
			  color: #000; 
			  }

#hnav ul li:hover { background-color: rgba(230, 107, 0, 1);
					color: #fff; 
					}

#hnav ul li.aktiv { background-color: rgba(230, 107, 0, 0.4);
					color: #000; 
					}					 
					 
					 
/* Inhalt */


#inhalt { margin-top: 5%;
		  margin-bottom: 40px;
		  }

#inhalt a { font-weight: bold;
			color: rgba(230, 107, 0, 1); 
			}

#inhalt a:hover { color: rgba(0, 0, 0, 1); }

.blau { color:#039; 
		font-style: italic;
		}


.portrait { width:100%; 
			clear: both;
			}


.portrait img { max-width: 200px;
				float: left;
				margin: 0 10px 40px 0; 
				}

#spalte01 { max-width: 45%;
			float: left;
			padding-left: 10px;
			/*background-color: #ddd;*/
			}

#spalte02 { max-width: 45%;
			padding-left: 5%;
			float: left;
			/*background-color: #cd9;*/
			}


.klarinhalt { clear: both;
			  width: 100%;
		      font-size: 0.01em;
			  height:40px;
			  /*background-color:#0F3;*/
			  }









	
.google-link { margin-top:20px; }					 





/* Fuss */
#fuss { width: 1000px;
		background-color: rgba(230, 107, 0, 0);
		position: fixed;
		bottom: 0;
		border-top: 1px dashed #999;
		background-color: rgba(255, 255, 255, 0.7);
		  }
		  
#fuss ul { padding: 15px 0;
		   margin: 0;
		   list-style: none;
		   }
	  
#fuss ul li { display: inline;
			  padding: 15px;
			  background-color: rgba(230, 107, 0, 0);
			  }

#fuss ul li:hover { background-color: rgba(230, 107, 0, 1);
					transition: background-color,0.5s;
					}

					 
					 


/* back to top */
.back-to-top {	border: 1px dashed #999;
				background-image: url(../img/nach-oben.gif);
				background-repeat: no-repeat;
				background-size: 50px 46px;
				background-color: #fff;
				width: 50px;
    			height: 46px;				
				position: fixed;
				bottom: 60px;
				right: 20px;
				opacity: 0.5;
				transition: opacity 0.5s;
				z-index: 110;
				}

.back-to-top:hover { opacity: 1; }

















@media (max-width: 1000px) {

	body { background-position:  right 20px; }
	
	/*#startlayer { max-width: 1%;
				  left: 1%;
				background-color: #ddd;
				}*/

	#seite { max-width: 500px;
			 margin-left: 0;
			 background-color: rgba(255, 255, 255, 0.7);
			 }	
		 
	#hnav ul li { display: inline; }
	
	#hnav ul { margin-left: 10px; }	
	
	
	#spalte01 { max-width: 96%;
				float: none;
				padding-left: 2%;
				/*background-color: #ddd;*/
				}
	
	#spalte02 { max-width: 96%;
				padding-left: 2%;
				float: none;
				/*background-color: #cd9;*/
				}	
	
	
	
	
	#fuss ul { margin: 5px 0 0 30px; }					 
					 
	#fuss ul li { display: inline;
				  margin-right: 15px;
				  padding: 5px 0px;
				  }	
				  
	}




@media (max-width: 600px) {
	
	#startlayer {  max-width: 390px;
				   margin-left: 2%;
 					}
	
	.mobil { display:block; }
	.desktop { display: none; }	
	
	#mobilnav { display:block;
				width: 30px;
				height:21px;
				background-image:url(../img/men-icon.gif);
				background-position: -30px 0;
				transition: background-position 0.5s;
				float:left;
				margin:5px;
				  }	
	
	#hnav	{ 	  display: block;
				  position: fixed;
				  right:-140px;
				  top:-20px;
				  width: 180px;
				  height: auto;
				  z-index:20;
				  padding:0;
						   
				 text-align:left;
									 
				 transition-property:right;
				 transition-duration:0.5s;
				 
				 -webkit-transition-property:right;
				 -webkit-transition-duration:0.5s;
				 
				 -o-transition-property:right;
				 -o-transition-duration:0.5s;
				 
				 -ms-transition-property:right;
				 -ms-transition-duration:0.5s;	
				 
				}		
	
	
	#hnav ul { margin-left:40px;
			   margin-top:0;
			   padding:0;
			   }
	
	#hnav ul li { display:block;
				  padding:10px;
				  min-height:30px;
				  width:140px; 
				  background-color: rgba(230, 107, 0, 1);
				  border-bottom: 1px solid #fff;
				  color: #fff;
				}
	
	#hnav ul li a { color: #fff; }
	 
	#hnav ul li.aktiv { background-color: rgba(230, 107, 0, 1); }	
	
	
	
	
	#inhalt { max-width: 96%;
		      padding: 2%;
			  margin-top: 20px;
		      border-top: 1px dashed #999;
			  /*background-color: rgba(90, 171, 89, 0.8);*/ 
			  }
	
	
	
	.portrait img { max-width: 100px;
					float: left;
					margin: 0 10px 20px 0; 
					}	
	
	
	
	
	
	
	
	iframe { display: none; }
	
	
	
	
	#fuss { width:100%;
			position: relative;
			bottom: 0;
			border-top: 1px dashed #999;
			text-align: center;
			}	
	
	
	#fuss ul  { margin: 0; }
	
	#fuss ul li { display: block;
				  margin: 0;
				  padding: 20px;
				  color: #fff;
				  background-color: rgba(230, 107, 0, 1);
				  margin-bottom: 1px;
				  }
				  
	#fuss ul li a { color: #fff; }	
	
	
}