@import url(https://fonts.googleapis.com/css?family=Helvetica+Sans);

body{
  max-width: 1428px;
  width:100%;
	background: #fff;
  padding:0;
  margin:0;
 	font-family: 'Helvetica;', sans-serif;
	font-size: 16px;
	color: black;
	line-height: 23px:
	text-align:justify;
  min-height: 101%;

}	

	header {
    margin-top: 0px;
    height: auto;
    background:#fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	}

img {
   width: 100%;
   position:top;
 
 }

#wrap {
  width: 100%;
  padding:0;
  margin:0;


}

#linie{

  position: left;
  width: 100%;
  background: #3195C9;
  font-size: 3px;

}


nav {
  width: 100%;
  background: #f5f5f5;
  margin-top:0.5%;
  font-size: 16px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
  border-top: 0px;
  border-bottom:0px;
  border-left:0;
  border-right:0;
  border-style: solid;
  border-color: #fff;

}

/* first stage */

nav > ul {
  position: relative;
  display: flex;
  justify-content: center;
  width:100%;
  margin: 0% auto;
  padding: 0;
}



nav a {
  display: block;
  color: black;
  text-decoration: none;
  font-size: 100%;


}

nav ul li {
  color: #fff;
  list-style: none;
  transition: background 0.3s ease-in-out;


}


 /* NAVIGATIONSLEISTE, BREITE UND HÖHE DER TABS*/
nav > ul > li > a {
   padding: 15px 20px;
  font-size: 110%;
  font-weight: bold;
}


nav ul > li.submenu > a:after {
  position: center;
  float: left;
  content: '';
  margin-left: 0px;
  margin-top: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid;
  border-bottom: 5px solid transparent;

}

nav ul > li.submenu:hover > a:after {
  margin-top: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #fff;

}

nav > ul > li:hover {
  background: #3195C9;
}
nav > ul > li > a:hover {
  color: #fff;
}



/* second stage (the mega-menu) */

nav ul.megamenu {
  position: absolute;
  display: flex;
  flex-wrap: wrap; 
  width:98.5%;
  top: -9999px;
  left: 0;
  padding: 10px 10px 0 10px;
  background: #f5f5f5;
  text-align: left;
  border-top: 7px solid #3195C9;
  border-bottom: 7px solid #3195C9;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

nav ul li:hover ul.megamenu {
  top: 100%;

}

/* third stage (child-menus in the mega-menu) */

nav ul.megamenu ul {
  width: 29%;
  margin-bottom: 40px;
  color: #000;
  box-shadow: none;
}

nav ul.megamenu h4 {
  margin-bottom: 15px;
  text-transform: uppercase;
}

nav ul.megamenu ul li {
  display: block;
  float:left;
}
nav ul.megamenu ul a {
  display: block;
  color:black;
  float:left;
}


nav ul.megamenu ul li a {
  margin-top: 10px;
  transition: 0.5s;
  color: #000;

}

nav ul.megamenu ul a:hover {
  color: #4096ee;
}

h3{
	margin: 10px 0 5px 0;
}


table{
  width: 55%;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border-collapse: collapse;
  background-color: #fff;

    }
    th {
    width: 50%;
    font-size: 100%;
    border: 1px solid lightgrey;
    padding-top:1%;
    padding-bottom:1%;
    padding-left: 1%;
    padding-right: 1%;
    font-weight: normal;

    }
    td {
    width: 50%;
    font-size: 100%;
    padding-top:1%;
    padding-bottom:1%;
    border: 1px solid lightgrey;
    padding-left: 1%;
    padding-right: 1%;
    font-weight: normal;


    }

#spalt7{
  width: 84%;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border-collapse: collapse;
  background-color: #fff;

    }
    th {
    width: auto;
    font-size: 90%;
    border: 1px solid lightgrey;
    padding-top:0.5%;
    padding-bottom:0.5%;
    padding-left: 1%;
    padding-right: 1%;
    font-weight: normal;

    }
    td {
    width: auto;
    font-size: 90%;
    padding-top:0.5%;
    padding-bottom:0.5%;
    border: 1px solid lightgrey;
    padding-left: 1%;
    padding-right: 1%;
    font-weight: normal;
    }


/* STRUCTURE */


/* STRUCTURE */


#middle {
	  display:block;
    width: 70%;
		margin:  0.8% 0.8% 0.8% 0;
		float: left;
		border:1px;
		border-radius:5px;
		text-align: center;
	  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    background: #f5f5f5;
	}

#middlekopf {
  width: auto;
  line-height: 35px;
  text-align: center;
	color:  #fff;
	font-size: 90%;
  font-style: normal;
	background:   #3195C9;

	}
#middleinhalt{
  	width: 100%;
    border:none;

}


