header{
	height: 120px;
	height: var(--headerHeight);
	max-height: var(--headerHeight);
	width: 100%;
	position: relative;
	position: var(--headerDesktopFixed);
	z-index: 300;
	background-color: #fff;
	background-color: var(--headerBGColor);
	transition: .7s;
}

.headerFix{
	background-color: transparent;
	background-color: var(--headerBGColor);
	-webkit-box-shadow:  0px 0px 4px 0px rgba(100,100,100,0.3);
	-moz-box-shadow:  0px 0px 4px 0px rgba(100,100,100,0.3);
	box-shadow:  0px 0px 4px 0px rgba(100,100,100,0.3); 
	
}


/* Big Logo Position */
.custom-logo-link{
	margin-top: 15px;
	display: inline-block;
	transition: .7s;
	float: left;
	
}

.custom-logo{
	max-height: inherit;
	transition: .7s;
	width: auto;
	transition: .7s;
	height: 157px;
	max-height: 157px;
}



.headerUp{
	max-height: 150px;
}




.headerUp .custom-logo{
	max-height: 100px;
}

.headerUp .row nav {
  top: 29px;

}



/*die Satzspiegelbreite der Header und Footer*/
header .row{	max-width: var(--HeaderRowWidth); }
footer .row{	max-width: 1500px; }

@media screen and (max-width: 1360px) {
 header .row{
    width: calc(100% - 60px ) ; /* Hier wird der Randabstand zum Browser  erzeugt */
    margin: 0 30px;

  }
}


header + .main{	margin-top: 140px; margin-top: var(--pageStartAt); }










/*###########################################################################*/
/*############################## Navi Desktop ###############################*/
/*###########################################################################*/


.iconNav{
	float: right;
	width: 130px;
	height: 50px;
	margin-top: 40px;
	
}

.iconNav .dl{
	display: block;
	width: 38px;
	height: 38px;
	background-image: url('../layout/dl.svg');
/*	background-image: url('../layout/dlw.svg');*/
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	float: left;
	cursor: pointer;
	margin-left: 15px;
}

.iconNav .s{
	position: relative;
/*	display: none;*/
}



.iconNav .si{
	display: block;
	width: 59px;
	height: 53px;
	background-image: url('../layout/s.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	float: left;
	margin-left: 15px;
	cursor: pointer;

}


.iconNav .sf{
	position: absolute;
	top:48px;
	right: 0px;
	background-color: #000;
	display: none;
	width: 250px;
	height: 35px;
	margin-left: 15px;
	cursor: pointer;
	border: 2px solid #323232;
	border-bottom: 3px solid #323232;
	
}



.iconNav .s:hover .sf{
	display: block;

}

.iconNav .sf input{
	position: absolute;
	width: 100%;
	left:0px;
	top:0px;
	height: 33px;
	line-height: 45px;
	padding: 0 10px;
	background-color: #fefefe;

	font-family: noto, sans-serif;
	text-transform: uppercase;
	font-size: var(--naviFontSize);
	letter-spacing: 0.05em;
}



.iconNav input:placeholder,
.iconNav input:-webkit-input-placeholder,
.iconNav input:-ms-input-placeholder{
  /*color: #ff00ff;*/
}


/*#navi{	transition: margin 0s; }*/

header .row nav{
	position: relative;
	top: 0px;
	float: left;
	top: 69px;
	margin-left: 80px;
	width:calc(100% - 270px);
	

}




header .row nav ul{
	float: right;
	float: left;
	width: auto;
	height: auto;
	list-style: none;
	z-index: 1250;
	line-height: 115px;
}

header .row nav ul li{
	position: relative;
	margin-left: 35px;
	float: left;
	
}





header .row nav ul li a{
	font-family: var(--naviFont), sans-serif;
	text-transform: uppercase;
	font-size: var(--naviFontSize);
	letter-spacing: 0.05em;
	display: block;
	display: inline-block;
	padding: 7px ;
	height: inherit;
	text-decoration: none;
	color: #000;
	transition: border .4s;
	
}




header .row ul li a:hover, 
header .row ul .current-menu-item>a,
header .row ul .current-menu-parent>a,
header .row ul a.aktiv{
color: #96B13C;
}




/* SUB NAVI  */


header .row nav ul.sub-menu{
	display: none;
/*	margin-top: 50px;*/
	position: absolute;	
/*	background-color: #fff;*/
	min-width: 400px;
	line-height: 1.5em;
	margin-left: -60px;
	-webkit-box-shadow:  0px 0px 3px 0px #333333;
	-moz-box-shadow:  0px 0px 3px 0px #333333;
	box-shadow:  0px 0px 3px 0px #333333; 
}

header .row nav .menu-item-has-children:hover ul.sub-menu{
	display: block;
}


/* Der Umschalter fuer die Untermenues wird per JS erzeugt und
   ist nur in der mobilen Navigation sichtbar. */
#navi .subToggle{
	display: none;
}

