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


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

/* 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 { color: #000;
	  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 { color: #000;
  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: #FFF;
	   -webkit-text-size-adjust: none;
	   font-family: 'Hind', Arial, Helvetica, sans-serif;
	   }

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: #666;
	}

a:hover {color: #000; }



/************* Kopf **************/
#bgkopf { width:100%;
		  background-color: #eff0f1;
		  /*height: 150px;*/ 
		  }

#kopf { width:1000px; 
		margin-left: auto;
		margin-right: auto;
		/*background-color: #2ff0f1;*/ 
		}

#logo { width:70%; 
		float:left;
		/*background-color: #c00;*/ 
		text-align: center;
		float: left;
		}

#logo img { width: 60px;
		    height: auto;
			margin: 10px 0 -10px 0;
			}

#logo h1 { font-size: 1.8em; }

#suchbox {  margin-top:30px;
		    width:30%;
			float:left;
		   }
	
.sucheingabe {  width: 8em;
	            font-size: 1em;
	            background-color: #fff;
	            border: solid 1px #eff0f1;
				}

.lupe { width: 30px;
		margin-left:10px;
		 }

.sucheingabe:focus { background-color: rgba(0, 159, 227, .2); }	










/************* Hauptnavigation online  height:50px;**************/

#bgnav	{ width: 100%;
	  background-color: #eff0f1;
	}

#menuwrapper { width: 1000px;
		       margin-left: auto;
	           margin-right: auto;
			   /*background-color: #6f95f1;*/
		      }
			  
#primary-nav { font-size: 1.2em; }


#primary-nav a { 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 */
	         }
			 
#primary-nav a.menuactive { color: #b3000e; }
#primary-nav ul li a.menuactive { color: #fff; }			 
			 
			 

			
#mnav { display:none; }	

#primary-nav { list-style: none;
		       padding: 0;
		       margin: 0;
        		}

#primary-nav li { position: relative;
  		          margin: 0;
                  padding: 10px;
		          display: inline;
				  float: left;
                }

#primary-nav ul{ position: absolute;
				 width: 220px;
			     margin-top: 10px;
				 padding:0;
			     z-index: 500;
			     display: none;
				 background-color: #b3000e;
				}

#primary-nav ul li { font-size:0.9em;
			         /* margin-left:-11px; Versatz Untermenü*/ 
			         padding: 10px 5px  3px 15px;
  			         border-bottom:solid 1px #bbb;
					 display: block;
					 float:none;
				   }

#primary-nav ul li a { color: #ddd; }

#primary-nav ul li a:hover { color: #fff; }

#primary-nav li:hover ul  { display: block;}







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

#inhalt { width: 1000px; 
		  margin-left: auto;
	      margin-right: auto;
		  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 */
		   line-height: 150%;
		}

h3 { color: #b3000e;
	 font-size: 1.5em;
	 }

h6 { color: #666;
	 font-size: 1em;
	 font-style: italic;
	 line-height: 150%;
	 }


.portrait img { max-width: 150px;
		        height:auto;
			   }




#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: 70%;
			   padding:  1% 3%;
			   box-sizing: border-box;
			   float: left;
			 }

#spalterechts { width: 30%;
			    float: right;
			    padding:  3% 0%;
			    box-sizing: border-box;
				}
				
#spalterechts img { max-width:300px;
					height: auto;
					}				
				



/* 2025 */
#quicklink { 
	     padding: 10px 10px 10px 30px;
             line-height: 280%;
             background: linear-gradient(135deg, transparent 20px, #b3000e 0) top left; 
            }

#quicklink a { color: #fff; 
		}
















/************* 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;
        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 */
	   }
		
#fuss ul { list-style: none;
		   padding: 10px 0 0 0; 
		    }	

#fuss ul li { display: inline;
			  margin: 0 0 0 10px; 
			  } 
			  
			  
			  
@media (max-width: 1020px) {
	
	body { overflow-x:hidden; }

	.mobil { display: block; }
	.desktop { display: none; }
	
	#kopf { width:100%;	}
	
	#logo { width: 100%; 
		    float:none;
		   /*background-color: #2cf0f1;*/ 
		}

	#logo img { width: 60px;
				height: auto;
				margin: 10px 0 -10px 0;
				}

	#logo h1 { font-size: 1.8em; }



	#suchbox { width:50%;
			   height: 50px;
			   margin-left: auto;
			   margin-right: auto;
			   /*text-align: center;background-color: #2cf0f1;*/
			   float: none;
		       }
		
	#mobilnav { display:block;
			    position: absolute;
			    top: 10px;
			    right: 10px;
			    width: 30px;
				height:21px;
				padding: 0px;
				background-image:url(../img/men-icon.gif);
				background-position: -30px 0;
				background-repeat: no-repeat;
				/*background-color:#FFF*/
				transition: background-position 0.5s;
				z-index:40;
					  }	
	
	#menuwrapper	{ display: block;
			          position: absolute;
			          right:-320px;
			  top:60px;
			  width: 300px;
			  height: auto;
			  z-index:50;
			  padding:10px;
			  background-color:#ccc;
					  /*text-transform: uppercase;	   
					  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;
									 
					}		
		
		
	#menuwrapper ul { margin:0;
			          padding:0px;
			          background-color:#CCC;
			          list-style:none;
				     }
		
	#menuwrapper ul li { display:block;
				        padding-bottom: 20px;
				       /*border-bottom: 1px solid #ddd;*/
				       width: 300px;
					}
		
	#menuwrapper ul li:hover ul { /*margin: 20px 0 0 0;
				  		   padding:5px 0 10px 20px;*/
							}	
	
	#menuwrapper ul ul { display: block;
				         position:relative;
				         padding:20px;/**/
 			            }	
	
	#menuwrapper ul li ul li { display:block;
					    /*border-bottom: 1px solid #ccc;*/ 
						margin-left: 0px;
						width: 290px;
						background-color: #b3000e;
							 }
							 
	#primary-nav li { position: relative;
					  margin: 0;
					  padding: 20px;
					  display: inline;
					  float: left;
					  
					}		
		
		
		
		
		
		
		
							 
							 
							 
							 
	
	#inhalt { width: 100%; }
	
	#logo h1 { font-size: 1.5em; }
	
	h3 { color: #b3000e;
		 font-size: 1.1em;
		 }
	
	h6 { color: #666;
		 font-size: 0.7em;
		 line-height: 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: 1000px; 
			margin-left: auto;
			margin-right: auto;
			box-sizing: border-box;	*/
	
	
	
	
	#fuss { width: 100%; }

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










}