/* -------------------------------------------------- */
/* ------------------ DESIGN 0 ---------------------- */
/* -------------------------------------------------- */


:root {
	--magnav-position: 1rem;


	/* ==== Base ==== */
	--magmenu-cover-background: rgba(0, 0, 0, 0.9);
	--magmenu-background: var(--color-header-top-bg, inherit);
	--magmenu-text-color: var(--color-header-top-text, inherit);
	--magmenu-text-color-hover: var(--color-header-top-text-hover, inherit);
	--magmenu-max-width: 400px;
	--magmenu-nav-borderstyle: none; /* solid */
	--magmenu-nav-bordersize: 0px;
	--magmenu-nav-bordercolor: transparent;
	--magmenu-nav-bg: var(--color-header-middle-bg);
	
	/* ==== Head ==== */
	--magmenu-head-padding: 1rem;
	--magmenu-head-background: var(--magmenu-background);
	--magmenu-head-font-family: var(--h2-font-family, inherit);
	--magmenu-head-weight: var(--h2-font-weight, inherit);
	--magmenu-head-size: var(--h6-font-size, inherit);
	--magmenu-head-style: var(--h2-font-style, inherit);
	--magmenu-head-line-height: var(--h2-line-height, 1.4);
	--magmenu-head-letter-spacing: var(--h2-letter-spacing, inherit);
	--magmenu-head-text-transform: var(--h2-text-transform, inherit);

	
	/* ==== Mainmenu ==== */
	--magmenu-current-color: var(--color-header-middle-text-hover);
	--magmenu-current-background: var(--color-header-transparent-bg);
	--magmenu-item-border-radius: 10px;
	--magmenu-item-level1-margin: 10px;

	--magmenu-link-color: var(--color-header-middle-text);
	--magmenu-link-color-hover: var(--color-header-middle-text-hover);


	--magmenu-border-style: solid;
	--magmenu-border-color: var(--color-header-top-transparent-bg);
	--magmenu-border-with: 1px;
	--magmenu-border-radius: 25px;
	--magmenu-mainmenu-padding: 1.5rem;
	--magmenu-visual-img-with: 75px;
	--magmenu-visual-img-height: 75px;

	--magnav-title-font-family: var(--h2-font-family, inherit);
	--magnav-title-font-weight: var(--h2-font-weight, inherit);
	--magnav-title-font-size: var(--font-size, inherit);
	--magnav-title-font-style: var(--h2-font-style, inherit);
	--magnav-title-line-height: var(--h2-line-height, 1.4);
	--magnav-title-letter-spacing: var(--h2-letter-spacing, inherit);
	--magnav-title-text-transform: var(--h2-text-transform, inherit);

	--magnav-subtitle-font-family: var(--font-family, inherit);
	--magnav-subtitle-font-weight: var(--font-weight, inherit);
	--magnav-subtitle-font-size: var(--font-size, inherit);
	--magnav-subtitle-font-style: var(--font-style, inherit);
	--magnav-subtitle-line-height: var(--line-height, 1.4);
	--magnav-subtitle-letter-spacing: var(--letter-spacing, inherit);
	--magnav-subtitle-text-transform: var(--text-transform, inherit);


	/* ==== Meta ==== */
	--magmenu-metamenu-wrapper-padding:  0 1rem 1rem 1rem ;
	--magmenu-metamenu-padding: 0 1rem 1rem 1rem;
	--magmenu-metamenu-item-padding: 0.25rem 0 0.25rem 0;
	

	/* ==== Search ==== */
	--magmenu-search-field-height: 50px;
	--magmenu-search-field-border-radius:  50px 0 0 50px;
	--magmenu-search-button-border-radius: 0 50px 50px 0;
	
	/* ==== Toggle ==== */
	--magmenu-toggle-boder-radius: 25px;
	--magmenu-toggle-boder-radius-active: 25px;
	--magmenu-toggle-background: var(--color-header-middle-bg);
	--magmenu-toggle-background-hover: var(--color-header-middle-text-hover);
	--magmenu-toggle-line-color: var(--color-header-middle-text);
	--magmenu-toggle-line-color-hover: var(--color-header-middle-bg);

	--magbtn-shadow:
		0px 0px 1.2px rgba(0, 0, 0, 0.037),
		0px 0px 2.7px rgba(0, 0, 0, 0.05),
		0px 0px 4.6px rgba(0, 0, 0, 0.057),
		0px 0px 6.9px rgba(0, 0, 0, 0.062),
		0px 0px 10px rgba(0, 0, 0, 0.066),
		0px 0px 14.2px rgba(0, 0, 0, 0.069),
		0px 0px 20.1px rgba(0, 0, 0, 0.073),
		0px 0px 29.2px rgba(0, 0, 0, 0.079),
		0px 0px 45px rgba(0, 0, 0, 0.089),
		0px 0px 80px rgba(0, 0, 0, 0.12);
	--magbtn-shadow-hover:
		0px 0px 1.2px rgba(0, 0, 0, 0.037),
		0px 0px 2.7px rgba(0, 0, 0, 0.05),
		0px 0px 4.6px rgba(0, 0, 0, 0.057),
		0px 0px 6.9px rgba(0, 0, 0, 0.062),
		0px 0px 10px rgba(0, 0, 0, 0.066),
		0px 0px 14.2px rgba(0, 0, 0, 0.069),
		0px 0px 20.1px rgba(0, 0, 0, 0.073),
		0px 0px 29.2px rgba(0, 0, 0, 0.079),
		0px 0px 45px rgba(0, 0, 0, 0.089),
		0px 0px 80px rgba(0, 0, 0, 0.12);
 
}

