body {
    background-color: #292e39;
    font-family: 'Quicksand';font-size: 22px;
    }
    canvas {
      border-radius: 0px;

  }
  .container {  display: grid;
    grid-template-columns: 2fr 0.5fr 0.5fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Temperaturgraf MaxT MinT MittelT"
      "Luftdruckgraf MaxP MinP MittelP"
      "Niederschlaggraf MaxSonne GesammtNieder Witterungsverhalten";

  }
  .chartBox{
    width: 50vw;
    height: calc(50vh/1.618);
    align-items: center;
    margin: auto;
    position: absolute;
  }
  .Temperaturgraf { grid-area: Temperaturgraf; }
  
  .Luftdruckgraf { grid-area: Luftdruckgraf; }
  
  .Niederschlaggraf { grid-area: Niederschlaggraf; }
  
  .MaxT { grid-area: MaxT; 
    justify-self: center;
    align-self: center; }
  
  .MinT { grid-area: MinT; 
    justify-self: center;
    align-self: center;
    
  }
  
  .MaxP { grid-area: MaxP; 
    justify-self: center;
    align-self: center;}
  
  .MinP { grid-area: MinP;
    justify-self: center;
    align-self: center; }
  
  .MaxSonne { grid-area: MaxSonne;
    justify-self: center;
    align-self: center; }
  
  .GesammtNieder { grid-area: GesammtNieder;
    justify-self: center;
    align-self: center; }
  
  .MittelT { grid-area: MittelT;
    text-align:center; 
    justify-self: center;
    align-self: center;}
  
  .MittelP { grid-area: MittelP; 
    justify-self: center;
    align-self: center;}
  
  .Witterungsverhalten { grid-area: Witterungsverhalten;
    justify-self: center;
    align-self: center;
     height: 360px;
    width: 360px;
    float: left;
  }
  
  .Werte{
    justify-content: center;}
  img {
    width: 60px;
  }
    h1 {
    color:#ECEFF4;
    text-align:center;
  }
  h2 {
    color: #ECEFF4;
    text-align:center;
  }
  h3 {
    color: #ECEFF4;
    text-align:center;
  }
  p {
    color: #ECEFF4;
  }
  .Count {
    color: #3b4252;
    text-align:center;
    font-size: 20px;
  }
  .Datum {
    color: #3b4252;
    text-align:center;
    font-size: 12px;
  }
  form {
    color: #3b4252;
    text-align:center;
    display: flex;
    flex-direction: row;

  }
 
  
  .active {
    background-color: #5e81ac;
    border-radius: 25px;
  }
  .pie-chart-container,
.doughnut-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}
.alla {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "MaxTf MinTf MittelTf link"
    "MaxPf MinPf MittelPf Tendenzp";
  width:70vw;
  height: 23vh;
}

.MaxTf { grid-area: MaxTf; }

.MinTf { grid-area: MinTf; }

.MittelTf { grid-area: MittelTf; }

.MittelPf { grid-area: MittelPf; }

.MinPf { grid-area: MinPf; }

.MaxPf { grid-area: MaxPf; }
.link { grid-area: link; }
.TendenzT { grid-area: TendenzT; }
.chart-container {
  height: 250px;
  width: 300px;
}    
.info-pane {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 400;
  padding: 1em;
}
.alles{
  height: 80vh;
  border-radius: 5vw;
  position: relative;
  width:90vw;

}
#map { height:20vh;  border-radius: 1vw;  display: flex;
 }

#rmap { width: 50vw; height:20vh;  border-radius: 1vw;  display: flex;
}
#tmap { width: 50vw; height:20vh;  border-radius: 1vw;  display: flex;
}
.leaflet-tile {
  border-radius: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
}
#marker{color:rgba(229, 233, 240, 1);}

.aufklapper { 
  height: 75vh;
  position: absolute; 
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.0fr 1.0fr 1fr;
  gap: 1vh 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "tauf"
    "pauf"
    "alla";
  width: 70vw;
  background:   #eceff4;
  border-radius: 2vw;
  display: none;
  z-index: 400;
  top: 2vh;
  left: 2vw;
  right: 0;
  bottom: 0;
}

.tauf { grid-area: tauf;       height: 23vh; }

.pauf { grid-area: pauf;       height: 23vh;}

.hauf { grid-area: hauf;       height: 23vh;}


.navbar {
  overflow: hidden;
  background-color: #3B4252;
width: 100vw;
  z-index: 500;
}

.navbar a {
  float: left;
  font-size: 30px;
  color: #ECEFF4;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

  margin-top: auto;
  margin-bottom: auto;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #2e3440;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  border-radius: 25px;
}



.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 25px;
}

