/* -------------------------------------------------- */
/* ------------------ DESIGN 1 ---------------------- */
/* -------------------------------------------------- */


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


	/* ==== Base ==== */
	--magmenu-max-width: calc(100vw);
	--magmenu-max-height: calc(100vh);
	--magmenu-nav-bg: #ffffff;



	
	/* ==== Head ==== */
	--magmenu-head-padding: 1rem;
	--magmenu-head-background: rgba(0,0,0,0.75);
	--magmenu-head-font-family: var(--h2-font-family, inherit);
	--magmenu-head-weight: var(--h2-font-weight, inherit);
	--magmenu-head-size: 5rem;
	--magmenu-head-color: #ffffff;
	--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: 0;
 	--magmenu-item-level1-margin: 10px;
 	
 	
 	--magmenu-border-style: solid;
 	--magmenu-border-color: var(--color-header-top-transparent-bg);
 	--magmenu-border-with: 1px;
 	--magmenu-border-radius: 0;
 	--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);
 
	/* ==== Toggle ==== */
	 --magmenu-toggle-boder-radius: 0;
	 --magmenu-toggle-boder-radius-active: 0;
	 --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);
}

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

/* -------------------- Pos -------------------- */
.mag-menu-wrapper.unten-links {
	left: 0!important;
	bottom: 0!important;
}
.mag-menu-wrapper.unten-rechts {
	right: 0!important;
	bottom: 0!important;
}

/* -------------------- Head -------------------- */
.magmenu_design1 .mag-menu-head-wrapper { 
	position: relative;
	overflow: hidden;
}
.magmenu_design1 .mag-menu-head-wrapper span {
	display: block;
	width: 100%
}
.magmenu_design1 .mag-menu-head-text-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	padding: 5vw;
	padding-top: 30vh;
	right: 0;
	width: 100%;
	background: var(--magmenu-head-background);
}
.magmenu_design1 .mag-menu-head-wrapper a {
	color: var(--magmenu-head-color);
	display: block;
	width:100%;
	height: 100%;
	background: #ffffff;
}
.magmenu_design1 .mag-menu-head-wrapper > a > .mag-menu-head-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.magmenu_design1 .mag-menu-head-wrapper a:hover {
	color: var(--magmenu-head-color)!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;
}
.mag-menu-head-subline {
	font-size: calc(var(--magmenu-head-size, inherit) * 0.3);
}
/* ---------------- Head End -------------------- */
/* ---------------- NAV ------------------------ */


.mag-menu-wrapper.magmenu_design1 {
	max-width: var(--magmenu-max-width)!important;
}
.mag-menu-open.mag-menu-wrapper nav {
	background: var(--magmenu-nav-bg);
	border-radius: 0;
	width:100%;
	height: 100vh;
	max-width: var(--magmenu-max-width);
	max-height: var(--magmenu-max-height);
	overflow-y: none;
	position: absolute;
	bottom: 0;
	left: 0;
}
@media only screen and (min-width: 600px) {
	.magmenu_design1 nav {
		display: flex;
	}
	.mag-menu-head-wrapper {
		max-width: 50%;
	}
}
.mag-navcontainer {
	overflow-y: auto;
	padding: 8vw;
	width: 100%;
	max-width: 50%;
}

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

}

/* Typo */
.mag-menu-wrapper p, 
.mag-menu-wrapper li,
.mag-menu-wrapper a {
	color: var(--color-header-middle-text);
	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
}
.mag-menu-wrapper a:hover {
	color: var(--color-header-middle-text-hover);
}
.mag-menu-wrapper li.current_magitem > a {
	color: var(--magmenu-current-color);
	background: var(--magmenu-current-background);
}
.mag-menu-wrapper nav:hover {
	box-shadow: var(--magbtn-shadow-hover);
}
.mag-menu-wrapper nav li a {
	display: flex;
}
.mag-nav-img {
	line-height: 0;
}
.mag-nav-img img {
	width: var(--magmenu-visual-img-width);
	height: var(--magmenu-visual-img-height);
	max-width: inherit;
	line-height: 0;
}
.mag-nav-title,
.mag-nav-subline {
	display: block;
}
.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);
}
.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);
}
/* ------------------- Toggle ----------------------- */
.mag-nav-toggle {
	background: var(--magmenu-toggle-background);
	box-shadow: var(--magbtn-shadow);
	border-radius: var(--magmenu-toggle-boder-radius);
	cursor: pointer;
}
.mag-menu-open .mag-nav-toggle {
	border-radius: var(--magmenu-toggle-boder-radius-active);
}
.mag-nav-toggle .hamburger .line {
	background: var(--magmenu-toggle-line-color)
}

.mag-nav-toggle:hover,
.mag-menu-open .mag-nav-toggle {
	background: var(--magmenu-toggle-background-hover)
}
.mag-nav-toggle:hover {
	box-shadow: var(--magbtn-shadow-hover);
}
.mag-menu-open .mag-nav-toggle {
	box-shadow: none;
}
.mag-menu-open.unten-rechts .mag-nav-toggle { 
	border-radius:  var(--magmenu-toggle-boder-radius);
}
.mag-menu-open.unten-links .mag-nav-toggle { 
	border-radius: var(--magmenu-toggle-boder-radius);
}
.mag-nav-toggle:hover .hamburger .line,
.mag-menu-open .hamburger .line {
	background: var( --magmenu-toggle-line-color);
}
/* ---------------- Browse-Button ------------------------ */
.position_group_center-bottom {
	bottom: 0;
	left: 50px;
	z-index: 10;
}
.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);
}
.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);

}
.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);
}
.mag-navigation-buttons.position_group_center-bottom a {
	background: var(--color-header-middle-bg);
	border-radius: var(--magmenu-toggle-boder-radius);
	color: var(--magmenu-toggle-line-color);
}
.mag-navigation-buttons.position_group_center-bottom a:hover {
	background: var(--color-header-middle-text-hover);
	color: var(--color-header-middle-bg);
}