/* 11d-nav-mmenu.css Stand: 18-07-2025*/
/* mit der Erweiterung mmenu */

/*  Es muss eine Instanz Konfiguriert werden unter System --> mmenu-Konfiguration

	zusätzlich

	Modul "Navi - Toggler" mit Eigener HTML-Code
	<div class="nav-mobile"><a href="#navi-mmenu">&#9776; Menü</a></div>
	Wird unter dem Banner-Modul auf der Seite plaziert
	
	Modul "Navi - MMenu Mobile Navigation" mit mmenu - Navigationsmenü
	wichtig: CSS-ID navi-mmenu zum Aufruf über Navi-Toggler
	Wird als letzen Modul im Footer platzeirt. 
*/

:root {
    
	--mmenulink: rgba(255,255,255,1);
	--mmenulinkhover: rgba(190,190,190,1);
	/* wird das Hamburger Menu auf der Desktop Version angezeigt holt es sich die Farbdefinitiongen von der Navi CSS */
}

.nav-mobile {
	margin-bottom: 0.7em;
	margin-top: 0.7em;
    text-align: center;
	display: block;
}

.nav-mobile a,
.nav-mobile a:visited {
	font-size: 1.5em;
	color: var(--mmenulink);
	text-decoration: none;
}

.nav-mobile a:hover,
.nav-mobile a:focus,
.nav-mobile a:active {
	font-size: 1.5em;
	color: var(--mmenulinkhover);
	text-decoration: none;
}

@media screen and (min-width: 768px) {
    
	/* nur wenn ausgeblendet werden soll
	
    .nav-mobile {
		display: none;
	} */

	.nav-mobile {
		margin: 0;
		float: left;
		line-height: 2em;
		font-size: 1em;
		padding: 0 0.5em;
	}
	
	.nav-mobile:hover {
		color: var(--linknavicolor);
		background-color: var(--navi-hover-back);
		border-top-left-radius: 0.4em;
		border-top-right-radius: 0.4em;		
	}
	
	.nav-mobile a,
	.nav-moblie a:visited {
		line-height: 2em;
		font-size: 1em;
	}
	
	.nav-mobile a:hover,
	.nav-mobile a:focus,
	.nav-mobile a:active {
		font-size: 1em;
		color: var(--linknavicolor);
		background-color: var(--navi-hover-back);
	}	

}