.above_header_element {
	background: #6baee6;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 44px;
}

.above_header_element * {
	color: #12335b;
}

.above_header_element .mM_lang_switcher_active svg {
	fill: #12335b;
}

.above_header_element .mM_container {
	height: 100%;
}

.above_header_element .above_header_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.above_header_element .above_header_logo_container svg {
	width: 182px;
	fill: #12335b;
}

.above_header_element .above_header_right {
	display: flex;
	gap: 0 95px;
}

.above_header_element .above_header_right .menu {
	display: flex;
	gap: 0 35px;
}

header{
	position: fixed;
    width: 100%;
	background: #004f9f;
    z-index: 999;
	top: 44px;
	left: 0;
	border-bottom: 1px solid transparent;
}

.header_main_wrapper {
	position: relative;
	z-index: 1;
}

ul{
	list-style:none;
	margin:0;
	padding:0;
}

.header_container_menu ul{
	display:flex;
}

.menu-header-nav-container ul.menu > li {
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.header_container_menu ul li:not(:last-child){
	margin-right: 60px;
}

.header_container_menu ul.menu > li > a {
	color: #ffffff;
	display: flex;
	align-items: center;
	height: 100%;
	position: relative;
	
	transition: text-shadow .4s;
}

.header_container_menu ul.menu > li:has(li.current-menu-item) > a,
.header_container_menu ul.menu > li.current-page-ancestor > a,
.header_container_menu ul.menu > li.current-menu-item > a,
.header_container_menu ul.menu > li > a:hover {
	text-shadow: 0 0 1px #fff;
}

.header_container_menu ul.menu > li > a:after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: 4px;
	background-color: #ffdf01;
	
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-mstransform-origin: center;
	-otransform-origin: center;
	transform-origin: center;
	
	-webkit-transform: scaleX(0);
	-moz-transform: scaleX(0);
	-ms-transform: scaleX(0);
	-o-transform: scaleX(0);
	transform: scaleX(0);
	
	transition: transform .4s .0s;
}

.header_container_menu ul.menu > li:has(li.current-menu-item) > a:after,
.header_container_menu ul.menu > li.current-page-ancestor > a:after,
.header_container_menu ul.menu > li.current-menu-item > a:after,
.header_container_menu ul.menu > li > a:hover:after,
.header_container_menu ul.menu > li.submenOpen > a:after,
.header_container_menu ul.menu > li.megamenu_open > a:after {
	-webkit-transform: scaleX(1);
	-moz-transform: scaleX(1);
	-ms-transform: scaleX(1);
	-o-transform: scaleX(1);
	transform: scaleX(1);
	
	transition: transform .4s;
}

/* only one line at a time: an open dropdown beats hover, hover beats the
   current page. otherwise the current page keeps its line next to the item
   that is actually open. */
.header_container_menu ul.menu:has(> li.megamenu_open) > li:not(.megamenu_open) > a:after,
.header_container_menu ul.menu:not(:has(> li.megamenu_open)):has(> li > a:hover) > li > a:not(:hover):after {
	-webkit-transform: scaleX(0);
	-moz-transform: scaleX(0);
	-ms-transform: scaleX(0);
	-o-transform: scaleX(0);
	transform: scaleX(0);
}

.header_container_menu ul.menu > li.menu-item-has-children {
	position: relative;
}

.header_container_menu ul.menu > li.menu-item-has-children:after {
	content: '';
	position: absolute;
	right: -10px;
	top: 50%;
	border-top: 3px solid #fff;
	border-left: 2.5px solid transparent;
	border-right: 2.5px solid transparent;
	
	pointer-events: none;
	
	-webkit-transform: translateY(-50%) rotateX(0) rotate(0deg);
	-moz-transform: translateY(-50%) rotateX(0) rotate(0deg);
	-ms-transform: translateY(-50%) rotateX(0) rotate(0deg);
	-o-transform: translateY(-50%) rotateX(0) rotate(0deg);
	transform: translateY(-50%) rotateX(0) rotate(0deg);
	
	-webkit-transition: -webkit-transform .4s;
	-moz-transition: -moz-transform .4s;
	-ms-transition: -ms-transform .4s;
	-o-transition: -o-transform .4s;
	transition: transform .4s;
}

