html {
		box-sizing: content-box;

	}
body{
		display: flex;
		flex-flow: column wrap;;
/*		align-content: baseline;*/
		min-width: 320px;
		font:1em Roboto, sans-serif;
		font-size:1em;
		margin:0px;
		padding:0px;
		background-position: left top;
		background-image: url("bilder/Muster.png");
		background-repeat: no-repeat;
		background-color:#98a898;
}

#main{
		display:flex;
//		flex: 1 1 100%;
		flex-flow:column;
		text-align:left;
		margin:0px auto;
		max-width:960px;
		background-color:#E3ECCA;
		padding-top:0px;
}
article{    
    padding: 0px 30px;
	margin-bottom: 10px;
}
/*nötig für Mobilphone*/
@media all and (max-width: 60em) {
	article{    
		padding: 0px 10px;
	}		
}

.top{
	color:#1B6D2F;
	text-decoration:none;
	padding:5px 5px 5px 5px;
	font-size: 1.1em;
	font-weight: bold;
}
.top_link{
	display:flex;
	justify-content:center;
	max-width:80em;
	margin:0px auto;
	padding:5px 5px 5px 5px;
	
}
.back-to-top{
	position:fixed;
	right:5%;
	bottom:3%;
	mix-blend-mode: difference;
}
.back-to-top-text{
	display:none;
}
#kopf_bild{
		
		justify-content:center;
		max-width:80em;
		margin:0px auto;
		background-color:#3c6f37;
}
#kopf_bild img{
		max-width:100%;
		height:auto;
		display:flex;
		flex: 1 1 100%;
		margin:0px auto;
}
nav{
	position:sticky;
	top:0px;
}

#navi_h{
		display:flex;
		flex: 1 1 100%;
		flex-flow:row;
		justify-content:center;
		background-color:#3c6f37;
		padding:5px 0px 5px 0px;
		margin:0px auto;
		text-transform: uppercase;
		z-index: 1;
}
/*nötig für Mobilphone*/
@media all and (max-width: 60em) {
	#navi_h{
		flex-flow:column;
	}		
}

.link, .link2{
		text-decoration:none;
		padding:10px;

		font-weight:bold;
		color:#F5F5F5;
}
.link2{
		font-size:0.9em;
		text-transform:none;
}

#mitte{
		background-color:#FCFCFD;
		margin:0px;
		padding:0px;
		opacity: 1;
}

/* Inhalt */
#inhalt{
		padding:32px 0px 24px 0px;
		min-height:500px;
		color:#1B6D2F;
		line-height:1.5em;
		opacity: 1;
}

/*nötig für Mobilphone*/
@media all and (max-width: 30em) {
	#inhalt{
		padding:2px;	
	}
}

.link_s{
		text-decoration:none;
		color:#1B6D2F;
}

/*nötig für Mobilphone*/
@media all and (max-width: 30em) {
	.link_s{
		#display:flex;	
	}
}
.link_s:hover{
	color:#FF8C00;
}
h2 a.link_s{
	display:flex;
}

h1{
		color:#F8F8F8;
		font-size:1.2em;
		background-color:#3c6f37;
		padding:10px 20px;
		margin-bottom:20px;
		box-shadow: 0px 2px 5px #666;
	
}

h2{
		color:#F8F8F8;
		font-size:1.1em;
		background-color:#3c6f37;
		padding:5px 20px ;
        box-shadow: 0px 2px 5px #666;		
}

h4{
		color:#F8F8F8;
		font-size:1.05em;
		background-color:#3c6f37;
		padding:5px;
		margin-left:30px;
		box-shadow: 0px 2px 5px #666;		
}
h2 a.link_s{
	color:#F8F8F8;
}

span.reverse{
		unicode-bidi:bidi-override; direction:rtl;
}

p{
		padding:0px;
}

u{
		text-decoration:underline;
		font-weight:bold;
}

/* Fuss */
#fuss{
		display:flex;
		flex-flow:column;
		justify-content:center;
		background-color:#3c6f37;
		padding:10px 20px;
		box-sizing: border-box;
}

#fuss a, #fuss .text{
		color:#F8F8F8;
		text-decoration:none;
}

#fuss a:hover, #navi_h a:hover{
		color:#FF8C00;
}
#sitemap{
	display:flex;
	flex: 1 1 100%;
	flex-flow: row;
	box-sizing: border-box;
	justify-content: space-around;
	background-color:#3c6f37;
	padding:0px;
	max-width:960px;

	margin:10px auto;

}
/*nötig für Mobilphone*/
@media all and (max-width: 60em) {
	#sitemap{
		flex-flow:column;
	}		
}

#sitemap .ebene1{
	font-weight:bold;
	padding:10px;
	max-width: 15%;
}
#sitemap a.ebene2{
		font-size:0.8em;
		font-weight:400;
		display:block;
		margin-left:3px;
}
#sitemap .ebene1 a{
		display:block;
		color:#F8F8F8;
		text-decoration:none;

		padding:1px;
}
#sitemap .ebene1 a:hover{
		color:#FF8C00;
}

#navi_l a:hover{
		color:#FF8C00;
}

a:focus{
		text-decoration:none;
}

a:hover{
		color:#FF8C00;
}