/* Beschriftung nur fuer Screenreader */
.th3-sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}



header .row nav ul.sub-menu:before{
	position: absolute;
	top:-26px;
	left: -4px;
	content: '';
	background-image: url('../layout/naviPfeil.svg');
	-webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
  	filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
	display: block;
	width: 100%;
	height: 30px;
	background-color: transparent;
	background-repeat: no-repeat;
}






header .row nav ul.sub-menu li{
	margin-left: 0;
	background-color: #fff;
	display: block;
	padding: 10px 30px 10px 30px;
	width: 100%;
	
}




header .row nav ul.sub-menu li:first-child{
	padding: 20px 30px 10px 30px;
	
}






/*###########################################################################*/
/*########################### Navi Desktop Ende #############################*/
/*###########################################################################*/







/*####################  BURGER START  ########################*/
#burger{ height: auto; display: none; position: absolute; right: 30px; top:53px; top: var(--burgerTop); z-index: 1000; cursor: pointer; transition: .7s;  }
.lines, .lines:before, .lines:after { background: #000000;  }
.lines-button.x.close .lines:before, .lines-button.x.close .lines:after{background: #000000; }
.lines-button {  border: none; background: none;  position: relative; margin: 0 auto;   }
.lines-button span {  display: block; }
.lines-button { padding: 1em 0 1em 0.2em ; transition: .3s; cursor: pointer; user-select: none; border-radius: 0.57143em; }
.lines { display: inline-block; width: 1.8em; height: 2px;   transition: 0.3s; position: relative; }
.lines:before, .lines:after {display: inline-block;height: 2px; transition: 0.3s;position: absolute;left: 0;content: '';-webkit-transform-origin: 2px center;transform-origin: 2px center;}
.lines:before { top: 0.7em; width: 1.8em;}
.lines:after { top: -0.7em; width: 1.8em;}

.lines-button.close { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8);}
.lines-button.x.close .lines { background: transparent;}
.lines-button.x.close .lines:before, .lines-button.x.close .lines:after { background: #000000; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;  top: 0;  width: 2.6em;}
header.stickyAktiv #burger .lines-button.x.close .lines:before, header.stickyAktiv #burger .lines-button.x.close .lines:after { background: #000000;  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;  top: 0;  width: 2.6em;}
.lines-button.x.close .lines:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg);}
.lines-button.x.close .lines:after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg);}
/*####################  BURGER ENDE   ###################### */






/*#############################################################################*/
/*############################ RESPONSIVE NAVI ################################*/
/*#############################################################################*/

@media only screen and (max-width: 1350px) {


	header{ position: var(--headerMobilFixed);	height: 100px;	height: var(--headerMobileHeight);}
	header + .main { margin-top: 100px; margin-top: var(--pageStartMobileAt); 
	 }

	#burger{ height: auto; display: block; }
	#burger{ top:33px; top: var(--burgerMobileTop);  }


	#navi{
		position: fixed;
		background-color: #fff;
		background-color: #96B13C;
		background-image: url('../layout/navbg.png');
		background-size: cover;
		top:140px;
		top:var(--headerMobileHeight);
		right:0;
		height: calc(100vh - var(--headerMobileHeight) );
		width: 500px;
		padding-top: 90px;
		padding-top: 20px;
		margin-right: -540px;
		-moz-opacity:0;
		opacity: 0;
		overflow-x: hidden;
		transition: margin 1s ease-in-out;
		z-index: 500;
		visibility: hidden;
	}




	#navi.aktiv{
		visibility: visible;
		/*display: block;*/
	}