.header_container_menu ul.menu > li.menu-item-has-children.submenOpen:after {
	-webkit-transform: translateY(-50%) rotateX(180deg) rotate(0deg);
	-moz-transform: translateY(-50%) rotateX(180deg) rotate(0deg);
	-ms-transform: translateY(-50%) rotateX(180deg) rotate(0deg);
	-o-transform: translateY(-50%) rotateX(180deg) rotate(0deg);
	transform: translateY(-50%) rotateX(180deg) rotate(0deg);
}

.header_inner{
	display:flex;
	justify-content: space-between;
	align-items: center;
}

.header_inner_left {
	padding: 23px 0;
}

.header_inner_right {
	padding: 23px 0;
	display: flex;
	align-items: center;
	gap: 0 88px;
}

.header_contact_button_container .mM_button.primary {
	background-color: #fff;
	color: #12335b;
}

.header_contact_button_container .mM_button.primary * {
	color: #12335b;
}

.header_contact_button_container {
	position: relative;
}

.header_contact_button_container:after {
	content: '';
	position: absolute;
	left: -49px;
	top: 50%;
	width: 1px;
	height: 100px;
	background: rgba(255,255,255,.2);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.header_main_mobile_content{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 20px 33px;
	width: 500px;
	right: 0;
	/* box-shadow: inset 0 1em 1em -1em #092939; */
	-webkit-transition: -webkit-transform .4s, top .4s;
	-moz-transition: -moz-transform .4s, top .4s;
	-ms-transition: -ms-transform .4s, top .4s;
	-o-transition: -o-transform .4s, top .4s;
	transition: transform .4s, top .4s;
	-webkit-transform: translateX(500px);
	-moz-transform: translateX(500px);
	-ms-transform: translateX(500px);
	-o-transform: translateX(500px);
	transform: translateX(500px);
	top: -27px;
	height: 100vh;
	position: absolute;
	background-color: #f8f9fa;
	z-index: 2;
	overflow-y: scroll;
}

.header_main_mobile_content.open{
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.header_main_mobile_content_top_2{
	/* display: flex;
    justify-content: space-between; */
}

.header_main_desktop{
	display:block;
}

.header_main_mobile{
	display:none;
}

.header_container_mobil_menu ul{
	list-style:none;
	margin:0;
	padding:0;
}

.header_main_mobile_overlay{
	/* background-color:rgba(0, 0, 0, 0.6); */
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: -27px;
	left: 0;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	-webkit-transition: visibility 0s linear 300ms, opacity .4s, top .4s;
	-moz-transition: visibility 0s linear 300ms, opacity .4s, top .4s;
	-ms-transition: visibility 0s linear 300ms, opacity .4s, top .4s;
	-o-transition: visibility 0s linear 300ms, opacity .4s, top .4s;
	transition: visibility 0s linear 300ms, opacity .4s, top .4s;
}

.header_main_mobile_overlay.show{
	visibility: visible;
	opacity: 1;
	-webkit-transition: visibility 0s linear 0s, opacity .4s;
	-moz-transition: visibility 0s linear 0s, opacity .4s;
  	-ms-transition: visibility 0s linear 0s, opacity .4s;
  	-o-transition: visibility 0s linear 0s, opacity .4s;
  	transition: visibility 0s linear 0s, opacity .4s;
}

.header_main_mobile_background_img {
	position: absolute;
	top: -27px;
	right: 0;
	width: 500px;
	height: 100vh;
	-webkit-transition: -webkit-transform .4s, top .4s;
	-moz-transition: -moz-transform .4s, top .4s;
	-ms-transition: -ms-transform .4s, top .4s;
	-o-transition: -o-transform .4s, top .4s;
	transition: transform .4s, top .4s;
	-webkit-transform: translateX(500px);
	-moz-transform: translateX(500px);
	-ms-transform: translateX(500px);
	-o-transform: translateX(500px);
	transform: translateX(500px);
}

.header_main_mobile_overlay.show ~ .header_main_mobile_background_img {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.header_main_mobile_background_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header_burger_menu_icon,
.header_container_close_button{
	cursor:pointer;
}

.header_container_mobil_menu li.menu-item-has-children{
	overflow:hidden;
}

.header_container_mobil_menu li.menu-item-has-children>a:after{
	content:">";
	display: inline-block;
	-webkit-transition: -webkit-transform .3s ease-in-out;
	-moz-transition: -moz-transform .3s ease-in-out;
	-ms-transition: -ms-transform .3s ease-in-out;
	-o-transition: -o-transform .3s ease-in-out;
	transition: transform .3s ease-in-out;
}

.header_container_mobil_menu li.menu-item-has-children>a.open:after{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

header .sub-menu {
	border-top: 1px solid #e4e4e4;
}

header .sub-menu li .menu_item_link {
	display: block;
	padding: 35px 45px;
	padding-bottom: 20px;
	border-right: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	height: 100%;
	
	transition: background-color .4s;
}

header .sub-menu li .menu_item_link:hover,
header .sub-menu li.current_page_item .menu_item_link {
	background-color: #e4e4e4;
}

/* header .sub-menu li:nth-child(n+5) .menu_item_link {
	border-top: 1px solid #e4e4e4;
} */

header .sub-menu li:first-child .menu_item_link,
header .sub-menu li:nth-child(5n) .menu_item_link {
	padding-left: 0;
}

header .sub-menu li:nth-child(4n) .menu_item_link {
	padding-right: 0;
	border-right: none;
}

/* header .sub-menu li:last-child .menu_item_link {
	border-right: none;
} */

header #menu-header-nav-en {
	height: 100px;
}

.logo_container svg,
.header_container_menu ul.menu > li > a,
.header_container_menu ul.menu > li.menu-item-has-children:after,
.header_contact_button_container:after {
	transition: all .4s;
}

header.scrolled .logo_container svg {
	fill: #004f9f;
}

header.scrolled .header_container_menu ul.menu > li > a {
	color: #12335b;
}

header.scrolled .header_container_menu ul.menu > li.menu-item-has-children:after {
	border-top-color: #12335b;
}

header.scrolled .header_search_trigger svg {
	fill: #12335b;
}

header.scrolled {
	background: #fff;
	border-bottom: 1px solid rgba(30, 30, 30, .12);
}

header.scrolled .header_contact_button_container .mM_button.primary {
	background: #f8f9fa;
}

header.scrolled .header_contact_button_container:after {
	background: rgba(30, 30, 30, .12);
}

.btw_submenu_overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to top, rgba(255,255,255,.5), rgba(255,255,255,.5) 25%, rgba(0,79,159,.5) 100%);
	display: none;
	backdrop-filter: blur(10px);
	z-index: 5;
}

.menu_item_img{
	width: 100px;
	height: auto;
}

.logo_container {
	height: 54px;
	
}

.logo_container a,
.logo_container svg,
.logo_container img {
	height: 100%;
}

.logo_container svg,
.logo_container img {
	width: auto;
}

.logo_container svg {
	fill: #fff;
}

.header_inner_right_btn_container .button svg {
	width: 18px;
	min-width: 18px;
	height: 21px;
	min-height: 21px;
	margin-right: 5px;
	margin-bottom: 3px;
}

.header_burger_menu_icon {
	display: flex;
	flex-direction: column;
	align-items: end;
}

.header_burger_bar {
	display: block;
	height: 3px;
	background: #fff;
	border-radius: 50px;
	-webkit-transform-origin: 29px;
	-moz-transform-origin: 29px;
	-o-transform-origin: 29px;
	transform-origin: 29px;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.header_burger_bar:not(:last-child) {
	margin-bottom: 7px;
}

.header_burger_bar_1 {
	width: 26px;
}

.header_burger_bar_2 {
	width: 26px;
}

.header_burger_bar_3{
	width: 26px;
}

.header_burger_menu_mobile:hover .header_burger_bar {
	width: 25px;
}

.header_inner.open .header_burger_bar_1 {
	width: 30px;
	height: 3px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.header_inner.open .header_burger_bar_2 {
	width: 0;
}

.header_inner.open .header_burger_bar_3 {
	width: 30px;
	height: 3px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.header_main_mobile_content * {
	/* color: #fff; */
}

.header_main_mobile_content .footer_main_middle_item_social_container {
	display: block;
}

.header_main_mobile_content .footer_main_middle_item_social_links_item svg {
	fill: #fff;
}

.header_main_mobile_content .footer_main_middle_item_social_links_item svg:hover {
	fill: #092939;
}

.header_main_mobile_content_bottom_1 {
	margin-bottom: 17px;
}

.header_main_mobile_content_bottom_2_right_item:not(:last-child) {
	margin-bottom: 4px;
}

.header_main_mobile_content_bottom_2_right_item a {
	font-size: 0.9375rem;
}

.header_main_mobile_content_bottom_2 a,
.header_main_mobile_content_bottom_2 a * {
	transition: color .4s, fill .4s;
}

.header_main_mobile_content_bottom_2_right_item p {
	display: inline-flex;
	align-items: baseline;
}

.header_main_mobile_content_bottom_2_right_item span {
	width: 32px;
	display: inline-block;
}

.header_main_mobile_content_bottom_2_right_item svg {
	width: 16px;
	min-width: 16px;
	fill: #004f9f;
}

.header_main_mobile_content_bottom_2_right_item.header_main_mobile_content_bottom_2_right_email_container svg {
	width: 18px;
	min-width: 18px;
}

.header_main_mobile_content_bottom_2 a:hover * {
	color: #004f9f;
}

.header_main_mobile_content_bottom_2_left {
	margin-top: 26px;
	font-size: .79rem;
}

.header_main_mobile_content_bottom_2_left .rechtliches_menu {
	display: flex;
}

.header_main_mobile_content_bottom_2_left .rechtliches_menu * {
	transition: color .4s;
}

.header_main_mobile_content_bottom_2_left .rechtliches_menu li:not(:last-child) {
	margin-right: 34px;
}

.header_main_mobile_content_bottom_2_left .rechtliches_menu .current-menu-item a,
.header_main_mobile_content_bottom_2_left .rechtliches_menu a:hover {
	color: #004f9f;
}

.header_main_mobile_content_middle {
	position: relative;
	margin: 138px 0 136px;
}

.header_main_mobile_content_middle_background_logo_container {
	position: absolute;
	top: 50%;
	left: 7px;
	width: calc(100% + 7px);
	height: auto;
	z-index: -1;
	transform: translateY(-50%);
}

.header_main_mobile_content_middle_background_logo_container svg {
	fill: rgba(255, 255, 255, .1);
	width: 100%;
	height: auto;
}

.header_search_trigger {
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: all .4s;
}

.header_search_trigger svg {
	width: 20px;
	fill: #ffffff;
}

.header_main_mobile_content_bottom_3 {
	margin-top: 12px;
	font-size: .844rem;
}

header .mM_header_copyright,
header #copyright_text_year {
	color: rgba(18, 51, 91, 0.5);
}

@media screen and (max-width: 1799px) {
	header .menu_custom_wrapper {
		padding-top: 40px;
	}
	
	header .sub-menu li .menu_item_link {
		padding: 30px 25px 60px;
	}
}

@media screen and (max-width: 1599px) {
	.header_container_menu ul li:not(:last-child) {
		margin-right: 40px;
	}
}

@media screen and (max-width: 1399px) {
	.header_container_menu ul li:not(:last-child){
		margin-right: 30px;
	}
	
	header .menu_custom_wrapper {
		overflow: scroll;
	}
	
	.header_main_desktop{
		display:none;
	}
	
	.header_main_mobile{
		display:block;
	}
	
	header.scrolled {
		background: #004f9f;
		border-bottom-color: transparent;
	}
	
	header.scrolled .logo_container svg {
		fill: #fff;
	}
	
	header.scrolled .header_search_trigger svg {
		fill: #fff;
	}
	
	header.scrolled .header_contact_button_container::after {
	  background: rgba(30, 30, 30, .12);
	
	}
	
	.header_main_mobile .header_inner_right {
		position: relative;
		z-index: 2;
		gap: 0 49px;
	}
	
	.header_main_mobile .header_inner_right:after {
		content: '';
		position: absolute;
		top: 0; right: calc(35px + 24px);
		width: 1px;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.2);
	}
	
	.header_inner_left {
		padding: 0;
	}
	
	.header_main_wrapper > .container {
		max-width: 100% !important;
		padding: 0 22px;
	}
	
	.header_main_mobile_content_bottom {
		margin-top: 30px;
	}
	
	.header_burger_menu_mobile {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: end;
		width: 35px;
		height: 35px;
	}
	
	div.mM_search.mobile {
		margin: 0 -20px;
		padding: 13px 20px;
	}
	
	header .menu > li {
		border-bottom: 1px solid rgba(18, 51, 91, 0.1);
		padding: 10px 0;
	}
	
	header .menu-item-has-children {
		cursor: pointer;
	}
	
	header .menu > li:last-child{
		border-bottom: none;
	}
	
	header .menu > li > a {
		padding: 13px 15px 13px 0;
	}
	
	header ul.sub-menu{
		display: none;
	}
	
	header li {
		opacity: 1;
		transition: opacity .4s;
	}
	
	header .menu li a:hover,
	header .menu li.current_page_item > a {
		opacity: .5;
	}
	
	header .menu-item-has-children .mM_has_sub_menu_arrow{
		display: inline-flex;
	}
	
	header .menu-item-has-children:not(.sub_menu_open):not(:hover) .mM_has_sub_menu_arrow .mM_button_icon {
		border-color: rgba(8, 28, 51, 0.3);
	}
	
	header .menu-item-has-children .mM_has_sub_menu_arrow svg{
		fill: #081c33;
	}
	
	header .menu {
		background-color: #fff;
		margin: 0 -20px;
		padding: 0 20px;
	}
	
	header .menu > li > a {
		color: #004f9f;
		font-size: 1.0625rem;
	}
}

@media screen and (max-width: 991px) {
	.above_header_element .above_header_right {
		gap: 0 45px;
	}
}

@media screen and (max-width: 767px) {
	.above_header_element .above_header_menu_container {
		display: none;
	}
}

@media screen and (max-width: 575px) {
	header .logo_container {
		height: 37px;
	}
}

@media screen and (max-width: 499px) {
	.header_main_mobile_content{
		width: 100%;
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
}

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

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

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

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

/* ===============================================
   Mega menu (three column dropdown)
   Figma: Hiller_Dropdown 1:2, drawn at 1920px
   =============================================== */

/* the dropdown is positioned against .header_main_wrapper, so the list item
   must not establish a containing block. the caret moves to the link, which
   is positioned anyway. */
header .header_container_menu ul.menu > li.menu-item-has-children { position: static; }
header .header_container_menu ul.menu > li.menu-item-has-children:after { content: none; }

header .header_container_menu ul.menu > li.menu-item-has-children > .menu_item_link:before {
	content: '';
	position: absolute;
	right: -10px;
	top: 50%;
	border-top: 3px solid #fff;
	border-left: 2.5px solid transparent;
	border-right: 2.5px solid transparent;
	pointer-events: none;
	transform: translateY(-50%) rotateX(0);
	transition: transform .4s, border-top-color .4s;
}

header .header_container_menu ul.menu > li.megamenu_open > .menu_item_link:before {
	transform: translateY(-50%) rotateX(180deg);
}

header.scrolled .header_container_menu ul.menu > li.menu-item-has-children > .menu_item_link:before {
	border-top-color: #12335b;
}

/* fallback only - the real value is set inline on <header> by setMegaMenuGutter().
   it must live on <header> and not on .mM_megamenu, otherwise the closer
   declaration would win over the inherited inline value. */
/* NOTE: css/project.css:826 sets `* { color: var(--font_color) }`. A universal
   selector beats inheritance, so every colour rule below has to name the
   children explicitly - same reason the theme writes `.mM_button.primary *`. */

header { --mM_gutter: 22px; }

header .mM_megamenu {
	/* positioned against .header_main_wrapper, so it spans the full width
	   without the JS offset correction the old markup needed */
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10;
	background: #fff;
	box-shadow: 0 18px 40px rgba(18, 51, 91, .08);
	overflow-y: auto;
}

header .mM_megamenu[hidden] { display: none; }

header .mM_megamenu_grid {
	/* column 1 = gutter + a fixed width: the gutter jumps between 60 and 290px
	   with the container steps, so a share of the viewport would leave the
	   entries too little room right before each step. 395 = 345px for the
	   longest heading ("Decanter Centrifuges ->" needs 335) + 50px padding.
	   columns 2 and 3 share the rest; at 1920 that gives 595 / 417 / 908. */
	--mM_mega_main: 395px;
	display: grid;
	/* minmax(0,...) keeps the ratio strict - plain fr grows with content */
	grid-template-columns: calc(var(--mM_gutter) + var(--mM_mega_main)) minmax(0, 420fr) minmax(0, 915fr);
	/* row 1 holds the heading of column 1, row 2 the lists. columns 1 and 2
	   share these rows (subgrid), so the sub pages start on the line of the
	   first entry in column 1, however tall the heading gets */
	grid-template-rows: auto 1fr;
	align-items: stretch;
	min-height: 452px;
}

/* no row in column 1 has sub pages: two columns, the teasers take the room of
   column 2. once a row gets sub pages again, PHP renders column 2 and the
   three column grid above applies by itself. */
header .mM_megamenu_grid:not(:has(> .mM_megamenu_col_sub)) {
	grid-template-columns: calc(var(--mM_gutter) + var(--mM_mega_main)) minmax(0, 1fr);
}

header .mM_megamenu_col {
	grid-row: 1 / -1;
	padding-block: 68px 60px;
}

header .mM_megamenu_col_main,
header .mM_megamenu_col_sub {
	display: grid;
	grid-template-rows: subgrid;
}

header .mM_megamenu_col_main {
	background: #fff;
	padding-left: var(--mM_gutter);
	padding-right: 50px;
}

header .mM_megamenu_col_sub {
	background: #fff;
	border-left: 1px solid rgba(184, 194, 206, .3);
	padding-left: 50px;
	padding-right: 40px;
}

header .mM_megamenu_col_teaser {
	background: #f7f8f9;
	padding-left: 100px;
	padding-right: var(--mM_gutter);
	padding-block-start: 77px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

/* --- column 1 ------------------------------------------------ */

header .mM_megamenu_heading {
	display: inline-flex;
	justify-self: start;            /* grid item since the subgrid: keep it as wide as its text */
	align-items: center;
	gap: 14px;
	font-family: aileron, sans-serif;
	font-weight: 700;
	font-size: 1.875rem;            /* 30px */
	line-height: 1.2;
	margin-bottom: 38px;
}

header .mM_megamenu_heading,
header .mM_megamenu_heading * {
	color: #12335b;
}

header .mM_megamenu_heading_arrow {
	width: 18px;
	min-width: 18px;
	fill: #12335b;
	transition: transform .4s;
}

header .mM_megamenu_heading:hover .mM_megamenu_heading_arrow { transform: translateX(4px); }

/* .header_container_menu ul { display: flex } from the old desktop menu
   would otherwise lay these out in a row */
header .mM_megamenu_list,
header .mM_megamenu_sublist { display: block; }

header .mM_megamenu_list > li {
	position: relative;
	margin: 0;
}

header .mM_megamenu_branch,
header .mM_megamenu_leaf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: aileron, sans-serif;
	font-weight: 400;
	font-size: 1.0625rem;           /* 17px */
	line-height: 37px;
	transition: color .4s;
}

header .mM_megamenu_branch,
header .mM_megamenu_branch *,
header .mM_megamenu_leaf,
header .mM_megamenu_leaf * {
	color: #12335b;
	transition: color .4s;
}

/* one look for the marked row, with or without sub pages. no separate hover
   colour: the marker follows the pointer (menu.js), and a second hover state
   is exactly the differently formatted row the client reported */
header .mM_megamenu_list > li.is-marked > .mM_megamenu_branch,
header .mM_megamenu_list > li.is-marked > .mM_megamenu_branch *,
header .mM_megamenu_list > li.is-marked > .mM_megamenu_leaf,
header .mM_megamenu_list > li.is-marked > .mM_megamenu_leaf * {
	color: #004f9f;
}

header .mM_megamenu_list > li.is-marked > .mM_megamenu_branch,
header .mM_megamenu_list > li.is-marked > .mM_megamenu_leaf {
	font-weight: 700;
}

/* the yellow marker: 4x27 at the left edge of the marked row.
   fades in like the m31 branch marker instead of popping. */
header .mM_megamenu_list > li::before {
	content: '';
	position: absolute;
	left: -15px;
	top: 50%;
	width: 4px;
	height: 27px;
	background: #ffdf01;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .4s;
}

header .mM_megamenu_list > li.is-marked::before {
	opacity: 1;
}

/* Figma 1:103: the active chevron is solid #004F9F, the inactive ones are
   #12335B at 30% - not one colour at two opacities */
header .mM_megamenu_chevron {
	width: 6px;
	min-width: 6px;
	fill: #12335b;
	fill-opacity: .3;
	transition: fill .4s, fill-opacity .4s, transform .4s;
}

header .mM_megamenu_list > li.is-marked .mM_megamenu_chevron {
	fill: #004f9f;
	fill-opacity: 1;
	transform: translateX(3px);
}

/* --- column 2 ------------------------------------------------ */

header .mM_megamenu_panel[hidden] { display: none; }

/* row 2 of the grid is the row column 1 lists its entries in, so the first
   sub page lines up with the first entry on the left */
header .mM_megamenu_panel { grid-row: 2; }

/* `.header_container_menu ul li:not(:last-child)` (0,2,2) spaces the top
   level items with margin-right and reaches every row in here as well,
   narrowing all but the last one by 60px (40px below 1600). this selector
   (0,2,3) outranks it at every width. */
header .header_container_menu ul.mM_megamenu_list > li,
header .header_container_menu ul.mM_megamenu_sublist > li {
	margin: 0;
}

header .mM_megamenu_sublist > li > a {
	display: block;
	font-family: aileron, sans-serif;
	/* the 37px rows of column 1 as 25px line + 2 x 6px: a title that still
	   wraps keeps a normal line spacing instead of 37px gaps */
	line-height: 25px;
	padding-block: 6px;
	color: rgba(18, 51, 91, .5);
	transition: color .4s;
}

header .mM_megamenu_sublist > li > a:hover,
header .mM_megamenu_sublist > li.current-menu-item > a { color: #004f9f; }

/* --- column 3 ------------------------------------------------ */

header .mM_megamenu_teaser {
	display: block;
	flex: 1 1 0;
	max-width: 298px;
}

header .mM_megamenu_teaser_image {
	display: block;
	aspect-ratio: 298 / 196;
	overflow: hidden;
	margin-bottom: 12px;
}

header .mM_megamenu_teaser_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

header .mM_megamenu_teaser:hover .mM_megamenu_teaser_img { transform: scale(1.05); }

header .mM_megamenu_teaser_title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: aileron, sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;           /* 17px */
	line-height: 37px;
}

header .mM_megamenu_teaser_title,
header .mM_megamenu_teaser_title * {
	color: #12335b;
}

header .mM_megamenu_teaser_arrow {
	width: 10px;
	min-width: 10px;
	fill: #12335b;
	transition: transform .4s;
}

header .mM_megamenu_teaser:hover .mM_megamenu_teaser_arrow { transform: translateX(4px); }

header .mM_megamenu_teaser_sub {
	display: block;
	font-family: aileron, sans-serif;
	line-height: 25px;
	color: rgba(18, 51, 91, .5);
}

/* --- responsive ---------------------------------------------- */

@media screen and (min-width: 1921px) {
	/* room for the longest entry, "Chemical, pharmaceutical and biotechnology
	   industries" (EN, 452px in bold). it fitted here before column 1 got a
	   fixed width; at 1920 and below it already wrapped. */
	header .mM_megamenu_grid { --mM_mega_main: 505px; }
}

@media screen and (max-width: 1599px) {
	/* the heading is 26px here (at most 295px), the longest entry in bold
	   needs 309 */
	header .mM_megamenu_grid { --mM_mega_main: 370px; }
	header .mM_megamenu_col { padding-block: 52px 46px; }
	header .mM_megamenu_col_teaser { padding-left: 60px; }
	header .mM_megamenu_heading { font-size: 1.625rem; margin-bottom: 28px; }
}

@media screen and (max-width: 1399px) {
	/* below this width the desktop header is replaced by the mobile panel */
	header .mM_megamenu_grid { grid-template-columns: 1fr 1fr; }
	header .mM_megamenu_col_teaser { display: none; }
}


/* === Fix: aktiven Menü-Strich an den unteren Header-Rand setzen ===
   Die Menü-Spalte wird auf volle Header-Höhe gestreckt, damit der
   gelbe ::after-Strich (bottom:0 am Top-Level-Link) am Header-Boden
   sitzt statt an der Textunterkante. Text bleibt mittig zentriert. */
.header_inner_middle { align-self: stretch; }
.header_inner_middle .header_container_menu,
.header_inner_middle .header_container_menu > div,
.header_container_menu ul.menu { height: 100%; }
.header_container_menu ul.menu > li { height: 100%; }