@media (min-width: 600px) {
	:root {
		--magnav-position: 3rem;
	}
}

/* -------------------- Cover -------------------- */
body .magnav-cover {
	opacity: 0;
	pointer-events: none;
	transition: 0.2s all;
	position: fixed;
	z-index: 3;
	left:0;
	top:0;
	right:0;
	bottom:0;
	height: 100vh;
	width: 100vw;
}
body.mag-menu-open-body .magnav-cover {
	opacity: 0.5;
	background: var(--magmenu-cover-background);
	-webkit-backdrop-filter: blur(50px); /* Für Safari 9+ */
	backdrop-filter: blur(50px);
}
.mag-menu-wrapper.unten-links {
	left: var(--magnav-position)!important;
	bottom: var(--magnav-position)!important;
}
.mag-menu-wrapper.unten-rechts {
	right: var(--magnav-position)!important;
	bottom: var(--magnav-position)!important;
}

/* -------------------- Head -------------------- */
.magmenu_design0 .mag-menu-head-wrapper { 
	position: relative;
	aspect-ratio: auto 400 / 175;
	overflow: hidden;
}
.magmenu_design0 .mag-menu-head-img {
	aspect-ratio: auto 400 / 175;
}
.magmenu_design0 .mag-menu-head-wrapper span {
	display: block;
	width: 100%
}
.magmenu_design0 .mag-menu-head-text-wrapper {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: var(--magmenu-head-padding);
	background: var(--magmenu-head-background);
}
.magmenu_design0 .mag-menu-head-wrapper a {
	color: var(--magmenu-text-color);
}
.magmenu_design0 .mag-menu-head-wrapper a:focus,
.magmenu_design0 .mag-menu-head-wrapper a:hover {
	color: var(--magmenu-text-color-hover)!important;
}
.mag-menu-head-text {
	font-family: var(--magmenu-head-font-family, inherit);
	font-weight: var(--magmenu-head-weight, inherit);
	font-size: var(--magmenu-head-size, inherit);
	font-style: var(--magmenu-head-style, inherit);
	line-height: var(--magmenu-head-line-height, 1.4);
	letter-spacing: var(--magmenu-head-letter-spacing, inherit);
	text-transform: var(--magmenu-head-text-transform, inherit);
	margin-bottom: 0;
}
/* ---------------- Head End -------------------- */
/* ---------------- NAV ------------------------ */
.mag-menu-wrapper.magmenu_design0 {
	max-width: calc(var(--magmenu-max-width) - 2rem)!important;
}
.magmenu_design0 nav {
	background: var(--magmenu-nav-bg);
	border-radius: var(--magmenu-border-radius);
	border: var(--magmenu-nav-borderstyle) var(--magmenu-nav-bordersize) var(--magmenu-nav-bordercolor) ;
	width:100%;
	padding-bottom: 50px;
	max-width: var(--magmenu-max-width);
	max-height: calc(90vh - 2rem);
	overflow-y: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: box-shadow 0.5s;
	box-shadow: var(--magbtn-shadow);
}
@media only screen and (min-width: 600px) {
	.magmenu_design0 nav {
		max-height: 75vh;
	}
}

