@charset "UTF-8";
/* steffens-mediadesign.de 2021 */
		   
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-pro-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/source-sans-pro-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v12-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
		}			   

/* asap-600 - latin */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/asap-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/asap-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/asap-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/asap-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/asap-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/asap-v15-latin-600.svg#Asap') format('svg'); /* Legacy iOS */
}


/* asap-condensed-500 - latin */
@font-face {
  font-family: 'Asap Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/asap-condensed-v8-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/asap-condensed-v8-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/asap-condensed-v8-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/asap-condensed-v8-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/asap-condensed-v8-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/asap-condensed-v8-latin-500.svg#AsapCondensed') format('svg'); /* Legacy iOS */
}

/* asap-condensed-600 - latin */
@font-face {
  font-family: 'Asap Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/asap-condensed-v8-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/asap-condensed-v8-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/asap-condensed-v8-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/asap-condensed-v8-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/asap-condensed-v8-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/asap-condensed-v8-latin-600.svg#AsapCondensed') format('svg'); /* Legacy iOS */
}

body { margin: 0;
	   transition: all, 0.5s;
	   -webkit-text-size-adjust:none;
	   font-family:'Source Sans Pro';
	   font-weight:normal;
	   background:url(../img/bg09.gif) no-repeat left top 250px fixed;
		   }
 
.mobil { display: none; }
.desktop { display: block; }

a { text-decoration:none; 
  	font-family: 'Asap Condensed';
  	font-style: normal;
  	font-weight: 500;
	color: #039;
	}		   

a:hover { color: #F00;}

img { max-width: 100%;
	  height: auto;
	  border: none;
	 }
	 
iframe {
  border: none;
}	 
	 

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

#seite { max-width: 1000px;
		 margin-right: auto;
		 margin-left: auto;
		 background: rgba(256, 256, 256, 0.7);
		 }
		 
#kopf { width: 100%;
		border-bottom:1px solid #000;
		background-image: linear-gradient(to right bottom, rgba(249,218,0), rgba(250,232,104));
		}		 
		 
/* Logo */
#logo { width: 70%;
		float: left;
		}		 

#logo img { max-width: 200px; 
			float: left;
			margin-right:10px;
			}

#logotext { padding: 15px 0 0 15px; }

#suchbox { margin: 40px 0 0 0;
	       width: 20%;
		   float: left;
		 }
	
.sucheingabe { /*background-color: #9ff;*/ 
				margin-top: -30px;
				width: 8em;
	     font-size: 1em;
	     background-color: #fff;
	     border: none;
	     border-bottom: 1px solid #666;
				}

.lupe { width: 30px;
		/*background-color: #f9f;*/
		 }



.suche { width: 8em;
	     font-size: 1em;
	     background-color: #fff;
	     border: none;
	     border-bottom: 1px solid #666;
	    }

.sucheingabe:focus {
	background-color: #ddd; 
	}	/**/
	
	

/********************* Hnav *************************/
#hnav { padding: 0;
	    margin: 0; 
		width: 100%;
		font-size: 1.2em;
		}

#hnav ul { list-style: none;
		   padding: 10px;
		   margin: 0;
		   background: #eee;
		   width:100%;
		   box-sizing: border-box;/**/	
        }

#hnav li { margin: 0px;
           padding: 10px;
		   background: #eee;
		   border-right: 1px solid #fff;	
		   display:inline;
          }

a.menuactive { color: #C00; }
/********************* Hnav Ende *************************/

/********************* Subnav *************************/
#subnav { padding: 0;
		  margin:0; 
		  width: 100%;
		  font-size: 1.1em;
		  
		}

#subnav ul { list-style: none;
		     padding: 14px;
		     margin: 0;
			 background: #EBFFF4;
			 line-height:200%;	
			 border-bottom: 1px solid #333;
           }

#subnav li { margin: 0;
             padding: 5px 10px ;
		     display: inline;
			 border-right: 1px solid #AAA;
            }

/********************* Subnav Ende *************************/


#vorlesen { width: 98%;
			padding-left: 2%;
		    /*border:2px red thick;
			background-color: #2C0;*/
			}
			
#vorlesen p { margin-bottom: 1px; }

#startbox { width: 100%;
			box-sizing: border-box;
			padding: 0% 3% 2% 2%;
			margin-top: -10px;
			
			}
			
