/* bis 2600 Pixel Bildschirmbreite, z.B. Tablet */
@media (max-width: 2600px) {



* {
  margin: 0;
  padding: 0;
 overflow-x: hidden;

}


#head {
#background-color: #006633;
background-color: orange;
left: 0%;
  line-height: 100%;
  /* clear: both; */
  width: 100%;
  height: 330px;
  z-index: 1;
  border-color: red;
  border-bottom:10px #FF0000 solid;
  


	
}

#logo {
position: relative;
left: 15%;
top: 100px;


}


#titel {
  position: absolute;
  top: 10%;
  left: 35%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 4.2em;
  color: #000000;
  background-color: orange;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 5%;
  #text-shadow: -3px -4px 6px silver, 3px 3px 5px #333; color: #000000;
}



#body {
background: linear-gradient(#339933, #FFFF00);
font-family: verdana;
font-size: 1.2em;

margin: 0%;


}




#legend {
  padding-left: 10%;
  padding-right: 5%;


}





#text {
  position: absolute;
  margin-top: 5%;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  left: 10%;
  background-color: orange;
  padding:10px;
  margin-right: 5%;

}

#lostage {
  position: absolute;
  margin-top: 25%;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  left: 10%;
  background-color: orange;
  padding:10px;
  #padding-right: 20%;

}

#schwendtage {
  position: absolute;
  margin-top: 58%;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  left: 10%;
  background-color: orange;
  padding:10px;
  #padding-right: 20%;

}




#footer {
  position: fixed;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  #top: 91%;
  overflow: hidden;
  color: yellow;
  left: 0%;
 
  line-height: 100%;
  background-color: #80b4cc;
  /* clear: both; */
  width: 100%;
  height: 90px;
  z-index: 1;
  border-color: red;
  border-top: 5px #FF0000 solid;
}  
}




/* bis 800 Pixel Bildschirmbreite, z.B. Tablet */
@media (max-width: 980px) {


   * {
  margin: 0;
  padding: 0;
}


#body {
background: linear-gradient(#339933, #FFFF00);
font-family: verdana;
font-size: 1.2em;

margin: 0%;


}


#logo {
position: relative;
left: 15%;
top: 100px;

}


#titel {
  position: absolute;
  top: 18%;
  left: 35%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.8em;
  color: #000000;
  background-color: orange;
  text-align: center;
  padding:10px;
  padding-bottom: 2%;
  #text-shadow: -3px -4px 6px orange, 3px 3px 5px #333; color: ffffff;
}

#legend {
  padding-left: 10%;
  padding-right: 5%;


}





#text {
  position: absolute;
  top: 55%;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  margin-left: 12%;
  background-color: orange;
  padding:10px;
  margin-right: 20%;

}

/* Fußzeile */
#footer {
  position: fixed;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  #top: 91%;
  overflow: hidden;
  color: yellow;
  left: 0%;
 
  line-height: 100%;
  background-color: #80b4cc;
  /* clear: both; */
  width: 100%;
  height: 90px;
  z-index: 1;
  border-color: red;
  border-top: 5px #FF0000 solid;
}  
}


/* bis 480 Pixel Bildschirmbreite, z.B. Tablet */
@media (max-width: 480px) {

    * {
  margin: 0;
  padding: 0;
}


#body {
background: linear-gradient(#339933, #FFFF00);
font-family: verdana;
#font-size: 1.2em;

margin: 0%;


}


#logo {
position: relative;
left: 15%;
top: 100px;

}


#titel {
  position: absolute;
  top: 18%;
  left: 31%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  color: #000000;
  background-color: orange;
  text-align: center;
  padding:10px;
  padding-bottom: 2%;
  #text-shadow: -3px -4px 6px orange, 3px 3px 5px #333; color: ffffff;
}


#legend {
  padding-left: 10%;
  padding-right: 5%;


}




#text {
  position: absolute;
  margin-top: 45%;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  margin-left: 12%;
  background-color: orange;
  padding:10px;
  margin-right: 20%;

}
}