.magmenu_design0 nav .mag-navcontainer {
	padding: var(--magmenu-mainmenu-padding);
}
.magmenu_design0 nav .mag-navcontainer > ul > li {
	border: var(--magmenu-border-style) var(--magmenu-border-color) var(--magmenu-border-with);
	margin-bottom: var(--magmenu-item-level1-margin);
	border-radius: var(--magmenu-item-border-radius);
	overflow: hidden;
}
.magmenu_design0 nav .mag-navcontainer > ul > li .mag-nav-textwrapper,
.magmenu_design0 nav .mag-navcontainer > ul > li .mag-nav-icon {
	padding: 0.8rem 1.2rem;
}
.magmenu_design0 nav .mag-navcontainer > ul > li .mag-nav-icon {
	line-height: 1;
}
.magmenu_design0 nav .mag-navcontainer ul li.mag_iconvisual .mag-nav-textwrapper {
	padding-left:0!important;
}
.magmenu_design0 nav .mag-navcontainer > ul > li > a{
	font-size: 1.2em!important;
}
.magmenu_design0 nav .mag-navcontainer > ul > li > ul  li {
	border-top: var(--magmenu-border-style) var(--magmenu-border-color) var(--magmenu-border-with);

}
/* Typo */
.mag-navcontainer p, 
.mag-navcontainer li,
.mag-navcontainer a {
	color: var(--magmenu-link-color);
	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
}
.mag-navcontainer a:focus,
.mag-navcontainer a:hover {
	color: var(--magmenu-link-color-hover)!important;
}
.magmenu_design0 li.current_magitem > a {
	color: var(--magmenu-current-color);
	background: var(--magmenu-current-background);
}
.magmenu_design0 nav:hover {
	box-shadow: var(--magbtn-shadow-hover);
}
.magmenu_design0 nav li a {
	display: flex;
}
.magmenu_design0 .mag-nav-img {
	line-height: 0;
}
.magmenu_design0 .mag-nav-img img {
	width: var(--magmenu-visual-img-width);
	height: var(--magmenu-visual-img-height);
	max-width: inherit;
	line-height: 0;
}
.magmenu_design0 .mag-nav-title,
.magmenu_design0 .mag-nav-subline {
	display: block;
}
.magmenu_design0 .mag-nav-title {
	font-family: var(--magnav-title-font-family, inherit);
	font-weight: var(--magnav-title-font-weight, inherit);
	font-size: var(--magnav-title-font-size, inherit);
	font-style: var(--magnav-title-font-style, inherit);
	line-height: var(--magnav-title-line-height, 1.4);
	letter-spacing: var(--magnav-title-letter-spacing, inherit);
	text-transform: var(--magnav-title-text-transform, inherit);
}
.magmenu_design0 .mag-nav-subline {
	font-family: var(--magnav-subtitle-font-family, inherit);
	font-weight: var(--magnav-subtitle-font-weight, inherit);
	font-size: var(--magnav-subtitle-font-size, inherit);
	font-style: var(--magnav-subtitle-font-style, inherit);
	line-height: var(--magnav-subtitle-line-height, 1.4);
	letter-spacing: var(--magnav-subtitle-letter-spacing, inherit);
	text-transform: var(--magnav-subtitle-text-transform, inherit);
}
.magmenu_design0 .mag-nav-toggle {
	background: var(--magmenu-toggle-background);
	box-shadow: var(--magbtn-shadow);
	border-radius: var(--magmenu-toggle-boder-radius);
	cursor: pointer;
}
.magmenu_design0.mag-menu-open .mag-nav-toggle {
	border-radius: var(--magmenu-toggle-boder-radius-active);
}
.magmenu_design0 .hamburger .line {
	background: var(--magmenu-toggle-line-color)
}

