html, body {
  height: 99%
}


.top { border:1px solid black; height: 4%; font-family: 'Open Sans', sans-serif; 
font-size:1.2em; color:#123456;  width:98%; background:#ffffff; margin:0 auto; padding:1%;}

.mitte { border:1px solid black;  font-family: 'Open Sans', sans-serif; height:79%; 
font-size:1.2em; color:#123456;  width:98%; background:#c3c3c3; margin:0 auto; padding:1%;}

.mitte2 { border:1px solid black;  font-family: 'Open Sans', sans-serif; height:86%; 
font-size:1.2em; color:#123456;  width:98%; background:#eeeeee; margin:0 auto; padding:1%;}

.links   { background:#ffffff; margin:0 auto; 
padding:0px; height:auto; float:left; width:220px; margin-right:1%;background:#eeeeee;}

.rechts  { border:1px solid #888888;  background:#ffffff; margin:0 auto; padding:10px; min-height:96%;  float:left; }

.rechtsmen  { float:right; padding-right:10px; }
.rechtslogo  { float:right; padding-right:10px; padding-left:10px; }
.rechtshome  { float:right; padding-right:10px; padding-left:30px; }


.bottom { border:1px solid black; height: 4%; font-family: 'Open Sans', sans-serif; 
font-size:1.2em; color:#123456;  width:98%; background:#c3c3c3; margin:0 auto; padding:1%; }



.bildg {float:right; margin-right:30px; max-height:100%;}

.titel {float:left; font-family: 'Open Sans', sans-serif; font-size:0.8em; color:#000;}
.titelfett {float:left; font-family: 'Open Sans', sans-serif; font-size:1.3em; color:#000; font-weight: bold;}
 

 .dypos { float:left; width: auto; height: auto; margin-left:20px; margin-top: 20px;}
#legend {font-family: 'Open Sans', sans-serif; font-size:13px; padding:20px;} 
#legend2 {font-family: 'Open Sans', sans-serif; font-size:14px;} 

/*  #graphdiv2 {margin-right:0px; margin-left:0px; height:90%;}*/


#graphdiv2 {position: absolute; inset: 150px 10px 10px 200px; background: #000000; }
  /*  #graphdiv2 {width:140px; height:90%;}*/
    #graphdiv3 {width:350px; height:90%;}
    
  @media screen and (min-width: 699px) {
    #graphdiv2 {width:400px; height:90%;} 
  #graphdiv3 {width:580px; height:90%;} 
   }


  @media screen and (min-width: 799px) {
    #graphdiv2 {width:480px; height:90%;} 
  #graphdiv3 {width:640px; height:90%;} 
   }

  @media screen and (min-width: 850px) {
    #graphdiv2 {width:530px; height:90%;} 
  #graphdiv3 {width:680px; height:90%;} 
   }   
 
   
     @media screen and (min-width: 899px) {
    #graphdiv2 {width:570px; height:90%;} 
 #graphdiv3 {width:820px; height:90%;} 
   }
   
        @media screen and (min-width: 999px) {
    #graphdiv2 {width:660px; height:90%;}
     #graphdiv3 {width:910px; height:90%;} 
   }
   
           @media screen and (min-width: 1099px) {
    #graphdiv2 {width:780px; height:90%;} 
     #graphdiv3 {width:1020px; height:90%;} 
   }
   
           @media screen and (min-width: 1199px) {
    #graphdiv2 {width:880px; height:90%;} 
    #graphdiv3 {width:1120px; height:90%;}     
   }
   
              @media screen and (min-width: 1299px) {
    #graphdiv2 {width:960px; height:90%;}
    #graphdiv3 {width:1200px; height:90%;}      
   }
   
              @media screen and (min-width: 1399px) {
    #graphdiv2 {width:1070px; height:90%;} 
    #graphdiv3 {width:1310px; height:90%;}     
   }
   
              @media screen and (min-width: 1499px) {
    #graphdiv2 {width:1170px; height:90%;}
    #graphdiv3 {width:1410px; height:90%;}      
   }
   
              @media screen and (min-width: 1599px) {
    #graphdiv2 {width:1260px; height:90%;}
    #graphdiv3 {width:1490px; height:90%;}      
   }
   
               @media screen and (min-width: 1699px) {
    #graphdiv2 {width:1360px; height:90%;} 
    #graphdiv3 {width:1610px; height:90%;}     
   }
                @media screen and (min-width: 1799px) {
    #graphdiv2 {width:1460px; height:90%;} 
    #graphdiv3 {width:1700px; height:90%;}     
   }