.page-header {
	position: relative;
}
.header-navigation {
	_z-index: 99;
	_display: block;
	_position: sticky;
	_top: 0;
	_z-index: 9999999999;
	
}

.header-navigation {
	_padding: var(--dynamicBorder);
	container-type: inline-size;
	container-name: navi_menue;
	position: relative;
	
}
.main-navigation-wrapper{
	display: flex;
	width:100%;
	gap: 2vw;
	_max-width: var(--max_width);
	justify-content: flex-end;
	align-items: center;
	max-width: 1920px;
		margin: 0px auto;
		border: 0;
		_position: fixed;
		top:0;
	
}
.main-navigation-wrapper {
	position: sticky;
	_margin-top:50px;
	offset-position: 0px;
	_z-index:2;
	_margin-top:var(--page_nav_height);
	_top:var(--page_nav_height)-50px;
	@supports (animation-timeline: view()) {
		top: 0rem;
		backdrop-filter: blur(0.35rem);
		animation: stickyMainNav linear forwards;
		animation-timeline: view();
		animation-range-start: calc(100vh + 5vh);
		animation-range-end: calc(
		  100vh + 5vh + 200px
		);
	  }
}

.logo {
/*
	position: absolute;
	top: 25%;
	bottom: 25%;
	left: 2.6666em;
	left: calc(2.6666em + var(--safe-area-left));
	margin: 0;
	font-size: inherit;
	*/

		align-items: center;
		padding: 0;

	display: flex;
	align-content: center;
}

.logo a {
	display: block;
	height: 100%;
	display: flex;
	align-items: center;
}
.main-navigation-wrapper .logo img {
	_height: auto;
}
.main-navigation-wrapper .logo img {
	display: block;
	width: clamp(120px, 15vw, 240px);
	height: auto;
}
/*

@media screen and (max-width: 900px) {
	.logo {
		position: static;
		float: left;
		margin-left: 0;
		margin-left: 0);
		padding-top: 0;
		padding-bottom: 0;
	}
}
*/
.main-navigation {
  float: right;
  padding-right: 0;
  position: relative;
  right: 0px;
  margin:0;
}

.main-navigation > ul {
	display: flex;
	flex-direction: row;
	gap: clamp(.5vw, .5vw, 3vw);
}

.main-navigation > ul > li {
	margin:0px;
	padding:0px .7vw;
}


.main-navigation > ul > li > a, .main-navigation > ul > li > strong, .main-navigation > ul > li > span.active, .main-navigation > ul > li > span.trail, .main-navigation > ul > li > span.forward {
	z-index: 1;
	position: relative;
	padding: 0 ; 
	border-width: 0;
}

.main-navigation > ul > li > a.active:not(.highlight):after, .main-navigation > ul > li > a.trail:not(.highlight):after, .main-navigation > ul > li > a.forward:not(.highlight):after, .main-navigation > ul > li > strong.active:not(.highlight):after, .main-navigation > ul > li > strong.trail:not(.highlight):after, .main-navigation > ul > li > strong.forward:not(.highlight):after, .main-navigation > ul > li > span.active:not(.highlight):after, .main-navigation > ul > li > span.trail:not(.highlight):after, .main-navigation > ul > li > span.forward:not(.highlight):after {
	content: "";
	position: absolute;
	bottom: -0.92308em;
	left: 50%;
	display: block;
	width: 0.84615em;
	height: 0.84615em;
	margin-left: -0.61538em;
	border: solid #dcdcdc;
	border-width: 0 1px 1px 0;
	background: #ffffff;
	transform: rotate(45deg);
	transform-origin: 0 100%;
	display: none;
}