#spaltelinks { box-sizing: border-box;
			   width: 600px;
			   float: left;
			   padding: 2% 3% 2% 2%;
				}			  

#spaltelinks img { padding-right: 10px; }



#spalterechts { width: 400px;
			    float: left;
		        background: #fce7cb;
 				}
				
#gelb { background:#FFC; }

#fb { width: 100%; 
	  box-sizing: border-box;
	  padding: 2%;
	  background-color: #C0E4EF;/**/
	  }
			  
#zusatzinfo { width: 100%; 
		      box-sizing: border-box;
		      padding: 2%;
		      background: #fce7cb;
		   }			  
			  
#zusatzinfo-rot { width: 100%; 
		   box-sizing: border-box;
		   padding: 2%;
		   background: #fbcfcf;
		   }
		   
#zusatzinfo-rot p { width:100%; 
					height:180px; 
					}
		   
#zusatzinfo-rot img { float: left; 
					  margin-right: 15px;
					  }		   			  
			  
			  
/********************** Fuss **********************/

#fuss { box-sizing: border-box;
		padding: 1%;
		background: #e3f36e;        
		}



#fuss ul { list-style: none;
		   padding: 0;
		   margin: 0;
        }			  
			  
#fuss li { color:#009;
		   padding: 10px; 
		   display:inline;	
				}
				
#fuss li:hover { color:#039;
				 background: #edf898;
						}
													  
			  
		  		 
/********************* Betreiber **********************/		 

#betreiber { background: #C0E4EF; 
			 font-size: 0.8em;
			 text-align: center;
			 padding: 4% 1%;
			 }



/********************** back to top **********************/
.back-to-top {	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: 5px;
				opacity: 0.5;
				transition: opacity 0.5s;
				z-index: 110;
				}

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





/* Anpassung Mobil background:#fff;*/
@media screen and (max-width:820px)	 {
	
	body { overflow-x: hidden; }
	
	#seite { max-width: 100%; }
	
	.mobil { display: block; }
    .desktop { display: none; }	

	/* Logo */
	#logo { width: 100%;
			float: left;
			margin-top: 5px;
			}		 
	
	#logo img { max-width: 100px; 
				float: left;
				margin-right:10px;
				}
	
	#logotext { padding: 0px 0 0 15px; }
	
	#unterzeile { width: 100%;
				  margin-top: -20px;/*background-color:#090;*/
				  }
	
	
	#suchbox { margin: 0 0 10px 0;
	           width: 100%;
		       text-align: center;		   
		 		}	
	
	#hnav	{ display: block;
			  position: absolute;
			  right: -270px;
			  top: 5px;
			  width: 310px;
			  height: auto;
			  z-index: 200;
			  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 a.currentpage { color:#333; }
	
	
	
	
	#hnav ul { margin-left:40px;
			   margin-top:-5px;
			   padding:0;
			   background: rgba(255,255,255,0.8);
			   }
	
	#hnav ul li { display: block;
				  padding: 20px 10px;
				  border-bottom:2px #333 solid;
				  /*min-height:30px;*/
				  }
	
	#hnav ul li ul { margin:10px 0 0 0; }
	
	
	#hnav ul li ul li { border-top: 1px #aaa solid;
						border-bottom: 0px #aaa solid;
						height:30px; 
						}
	
	
	
	
	#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;
				  }	
				  
	/*#subnav { display: block; }	
	
	#subnav ul li { display:block;
				    padding:10px;
				    border-bottom:1px #666 solid;
					border-right: 1px #EBFFF4 solid;
				    min-height:30px; 
					}*/
	
	
	
	#spaltelinks { box-sizing: border-box;
			   width: 100%;
			   float: none;
			   padding: 2% 3% 2% 2%; 
				}
				
	#spalterechts {  box-sizing: border-box;
				 width: 100%;
			     float: none;
				 padding: 0%;
 				}
				
				
				
	#fuss { box-sizing: border-box;
			padding: 1%;
			background: #e3f36e;
			text-align: center;        
			}
	
	#fuss ul { list-style: none;
			   padding: 0;
			   margin: 0;
			}			  
				  
	#fuss li { color:#009;
			   padding: 10px; 
			   display:block;	
					}
					
	#fuss li:hover { color:#039;
					 background: #edf898;
							}				
							  

}