.onlineshop-button {
	z-index: 99;
}

.onlineshop-button a {
	background: var(--primaer);
	border-radius: 50px;
	color: var(--weiss);
	font-family: 'DM Sans', sans-serif;
	font-size: 25px;
	font-weight: 300;
	line-height: 33px;
	text-decoration: none;
	padding: 12px 25px;
}

.onlineshop-button:hover a {
	background: var(--sekundaer);
}

.menu-button {
	border-radius: 50px;
	z-index: 99;
}

.menu-button button {
	color: var(--weiss);
	transition: all 0.01s ease-in-out;
}

.menu-button button:hover {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50px;
}

.menu-button button[aria-expanded="true"]:hover {
	background: none;
}

.be-layout-kein-bild .menu-button button {
	background: rgba(81, 113, 117, 0.1);
	border-radius: 50px;
}

.be-layout-kein-bild .menu-button button[aria-expanded="true"] {
	background: unset;
}

.menu-button button {
	color: var(--weiss);
	font-size: 25px;
	line-height: 33px;
	padding: 12px 30px 12px 30px;
}

.menu-button button:after,
.menu-button button[aria-expanded="false"]::after {
	content: url('/typo3conf/ext/schwimmwerk_memmingen/Resources/Public/Images/Template/Lines-weiss.svg');
	display: inline-block;
	width: 36px;
	height: 30px;
}

.scroll .menu-button button[aria-expanded="false"]::after,
.be-layout-kein-bild .menu-button button[aria-expanded="false"]::after {
	content: url('/typo3conf/ext/schwimmwerk_memmingen/Resources/Public/Images/Template/Lines.svg');
}

.be-layout-kein-bild .menu-button button {
	color: var(--primaer);
}

.scroll .menu-button button {
	color: var(--primaer);
}

.menu-button:hover button {
	color: var(--primaer);
	line-height: 33px;
}

.menu-button:hover button::after {
	content: url('/typo3conf/ext/schwimmwerk_memmingen/Resources/Public/Images/Template/Lines.svg');
}

.menu-button button[aria-expanded="true"]::after {
	content: url('/typo3conf/ext/schwimmwerk_memmingen/Resources/Public/Images/Template/Close.svg');
}

.menu-button button[aria-expanded="true"] {
	color: transparent;
}

.menu-button button.collapsed {}

#mainNav {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 30px;
	top: -20px;
	right: -20px;
	width: 410px;
	position: absolute;
	transition: all 0.4s ease-in-out;
}

#mainNav .mainnav-wrap {
	padding: 140px 30px 30px 30px;
}

.be-layout-kein-bild #mainNav {
	background: rgba(81, 113, 117, 0.1);
}

.scroll #mainNav {
	background: var(--weiss);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.9);
}

#mainNav ul {
	margin: 0;
	padding: 0 0 0 25px;
}

#mainNav ul li a {
	color: var(--primaer);
	text-decoration: none;
}

#mainNav ul li:nth-child(1)::before {
	list-style-type: disc;
}

#mainNav ul li.active:nth-child(1)::marker {
	color: var(--sekundaer);
}

#mainNav ul li:nth-child(n+2) {
	list-style-type: none;
}

#mainNav ul li:nth-child(1),
#mainNav ul li:nth-child(2),
#mainNav ul li:nth-child(3),
#mainNav ul li:nth-child(4) {
	font-family: 'Prata', serif;
	font-size: 40px;
	line-height: 54px;
	font-weight: 400;
}

#mainNav ul li:nth-child(4) {
	margin-bottom: 50px;
}

#mainNav ul li {
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;

}

#mainNav ul li a:hover,
#mainNav ul li.active a {
	color: var(--sekundaer);
}

.navigation-onlineshop-wrap {
	top: 50px;
	right: 50px;
	transition: all 0.4s ease-in-out;
}

.scroll .navigation-onlineshop-wrap {
	top: 30px;
}

/*------------------------------------*\
  #MEDIA-QUERIES
\*------------------------------------*/
@media (max-width: 1199.98px) {}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {


	.menu-button button {
		font-size: 20px;
		line-height: 26px;
	}

	#mainNav {
		background: #fff;
		border-radius: 0px 0px 30px 30px;
		right: 0;
		width: 410px;
		position: absolute;
		transition: none;
	}

	#mainNav .onlineshop-button {
		position: absolute;
		top: 30px;
	}

	#mainNav .onlineshop-button a {
		font-size: 20px;
		line-height: 26px;
	}

	#mainNav ul li:nth-child(5),
	#mainNav ul li:nth-child(6),
	#mainNav ul li:nth-child(7),
	#mainNav ul li:nth-child(8) {
		margin-bottom: 10px;
	}
	
	.navigation-onlineshop-wrap {
		top: 20px;
		right: 20px;
	}
	
}

@media (max-width: 575.98px) {

	.menu-button{
		position: absolute;
		right: 5px;
		top: 0px;
	}

	#mainNav,
	.navigation-onlineshop-wrap {
		width: 100%;
	}

	.navigation-onlineshop-wrap {
		right: 0;
	}
}