.iconNav .s{
	position: relative;
	display: none;
}




	#navi.showNav{
		margin-right: -100px;
		-moz-opacity:1;
		opacity: 1;
	}

	header .row nav ul.sub-menu::before {
		display: none;
	}

	/* Mobil klappen die Untermenues ueber den Umschalter auf,
	   nicht mehr per :hover. Der Hauptlink bleibt ein normaler Link. */
	header .row nav ul.sub-menu,
	header .row nav .menu-item-has-children:hover ul.sub-menu{
		display: none;
		position: relative;
		background-color: rgba(255, 255, 255, 0.4);
		/* Die Masse des Desktop-Dropdowns zuruecksetzen, sonst wird
		   die Liste breiter als die Navigationsflaeche. */
		min-width: 0;
		margin-left: 0;
		box-shadow: none;
	}

	#navi .menu-item-has-children.open>ul.sub-menu{
		display: block;
	}

	/* Die Navigationsflaeche ist 500px breit und ragt im geoeffneten Zustand
	   100px ueber den rechten Bildschirmrand hinaus (#navi.showNav).
	   Die Liste wird darum rechts eingerueckt, damit der Umschalter
	   auf dem Bildschirm bleibt:
	   100px Ueberhang + 35px margin-left der Listenpunkte + 20px Luft. */
	#navi ul.nav-menu{
		width: 100%;
		padding-right: calc(100px + 35px + 20px);
	}

	/* Lange Unterpunkte (z.B. "Veranstaltungskalender") muessen in die
	   Navigationsflaeche passen - die Innenabstaende des Desktop-Dropdowns
	   sind dafuer zu gross. Der Einzug kommt vom Listenpunkt, der Link
	   fuellt die Zeile als Tippflaeche. */
	#navi ul.sub-menu li,
	#navi ul.sub-menu li:first-child{
		padding: 10px 20px 10px 30px;
	}

	#navi ul li ul.sub-menu li>a{
		display: block;
		padding-left: 0;
		padding-right: 0;
	}

	/* Hauptlink und Umschalter liegen in einer Zeile, das Untermenue darunter */
	#navi ul li.menu-item-has-children{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	#navi ul li.menu-item-has-children>a{
		flex: 1 1 auto;
	}

	#navi ul li.menu-item-has-children>ul.sub-menu{
		flex: 1 1 100%;
		width: 100%;
		/* Die 20px Luft rechts neben dem Umschalter wieder ausgleichen,
		   damit die Flaeche des Untermenues bis an den Bildschirmrand reicht. */
		margin-right: -20px;
	}

	#navi .subToggle{
		display: block;
		position: relative;
		flex: 0 0 70px;
		min-height: 64px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}

	#navi .subToggle::before{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 12px;
		height: 12px;
		margin: -11px 0 0 -6px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		transition: transform .3s, border-color .3s;
	}

	#navi .menu-item-has-children.open>.subToggle::before{
		margin-top: -5px;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}

	#navi .subToggle:hover::before,
	#navi .subToggle:focus-visible::before{
		border-color: #000;
	}



	#navi ul{
		list-style: none;
		line-height: 30px;
	}
	
	#navi ul li{
		display: block;	
		width: 100%;
		
	}
	
	#navi ul li a{
		display: inline-block;
		position: relative;
		font-family: var(--naviFont), sans-serif;
		font-size: var(--naviFontSizeMobil);
		color: #fff;
/*		color: #000;*/
		text-decoration: none;
		padding: 20px 50px 20px 50px;
		transition: color 0.6s ease;
	}
		
	#navi ul li ul.sub-menu li>a{
		color: #898998;
	}
			
	#navi ul li ul.sub-menu .current_page_item a,
	#navi ul li ul.sub-menu li a:hover{
		color: #000!important;

	}
	
	#navi ul li a:hover{
color: #96B13C;
color: #000;
	}

	#navi ul li a::before {
	    content: "";
	    position: absolute;
	    width: 0%;
	    height: 2px;
	    bottom: 0;
	    left: 0;
	    background-color: #96B13C;
	    -webkit-transition: all 0.3s ease-in-out 0s;
	    transition: all 0.3s ease-in-out 0s;
	}
	
	#navi ul li a:hover::before {
/*	    visibility: visible;
	    -webkit-transform: scaleX(1);
	    transform: scaleX(1);
	    width: 100%;*/
	}


	#navi .current-menu-item a::before{
/*		    visibility: visible;
	    -webkit-transform: scaleX(1);
	    transform: scaleX(1);
	    width: 100%;
	    background-color: #96B13C;*/
	}
	
	#navi .current-menu-item a{
/*		color: #96B13C;*/
		color: #000;
	}



.iconNav .dl{
/*	background-image: url('../layout/dl.svg');*/
	background-image: url('../layout/dlw.svg');

}



/*

	.menu-item-has-children>a:after{
		content: '';
		display: block;
		float: right;
		width: 30px;
		height: 30px;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%; 
		border: 2px solid #fff;
		background-image: url('../layout/down.svg');
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: center;
		transition: .7s;
	}


	.menu-item-has-children>a:after:hover{
		border: 2px solid #fff;
	}

	.menu-item-has-children>a:hover{
		color: #96B13C;
	}
	*/

	.sub-menu{
		/*display: none;*/
	}

		.custom-logo-link{
		margin-top: 45px;
		display: inline-block;
		transition: .7s;
	}


	.iconNav {
  float: left;
  width: 130px;
  height: 50px;
  margin-top: 20px;
  margin-left: 70px;
}

	.custom-logo{
		max-height: 120px;
		max-height: var(--headerMobileHeight);
		transition: .7s;
/*		width: 240px;*/
		height: 80px;
	}

	.custom-logo-link{	margin-top: 15px;	}
/*	.custom-logo{	width: 200px;		}*/


}


@media screen and (max-width: 764px) {








}