/* Konfiguration für BeschreibungsTEXT */
#beschreibung{
  display:block;
  max-width: 90%;
  padding:0;
  text-align: left;
  margin-left:auto;
  margin-right:auto;

}
/* ENDE der Konfiguration für Beschreibung TEXT */

/*Rechte Spalte, INFO ZUM SHOP*/
#sidebar {
    display:block;
    width: 29.2%;
    margin-top:0.8%;
    margin-bottom: 0.8%;
    margin-left:0;
    padding: 0% 0% 0% 0%;
    float:left;
    border:1px;
    border-radius:5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);  
    background: #f5f5f5;     

   
}
#sidebarinhalt{
    width: 100%;
    padding-top:0.5%;
    padding-bottom: 2%;
    padding-left:5%;
    font-weight: lighter;
    font-size: 100%;
    font-style: italic;
    text-align: left;  

}

#hakenstyle{
    width: 18px; 
    height: 16px;

}
/*ENDE*/


/*****************Rechte Spalt (BEZAHLUNG, LOGISTIK und BEWERTUNGEN) ********************************/
#sidebar2 {
		display:block;
	  width: 29%;
		margin-bottom: 0.8%;
    margin-left:0;
    padding:0;
    float:left;
		border:1px;
		border-radius:5px;
	  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);  
	  background: #f5f5f5;     
}
/******************* Inhalt rechte Spalte, Bezahlung und Logistik-BOX *********************************/

#sidebarinhalt2{
    width: 100%;
    background-color: none;
    border:none;
    font-weight: lighter;
    font-size: 90%;
    text-align: center;  

}
/******************* Inhalt rechte Spalte, BEWERTUNGEN-BOX *********************************/

#sidebarinhalt3{
    width: 96%;
    padding-top:0.5%;
    padding-bottom: 0;
    font-weight: lighter;
    font-size: 80%;
    text-align: center;
    margin-left:auto;
    margin-right: auto;

}
#bewertungenimgstyle{
     width: 100%;
     padding-bottom: 0;

}

/*DATUM für BEWERTUNGEN*/
p.bewertungen:after {
  content:"Stand vom 15.01.2022";/* Hier den gewünschter  TEXT eingeben*/
  font-size: 85%;
  float:left;
  padding-left:3%;
  padding-top:0;
  padding-bottom:3%;

}
/***************************ENDE****************************************/
/*******************************************************************************/
/*********  DHL, HERMES,PAYOPAL u.s.w. BILDERGRÖSSE und STYLE einstellen ********/

#iconsstyle{
  width: 80px; 
  height:35px;  
  margin:1%;
  border: 1px; 
  border-radius: 7px; 
  border-style:solid; 
  color: lightgrey; 

}

#bilderblock{
  width:95%;
  margin-left: auto;
  margin-right: auto;
  padding:0;
}
/*Ende******************************************************************************/


/* Hier kann man HERMES-Zeichen freischalten*/
#hermes{
  display:inline;/* Hier "inline" eintragen um zu aktivieren, "none" zu deaktivieren */

} 
#dhl{  
  display:inline;/* Hier "inline" eintragen um zu aktivieren, "none" zu deaktivieren */

} 
#dp{  
  display:inline;/* Hier "inline" eintragen um zu aktivieren, "none" zu deaktivieren */

} 

/*ENDE*/

/*************************   Zahlungrn  ****************************************************/
#paypal,#vorkasse{
  display:inline;/* Hier "inline" eintragen um zu aktivieren, "none" zu deaktivieren */
}
#bar{
  display:inline;/* Hier "inline" eintragen um zu aktivieren, "none" zu deaktivieren */
}
/*********************************ENDE******************************************************/

.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
	background:-moz-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-webkit-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-o-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-ms-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811',GradientType=0);
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	color:#306108;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #aade7c;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
	background:-moz-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-webkit-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-o-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-ms-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a',GradientType=0);
	background-color:#5cb811;
}
.myButton:active {
	position:relative;
	top:1px;
}




/*INFOFESTER TEXT im HEADERBEREICH*/

.platzhalter1{
    display:none; /* "block" eintragen um zu aktivieren, "none" zu deaktivieren */
    width: 100%;
    background: #f5f5f5;
    margin-left:auto;
    margin-right: auto;
    margin-top:0.8%;
    margin-bottom:0;
    text-align: center;
    font-size:95%;
    line-height: 20px;
    border-radius:5px;
}


p.platzhalter1:after {

  content:"- wir versenden innerhalb von 24 Std. nach Zahlungseingang!";
  padding:0;
  font-weight: bold;
}

/*ENDE FESTER TEXT im HEADERBEREICH*/





/* SCROLL TEXT im HEADERBEREICH*/
.scrolltext{
    display:none; /* "block" eintragen um zu aktivieren, "none" zu deaktivieren */
    width:50%;
    line-height: 1px;
    margin:1% auto;
    border-radius:5px;
    background: lime;     
}

