@charset "UTF-8";

nav {
  float: left;
  width: 100%;
	background-color: #333333;
}

nav * {z-index:888;}

nav ul {
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  color: white;
  text-decoration: none;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: white;
  transition: 0.5s;
}

nav ul li a {padding:1em;}
/* Dreieck weiss Menu*/
nav ul > li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 0.625em;
  margin-top: 0.313em;
  border-left: 0.313em solid transparent;
  border-right: 0.313em solid transparent;
  border-top: 0.313em solid white;
  border-bottom: 0.313em solid transparent;
}

/* Dreieck weiss Unter-Menu*/
nav ul ul li.submenu > a:after {
	margin-left: auto;
  margin-right: -0.625em; 
  border-left: 0.313em solid white;
  border-right: 0.313em solid transparent;
  border-top: 0.313em solid transparent;
  border-bottom: 0.313em solid transparent;
}

nav ul li:hover {background: darkgray;}

nav ul ul {
  position: absolute;
  top: -9999em;
  left: -9999em;
  background: #333333;
  box-shadow: 0.125em 0.125em 0.313em rgba(0, 0, 0, 0.5);
}

nav ul ul li {
  float: none;
  width: 15em;
	border-bottom: 0.063em solid #555555;
}

nav ul ul li a {
  padding: 0.625em 1.25em;
}

nav ul ul li:last-child {
  border-bottom: none;
}

nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

nav ul ul li:hover > ul {
  top: 0;
  left: 15em;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
  border:0em green solid;
  text-decoration: none;
  color: #FFFFFF;
  background-color:#333333;
  text-align: left;
  padding: 1.2em 1.2em; 
  display: none;
  font-weight:bold; 
  box-shadow: 0.3em 0.3em 0.6em rgba(0, 0, 0, 0.6); 
}

/* Navbar ICONS */
.nav-icon-1 > img {height:1.2em;max-width:1.2em;vertical-align: text-bottom;text-align:left;margin-right:0.5em;}

/*Hide checkbox*/
nav input[type=checkbox]{display:none;}

/*-------------------------------------------------------------------------------------------*/ 
/* Inside Naviagations Menü                                                                  */
/*-------------------------------------------------------------------------------------------*/
.insidenav {
	display:block;
	width: max-content;
}

.insidenav * {
	font-size:.7rem!important;
	z-index:888;
}

.insidenav ul {
	margin: 0;
	padding: 0;
	text-align:left;
	display:none;
/*	box-shadow:0.4em 0.375em 0.438em 0.063em rgba(0, 0, 0, 0.6);*/
	box-shadow:0.3em 0.3em 0.3em 0.3em rgba(0,0,0,0.7);
}

.insidenav select {
	display:none;
}

.insidenav a {
	display: block;
	color: black;
	text-decoration: none;
}

.insidenav ul li {
	list-style: none;
	color: black;
	transition: 0.5s;
}

.insidenav li a {
	border:.0em lightgray solid;
	padding: 0.625em 0.8em;
	background-color:#ececec;
}

.insidenav ul li:hover {background: none; list-style: none;}

.insidenav ul li a:hover {background-color:lightgray;}

.insidenav input[type=checkbox]{display:none;}

.show-inside-menu {
	text-decoration: none;
	color:black;
	background-color:lightgray;
	text-align: left;
	/*padding: 1.2em 1.2em;*/
	padding:0.5em 0.5em; 	
	display: block;
	font-weight:bold; 
	box-shadow:0.3em 0.3em 0.3em 0.3em rgba(0,0,0,0.7);

}
/*------------------------------------------------------------------------------------------------------------------ 
 Anker Naviagations Menü 
 
 Position Bottom: <div class="anchor-nav"><a class="back-to-top-button" href="#top">Back to top</a></div>
 Position Top: 		<div class="anchor-nav"><a class="back-to-top-button position-top" href="#top">Back to top</a></div>       
-------------------------------------------------------------------------------------------------------------------*/ 
.anchor-nav {
	display: flex;
	flex-wrap:wrap;
	gap: .5em;
}

.anchor-nav a {
	flex-basis: max-content; 
	text-align: center;
	padding: .2em;
	color: black;
	background-color: lightgray;
	text-decoration: none;
	border: .2em lightgray outset;
	font-weight:bold;
	font-size: .8rem;
	box-shadow: .3em .3em .45em black; 

}
.anchor-nav a:hover {
	background-color: white;
	/* border-color:white; */
}
			
