/***
 * Skip Links
 ****/
.skip:focus,
.skip:active {
	position:static;
	top:0;
	left:0
}
.skiplinks {
	position:absolute;
	top:0;
	left:-32768px;
	z-index:1000;
	width:100%;
	margin:0;
	padding:0;
	list-style-type:none
}
.skiplinks .skip:focus, .skiplinks .skip:active {
	left: 32768px;
	outline: 0 none;
	position: absolute;
	width: 100%;
}
.skiplinks a.skip:focus,
.skiplinks a.skip:active {
	color:#fff;
	background:#333;
	border-bottom:1px #000 solid;
	padding:10px 0;
	text-align:center;
	text-decoration:none;
}

#header {
	background: var(--color-white);
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	z-index: 15;
}

#header.menuline-1::before,
html.hasscrolled #header::before {
	content: '';
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--color-lightgrey);
	position: absolute;
}




.header-logo {
	width: 318px;
	display: flex;
	align-items: center;
}

.header-logo a {
	display: block;
}

.header-search {
	width: clamp(6.25rem, -34.625rem + 45.4167vw, 19.875rem);
	text-align: right;
}

#breadcrumb {
	max-width: 1640px;
	margin:20px auto 50px auto;
	width: 100%;	
}

#breadcrumb ol {
	list-style-type: none;
	display: flex;
	margin:0;
	padding:0;
	font-size:14px;
}

#breadcrumb ol li::after {
	content:'>';
	padding:0 5px;
}
#breadcrumb ol li:last-child::after {
	content:'';
	padding:0;
}


#mainnavigation {
	max-width: 1920px;
	width: calc(100% - 2 * var(--fs-outerpadding-body));
	margin: auto;
	box-sizing: border-box;
}

@media only screen and (max-width: 1439px) {
    #mainnavigation {
      width: calc(100% - 2 * var(--fs-outerpadding-body-sub1440));
    }
}

#mainnavigation ul {
	margin: 0 30px 0 0;
	padding: 0;
	list-style-type: none;
	min-width: 160px;
}


#mainnavigation ul#mainnavigation-mainmenu {
	margin:0 20px;
	padding:0;
	list-style-type: none;
	gap: 25px;
}

@media only screen and (max-width: 1200px) {
	#mainnavigation ul#mainnavigation-mainmenu {
		gap: 30px;
	}
}
.mainnavigation-wrapper {
	padding-top:44px;
	padding-bottom: 44px;
	display: flex;
	justify-content: space-between;
	transition: padding 0.2s ease;
}

html.hasscrolled .mainnavigation-wrapper {
	padding-top:22px;
	padding-bottom: 22px;
	transition: padding 0.2s ease;
}

#mainnavigation-mainmenu {
	display: flex;
	justify-content: space-between;
}

#mainnavigation-mainmenu > li > a {
	display: inline-block;
}

#mainnavigation-mainmenu > li > a,
#mainnavigation-mainmenu > li > button {
	margin:0;
	border:0;
	padding:0;
	appearance: none;
	text-align: left;
	background: transparent;
	color: var(--color-black);

	height:100%;
	display: flex;
	align-items: center;

	font-size: 22px;
	font-weight: 600;

	position: relative;
}

#mainnavigation-mainmenu > li > a:hover,
#mainnavigation-mainmenu > li > button:hover,
#mainnavigation-mainmenu > li.current > a,
#mainnavigation-mainmenu > li.current > button,
#mainnavigation-mainmenu > li > button[aria-expanded="true"] {
	color:var(--color-blue);
}

#mainnavigation-mainmenu > li > a:after,
#mainnavigation-mainmenu > li > button:after {
	content:'';
	position: absolute;
	left:0;
	width: 0%;
	bottom:0;
	height: 2px;
	background-color: var(--color-blue);
	transition: width 0.2s ease;
}

#mainnavigation-mainmenu > li > button[aria-expanded="true"]:after,
#mainnavigation-mainmenu > li.current > button:after,
#mainnavigation-mainmenu > li.current > a:after,
#mainnavigation-mainmenu > li > a:hover:after,
#mainnavigation-mainmenu > li > button:hover:after {
	width: 100%;
	transition: width 0.2s ease;
}




.mainnavigation-level1-title {
	padding-right: 7px;
}

#mainnavigation-mainmenu > li > button .mainnavigation-level1-icon {
	transition: transform 0.2s ease;
	transform-origin: center;
}

#mainnavigation-mainmenu > li > button[aria-expanded="true"] .mainnavigation-level1-icon {
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}



