@charset "utf-8";
/* CSS Document */

body {
	/* height: 100%; */
	background-color: #794D3E;
}

nav {
	position: sticky; 
	top: 5rem; /* new */
	z-index: 1000;
	background-color: #794D3E;
	color: #B29F8D; 	
	padding: 0rem;
	margin: 0rem; 
	margin-bottom: 1rem;
}

header {
	position: sticky;
	top: 0;
	width: 100%; 
	z-index: 1000;
}

main {
	background-color: #794D3E;
	color: #FFF; 	
	padding: 0.5rem;
	margin: 0rem; 	
}

/* Start header */	
.img-UE {
	width: 50px;
	height: auto;
	/*
	padding-bottom: 10rem; 
	float: left;
	margin-right: 0.5rem;
	display: inline-block;
	*/
}

h1 {
	font-size: 2.5rem; 
	display: inline-block;
	 	
}


/* change to 500px? */
 @media screen and (max-width: 700px) { 
	h1 {
	font-size: 1.5rem; 
	display: grid;
	margin: 0.1rem;
	}
	.img-UE {
	width: 25px;
	height: auto;
	}
        /* new */
        header {
		position: sticky!important;
		top: 0;
	}
	nav {
		top: 5.5rem;
	} 
 } 

.flex-container {
  	display: flex;
  	flex-direction: row;
 	flex-wrap: wrap;
	align-content: center;
}

/* test header tables etc.
p {
  	word-wrap:break-word;
}

table {
  	border-collapse: collapse;
  	width: 100%;
} 

th.flex-column,
td.flex-column {
  	width: nowrap;
   	text-align: justify;
}
.OGW {
	float: left;
}
*/

/* End Header */

/* Start navigation */
.nav-header {
	position: static; 
	padding: 0rem; 
	margin: 0rem; 
	overflow: auto;
}

.nav-header ul {
	list-style: none;
	background-color: #000;
	padding: 0rem; 
	margin: 0rem; 
	display: flex;
	flex-flow: column;
	max-height: 0;
}

.nav-header ul li {
	display: inline-block; 
	position: relative; 
	margin-top: 0rem;
	margin-bottom: 0rem;
	padding: 0rem;
}

.nav-header ul li a {
	display: block; 
	padding: 0.5rem 1rem;
	background-color: #222; /* #333 */
	color: #FFF; 
	text-decoration: none; 	
}

/* Start subnavigation */
.nav-header ul li ul.subnav {
	background: transparent; /* #794D3E */ 
	position: absolute; 
	z-index: 1000; 
	display: none; 
}

.nav-header ul li ul.subnav li {
	display: block;
	text-align: left;
	min-width: 14rem;
}

.nav-header ul li:hover ul.subnav {
	display: block;
}

.nav-header ul li a:hover {
	background-color: #B29F8D;
	color: #000;
}

.current a{
	background: #B29F8D!important;
	color: #000;
}

/* End Subnavigation */

/* Start navigation first 
.nav-header li {
	list-style: none; 
	flex: 1; 
	text-align: center;
}
.nav-header a {
	display: block; 
	text-decoration: none; 
	background-color: #222; 
	color: #FFF; 
	padding: 0.5rem 1rem; 	
}
.nav-header a:hover, .nav-header a:focus {
	background-color: #B29F8D;
	color: #000;		
}
 End navigation first */

/* Start menu on small Mobile */
/* out as button
.menubutton {
	display: flex;
	align-items: center;
	cursor: pointer;
	background: inherit;
	color: #FFF;
	font: inherit;
	text-align: center;
	padding: 0.5rem 0.5rem;
	margin: 0;
	font-size: 1.25rem;
	border: solid; 
	border-radius: 10px;
} */
/* 3 bar-button */
.menuIcon {
 	width: 25px;
 	height: 4px;
	background-color: black;
 	margin: 4px 0;		
}

.showmenu .bar1 {
 	transform: translate(0, 8px) rotate(-45deg);
}

.showmenu .bar2 {opacity: 0;}

.showmenu .bar3 {
 	transform: translate(0, -8px) rotate(45deg);
}

.showmenu + ul {
	max-height: 200rem;
	transition: max-height 500ms;
	overflow: initial;
}
/* End menu on small Mobile */

/* Start menu on large Mobile */
/* change to 500px? */
@media screen and (min-width: 600px) {
	/*.menubutton {display: none !important;} out */
	.nav-header {
		position: sticky;
		overflow: visible;
	}
	.nav-header ul {
		max-height: none!important;
		flex-flow: row;
		padding: 0;
	}
	.nav-header li {
		flex: 1;
		max-width: 12rem;
		text-align: center;
		border-left: 1px solid #eee;			
	}

	.nav-header ul li ul.subnav {
		background: transparent; /* #794D3E */ 
		position: absolute; 
		z-index: 1000; 
		display: none; 
    			height: 15rem;	       /* erreichen der Höhe */
    			max-height: 100vh;     /* maximal 90% der Bildschirmhöhe */
    			overflow-y: auto;     /* Scrollbar anzeigen */
	}

	.nav-header li:last-child {border-right: 1px solid #eee;}
	.nav-header a {margin-right: 0;}
	.menuIcon {display: none;} /* in */
}

/* End menu on large Mobile */

/* Start main */

.main-title{
	color: #B29F8D !important; 
	text-decoration: none; 
	font-size: 1.5rem;
	margin-top: 0rem;
  	margin-left: 0rem;
}


.main-text{
	color: #FFF; 
	text-decoration: none; 
	font-size: 1rem;
  	margin-left: 0rem;
	width: 48rem; 
	max-width: 90vw;
}

/* within box */
.main-text-box{
	color: #FFF; 
	text-decoration: none; 
	font-size: 1rem;
  	margin-left: 0rem;
	width: 45rem; 
	max-width: 90vw;
}


.text-quiz{
	color: #000; /* #B29F8D */ 
	font-size: 1rem;
  	margin-left: 0.5rem;
}

/* within box */
.black{
	color: #000; 
}

.map {
	width: 48rem; 
	max-width: 90vw;
	height: auto;
}

/* End main */

/* Start footer */
footer {
	border-top: solid;
	position: fixed; /* or static */
	bottom: -1rem; /* or 0rem */
	width: 100%;
	z-index: 1000;
}

.footer li {
	display: inline; 
	margin-right: 0.5rem; 	
}

.footer ul {
	padding: 0; 
	margin: 0; 
}

.footer a {
	color: #000; 
	text-decoration: none; 
}
/* End footer */



/* Start contact form */ 
.contactLabel { 
	display: block; 
}

.contact {
	margin-bottom: 1rem; 
}

.contactButton {
	text-decoration: none;
    width: auto;
    border: none;
    font-size: 1rem;
	border-radius: 1rem;
    background-color: #E29000;
    padding: .3rem;
}
/* End contact form */ 

/* Start Panel */ 
section{
	box-shadow: 0rem 0rem grey;
	font-size: 1.3rem;  
	width: 45rem; 
	max-width: 90%;
	background-color: white;
}

section, fieldset{
    border-radius: 0rem;
    padding: 1rem; 
}

fieldset{
    border: 0.2rem solid black; 
}

.fieldset-info{
	border: 0.2rem solid #B29F8D;
	width: 45rem; 
	max-width: 90%;
}
/* End panel */