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


/************* Fonts **************/

/* secular-one-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: 'Secular One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/secular-one-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/secular-one-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/secular-one-v12-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/secular-one-v12-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/secular-one-v12-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/secular-one-v12-latin-regular.svg#SecularOne') format('svg'); /* Legacy iOS */
}



/* ibm-plex-sans-100 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/ibm-plex-sans-v13-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-100.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}

/* ibm-plex-sans-200 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/ibm-plex-sans-v13-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-200.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}

/* ibm-plex-sans-300 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/ibm-plex-sans-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-300.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}

/* ibm-plex-sans-regular - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-regular.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}

/* ibm-plex-sans-500 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ibm-plex-sans-v13-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-500.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}

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

/* ibm-plex-sans-700 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ibm-plex-sans-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-700.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}


.logotyporegular { 
	  font-family: 'IBM Plex Sans';
	  font-style: normal;
	  font-weight: 200;
	  src: url('../fonts/ibm-plex-sans-v13-latin-200.eot'); /* IE9 Compat Modes */
	  src: local(''),
		   url('../fonts/ibm-plex-sans-v13-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		   url('../fonts/ibm-plex-sans-v13-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
		   url('../fonts/ibm-plex-sans-v13-latin-200.woff') format('woff'), /* Modern Browsers */
		   url('../fonts/ibm-plex-sans-v13-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
		   url('../fonts/ibm-plex-sans-v13-latin-200.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}

.logotypofett { 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ibm-plex-sans-v13-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-500.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}



/************* General *************/



body { min-height: 100vh;
       display: flex;
       flex-direction: column;
        margin: 0;
	   background-color: #fffeef;
	   -webkit-text-size-adjust: none;
	   }

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

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

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



/*************** 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;
				
				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; }



a { text-decoration: none; 
	transition: color, 0.5s;
	/*font-weight:bold;*/
	color: #333;
	}

a:hover {color: #000; }



/************* Kopf **************/
#bgkopf { width:100%;
		  height: 150px; 
		  background-color:#CFF;
		  background-image:url(../img/bg-alkoholfrei.jpg);
		  background-position:center center fixed;
		  }/**/

#kopf { width:1000px; 
		margin-left: auto;
		margin-right: auto;
		color:#009;
		height: 150px;
		}
	

h1 { font-family: 'Secular One';
	 font-size: 2em;
	 color:#009;
	 margin: 20px 0 0 0;
	 padding: 0;
	 }

h1 a { color:#009; }




h3 { font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 400;
     font-size: 1.5em;
	 color:#0087d5;
	 margin: 0;
	 padding: 0;

	 }

.streifen { width: 100%;
			height: 20px;
			background-image:url(../img/slash.gif);
			background-repeat:repeat-x;
			}


/********************* Hnav *************************/
#hnav { margin-left: auto; 
	    margin-right: auto; 
		margin-top: 0;
		margin-bottom: 0;
		width: 1000px;
		font-size: 1.2em;
		box-sizing: border-box;
		padding: 0;
		font-family: 'IBM Plex Sans';
        font-style: normal;
  		font-weight: 400;
	    
		/*background-color: #FF0; */
		}


#hnav a { text-decoration: none; 
	      transition: color, 0.5s;
	    }

/*#hnav a:hover {color: #666; }*/

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

#hnav li { height:40px;
		   margin: 0px;
           padding: 10px;
		   background-color: rgba(63, 169, 245, 0.3);
		   border-right: 1px solid #fff;	
		   display:inline;
		   box-sizing: border-box;
		   transition: background-color 0.5s;
          }

#hnav li:hover { background-color: rgba(63, 169, 245, 0.5); }

#hnav li.aktiv { background-color: rgba(63, 169, 245, 0.7); }


/********************* Hnav Ende *************************/








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

#inhalt { width: 1000px;
		  margin-top: 50px; 
		  margin-left: auto;
	      margin-right: auto;
		  font-family: 'IBM Plex Sans';
		  font-style: normal;
		  font-weight: 300;
		  line-height: 150%;
		}

#inhalt h4 { font-size: 1em; }

#inhalt a {	font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 500;
            src: url('../fonts/ibm-plex-sans-v13-latin-500.eot'); /* IE9 Compat Modes */
       src: local(''),
       url('../fonts/ibm-plex-sans-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-v13-latin-500.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
	   
	   text-decoration:underline;
}


.spaltelinks { width: 50%;
			   padding:  1% 1%;
			   box-sizing: border-box;
			   float: left;
			   /*background-color:#FC0;*/
			   font-size: 1.3em;
			   line-height: 150%;
			 }

.spalterechts { width: 50%;
			    float: right;
			    padding:  1% 1% 1% 2%;
				background-image:url(../img/kein_alkohol_icon.gif);
				background-position:center 100px;
				background-repeat:no-repeat;
				/*background-color:#FC0;*/
			    box-sizing: border-box;
				font-size: 1.3em;
			    line-height: 150%;
				}
				
.spalterechts img, .spaltelinks img { max-width:500px;
					height: auto;
					}				
				


.infobox	{ border: 1px red solid; 
			  padding: 0 7px 0px 7px;
			  box-sizing: border-box;
			  background-color: #DAF0FD;
			  }







/************* Fuß **************/


#bgfuss { background-color: #eff0f1;
		  margin-top: auto;
		  width: 100%;
		  height: 70px;
		  }

#fuss { width: 1000px; 
		margin-left: auto;
	    margin-right: auto;
	    box-sizing: border-box;
		font-size:1.0em;
		font-family: 'IBM Plex Sans';
        font-style: normal;
        font-weight: 500;
	   }
		
#fuss ul { list-style: none;
		   padding: 10px 0 0 0; 
		    }	

#fuss ul li { display: inline;
			  margin: 0 0 0 10px; 
			  } 
			  
			  
#fuss a { text-decoration: none; 
		  color: #666;
	      transition: color, 0.5s;
	    }			  
			  
#fuss a:hover { text-decoration: none; 
		        color: #333;
	            transition: color, 0.5s;
	            }			  
			  
			  
			  
@media (max-width: 1020px) {
	
	body { overflow-x:hidden; }

	.mobil { display: block; }
	.desktop { display: none; }
	
	#kopf { width:100%;	}
	
	h1, h3 { margin:40px 1% 1% 1%; }
	h3 { margin:1%; }
	
	#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:25px 5px 5px 5px;
				  }	
	
	#hnav	{ 	  display: block;
				  position: fixed;
				  right:-140px;
				  top:-10px;
				  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:10px;
			   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 { width: 100%; }
	
	
	.spaltelinks { width: 100%;
				   padding:  1% 3%;
				   box-sizing: border-box;
				   float: none;
				 }
	
	.spalterechts { width: 100%;
					float: none;
					padding:  3% 3%;
					box-sizing: border-box;
					}

	
	
	#bgfuss { background-color: #eff0f1;
			  margin-top: auto;
			  width: 100%;
			  height: auto;
			  }
	
	#fuss { width: 100%; }

	#fuss ul li { text-align: center;
				  display: block;
				  padding:  3% 3%;
				  box-sizing: border-box;
				  }

}