.dropdown-content a {
  float: none;
  color: #2e3440;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #5e81ac;
  border-radius: 25px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.content {
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.stickysus{
  padding: 12px 16px;
  position: fixed;
}
.plotarch{
  width:90vw;
  border-radius: 2vw;
  height: 70vh;
}
.sticky + .content {
  padding-top: 60px;
}
.close{
  position: absolute;
  right:2vw;
  top:2vh;
  border-radius: 25px;
}
.Grafbox{
  width:95vw;
  background: cornflowerblue;
  border-radius: 10px;
}

table {
  font-family: quicksand, arial;
  border-collapse: collapse;
  font-size: 2vw;
  margin: 0 auto;
}

td, th {
  border: 2px solid #dddddd;
  text-align: left;
  padding: 4px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
.Tabelle{
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
}
.drücker {
  background-color: #5e81ac; /* Green */

  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}
.map-wrapper{
  width: 50vw;
  height: 20vh;
  margin-left: auto;
  margin-right: 10px;

}

.tabs {
  overflow: hidden;
  margin-bottom: -2px; /* hide bottom border */


}

.tabs a{
  float: left;
  cursor: pointer;
margin-right: 0.3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width:23.4vw;
  height:5vh;
  transition: background-color 1s;
  border:none;
  background-color: #3B4252;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  color:#ECEFF4;
}


/* Change background color of tabs on hover */
.tabs a:hover {
  background-color: #aaa;
  color:#ECEFF4;
}

/* Styling for active tab */
.tabs a.active {
  background-color: #5e81ac;
  color:#ECEFF4;
  cursor: default;
}

/* Style the tab content */
.tabcontent {
  border: 0px solid #ccc;
  box-shadow: 0px 0px 0px #e1e1e1;
  width: 95vw;
  bottom:0;
  background: #3B4252;
}

.tabcontent td {
  padding: 0.3em 0.4em;
  color: #484848;
}
.tabcontent td.legend {
  color: #888;
  font-weight: bold;
  text-align: right;
}
.tabcontent .map {

  background: #D3EAFB;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.data {   height: 60vh;
  width: 60vw; }

.Stationsname{
font-size: 25px;
}
.Koordinaten{
  font-size: 18px;
}

/* Style the search box inside the navigation bar */
.navbar input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
  flex-grow:2;
}
.navbar .icon {
  display: none;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.akkcontainer {
  display: grid;
  grid-template-columns: 1.4fr;
  grid-template-rows: 1.1fr 1.2fr;
  gap: 0px 0px;
  grid-template-areas:
    "Karte"
    "Grafen";
}
.Karte {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "Werte karte";
  grid-area: Karte;
}
.Werte { grid-area: Werte; }
.karte { grid-area: karte; width: 50vw;  }
.Grafen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "T R";
  grid-area: Grafen;
}
.T { grid-area: T; width: 40vw;   aspect-ratio: 4/3;; margin-right: auto; margin-left: auto; border-radius: 10px}
.R { grid-area: R; width: 40vw;  aspect-ratio: 4/3;;margin-right: auto; margin-left: auto; border-radius: 10px}

@media screen and (max-width: 600px) {
  .Karte {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
    "Werte"
    "karte";
    grid-area: Karte;
  }
  .karte { grid-area: karte; width: 80vw;  }
  .Grafen {
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 1fr 1fr;
    gap: 0px 10px;
    grid-template-areas:
    "T "
    "R";
    grid-area: Grafen;
  }
  .T { grid-area: T; width: 60vw;   aspect-ratio: 4/3;; margin-right: auto; margin-left: auto; border-radius: 10px}
  .R { grid-area: R; width: 60vw;  aspect-ratio: 4/3;;margin-right: auto; margin-left: auto; border-radius: 10px}

}
.logo{
  width: 30vw;
  height: auto;
}
.search-container{
}

.Platzhalter{
  width: 40vw;
}
.Platzhalter:hover{
  background-color: #3B4252;
}

.nava:hover{
  background-color:  #434C5E;
}
.subtabas {
  overflow: hidden;
  margin-bottom: -2px; /* hide bottom border */


}
.subtabas a{
  float: left;
  margin-left: 15vw;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width:17vw;
  height:5vh;
  transition: background-color 1s;
  border:none;
  background-color: #434C5E;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  color:#ECEFF4;
}
.subtabas a:not(:first-child) {margin-left: 0vw;}
.subtabcontent {
  border: 0px solid #ccc;
  box-shadow: 0px 0px 0px #e1e1e1;
  width: 50vw;
  background: #4C566A;
  margin-left: 15vw;
}
.subtabs {
  overflow: hidden;
  margin-bottom: -2px; /* hide bottom border */


}
.subtabs a{
  float: left;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width:17vw;
  height:5vh;
  transition: background-color 1s;
  border:none;
  background-color: #434C5E;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  color:#ECEFF4;
}
iframe{
  width:50vw;
  aspect-ratio: 16/9;
  max-width: 800px;
}

@media screen and (max-width: 600px) {
  iframe{
    width:90vw;
    aspect-ratio: 16/9;
    max-width: 800px;
  }
  .subtabcontent {
    border: 0px solid #ccc;
    box-shadow: 0px 0px 0px #e1e1e1;
    width: 90vw;
    background: #4C566A;
    margin-left: 0vw;
  }
  #map { width:90vw; aspect-ratio: 16/9; border-radius: 1vw;    }
  .map-wrapper{
    width:90vw;
    aspect-ratio: 16/9;
    margin-left: 0px;
    margin-right: 0px;

  }
}
.Werte{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "a b c d";
}
.Kleefeld { grid-area: a; }
.Langenholzhausen { grid-area: b; }
.Göxe { grid-area: c; }
.Verden { grid-area: d; }

@media screen and (max-width: 600px) {
  .Werte{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
    "a b";
  }
  .Kleefeld { grid-area: a; }
  .Langenholzhausen { grid-area: b; }
  .Göxe {
  }

  .Göxe { display: none ;
  }

  .Verden { display: none; }
}