.magmenu_design0  .mag-nav-toggle:focus,
.magmenu_design0  .mag-nav-toggle:hover,
.magmenu_design0.mag-menu-open .mag-nav-toggle {
	background: var(--magmenu-toggle-background-hover)
}
.magmenu_design0  .mag-nav-toggle:hover {
	box-shadow: var(--magbtn-shadow-hover);
}
.magmenu_design0.mag-menu-open .mag-nav-toggle {
	box-shadow: none;
}
.magmenu_design0.mag-menu-open.unten-rechts .mag-nav-toggle { 
	border-radius:  var(--magmenu-toggle-boder-radius);
}
.magmenu_design0.mag-menu-open.unten-links .mag-nav-toggle { 
	border-radius: var(--magmenu-toggle-boder-radius);
}
.magmenu_design0 .mag-nav-toggle:hover .hamburger .line,
.magmenu_design0.mag-menu-open .hamburger .line {
	background: var( --magmenu-toggle-line-color);
}

/* ------------------ Metaarea ----------------------------- */ 
.mag-metamenu-wrapper {
	padding: var(--magmenu-metamenu-wrapper-padding)
}
.mag-metamenu-wrapper ul li a{
	display: block;
	padding: var(--magmenu-metamenu-item-padding);
}

/* ------------------ Suchfeld ----------------------------- */ 
.magsearchyes.magmenu_design0 .mag-metamenu-wrapper ul {
	padding: var(--magmenu-metamenu-padding)
}
.magsearchyes.magmenu_design0 .mag-metamenu-wrapper .search-field {
	border-radius: var(--magmenu-search-field-border-radius);
	outline: none;
	height: var(--magmenu-search-field-height);
}
.magsearchyes.magmenu_design0 .mag-metamenu-wrapper .search-field:focus{
	outline: none!important;
	border: none!important;
}
.magsearchyes.magmenu_design0 .mag-metamenu-wrapper .search-submit {
	border-radius: var(--magmenu-search-button-border-radius);
	height: var(--magmenu-search-field-height);
}
/* ---------------- Browse-Button ------------------------ */
.magmenu_design0.mag-navigation-buttons.position_windowedges a {
	background: var(--magmenu-toggle-background);
	box-shadow: var(--magbtn-shadow);
	border-radius: var(--magmenu-toggle-boder-radius);
	color: var(--magmenu-toggle-line-color);
}
.magmenu_design0.mag-navigation-buttons.position_windowedges a:hover {
	background: var(--magmenu-toggle-background-hover);
	box-shadow: var(--magbtn-shadow-hover);
	color: var(--magmenu-toggle-line-color-hover);

}
.magmenu_design0.mag-navigation-buttons.position_group_center-bottom {
	background: var(--color-header-middle-bg);
	box-shadow: var(--magbtn-shadow-hover);
	border-radius: var(--magmenu-toggle-boder-radius);
}
.magmenu_design0.mag-navigation-buttons.position_group_center-bottom a {
	background: var(--color-header-middle-bg);
	border-radius: var(--magmenu-toggle-boder-radius);
}
.magmenu_design0.mag-navigation-buttons.position_group_center-bottom a:hover {
	background: var(--color-header-middle-text-hover);
	color: var(--color-header-middle-bg);
}