* {
  margin: 0;
  padding: 0;
}

/* Gesamtschrift und Gesamtrand festlegen */
#body {
  /*
  margin: 5px;
  padding: 2px;
  */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  z-index: -10000;   
  background-color: #B0E2FF;
  background-image: url(img/wolken.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  max-width: 2560px;
  left: 0%;
}

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


#logo {
  position: absolute;
  left: 8%;
  top: 3%;
  width: 30%;
}



#titel {
  position: absolute;
  top: 10%;
  left: 30%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 4.2em;
  color: #000000;
  /*
  text-shadow: -3px -4px 6px white, 3px 3px 5px #333;
  */
  text-shadow:     3px  3px  5px yellow,
                  0px   0px 10px white,
                   5px  -5px 10px #F8FF9D,
                 -10px -10px 20px #F5FE5C,
                  10px -15px 20px #FDDB33,
                 -10px -20px 20px #FFC126,
                  10px -25px 20px #FF7808,
                 -10px -30px 20px #F95801,
                  15px -35px 20px #FE7606,
                 -15px -40px 20px #FD5C01,
                  15px -45px 15px #E54600,
                 -20px -50px 15px #D23700,
                  20px -55px 15px #B82B00,
                 -20px -60px 15px #A11301,
                  20px -65px 15px #981D01,
                 -25px -70px 10px #851200,
                  25px -75px 10px #690D00,
                 -25px -80px 10px #3E0600
	        ;
  
  
}



#titel2 {
  position: absolute;
  top: 21%;
  left: 31%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  color: red;
  text-shadow: 0 0 8px black; 
}







.tooltip .tooltiptext {
        visibility: hidden;
        /*
		width: 600px;
        */
	width: 80%;
	background-color: black;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px;
 
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
	left: 10%;
		
}
 
.tooltip:hover .tooltiptext {
        visibility: visible;
}
 
.tooltip {
	vertical-align: top;
	padding-left: 10%;
}





/* Fußzeile */
#footer {
  #position: fixed;
  position: absolute;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  #top: 300%;
  overflow: hidden;
  color: yellow;
  left: 0%;
  font-size: 1.2em;
  line-height: 100%;
  #background-color: #80b4cc;
  background-color: #000000;
  /* clear: both; */
  width: 100%;
  height: 290px;
  z-index: 1;
  border-color: red;
  border-top: 5px #FF0000 solid;
}  
  
#footer a:link{
  text-decoration: underline;
}

a:visited {
  color: Yellow !important;
}  

#footer div {

  text-indent: 10px;  
}





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


#titel {
  position: absolute;
  top: 18%;
  left: 30%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 2em;
  color: #000000;
  /*
  text-shadow: -3px -4px 6px white, 3px 3px 5px #333;
  */
  text-shadow:     3px  3px  5px yellow,
                  0px   0px 10px white,
                   5px  -5px 10px #F8FF9D,
                 -10px -10px 20px #F5FE5C,
                  10px -15px 20px #FDDB33,
                 -10px -20px 20px #FFC126,
                  10px -25px 20px #FF7808,
                 -10px -30px 20px #F95801,
                  15px -35px 20px #FE7606,
                 -15px -40px 20px #FD5C01,
                  15px -45px 15px #E54600,
                 -20px -50px 15px #D23700,
                  20px -55px 15px #B82B00,
                 -20px -60px 15px #A11301,
                  20px -65px 15px #981D01,
                 -25px -70px 10px #851200,
                  25px -75px 10px #690D00,
                 -25px -80px 10px #3E0600
	        ;
  
  
}



#titel2 {
  position: absolute;
  top: 30%;
  left: 30%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: red;
  text-shadow: 0 0 8px black; 
}










	
.tooltip .tooltiptext {
        visibility: hidden;
        /*
		width: 600px;
        */
		width: 85%;
		background-color: black;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px;
 
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
}
 
.tooltip:hover .tooltiptext {
        visibility: visible;
}
 
.tooltip {
	vertical-align: top;
}	

/* 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;
}  

#logo {
  position: absolute;
  right: -10%;
  top: 3%;
  width: 25%;
}



  
#footer a:link{
  text-decoration: underline;
}

a:visited {
  color: Yellow !important;
}  

#footer div {
 
  text-indent: 10px;  
}

	
}