.back-to-top-button {
	position: fixed;
	bottom:1em;
	right: 1.5em;
	opacity: 0;
	translate: calc(100% + .625em);
	transition: all 0.5s;
}
.back-to-top-button.position-top {
	top: .625em;
	bottom:unset;
}

body:has(div:target) .back-to-top-button {
	opacity: 1;
	translate: 0;
}
.back-to-top-button.active {
	opacity: 1;
	translate: 0;
}
/*------------------------------------------------------------------------------------------------------------------ 
 Got to Top Button
 
Flow-Root: <div class="anchor-nav-to-top-button"><a href="#top">Back to top</a></div>
Block:     <div class="anchor-nav-to-top-button-block"><a href="#top">Back to top</a></div>
-------------------------------------------------------------------------------------------------------------------*/
.anchor-nav-to-top-button {
	 display:inline flow-root;
	 float:right;
 }  
	
 .anchor-nav-to-top-button.postion-left {
	 float:left;
 } 
 
 .anchor-nav-to-top-button-block {
	display:block;
	text-align:center;
	margin: .3em;
 } 
 .anchor-nav-to-top-button-block.postion-left { text-align:left;}   
 .anchor-nav-to-top-button-block.postion-right { text-align:right;}   


.anchor-nav-to-top-button a, .anchor-nav-to-top-button-block a {
	text-align: center;
	padding: .2em;
	color: black;
	background-color: lightgray;
	text-decoration: none;
	border:.1em lightgray outset;
	font-weight:bold;
	font-size:.8rem;
	box-shadow: .3em .3em .45em black; 
}
/*-------------------------------------------------------------------------------------------*/ 
/* Grosse Aufloesung                                                                         */
/*-------------------------------------------------------------------------------------------*/ 
@media (min-resolution: 200dpi) {} 
/*-------------------------------------------------------------------------------------------*/ 
/* Handy Querformat                                                                          */
/*-------------------------------------------------------------------------------------------*/ 
@media only screen and (min-width: 360px) and (max-width: 1024px) and (orientation:landscape) {
	.show-menu {display:block;}
	nav {border:green 0em solid!important;}
	
	#menu {display: none;}
	
	nav a:after {display: none;}

	nav li {
		float: none !important;
		width: 100% !important;
		border-bottom: none !important; 
	}
  
	nav li a {
		border:0.1em black solid;  
		padding: 0.625em 0.8em !important; 
		background: #4a4a4a;
	}
  
	nav ul li:hover {background: none;}
  
	nav ul li a:hover {background: darkgray;}
  
	nav ul ul {
		position: relative !important;
		width: 100%;
		left: 0 !important;
		top: 0 !important;
		background: none !important;
		box-shadow: none;
	}
  
	nav ul ul li {padding-left: 1.25em;}
}
/*-------------------------------------------------------------------------------------------*/ 
/* Handy Hochformat                                                                          */
/*-------------------------------------------------------------------------------------------*/ 
@media only screen and (min-width: 150px) and (max-width: 1024px) and (orientation:portrait) {
  .show-menu {display:block;}  
  nav {
		border:red 0em solid!important;
		/* background-color:white; */
		background-image: url('../images/background/wald_background.jpg'); 
		background-size: cover;
	}

	#menu {display:none;}
	
	nav ul > li.submenu > a:after {
		position: relative ;
		float: right;
		content: '';
		margin-left: 0;
		margin-top: 0;
		border:0;
	}
 
	nav ul li.submenu ul {
		display:none;
  }

  nav ul li.submenu:hover > ul {
		display:block!important;
  }  
  	
	nav ul ul li.submenu > a:after {
		margin-left: auto;
		margin-right: 0; 
		margin-top: 0;
		border:0;
	}
 	
	nav li {
		float: none !important;
		width: auto !important;
		border-bottom: none !important; 
	}
  
	nav li a {
		border:0.1em black solid;  
		padding: 0.625em 0.8em !important;
		background: #4a4a4a;
	}
  
	nav ul li:hover {background: none;}
  
	nav ul li a:hover {
		background: darkgray;
	}
  
	nav ul ul {
		position: relative !important;
		width: 100%;
		left: 0 !important;
		top: 0 !important;
		background: none !important;
		box-shadow: none;
	}
  
	nav ul ul li {padding-left: 1.25em;}
	
	.back-to-top-button {top: .5em;right: .5em;bottom:unset;}
}