* {margin:0;padding:0;}
html, body {
	height:100%;width:100%;font-size:0.94em;
	font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
	background:#fff;text-align:left;color:#002828;
	}
	
/* wg. responsiver darstellung */
img {
	max-width:98.5%;
	height:auto;
	width: auto; /* ie 8 */
}
img.masstabelle{width:100%;height:auto;}	

#seite{
	display: flex;
	flex-direction:column;
	justify-content: flex-start;
	background:#95A2B0;
	width:100%;
	margin:0px;
	padding:0px;
	position:relative;
	top:24px;
	z-index:100;
	width:auto;margin:0 auto;
	text-align:left;
	background:#fff;
}

#seite_padding{
	display: flex;
	flex-direction:column;
	justify-content: flex-start;
	background:#95A2B0;
	width:100%;
	margin:0px;
	padding:0px;
	position:relative;
	top:24px;
	z-index:100;
	width:auto;margin:0 auto;
	text-align:left;
	padding:8px;
	background:#fff;
}


/* der teaser nimmt das menü auf... */
#teaser{
	position:fixed;
	top:0px;left:0px;
	width:100%;height:auto;
	height:45px;background:#95A2B0;
	z-index:1000;
}

#teaser > a.tool_image:link, a.tool_image:active, a.tool_image:visited 
{height:32px;width:32px;margin-right:10px;margin-top:3px;text-decoration:none;display:inline-block;float:right;}
#teaser > a.tool_image:hover{opacity:0.7;}

#teaser_app{
	display: -webkit-box;      
	display: -moz-box;         
	display: -ms-flexbox;      
	display: -webkit-flex;     
	display: flex; 

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;

	-webkit-box-pack: start;
	-moz-box-pack: start;
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	justify-content:flex-start;	
	
	-webkit-box-align:center;
	-moz-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	align-items:center;

	position:fixed;
	top:0px;left:0px;
	width:100%;
	height:45px;
	background:#95A2B0;
	z-index:1000;
}


a:link.menueX, a:active.menueX, a:visited.menueX 
{
height:auto;width:auto;
text-decoration:none;
font-size:1.0em;
color:#fff;
background:#7B8086;
border:1px solid #FFF;
border-radius:8px;
padding:3px 7px 3px 7px;
}

div.element{
	margin: 0px 0px 0px 8px;
	color:#FFF;
	font-weight:bold;
}

#teaser_app > a.tool_image:link, a.tool_image:active, a.tool_image:visited 
{height:32px;width:32px;margin-right:10px;margin-top:3px;text-decoration:none;display:inline-block;float:right;}
#teaser_app > a.tool_image:hover{opacity:0.7;}


/* eine klasse für die links im teaser (anziehpuppe, warenkorb) */
a:link.tool_teaser, a:active.tool_teaser, a:visited.tool_teaser 
{	
	height:auto;width:auto;margin-left:10px;margin-top:5px;
	text-decoration:none;display:inline-block;
	padding:3px;
	background:#949494;
	color:#fff;
	font-weight:bold;
	border:2px outset #000;
	border-radius:4px;
}
a:hover.tool_teaser{opacity:0.7;}

