#header {
		container-type: inline-size;
		container-name: headerContainer;
		_width: 100%;
		background-color: #fff;
		position: relative;
		padding:0px 30px;
		position: sticky;
		top:0;
		z-index: 10;
		
		border-bottom:1px solid #eee;
	}
	#header .inside {
		display: grid;
		grid-template-columns: 180px 1fr 80px;
		margin:0px auto;
		min-height: 60px;
		max-width: var(--boxed-size);
		align-content: center;
		align-items: center;
	} /* inside end */
	#header .inside > a {
		align-self: center;
	}
	.logo-text,
	.logo-sign,
	.logo-sign img{
		align-self: center;
	}
	.logo_sign{
		padding: var(--logo_padding) 0px;
	}
	a:hover>span {
		/*background-color: var(--semmel-red);*/
	}
	span.bg_link {
		background-color: none;
		transition: all .3s ease-in-out;
		background-size: 0px ;
		background-position-x: 0;
	}
	#header span.bg_link:hover {
		background-color: var(--semmel-red);
		background-size: 2px;
	}
	
	.logo-box{
		display: flex;
		_z-index:9;
		position: relative;
	}
	.logo-text {
		overflow: hidden;
		width: calc(var(--logosize) * 2);
		height: var(--logosize);
	}
	
	.logo-text img{
		opacity: 0;
		animation-duration: .3s;
		  animation-name: logotext_anim;
		  animation-delay: 2.1s;
		  animation-timing-function: ease-in-out;
		  animation-direction: forward;
		  animation-range-end: contain;
		  animation-fill-mode: forwards;
		  animation-delay: 1s;
	}
	@keyframes logotext_anim {
	  from {
		transform: translateX(-110px);
		opacity: 0;
	  }
	  to {
		transform: translateX(0);
		opacity: 1;
		/* unset properties i.e. 'filter' will revert to default values */
	  }
	}
	
	
	/*  ----------   NAVI ----------*/
		
	.mod_navigation {
		background-color: none;
		display: grid;
		grid-template-columns: repeat(1, minmax(240px, 1fr));
		_position: sticky;
		z-index: 99;
	}
	.mod_navigation .level_1 {
		display: flex;
		list-style: none;
		gap:30px;
		_position: relative;
	}
	.mod_navigation .level_1 li {
		_margin-right: 15px;
		text-transform: uppercase;
		color: #111;
		_padding: 0px 5px 0px 5px;
		_position: relative;
	}

	
	
	.mod_navigation.desktop_menu .level_1 li a.level_1::before,  
	.mod_navigation.desktop_menu .level_1 li strong::before {
		content: "";
		width: 100%;
		height: 2px;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #000;
		transition: 0.5s transform ease;
		transform: scale3d(0,1,1);
		transform-origin: 0 50%;
		overflow: hidden;
	  }
	  .mod_navigation.desktop_menu ul.level_1 li.first  {
		position: relative;
	  }
	.mod_navigation.desktop_menu ul.level_1 li a.submenu.level_1::before {
		_position: relative;
	}
	    
	
	.mod_navigation.desktop_menu ul.level_1 li.redirect a.level_1:hover::before, 
	.mod_navigation.desktop_menu ul.level_1 li.first a.level_1:hover::before, 
	.mod_navigation.desktop_menu ul.level_1X li strong.active:hover::before {
		transform: scale3d(1,1,1);
	}
	


	.mod_navigation .level_1 li a {
		font-weight: bold;
	}
	.mod_navigation .level_2 li a, .mod_navigation .level_2 li strong {
		font-weight: 400;
		font-size: 16px;
		padding-top: 4px;
		display: block;
	}

	.mod_navigation.mobile_menu  .level_2 li a , .mod_navigation.mobile_menu .level_2 li strong {
		font-weight: 400 !important;
	}
	li.active.first,
	a.level_1.submenu.trail, strong.submenu.trail
	{
		color: var(--semmel-red);
	}

	.level_2 li.active {
		color: var(--semmel-red);
		font-weight: 400 !important;
		font-size: 16px;
	}

	/*
	ul.level_2 {
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	*/

	.level_2 li.active strong {
		font-weight: 400 !important;
	}

	.mod_navigation .level_1 li.active {
		/*position: static;*/
	}

	.mod_navigation .level_1 li.submenu {
		/*position: static;*/
	}

	.mod_navigation.mobile_menu .level_1 li.submenu {
		position: relative;
	}

	.mod_navigation .level_1 li.redirect {
		position: relative;
		padding-left: 20px;
	}

	.mod_navigation.mobile_menu .level_1 li.redirect {
		position: relative;
		padding-left: 27px;
	}

	.mod_navigation .level_2 li.redirect {
		position: relative;
		padding-left: 28px;
	}

	.mod_navigation.mobile_menu .level_2 li.redirect {
		position: relative;
		padding-left: 31px;
	}


	.mod_navigation .level_1 li.redirect a::after {
		width: 18px;
		height: 18px;
		content: '';
		background: url("../gui/open_in_new.svg");
		background-size: cover;
		display: block;
		position: absolute;
		top: 7px;
		left: 0px;
	}
	
	.mod_navigation.mobile_menu .level_1 li a
	.mod_navigation.mobile_menu .level_1 li strong {
		font-size: clamp(.9em , 3vw, 1.2em);
		line-height:1;
	}
	
	
	.mod_navigation.mobile_menu .level_1 li.redirect a::after {
		width: 19px;
		height: 19px;
		content: '';
		background: url("../gui/open_in_new.svg");
		background-size: cover;
		display: block;
		position: absolute;
		top: 1px;
		left: 3px;
	}


	.mod_navigation .level_2 li.redirect a::after {
		top: 10px;
		left: 4px;
	}


	.mod_navigation.mobile_menu .level_2 li.redirect a::after {
		top: 10px;
		left: 4px;
		width: 18px;
  		height: 18px;
	}

	.mod_navigation .level_1 li a {
		text-decoration: none;
		color: #111	;
	}
	
	
	.mod_navigation .level_1 li.submenu ul {
		_display:none;		
		top: 50px;
		visibility: hidden;
		list-style-type: none;
		margin-left: 0px;
		transition:all 0.3s;-webkit-transition:all 0.3s;
		opacity:0;
		height:100px;
		/*margin-top:-48px;*/
		overflow: hidden;

	}




	.mod_navigation.mobile_menu .level_1 li.submenu ul {

		transition:all 0.6s;-webkit-transition:all 0.6s;
		left: -500px;
		transition: left 0.3s;
		
	}

	.mod_navigation.desktop_menu .level_1 li.submenu ul {
		position: absolute;
	}	

	.mod_navigation.mobile_menu .level_1 li.submenu ul {
		position: relative;
	}	

	 
	 
	.mod_navigation .level_1 li.submenu.active ul  {
		visibility:visible;
		opacity: 1;
		display: block;
		background-color: #fff;
		top: 50px;
		padding-top: 20px;
		padding-bottom: 14px;
		margin-left: -10px;
  		padding-left: 15px;
		padding-right: 15px;
		height:auto;
		margin-top:0;
		overflow: hidden;
		min-width: 228px;
	}



	.mod_navigation.desktop_menu  .level_1 li.submenu.active ul  {
		-webkit-box-shadow: 4px 20px 18px 3px rgba(0,0,0,0.18); 
		box-shadow: 4px 20px 18px 3px rgba(0,0,0,0.18);
	}	

	.mod_navigation.mobile_menu .level_1 li.submenu.active ul
	{
		left: 0px;
		height: auto;
	}
	


	.mod_navigation.mobile_menu ul.level_1 li {
		border-bottom: #000 1px solid;
		margin-bottom: 10px;
		padding-bottom: 10px;
		_line-height:1;
	}

	.mod_navigation.mobile_menu ul.level_2 li {
		border-bottom: #000 1px solid;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	.mod_navigation.mobile_menu ul.level_2 li.last {
		border-bottom: none;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	 


	.mod_navigation.mobile_menu .level_1 li.submenu.active ul  {
		 position: relative;
		 top:0px;
	}

	.mod_navigation.mobile_menu .level_1 li.submenu.active ul .level_3 {
		display: none;
	}

	.mod_navigation.mobile_menu .level_1 li.submenu ul
	{
		height: 0px;
		width: 100%;
	}

	.mod_navigation.mobile_menu a.level_1 
	{
		width: auto;
		float: left;
	}

	.open_submenu_btn {
		float: left;
		display: block;
		/*padding-left: 25px !important;*/
		font-size: 30px;
		position: absolute;
		right: 0px;
		top: -7px;
		cursor: pointer;
	}

	.open_submenu_btn:hover, .mod_navigation.mobile_menu a:hover {
		color: var(--semmel-red);
	}

	.mod_navigation .level_1 li.submenu ul li
	{
		transition:height 0.3s;-webkit-transition:height 0.3s;
		height: 0px;
		
	}
	.mod_navigation .level_1 li.submenu.active ul li
	{
		height: 40px;
		/*min-height: 40px;
  		height: auto;
		background: #f5f5f5;*/
	}

	.mod_navigation.mobile_menu .level_1 li.submenu.active ul li
	{
		min-height: 30px;
  		height: auto;
	}

	.mod_navigation .level_1 li.submenu.active ul li:hover {
		/*background: #e7e7e7;*/
	}

	.mod_navigation .level_1 li strong {
		font-weight: bold;
	}
	
	.level_2 li strong {
		font-weight: 400;
	} 


	.mod_navigation .level_1 li.submenu.active a.submenu {
		/*color: red;*/
	}

	.mod_navigation.mobile_menu  .level_1 li.submenu.active a.submenu {
		color: #000;
	}	

	.mod_navigation .level_1 li.submenu.active .level_2 a.submenu {
		color: #000;
	}
	.mod_navigation.mobile_menu .level_1 li a.trail, .mod_navigation.mobile_menu .level_1 li.submenu.active a.trail {
		color: var(--semmel-red);
	}
	

	.mod_navigation .level_1 li.submenu.active ul li a:hover, .mod_navigation .level_1 li.submenu.active .level_2 a.submenu:hover {
		color: red;
	}

/*	
	.mod_navigation .level_1 li.submenu.trail a.submenu
	{
		font-weight: bolder;
	}
*/

	.mod_navigation .level_2 li {
		border-bottom: #000 1px solid;
	}

	.mod_navigation .level_2 li.last {
		border-bottom:none;
	}

	

 



	.mod_navigation .level_1 li.submenu:hover ul:before {
			content: '';
			 position: absolute;
			 width: 20px;
			 height: 20px;
			 display: block;
			 bottom: -30px;
			 left: -15px;
			 transform: rotate(45deg) scale(0.5);
			 border: 3px solid orange;
			 border-color: orange transparent transparent orange;
			 background: linear-gradient(45deg, transparent -50%, transparent 45%, orange 45%, orange 55%, transparent 55%, transparent 125%);
			 background-repeat: no-repeat;
			 animation: clipin 0.4s ease-in 1 forwards;
			 animation-delay: 0.2s;
			 -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
			 clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
	}
	.mod_navigation .level_1 li.submenu:hover ul li{
		position: relative;
	}
	
	.mod_navigation.mobile_menu ul {
		gap:0px;
	}
	
	.mod_navigation.mobile_menu ul, .mod_navigation.mobile_menu ul li {
		max-width: 600px;
		
	} 

	.mod_navigation.mobile_menu a.level_1   {
		_font-size: 21px;
		line-height: 1em;
		_padding-right: 25px;
	}

	.open_submenu_btn {
		transition: transform 0.3s;
		font-size: 40px;
	}
	
	.mod_navigation.mobile_menu li.active .open_submenu_btn  {
		transform: rotate(45deg);
	}
	
	/*  ----------   Mobile NAVI ----------*/
	
	.base-icon:after{
		content: '';
		/*
		width: var(--logosize);
		height: var(--logosize);
		*/
		width: auto;
		height: 45px;

		background-repeat: no-repeat;
		/* background-position: right center; */
		transition: all .3s ease;
		position: relative;
		display: flex;
		background-color: black;
		mask-repeat: no-repeat;		
	}
	
	.custom_nav {
		position: fixed;
		top:0;
		_left:-300%;
		__background-color:#fff;
		position: relative;
		top: 0;
	}
	.nav-toggler {
		position: absolute;
		z-index:999;
		_padding-left: var(--logosize);
		_padding-top:5px; 
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
	}
	
	.nav-toggler__button {
		width: var(--logosize);
		height: var(--logosize);
		_background-color:red;
		position: absolute;
		overflow: hidden;
	}
	
	
	.custom_nav .hamburger-icon:after {
			opacity:1;
			transition: all .3s ease;
			left:0px;
	}
	.custom_nav .close-icon:after {
			opacity:0;
			transition: all .3s ease;
			left: -100px;
	}
	.custom_nav.nav--mobile--active .hamburger-icon:after {
			opacity:0;
			transition: all .3s ease;
			left: 100px;
	}
	.custom_nav.nav--mobile--active .close-icon:after {
			opacity:1;
			transition: all .3s ease;
			left:0px;
	}
	
	.mobile_overlay {
		background-color:#000000;
		opacity:.8;
		width:100vw;
		height:100vh;
		position: fixed;
		z-index:-10;
		left:-300%;
		transition: all .7s ease-in-out;
	}
	.custom_nav_content {
		top: 60px;
		background-color:#fff;
		z-index:10;	
		padding:30px;
		border-radius: 0px 0px 60px 0px;
		width: 75vw;
		height:75vh;
		overflow-y: scroll;
		position: fixed;
		left:-300%;
		transition: all .3s ease-in-out .5s;
		padding-top: calc(var(--logosize)*1.5);
		max-width: 800px;
	}
	.custom_nav_content .level_1 {
		display: flex;
		list-style: none;
		flex-direction: column;
		width:100%;
	}
	.custom_nav_content ul{
		padding: 0;
		margin:0;
	}
	.custom_nav_content .level_1 li > *,
	.custom_nav_content strong.active {
		text-transform: uppercase;	
		/*font-size: clamp(1.4rem, 5vw, 5em);*/
		margin:0;
		padding:0;
		/*line-height:1em!important;*/
		font-weight:800!important;	
	}
	.custom_nav_content .level_1 li.active {
		color:var(--semmel-red);
		font-weight:700!important;	
	}
	
	.custom_nav .nav--mobile{
		left:-300%;
	}
	.custom_nav.nav--mobile.nav--mobile--active .custom_nav_content,
	.custom_nav.nav--mobile.nav--mobile--active .mobile_overlay{
		left:0px;
		top:60px;
		padding-top: 30px;
	}
	
	.custom_nav_content::-webkit-scrollbar {
		display: none;
	  }

	
	@container headerContainer ( min-width: 200px ) {
		.inside {
			grid-template-columns: 100px;
		}
		#header .inside {
			grid-template-columns: 50px 1fr 90px;
		}
		.header-alerts {
			gap:10px;
		}
		.inside > a {
			align-self: center;
		}
		.logo-text {
			display:none;
		}
		.logo-sign,.logo-sign img{
			height:var(--logosize)!important;
			aspect-ratio:1/1;
			z-index: 99;
		}
		.mod_navigation.desktop_menu{
			display: none;
		}
		.custom_nav{
			_left:0px;
			width: 60px;
			height: 60px;
		}
	}
	@container headerContainer ( min-width: 600px ) {
		.inside {
			grid-template-columns: 100px 1fr;
		}
		
		.logo-sign,.logo-sign img{
			height:var(--logosize)!important;
			aspect-ratio:1/1;
		}
	}
	@container headerContainer ( min-width: 1250px ) {
		.mod_navigation.desktop_menu{
			display: flex;
		}
		.custom_nav{
			left:-300%;
			position: absolute;
		}
		.logo-text {
			display:flex;
		}
		#header .inside {
			grid-template-columns: 180px 1fr 80px;
		}
	}