/* ================================= */
/* MOBILE NAVIGATION fängt hier an   */
/* ================================= */

.toggleMenu { display: none; }

@media (max-width: 768px) {

/* Toggle-Button */

.toggleMenu {
	display:    block;
	width:      44px;
	height:     44px;
	background: black;
	border:     0;
	cursor:     pointer;
	position:   relative;
	z-index:    2000;
	}
	
.toggleMenu {margin-left: auto;}

.toggleMenu span {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 3px;
	background: #222;
	border-radius: 2px;
	transition: all .3s ease;
}

.toggleMenu span:nth-child(1) { top: 12px; }
.toggleMenu span:nth-child(2) { top: 20px; }
.toggleMenu span:nth-child(3) { top: 28px; }

/* Hamburger animieren */
.toggleMenu.active span:nth-child(1) { transform: rotate(45deg); top: 20px; }
.toggleMenu.active span:nth-child(2) { opacity: 0;}
.toggleMenu.active span:nth-child(3) { transform: rotate(-45deg); top: 20px; }

/*Toggel Menü Ende */

.nav { padding-left: 0 !Important; } /* Erst mal den Rand aus der Hauptnav weg nehmen */

.nav {
	flex-direction: column;
	position: fixed;
	top:    0;
	left:   0;
	width:  80vw;   /* die Brite der Überdeckung*/
	height: 100vh;
	transform:  translateX(-100%);     /* Die Animation zum Einblenden */
	transition: transform .45s ease;
	background: rgba(0, 0, 0, 0.88);
	padding: 3rem 1rem;
	z-index: 2500;
	align-items:  flex-start;
	overflow-y:   auto; /* scrollen, falls Menü länger wird */
	font-size:    .9rem;
    line-height:  .9;
    padding-left:  0 !Important; /* Rand aus der Hauptnav */
    padding-top: 20%;
}

.nav.active { 
	transform: translateX(0); 
}

.nav > li {
	height: auto;
	width: 100%;
	align-items: flex-start;
}

.nav > li > a {
	width:   100%;
	padding: 0.75rem 1rem;
	color:   #f4f4f4;
}

.nav > li + li::before {
	display: none;
}

/* Mega-Dropdown */
.mega-dropdown {
	position: relative;
	display: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	padding: 0.5rem 0;
	z-index: 2600;
}

.mega-dropdown.mobile-active { 
	display: block; 
	display: block;
	position: fixed;
	width: 65%;
	height: auto;
	top: 10%;
	left: 20%;
	background:    #c9c9c9;
	border-radius: .4rem;
	padding:       .4rem
}

/* die Breite der gid box anpassen ohne mini-max */
.dropdown-grid { 
	grid-template-columns: 1fr; 
	gap: .5rem;
	
	} 

.dropdown-column {
	 border-radius: 0;
	 padding: .2rem;
	 background: transparent;
}

.dropdown-column ul {
	padding:    0;
	margin:     .4rem 0;
	border-top: 1px solid #bbb;
}

.dropdown-column ul li a {
	color: #555;
	font-size: .75rem;
	position: relative;
	transition: color .2s ease;
	line-height: 1.2;
	padding:     .2rem 0 0 0;

}

.column-title {
	font-size: 0.85rem;
	line-height: 1.2;
	padding-bottom: 0;
	font-weight: 400;
	margin: 0;
}

 
/* schliessen von max-width muss drin bleiben wichtig */
/* Somit das Ende der Mobilen NAV */

}

/* Somit das Ende der Mobilen NAV */