/* allgemeine klassen */
hr{border: none;background:#282F35;height:1px;width:calc(100% - 10);}
h6{font-size:80%;color:#3C3F2C;}
h5{font-size:85%;color:#3C3F2C;}
h4{font-size:90%;color:#3C3F2C;}
h3{font-size:95%;color:#3C3F2C;}
h2{font-size:100%;color:#3C3F2C;}
/*h1{width:99%;font-style:italic;color:#3C3F2C;background:#EAEAEA;font-size:110%;padding-left:1%;}*/
h1{width:97%;font-style:italic;background:#949494;color:#fff;font-size:100%;padding:3px;border-radius:4px;margin-bottom:5px;}

a:link.basket, a:active.basket, a:visited.basket{
position: absolute;top:1px;left:112px;
z-index:1000;	
background: transparent url(../pics/basket_mobile.png);width:44px;height:34px;display:inline-block;
border:2px solid #fff;
border-radius:5px;
} 

a:link.hb, a:active.hb, a:visited.hb{
position: absolute;top:1px;left:58px;
z-index:1000;	
background: transparent url(../pics/home_button_mobile.png);width:44px;height:34px;display:inline-block;
border:2px solid #fff;
/*border-radius:5px;*/
} 


/* hamburger-menü */
nav.topmenu { 
	position: absolute; 
	top:38px;
	left:10px;
	width:auto;
	background: #555;
	padding:0;
	color:#fff;
    max-height:0; 
    overflow:hidden;
	/*
    transition: all 0.5s;
	*/
	border-radius:4px;
	float:left;
}

ul.menue {
	color:#fff;
}

li.menue {margin:0;padding:0;}
h2.sub_header{margin-left:3.5em;font-size:1.0em;font-style:italic;color:#fff;}
h2.sub_benutzer{margin-left:1em;font-size:1.0em;font-style:italic;color:#fff;}

a:link.menue, a:active.menue, a:visited.menue 
{height:auto;width:auto;padding-top:0px;margin-left:1em;margin-top:5px;margin-bottom:5px;margin-right:1em;text-decoration:none;display:inline-block;font-size:1.0em;color:#fff;}
a:hover.menue{opacity:0.5;}

a:link.submenue, a:active.submenue, a:visited.submenue 
{height:auto;width:auto;padding-top:0px;margin-left:4em;margin-top:5px;margin-bottom:5px;margin-right:1em;text-decoration:none;display:inline-block;font-size:1.0em;color:#fff;}
a:hover.submenue{opacity:0.5;}


label.hamburg { 
   display: block;
   background: #555; width: 50px; height: 40px; 
   position: relative; 
   /*margin-left: auto; margin-right: auto;*/
   margin-left: 0.5%; margin-right: auto;
   border-radius: 4px; 
   /*
   transition: border-radius 0.5s;
   */
   float:left;
}

input#hamburg {display:none}

#hamburg:checked + .hamburg  + nav.topmenu {max-height:600px;padding-right:10px;overflow: scroll;}

.line { 
   position: absolute; 
   left:5px;
   height: 4px; width: 40px; 
   background: #fff; border-radius: 2px;
   display: block; 
   /*
   transition: 0.5s; 
   transform-origin: center; 
   */
}

.line:nth-child(1) { top: 6px; }
.line:nth-child(2) { top: 18px; }
.line:nth-child(3) { top: 30px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

img.benutzer_image{margin-left:1em;margin-top:0.5em;display:inline-block;}
div.benutzer_name{margin-left:3.5em;margin-top:-25px;}
/*#hamburg:checked + .hamburg .line*/


.hintergrund{
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;	
	font-size:1.0em;
	height:auto;
	min-height:89vh;
	z-index: 1;
	padding-left:2px;
	padding-right:2px;
	
}

.hintergrund::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .9; 
  z-index: -1;
  background-image: url("../pics/bg_home3.jpg");

}

.hintergrund_start{
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;	
	font-size:1.0em;
	height:auto;
	min-height:89vh;
	z-index: 1;
	padding-left:5px;
	padding-right:5px;
	
	
}

.hintergrund_start::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .9; 
  z-index: -1;
  background:#CCD2D9;
}

div.starttext
{
margin-top:2%;
padding:10px;
width:auto;
height:auto;
display:block;
font-size:1.2em;
background:#E5E5E5;
opacity: .7;
}
div.ausgabe{color:#000;border:1px solid red;padding:5px;}


a.link_menue:link, a.link_menue:active, a.link_menue:visited 
{
	height:auto;width:auto;
	margin:1px 3px 8px 3px;
	text-decoration:none;
	display:block;
	color:#000;
	font-weight:normal;
	/*font-weight:bold;*/
	font-size:1.0em;
	}
	
//a.link_menue:hover{opacity:0.6;}