.submenu.sibling a:after {
	content: "";
	position: absolute;
	top: -0.23077em;
	right: 0;
	bottom: -0.92308em;
	left: 0;
	width: auto;
	height: auto;
	margin-left: 0;
	border: 0;
	border-top: 4px solid red;
	border-radius: 2px 2px 0 0;
	box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1), inset 1px 0 #dcdcdc, inset -1px 0 #dcdcdc, inset 0 -10px #ffffff;
	background: none;
	transform: none;
	display:none;
}
.main-navigation > ul > li.submenu:hover > a:after, .main-navigation > ul > li.submenu:hover > strong:after, .main-navigation > ul > li.submenu:hover > span.active:after, .main-navigation > ul > li.submenu:hover > span.trail:after, .main-navigation > ul > li.submenu:hover > span.forward:after {
	content: "";
	position: absolute;
	top: -0.23077em;
	right: 0;
	bottom: -0.92308em;
	left: 0;
	width: auto;
	height: auto;
	margin-left: 0;
	border: 0;
	border-top: 0px solid #1f4d7e;
	border-radius: 2px 2px 0 0;
	box-shadow: none;
	background: none;
	transform: none;
}
.main-navigation > ul > li > a, .main-navigation > ul > li > strong, .main-navigation > ul > li > span.active, .main-navigation > ul > li > span.trail, .main-navigation > ul > li > span.forward {

	margin: 20px 0px;
}
.main-navigation > ul > li > a, .main-navigation > ul > li > strong, .main-navigation > ul > li > span.active, .main-navigation > ul > li > span.trail, .main-navigation > ul > li > span.forward {
	font-weight: 400;
	letter-spacing: 0.05em;
	color: #242424;
	text-transform: uppercase;
}

.mod_navigation {
	text-transform:uppercase;
}

@container navi_menue (min-width: 200px) {
	.logo {
	
		float: right;
		margin-left: 0;
		margin-left: 0);
		padding-top: 0;
		padding-bottom: 0;
		padding-right:20px;
	}
	.main-navigation ul{
		gap:.1rem!important;
	}
	.main-navigation > ul > li {
		margin: 0px;
		padding: 0px .5vw;
	}
	.main-navigation > ul > li a,
	.main-navigation > ul > li a span,
	.main-navigation > ul > li strong{
		font-size: clamp(0.75rem, 2vw,1.1rem)!important;
		line-height:1!important;
	}
	.main-navigation > ul > li a,
	.main-navigation > ul > li strong{
		_margin:20px 0!important;
	}
	
	.header-navigation  .main-navigation-wrapper {
		_justify-content: space-between;
	}
}
@container navi_menue (min-width: 900px) {
	.logo {
		float: left;
		margin-left: 0;
		margin-left: 0);
		padding-top: 0;
		padding-bottom: 0;
		padding-right:0;
	}
	.main-navigation ul{
		gap:clamp(.5vw, .5vw, 3vw);
		transition: all .3s ease-in-out;
	}
	
}

@keyframes stickyMainNav {
	0%,
	100% {
	  --_headerWidth: fit-content;
	  --_logoDisplay: var(--_logoAfterAnimation);
	}
  
	100% {
	  top: 80px;
	  }
  }

/* ---------------------------- slider ----------------------- */

.slider_content {
	margin:0px auto;
	display: flex;
	flex-direction: column;
	justify-items: flex-end;
	justify-content: flex-end;
	align-items: flex-end;
	max-width: var(--max_width);
	_width:80%;
	position: relative;
	padding:20% 0;
}


.slider_content .centered-wrapper-inner {
	padding-left: clamp(35%, 50vw, 60%);
	_width:75%;
}

.slider_content .centered-wrapper-inner .slider_logo {
	display: flex;
}
.slider_content .centered-wrapper-inner .slider_logo .image_container {
	width: clamp(160px, 30vw, 360px);
}
.slider_content .centered-wrapper-inner .slider_titel {
	margin:3vh 0;
	display: flex;
	text-align: left;
	font-size: clamp(1.4em, 5vw, 5em);
	background-color:#00000070;
	padding:2vh 1vw;
}