/*╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗*/
/*║ HEADER I                                                                                                                                                                                                                                              ║*/
/*╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝*/
/***-------------------------------------------*** Body ***-------------------------------------------***/
body { padding-top: 170px; }
body.navi { overflow: clip; }

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; height: 170px; background: var(--white); transition: var(--transition); }
body.scrolled header { box-shadow: 0 1px 5px 2px #CCCCCC; }
header li { list-style: none; }
header a { text-decoration: none; }
header .cms_container_wide { position: relative; height: 170px; padding: 0 30px; }

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
header #hHamburger { cursor: pointer; position: absolute; z-index: 1; top: 50%; right: 30px; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; padding: 17px 35px 17px 42px; border-radius: var(--border-radius-btn); transition: var(--transition); }
header #hHamburger:hover { background: var(--quaternary); }
header #hHamburgerText { font-weight: 400; font-size: 16px; line-height: 21px; }
#nav-icon4 { cursor: pointer; position: relative; display: inline-block; width: 25px; height: 16px; }
#nav-icon4 span { position: absolute; left: 0; display: block; width: 100%; height: 2px; background: var(--primary); }
#nav-icon4 span:nth-child(1),
#nav-icon4 span:nth-child(2),
#nav-icon4 span:nth-child(3) { transform-origin: left center; }
#nav-icon4 span:nth-child(1) { top: 0px; }
#nav-icon4 span:nth-child(2) { top: 7px; }
#nav-icon4 span:nth-child(3) { top: 14px; }

/***-------------------------------------------*** Hamburger 2 ***-------------------------------------------***/
header #hHamburger2 {
--hHamburger2ContainerPadding: max(30px,calc(calc(calc(100vw - 1630px) / 2) + 15px));
cursor: pointer;
position: absolute;
z-index: 1;
top: 57px;
right: var(--hHamburger2ContainerPadding);
display: flex;
align-items: center;
gap: 14px;
padding: 17px 35px 17px 42px;
border-radius: var(--border-radius-btn);
transition: var(--transition);
}
header #hHamburger2:hover { background: var(--quaternary); }
header #hHamburger2Text { font-weight: 400; font-size: 16px; line-height: 21px; }
header #hHamburger2Close { position: relative; width: 18px; height: 18px; }
header #hHamburger2Close:before,
header #hHamburger2Close:after { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); background: var(--primary); }
header #hHamburger2Close:before { width: 18px; height: 2px; }
header #hHamburger2Close:after { width: 2px; height: 18px; }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container { position: absolute; z-index: 1; top: 50%; left: 30px; transform: translateY(-50%); width: 220px; height: 91px; overflow: clip; }
body.navi #logo_container { z-index: -1; }
body #logo_container > a { position: absolute; z-index: 2; inset: 0; }
body #logo_container > a#hLogo { background: center / contain no-repeat url("/pages/img/logo.svg"); }
body #logo_container > a#hLogoOhneClaim { display: none; background: center / contain no-repeat url("/pages/img/logo_ohne_claim.svg"); }
body.scrolled #logo_container > a#hLogo { display: none; }
body.scrolled #logo_container > a#hLogoOhneClaim { display: block; }

/***-------------------------------------------*** Navi Contact ***-------------------------------------------***/
header #hNaviContact { display: flex; flex-direction: column; gap: 27px; padding: 30px 0 0 0; margin: auto 0 0 0; }
.cms_hNaviContact_imgContainer { max-width: 170px; width: 100%; }
.cms_hNaviContact_imgBox { position: relative; width: 100%; }
.cms_hNaviContact_imgBox > picture,
.cms_hNaviContact_imgBox > picture > img { display: flex; width: 100%; }
.cms_hNaviContact_imgLegend { display: none; }
.cms_hNaviContact_text { display: flex; flex-direction: column; gap: 28px; }
.cms_hNaviContact_text > p { font-weight: 400; font-size: 16px; line-height: 20px; }
.cms_hNaviContact_text > p > a { transition: var(--transition); }
.cms_hNaviContact_text > p > a:hover { color: var(--secondary); text-decoration: underline; }

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 960px) {
	/* Start: Allgemein */
	header #hNavigationBox { position: fixed; z-index: 2; inset: 0; display: flex; justify-content: flex-end; width: 100svw; background: rgba(23,50,64,0.75); visibility: hidden; opacity: 0; transition: var(--transition); }
	body.navi header #hNavigationBox { visibility: visible; opacity: 1; }
	header #hNavigation	{ --hNavigationContainerPadding: max(30px,calc(calc(calc(100% - 1630px) / 2) + 15px)); position: relative; display: flex; flex-direction: column; padding: 209px var(--hNavigationContainerPadding) 80px 100px; overflow-y: auto; background: var(--white); }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 8px; }
	header #hNavigation > ul > li { display: flex; }
	header #hNavigation > ul > li > a { display: block; font-size: 42px; line-height: 52px; text-align: left; white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--secondary); }
	/* End: First-Level */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container { transition: var(--transition); }

	body.scrolled { padding-top: 80px; }
	body.scrolled header { height: 80px; }
	body.scrolled header .cms_container_wide { height: 80px; }
	body.scrolled #logo_container { width: 143px; height: 46px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Header */
	body { padding-top: 110px; }
	header { height: 110px; }
	header .cms_container_wide { height: 110px; }
	header #hHamburgerText { font-size: 14px; }
	header #hHamburger2 { top: 30px; right: 30px; background: transparent !important; }
	header #hHamburger2Text { font-size: 14px; color: var(--white); }
	header #hHamburger2Close:before,
	header #hHamburger2Close:after { background: var(--white); }
	body #logo_container { width: 157px; height: 51px; }
	body #logo_container > a#hLogo { display: none !important; }
	body #logo_container > a#hLogoOhneClaim { display: block !important; }
	header #hNaviContact { gap: 21px; }
	.cms_hNaviContact_imgContainer { max-width: 121px; }
	.cms_hNaviContact_img { filter: brightness(0) invert(1); }
	.cms_hNaviContact_text { gap: 21px; }
	.cms_hNaviContact_text > p { font-size: 15px; color: var(--white); }
	/* End: Header */

	/* Start: Allgemein */
	header #hNavigationBox {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		display: flex;
		width: 100svw;
		height: 100svh;
		background: var(--primary);
		visibility: hidden;
		opacity: 0;
		transition: var(--transition);
	}
	body.navi header #hNavigationBox { visibility: visible; opacity: 1; }
	header #hNavigation	{ position: relative; display: flex; flex-direction: column; width: 100%; padding: 150px 30px 38px 30px; overflow-y: auto; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 15px; }
	header #hNavigation > ul > li { display: flex; }
	header #hNavigation > ul > li > a { display: block; font-size: 36px; line-height: 52px; color: var(--white); text-align: left; white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--secondary); }
	/* End: First-Level */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container { transition: var(--transition); }

	body.scrolled { padding-top: 80px; }
	body.scrolled header { height: 80px; }
	body.scrolled header .cms_container_wide { height: 80px; }
	body.scrolled #logo_container { width: 130px; height: 42px; }
	/* End: Scrolled */
}