p.klasse:before {
  content:"Sehr geherte ...";/* Hier den gewünschter  SCROLL TEXT eingeben*/
  font-weight: bold;
}
/*ENDE SCROLLTEXT*/




/*FESTER TEXT in Beschreibung*/

.platzhalter2{
    display:none; /* "block" eintragen um zu aktivieren, "none" zu deaktivieren */
    width: 100%;
    background: yellow;
    margin-left:auto;
    margin-right: auto;
    text-align: left;
}


p.platzhalter2:after {

  content:"Wir haben Urlaub! ";
  padding:0;
  font-weight: bold;
}

/*ENDE FESTER TEXT  in Beschreibung*/


/*ENDE DATUM für BEWERTUNGEN*/

footer.standartstyle {
  display:block;
  clear: both;
  padding: 0 3% 1% 3%;
  color: white;
  width: 94%;
  background: #272822;
  margin:0px;
  color: #f5f5f5;
 font-size: 85%;


}
.mobilestyle{
  display:none;

}



.left{
  width:30%;
  padding-left:3%;
  padding-top:1%;
  text-align:left;
  float:left;
}
.right{
  width:30%;
  padding-top:1%;
  float:right;
  text-align:left;
}
.centered{
  padding-top:1%;
  text-align:left;
  width:auto;
}


/*******************************************************************************************************/
MEDIA QUERIES
/*******************************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
  #sidebarinhalt{
    display:none;
  }

  #middle{
  width: auto;
  float:none;
}
  #sidebar {
    width: auto;
    float: none;

  }


    #sidebar2 {
    width: auto;
    float: none;
 
  }

 /* NAVIGATIONSLEISTE, BREITE UND HÖHE DER TABS*/
 
nav > ul > li > a {
  padding: 10px 10px;

  }

	footer {
		width:100%;

  } 
}

/*******************************************************************************************************/
/*******************************************************************************************************/
/*******************************************************************************************************/
/* for 700px or less */
@media screen and (max-width: 700px) {



	#middle {
    width: 100%;
    float: none;
    padding-top:2px;
    padding-bottom:2px;
    margin-bottom:4px;
       border-radius: 0; 
  	}
	
	#sidebar {
    width: auto;
    float: none;
    padding-top:2px; 
    border-radius: 0; 
	}
	
   #sidebar2{
     margin-bottom:4px;
     width: auto;
     float: none;
    padding-top:2px;
       border-radius: 0; 
    }


		#sidebarinhalt{
    width: 78%;
    margin-top:0;
    background: #f5f5f5;
     font-size: 110%;
    padding-left:20%;

		}

		#sidebarinhalt2{
			    font-size: 100%;
    }



   #sidebarinhalt3{
    width: 75%;
    padding-top:0%;
    padding-bottom: 4%;
    background-color: none;
    border:none;
    font-weight: lighter;
    font-size: 110%;
    text-align: center;
    margin-left:auto;
    margin-right:auto;

   }

table{
  width: 80%;
  font-size: 110%;
}


    /* NAVIGATIONSLEISTE, BREITE UND HÖHE DER TABS*/
nav > ul > li > a {
  padding: 15px 12px;
}

	footer {

		width:auto;
		padding: 0% 0% 2% 0%;
    font-size: 75%;
	}


}
/*******************************************************************************************************/
/*******************************************************************************************************/

/* for 480px or less */
@media screen and (max-width: 480px) {


header{
  display:block;
  width:auto;
  box-shadow: none;

}
 /*****************************************************************************************************/


/*KATALOG PRODUKTLISTE*/
nav ul.megamenu ul a {
  display: block;
  margin-left:0px;
  float:none;
  color: grey;
  font-size: 110%;

}

nav ul.megamenu ul {
  width:auto;
  margin-bottom: 0px;
  color: #000;
  box-shadow: none;
}


/* STRUCTURE */

	h1 {
		font-size: 2em;
	}

#middle{
  width:auto;
  float:none;
margin-bottom:0;
    box-shadow: none;
}

#beschreibung{
  max-width: 98%;
}

#sidebar, #sidebar2 {
		display: none;
	}


#sidebar {
	background: #f5f5f5;
}
header, #middle, #sidebar {
	margin-bottom: 3px;
}

#pagewrap, header, #middle, #sidebar {
	border: solid 1px #ccc;
}


.standartstyle{
  display:none;
}

footer.standartstyle {

  display: none;
}
footer.mobilestyle{
  clear: both;
  display:block;
  width: 92%;
  padding: 0.5% 0% 0.5% 8%;
  color: white;
  background: #272822;
  color: #f5f5f5;
  font-size: 90%;


}


table{
	width: 96%;
 font-size: 90%;
    }
    th {
      width: 50%
    
    }
    td {
     width: 50%
  
    }
}