.akt,a.akt, #navi_l a.akt{
        color:#FFA500;
}

.red{
        color:#FF8C00;
}


.div_pic_r{
		clear:right;
		float:right;
		background-color:#FCFCFD;
		padding:2px;
}

.div_pic_l{
		clear:left;
		float:left;
		background-color:#FCFCFD;
		padding:2px;
}
/*nötig für Mobilphone*/
@media all and (max-width: 30em) {
	.div_pic_r, .div_pic_l{
		clear:both;
		float:none;
	}
}
.pic{
		margin:2px;
}

.pic_r{
		margin:0px 0px 15px 20px;
		clear:right;
		float:right;
}
/*nötig für Mobilphone*/
@media all and (max-width: 30em) {
	.pic_r{
		margin: 0px auto 5px;
		clear:right;
	}
}

.pic_l{
		margin:0px 20px 15px 0px;
		clear:left;
		float:left;
}
/*nötig für Mobilphone*/
@media all and (max-width: 30em) {
	.pic, .pic_r, .pic_l {
		float:none;
		clear:both;
		margin: 0px auto;
		width: 90%;
		height: auto;
		display: flex;
	}
}
.bor{
		padding:1px;
		border:1px solid #98a898;
		#box-shadow: 2px 2px 10px 0px #A8AE98;
		#border-radius:2px;
		#max-width: 80%;
		#height: auto;
}

.abstand{
		margin:10px;
}

.abstand_li{
		margin-left:10px;
}

.abstand_zeile{
		margin-bottom:10px;
}

.produkt_ueb{
		 clear:both;
		 display:block;
		 padding:0px 5px;
		 display: flow-root;
}

.produkt_o_ueb{
		 padding:10px 10px 10px 10px;
}

.bold{

		font-weight:700;
}

.center{
		text-align:center;
}

.right{
		float:right;
}

.left{
		float:left;
}

address.left{
		margin-left:10px;
		margin-right:50px;
}

.both{
		clear:both;
}

.visitenkarte{
		padding:20px;
}

.oben{
		vertical-align:top;
}
/* Navigation */

nav .nav_group{
	display: flex;
	flex-flow: column;
	margin: 5px 0px 0px;
}
nav .nav_fix{
	max-width:80em;
	display: flex;
	flex-flow: row;
#	justify-content: flex-start;
	flex:1;
	margin:auto;
}
.burg, .close{
	font-size: 2em;
	font-weight: bold;
	max-width: 0.5em;
	justify-content: flex-end;
	#display: flex;
	flex: 1;
} 
nav .menu_nav, nav .menu_mit, nav .menu_nav2{
	display: flex;
	flex: 1 1 100%;
	margin: 5px 0px 5px;
	list-style: none;
	padding-left: 0;
	margin:auto;
}
nav .menu_nav2{
	font-size: 0.8em;
}
nav .menu_nav ul, nav .menu_nav2 ul{
	list-style: none;
	display: flex;
	flex-flow:column;
	padding: 5px;
}

 /*Mobiles Menue ausblenden*/ 
@media screen and (min-width: 60em) {
 
  nav  a#nav-m,
  nav  a.close {
    display: none;
  }
}
  /*Formatierung Mobiles Menue*/
@media screen and (max-width: 60em) {
	nav .menu_nav{
		font-size:1.2em;
	}
}
 /*Formatierung Mobiles Menue*/
@media screen and (max-width: 60em) {
	nav .menu_nav, nav .menu_nav2{
		display:block;
		flex-flow: column;
		align-items: flex-start;
		margin:1px;
		width:60%
	}
	
	nav .nav_group{
		position: absolute;
		display:flex;
		flex-flow: column;
		align-items: flex-start;
		display:block;
		background-color:#3c6f37;
		width: 100%;
		left: -100%;
		list-style-type:none;
		margin: 0;
		padding: 0;
		opacity: 0.95;
		-webkit-transition: all .6s ease;
			transition: all .6s ease;
		z-index:1;
	}
 
	nav .menu_nav a, nav .menu_nav2 a{
		display: block;
		text-align: left;
	}
 
	nav a {
		color:#006900;
		width:100%;
		margin:5px;
	}
 
	nav a.nav1:hover,nav a.nav2:hover,nav a.nav3:hover,
	nav a.nav1-in:hover,nav a.nav2-in:hover{
		padding:2px 5px;
		margin: 8px 5px;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
    }
 
  /*Hamburger-Icon*/
  nav a#nav-m img,
  nav a.close img {
    width: 25px;
    height: auto;

  }
  nav a#nav-m{
	  	padding:0px;
  } 
 
  nav > .close,
  nav a#nav-m:target {
    display: none;
  }
 
  nav a:target ~ .nav_group,
  nav a:target ~ .close {
    display: inline-block;
	-webkit-transition: all .6s ease;
		transition: all .6s ease;
  }
 
  nav a:target ~ .close {
    position: absolute;
	-webkit-transition: all .6s ease;
		transition: all .6s ease;
  }
 
	nav a:target ~ .nav_group
	/*nav a:target ~ .menu_nav,
	nav a:target ~ .menu_mit*/{
	position: absolute;
	left: 0px;
	top: 0px;
	-webkit-transition: all .6s ease;
	transition: all .6s ease;
  }
}