@charset "UTF-8";
/* steffens-mediadesign.de BSK 2026 */
		   
/************ Schriften **********/
/* afacad-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Afacad';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/afacad-v3-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* afacad-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Afacad';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/afacad-v3-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* afacad-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Afacad';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/afacad-v3-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* afacad-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Afacad';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/afacad-v3-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* afacad-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Afacad';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/afacad-v3-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body { margin:0;
	   font-family:'Afacad';
	   font-weight:normal;
	   transition: all, 0.5s;
	   -webkit-text-size-adjust:none;
	   background-color: #fff;
		   }	   		   

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


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

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

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


/******** Kopf blaugrau #a1b2cd *************/
#kopf { width: 100%;
		text-align: center;
	    background-color: #a1b2cd;
		}
		
#kopf img { max-width: 200px;
		    padding: 1%;
			}


/******** HNav ************/
/* Navigation background: #a1b2cd;*/
#hnav { padding-bottom: 2%; 
	    text-align: center;
	    /*background-color: #a1b2cd;*/
		font-size:1.5em;
		font-weight:bold; 		
		}

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

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

#hnav a { margin: 0; }

#hnav a:Link,a:visited,a:active { text-decoration:none; 
							color:#fff;
		 					-webkit-transition: color 0.5s; /* For Safari 3.1 to 6.0 */
     	 					transition: color 0.5s;
 							}
 
#hnav a:hover { text-decoration:none; font-weight:bold; color:#F00; }

#hnav a.stat { text-decoration:none; font-weight:bold; color:#555; }


/*********** Startseite **********/
/*#inhalt_start { max-width: 900px;
		        margin-left: auto;
		        margin-right: auto;
		        margin-top: 0%;
		        color: #555;
		  background-color: #ccc;
		   }*/

#startbox { background:url("../img/Startbox-BG-Bild.jpg") no-repeat center center fixed;
	   		-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			min-height: 400px;
			/*margin:0;		
			text-align: center;*/
			}
			
.statement_position { text-align: center;
					  padding-top: 5%; } 


.statement { font-size: 2.5em;
			 font-style: italic;
			 font-weight: bold;
			 color:#069;
			 background-color:#fff;
					   }
.motto {     font-size: 2em;
			 font-style: italic;
			 font-weight: regular;
			 color:#FFF;
			 text-shadow: 2px 2px 6px #000;
			 padding-top: 3%;
			 }
			 

.motto_unterzeile { font-size: 1.5em;
			 		font-weight: regular;
			 		color:#FFF;
			 		text-shadow: 2px 2px 6px #000;
			 		padding-top: 1%;
			 		}





/*********** Inhalt **********/

#inhalt { max-width: 900px;
		  margin-left: auto;
		  margin-right: auto;
		  margin-top: 2%;
		  color: #555;
		  /*background-color: #ccc;*/
		   }

#inhalt a:Link { text-decoration: underline; color: #333; }
#inhalt a:active { text-decoration: underline; color:#333; }
#inhalt a:visited	{ text-decoration: underline; color:#333; }
#inhalt a:hover { text-decoration: underline; color:#000; }	



#inhalt ul { padding-right: 1% }


#inhalt h3 { font-weight: 700;
			 font-size: 2em; 
			 color: #555;
			 text-align: center;
			 margin-bottom: 2%;
			 }

#inhalt h4 { font-weight: 700;
			 font-size: 1.2em; 
			 color: #555;
			 text-align: center;
			 margin: 2% 0 0 0;
			 }


p { padding: 0 2% 0 2%; margin: 0; }				

.spalte_links { width: 50%; 
				/*background-color: #DFF4FF;*/
				float: left;
				font-size: 1.2em;
				color: #333;
				box-sizing: border-box;
				}
				
.spalte_rechts { width: 50%;
				 /*background-color: #EAF6BE;*/
				 float: right;
				 font-size: 1.2em;
				 color: #333;
				 box-sizing: border-box;
				 }

.zwei_spalten { width: 100%;
				float: left;
				font-size: 1.2em;
				color: #333;
				box-sizing: border-box;
				 }

.abstand { margin: 3% 0; }
.mitte { text-align: center; }
.hellblau { background-color: #DFF4FF; }
.weiss { color:#FFF; }
.unterzeile { font-size: 0.9em; font-style: italic; }
.rechts { text-align: right; }









/*********** Fuss **********/
#fuss { padding-bottom: 2%; 
	    text-align: center;
	    border-top: 1px solid #aaa;
		font-size:1.2em;
		font-weight:500;
		width: 100%; 		
		}
		
#fuss ul { list-style:none;
		   padding:0;
		   margin: 0;
		   }

#fuss ul li { display:inline;
			  padding: 4px 4px;
			 }

#fuss a { margin: 0; }

#fuss a:Link { text-decoration:underline; color:#333; }

#fuss a:active { text-decoration:underline; color:#333; }
 							     							  
#fuss a:visited	{ text-decoration:underline; color:#333; }

#fuss a:hover { text-decoration:underline; color:#666; }	



/********************** 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: 20px;
				opacity: 0.8;
				transition: opacity 0.5s;
				z-index: 110;
				}

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




/*************** Laufschrift *******************/

.marquee { 
		max-width: 100vw; /* iOS braucht das */
		white-space: nowrap;
		overflow: hidden;
		background: linear-gradient(225deg, transparent , #dcebfb);
		padding: 10px;
	}

	.marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 10s linear infinite;
		font-size: 1.1em;
	}

	/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
	.marquee span:hover {
		animation-play-state: paused 
	}

	/* Make it move */
	@keyframes marquee {
		0%   { transform: translateX(0); }
		100% { transform: translateX(-100%); }
	}






						
/* Anpassung Mobil */
@media screen and (max-width:800px)	 {	

	body { overflow-x: hidden; 
		   /*background: #ef9fef;*/
		   }
		   
	.mobil { display: block; }
	.desktop { display: none; }
		   
			
	#hnav	{ display: block;
			  position: fixed;
			  right: -180px;
			  top: 5px;
			  width: 220px;
			  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 ul { margin-left:40px;
			   margin-top:-5px;
			   padding:0;
			   background: rgba(38,113,73,0.8);
			   }
	
	#hnav ul li { display:block;
				  padding:10px;
				  border-bottom:1px #FFF solid;
				  min-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 5px 0 0 ;
				  }	
				  
	#hnav a:hover { text-decoration:none; font-weight:bold; color:#FFF; }
	
	#hnav a.stat { text-decoration:none; font-weight:bold; color:#cdcdcd; }	
	
	#inhalt h3 { padding: 1%; }

	.spalte_links { width: 100%;
					padding: 1%;
					float: none;
				   }
	
	.spalte_rechts { width: 100%;
					 float: none;
					 }
					 
	.zwei_spalten { padding: 1%; }					 
						 
	#fuss { padding: 3% 0 3% 0;					 
				  

}