.mainnavigation-submenu-area {
	position: absolute;
	margin-left: -30px;
	margin-top: -2px;
}



button[aria-expanded="false"] + .mainnavigation-submenu-area {
	display: none;
}

.mainnavigation-submenu {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border:2px solid var(--color-blue);
	border-radius: 10px;
	opacity: 1;	
	outline: 1px solid #fff;
  outline-offset: 0px;  
}

.mainnavigation-submenu li:not(.last) {
	border-bottom:2px solid var(--color-blue);
}

.mainnavigation-submenu > li.last > a {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.mainnavigation-submenu > li.first > a {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}


.mainnavigation-submenu > li > a {
	color: var(--color-blue);
	font-weight: 18px;
	display: block;
	padding:12px 22px;

}

.mainnavigation-submenu > li.current > a {
	background-color: var(--color-lightgrey);
}

.mainnavigation-submenu > li > a:hover {
	color:var(--color-white);
	background-color: var(--color-blue);
}
.mainnavigation-submenu > li.last > a:hover {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
.mainnavigation-submenu > li.first > a:hover {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}



/** slide-menu */
.header-opener {
	display: none;
}

#mainmenuopener {
	margin: 0 0 0 20px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 30px;
}

#mainmenuopener {
	background-color: var(--color-lightgrey);
	padding:18px;
	border-radius: 10px;
}

#mainmenuopener img {
	display: block;
	min-width: 10px;
}


@media only screen and (max-width: 1100px) {
	#mainnavigation-mainmenu,.header-search {
		display: none;
	}
	.header-opener {
		display: flex;
		align-items: center;
	}
}

@media only screen and (min-width: 1101px) {
	#mobilenavigation {
		display: none !important;
	}
}

/*
mobilenavigation
*/


#mobilenavigation {
	position: fixed;
	left:0;
	width:calc(100vw - 80px);
	top:0;
	bottom:0;
	background-color: var(--color-white);
	z-index:1000;
	transform:translateX(-100%);
	transition:transform 0.2s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding:13px;
	box-sizing: border-box;

}

.mobilenav-header {
	display: flex;
	flex-direction: column;
}

.mobilenav-header-close {
	text-align: right;
}

.mobilenav-header-close button {
	background: transparent;
	border: none;
	appearance: none;
	border-radius: 0;
	color:var(--color-black);
	font-size: 16px;
}


.mobilenav-header-logo {
	margin:20px 0 50px 0;
    margin: 15px 0 15px 0;
}

.mobilenav-header-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}
html.mainmenu-open #mobilenavigation-bg {
	content:'';
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;	
	z-index:999;
	background-color: rgba(0,0,0,0.5);
}


html.mainmenu-open #mobilenavigation {
	transform:translateX(0);
}

.mobilenav-button[aria-expanded="false"] + ul {
	display: none;
}

.mobilenav-button[aria-expanded="true"] + ul {
	display: block;
}


#mobilenavigation ul {
	margin:0;
	padding: 0;
	list-style-type: none;
	flex:1;
	overflow: auto;
}

#mobilenavigation > ul > li > a,
#mobilenavigation > ul > li > button {
	appearance: none;
	border: 0;
	padding: 0;
	background-color: transparent;
	text-align: left;

	font-size: 22px;
	font-weight: 600;
	display: flex;
	width: 100%;
	padding:10px 22px;
	border-bottom: 2px solid var(--color-blue);

	color:var(--color-black);
}
#mobilenavigation > ul > li.current > a,
#mobilenavigation > ul > li.current > button,
#mobilenavigation > ul > li > button[aria-expanded="true"] {
	color: var(--color-blue);
}


#mobilenavigation > ul > li > ul > li > a,
#mobilenavigation > ul > li > ul > li> button {
	appearance: none;
	border: 0;
	padding: 0;
	background-color: transparent;
	text-align: left;

	font-size: 18px;
	font-weight: 400;
	display: flex;
	align-items: center;
	width: 100%;
	padding:10px 22px;
	border-bottom: 2px solid var(--color-blue);

	color:var(--color-blue);	
}
#mobilenavigation > ul > li > ul > li.current > a,
#mobilenavigation > ul > li > ul > li.current > button {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.mobilenav-menutitle {
	margin-right: 7px;
}

button .mobilenav-level1-icon {
	transition: transform 0.2s ease;
	transform-origin: center;
}

button[aria-expanded="true"] .mobilenav-level1-icon {
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}