/* ======================================================================== */
/*                                                                          */
/* Style WolfsNatur                               Version 12.1 - 03.04.2025 */
/*                                                                          */
/* ======================================================================== */


/* ------------------------------------------------------------------------ */
/* Grund-Design Menu                                                        */
/*	------------------------------------------------------------------------ */
/* https://www.w3schools.com/css/css_dropdowns.asp */

/*
	float:               right;
	font-size:           1em;
	line-height:        .1em;
	vertical-align:     .225em;
	box-shadow:          0 10px 12px rgba(0, 0, 0, 0.8);

	background: rgba(0, 0, 0, 0.8);
	background: #000000cc;  /* cc = 80% von FF (in Hex: 204 von 255)

	Schwarz   #000
	Rot       #f00
	Grün      #0f0
	Blau      #00f
	Gelb      #ff0
	Magenta   #f0f
	Cyan      #0ff
	Weiss     #fff
*/


/* Hoch - Quer */

/* @media (min-width: 801px) */
@media (orientation:landscape)
{
.Desktop  {}
.Mobile   {display: none;}
}

/* @media (max-width: 800px)*/
@media (orientation:portrait)
{
.Desktop  {display: none;}
.Mobile   {}
}


/* Grundgerüst / Menu-Balken */
.nav
	{
	font-family:         'Comfortaa', verdana, arial, sans-serif;
	font-size:           16px;
	font-weight:         600;
	line-height:         90%;
	letter-spacing:      0.5px;
	text-align:          center;

	word-wrap:           normal;
	overflow-wrap:       normal;
	white-space:         nowrap;
	hyphens:             none;

	position:            fixed; 
	z-index:             40;
	top:                 0; 
	left:                0;
	width:               100%;
	height:              60px;
	max-height:          60px;
	background:          #333;
	opacity:             0.80;
	margin:              0;
	}

/* Trennlinie im Menu */
.nav hr
	{
	background-image:    linear-gradient(to right, #000, #ddd, #000);
	height:              1;
	border:              0;
	margin:              3;
	padding:             0;
	}

/* Menu Stufe 1 */
.nav ul
	{
	list-style:          none;
	line-height:         0.7em;
	padding:             0;
	margin:              0;
	display:             flex;
	justify-content:     center;
}

.nav ul li
	{
	float: left;
	}

.nav ul li a
	{
	line-height:         0.95em;
	display: block; 
	padding: 15px;
	color: #fff;
	text-decoration: none;
	}

.nav ul li:hover
	{
	color:                 #0f0;
	background:            #666;
	border-radius:         4px;
	margin:                3px;
	}

/* Aktives Menu */
/*
.nav ul li:hover a
	{
	background:            #000;
	color:                 #fff;
	}
*/


.nav ul li:hover > ul
	{
	margin-top:            0px; 
	display:               block;
	border-radius:         4px;
	}

/* Menu Stufe 1 = SubMenu */

.nav ul ul
	{
	font-size:           15px;
	line-height:         100%;
	text-shadow:         none;
	text-align:          left;
	display:             none;
	background:    #000; 
	border-radius:         4px;
	padding:       0;
	margin:        0;
	position:      absolute;
	}

/* @media (max-width: 800px)*/
@media (orientation:portrait)
{
.nav ul ul     /* Submenu HG */
	{
	position:       absolute; 
	top:            70px; 
	width:          270px; 
   margin-left:    -135px; /* die halbe Breite */
   left:           50%;
	}
}

	.nav ul ul li
	{
	margin:        0px;
	float:         none; 
	border-bottom: 0px solid #000;
	position:      relative;
	}

.nav ul ul li a
	{
	padding: 10px 20px;
	}

nav ul ul li a:hover
	{
	}

/* SubSub-Menu (Stufe 3) */
.nav ul ul ul
	{
	width:         100%;
	border-left: 2px solid #ddd;
	position: absolute; left: 100%; top:0;
	}





/* Awesome-Icons */

.Awesome-Menu-Mobile
	{
	}

.Awesome-Menu-Desktop
	{
	font-size:        2em;
	padding:          0;  /*  top right bottom left;  */
	margin:           0;  /*  top right bottom left;  */
	text-align:       left;
	float:            left;
	width:            1.4em;  /*  macht alle Icons gleich breit => für's Menu */
	}

.Awesome-SubMenu-Desktop
	{
	font-size:        1em;
	padding:          0;  /*  top right bottom left;  */
	margin:           0 10px 0 0;  /*  top right bottom left;  */
	text-align:       left;
	width:            1.3em;  /*  macht alle Icons gleich breit => für's Menu */
	}