/* Grund-Einstellungen */
:root {
	/* Sub-Navi-Icon für den Desktop */
	--desktop_subNaviIcon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E" );
	/* Schriftgröße in der Navigation */
	--desktop_font-size: 15px;
	/* Hintergrund Farbe beim HOVER */
	--desktop_hover_background-color: #d4d4d4;
}

/* damit sich die Navi in den Header einfügt */
 .nav-name {
	background-color: transparent;
	width: 100%;
}
.main-nav-list {
	margin: 0;
}
.main-nav-item {
	display: inline-block;
	position: relative;
}

/* Mobile */
html.touch {
	& header.header .nav-item {
		width: 100%;
	}
	/* Grauer Hintergrund - Einstellungen */
	& .screen-overlay {
		height: 100%;
		width: 100%;
		z-index: 30;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
		background-color: rgba(34, 34, 34, 0.6);
		/* transition: opacity 0.2s linear, visibility 0.1s, width 1s ease-in; */
	}
	/* Grauer Hintergrund - Aktiv */
	& .menu-active .screen-overlay {
		opacity: 1;
		visibility: visible;
	}
	/* Mobiel Navigation - Einstellungen */
	& .main-nav {
		position: fixed;
		top: 0;
		width: 80vw;
		height: 100vh;
		background: #ffffff;
		z-index: 1000;
		box-shadow: 0 0.5rem 1rem rgba( 0, 0, 0, .15 ) !important;
		/* transition: all 0.6s ease; */
		visibility: hidden;
		overflow: hidden;
	}
	/* Mobiel Navigation - Aktiv */
	& .main-nav.active {
		visibility: visible;
		opacity: 1;
	}
	& #main-nav .buttonDropdown {
		position:absolute;
		content: "";
		left: -25px;
		top: 0;
		width: 1.3rem;
		height: 1.3rem;
		display: block !important;
		z-index: 2;
		cursor: pointer;
		background-position: center center;
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666666' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E" );
		background-size: 15px 15px;
		background-repeat: no-repeat;
		border: 1.5px solid var( --primary-color );
		border-radius: 50px;
		&.open {
			transform: rotate( 180deg );
		}
	}
	& .main-nav-item.sub-2 > .nav-text-wrapper > .navi-active.nav-link-sub-2 .nav-name {
		color: var( --button-text-color );
		font-weight: bold;
		font-size: calc( var( --font-size-h3 ) * .8 );
	}
	& .main-nav-item.sub-2 > .nav-text-wrapper > .navi-active.nav-link-sub-2 .nav-name {
		color: var( --primary-color ) !important;
	}
	& .sub-2 > .sub-menu {
		left: 0;
		width: 75%;
		margin-left: .5em;
		flex-direction: row;
		margin-bottom: .5rem;
	}
	& .sub-2 > .sub-menu {
		width: 20rem !important;
	}
	& .sub-2 > .sub-menu.open {
		position: relative;
	}
	& .sub-3 > .sub-menu {
		display: none !important;
		transition: all .3s;
		margin-left: .5em;
	}
	& .sub-3 > .sub-menu.open {
		display: block !important;
		position: relative;
	}
	& .nav-item.main-nav-item.sub-3.has-children.current-parent-hover .sub-menu.open {
		top: -1.5rem;
	}
	& a.nav-link-sub-3 span span {
		font-weight: bold;
	}
	& .sub-2 .sub-menu {
		display: none;
	}
	& .sub-menu.open {
	 display: block;
	}
	& .nav-item.has-children {
		position: relative;
	}
	& #main-nav .menu-close-container .menu-close {
		position: fixed;
		display: block;
		right: 28px;
		top: 20px;
		height: 16px;
		width: 16px;
		z-index: 100;
		background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	}
	& .menu-button svg {
		fill: var( --navi_top_text_color );
	}
	& #main-nav .nav-item {
		display: block;
	}
	& #main-nav * {
		color: #000000;
	}
	& #main-nav.show-menu {
		visibility: visible;
	}
	& .nav-name-height > .sub-menu.open {
		display: block;
	}
}

html.touch:has( [data-trigger="#main-nav"] ) {
	& .menu-button-wrapper {
		display: flex;
		align-items: center !important;
	}
	& .navbar-light {
		padding: 0 !important;
	}
}
/* Shopbasket */
.js_shopbasket_icon a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	padding-left: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	margin-left: -8px;
	margin-right: 0px;
}
#shopbasket_button,
#member_button {
	display: grid;
	align-content: center;
}
/* Member-Menü */
.sub-2 .nav-name,
[data-id="member-menu-cms"] .sub-menu .nav-link {
	font-weight: 700;
	white-space: nowrap;
}
[data-id="member-menu-cms"] .sub-menu {
	text-decoration: none !important;
}
/* default-werte */
html.touch {
	--mobilnavi_width: 50vw;
}
/* Navi-Bereich */
html.touch .main-nav {
	right: 0;
	width: var( --mobilnavi_width );
}

/* kleiner als 576px */
@media screen and ( max-width: 576px ) {
	html.touch {
		--mobilnavi_width: 80vw;
	}
}
/* kleiner als 768px und größer ams 576px */
@media screen and ( min-width: 576px ) and ( max-width: 768px ) {
	html.touch {
		--mobilnavi_width: 50vw;
	}
}
/* kleiner als 992px und größer als 768px */
@media screen and ( min-width: 768px ) and ( max-width: 992px ) {
	html.touch {
		--mobilnavi_width: 40vw;
	}
}
/* kleiner als 1200px und größer als 992px */
@media screen and ( min-width: 992px ) and ( max-width: 1200px ) {
	html.touch {
		--mobilnavi_width: 30vw;
	}
}
/* kleiner als 1400px und größer als 1200px */
@media screen and ( min-width: 1200px ) and (max-width: 1400px ) {
	html.touch {
		--mobilnavi_width: 25vw;
	}
}
/* größer als 1400px */
@media screen and (min-width: 1400px ) {
	html.touch {
		--mobilnavi_width: 20vw;
	}
}