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

/*
grau #d1d2d4
oliv #9d8b53
*/


/************* Fonts **************/
/* bebas-neue-regular - latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/bebas-neue-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bebas-neue-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bebas-neue-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bebas-neue-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bebas-neue-v9-latin-regular.svg#BebasNeue') format('svg'); /* Legacy iOS */
}



html { scroll-behavior: smooth; }





body { font-family: Cambria, Georgia, "Times New Roman", Times, serif; color: #333;
	   background-color:#fff; 
	   background: url(../img/bg-bild.gif) no-repeat center center fixed; 
	   -webkit-background-size: cover;
	   -moz-background-size: cover;
	   -o-background-size: cover;
	   background-size: cover;	   
	   }
	   
.mobil { display: none; }
.desktop { display: block; }
	   
#seite { width: 1000px;
		 margin-left: auto;
		 margin-right: auto;
		 background-color: rgba(256, 256, 256, 0.7);
		 padding: 10px; 
		 box-sizing: border-box;/**/
		 }
		 
.abstand { width: 100%;
		   height: 100px;
		   clear:both;
		   font-size: 0.01em;/*background-color:#6F6;*/
				 }
		 
h1 { font-family: 'Bebas Neue', Arial, Helvetica, sans-serif; 
	 color: #9d8b53;
	 font-size: 3em; 
	 }		 
	   
a { font-family: 'Bebas Neue', Arial, Helvetica, sans-serif;
	text-decoration: none;
    color: #036;
	}

a:hover { color: #039; }

.klar { clear:both;
		width:100%;
		font-size: 0.01em;
		}
		
h1 a { color: #9d8b53; }
		


/************** Hauptnavigation ****************/
#hnav a { font-size: 1.5em;
	      padding: 10px 30px 10px 5px;
		  margin: 0 3px;
		  transform: rotate(-1.5deg);
          background: linear-gradient(225deg, transparent 5px, rgba(100, 100, 100, 0.2) 0) top right;
		  transition: color 0.5s;
		  		   border-bottom: 1px solid #660;

	     }
	
#hnav a:hover { color: #F60; }

#hnav ul { padding:0;
		   margin: 0;
		   }
				
#hnav li { display: inline;
		   padding:0;
		   margin: 0;
		   }



/************** Inhalt ****************/		 
#inhalt { margin-top: 50px;
		  box-sizing: border-box;
		  line-height: 180%;
		  }
		  
#inhalt h3 { font-family: 'Bebas Neue', Arial, Helvetica, sans-serif; 
	 		 color: #9d8b53;
			 font-size: 2em;
			 }
		  
.bildbox { float: left;
		   max-width: 300px;
		   background-color:#FFC
				    }
					
#inhalt img { max-width: 300px;
			  height: auto;
			  /*float: left;
			  margin-right: 20px;
			  margin-bottom: 10px;*/
			  }

.textbox { float: left;
		   width:670px;
		   min-height: 300px;
		   margin-left:10px;
		   padding: 20px;
		   box-sizing: border-box;
		   background-image:url(../img/anfuehrung.gif);
		   background-position: top right;
		   background-repeat:no-repeat;
		   border-left: dashed 1px #999;
		   }

#inhalt ul { margin-left: 0px; }
			 /*background-color: #3C0;*/
			 
			 
#widerspruchsrecht { background-color:#FCC; 
					 box-sizing: border-box;
					 padding: 10px;
					}			 
			 
			 

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

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




		  
/************** Fussleiste ****************/

#fuss ul { margin:0;
	       padding: 0;
		   font-size: 1.2em;
	       }
		   
#fuss ul li { margin:0;
	          padding: 10px;
			  display: inline;
	         }
			 
			 
			 
@media (max-width: 1000px) {
	
	#seite { width: 100%;
			  }
	
	.textbox { float: left;
		   width:100%;
		   min-height: auto;
		   margin-left:10px;
		   padding: 10px;
		   box-sizing: border-box;
		   background-image:url(../img/trans.gif);
		   background-position: top right;
		   background-repeat:no-repeat;
		   border-left: dashed 1px #999;
		   }
		   
	#fuss ul li { width: 100%;
		          margin:0;
				  padding: 20px 0px;
				  display: block;
				  text-align: center;
				  border-top: solid 1px #999;
				  /*background-color:#FFF;*/
				  
				 }		   
		   
		   
	
	
}


@media (max-width: 500px) {
	
	body { background: url(../img/bg-smartphone.gif); 
	   }
	
	#seite { padding:10px ; }
	
	
	h1 { margin-top:-10px;
		 font-size: 2em;
       }
	
	.abstand { width: 100%;
			   height: 40px;
	}
	
	/************** Hauptnavigation ****************/
	#hnav a { font-size: 1.5em;
			  padding: 10px 30px 10px 5px;
			  margin: 0 3px;
			  transform: rotate(-1.5deg);
			  background: linear-gradient(225deg, transparent 5px, rgba(100, 100, 100, 0.2) 0) top right;
			  transition: color 0.5s;
					   border-bottom: 1px solid #660;
	
			 }
		
		#hnav a:hover { color: #F60; }
		
		#hnav ul { padding:0;
				   margin: 0;
				   }
						
		#hnav li { display: block;
				   padding: 20px 0;
				   margin: 0;
				   }	
	
	
}