html {
    scroll-behavior: smooth;
}




#Kompostierungs {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}

#Wärmenachfrage {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}

#Hofdünger {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}

#Lebensmittelabfaelle {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}

#Grünabfall {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}

#Kehricht {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}

#Sammeltyp {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}

#Erntereste {
  background-color: black;
     bottom: 0;
      left: 0;
     position: absolute;
     z-index: 100;
}





@media screen and (max-width: 1000px) {
      .charts {
          max-height: 500px;
     }

        .data {
  background-color: whitesmoke;
  margin-bottom: 0;
}
#pie {
     width: 150px !important;
margin: 20px;
     

}



.btnss {
  display: flex;
  justify-content: center;
  align-items: center;
}

#bars {
     width: 150px !important;
margin: 20px;
}

.container-chart {
 padding: 50px;
 align-items: center;
  
}
        #legende {
     background-color: black;
     visibility: hidden;
    
   
      bottom: 0;
     position: absolute;
     z-index: 100;
}
     #map-container {
     height: 800px; 
     width: 100%;
       z-index: 10;
    position: absolute;
top: 0;

 
}
     #map {
  
  margin-left: auto; 
  margin-right: auto; 
     position:relative;
     height: 800px; 

 top: 200px;
      margin-bottom: 200px;
}
     .topnav {
  overflow: hidden;
  background-color: white;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;

}

/* Style the hamburger menu */
.topnav a.icon {
  background: #41941d;
  color: white;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: whitesmoke;
  color: white;
   
}

  .nav {
          visibility: hidden;
     }
     #Home {
         justify-content: center;
     margin: auto;

     text-align: center;
     }

     #left {
          margin-top: 50px;
          margin-bottom: 50px;
     }
}
@media screen and (min-width: 1000px) {

     .charts {
          max-height: 700px;
     }
     .data {
  background-color: whitesmoke;
  margin-bottom: 0;
}
#pie {
     width: 150px !important;
margin: 20px;
     

}

#pie:hover {

}




.btnss {
  display: flex;
  justify-content: center;
  align-items: center;
}

#bars {
     width: 150px !important;
margin: 20px;
}

.container-chart {
 padding: 50px;
 align-items: center;
  
}
     #legende {
     background-color: black;
     visibility: hidden;
    
     left: 5%;
      bottom: 150px;
     position: absolute;
     z-index: 100;
}
     #map-container {
     height: 800px; 
     width: 90%;
       z-index: 10;
    position: absolute;
top: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
margin-top: 50px;

 
}

     #map {
  
  margin-left: auto; 
  margin-right: auto; 
     position:relative;
     height: 1000px; 
width: 100%;
 top: 200px;
      margin-bottom: 100px;
      
}
     .topnav {
          visibility: hidden;
     }
      .nav {
          margin-top: -50px;
     }

.nav-link{
     color: black;
     font-size: 20px;
     font-weight: 300;
     margin-left: 100px;
   
}


.nav-item {

     margin-right: 50px;
}

.nav-link:focus{
     scroll-behavior: smooth;
}
#Home {
     margin-left: auto;
     margin-right: auto;
     margin-top: 100px;
     display: flex;
 justify-content: center;
width: 90%;
    margin-bottom: -100px;
}
#left {
     margin-top: 0px;
     margin-right: 250px;
}

}
.title {

}
.img-fluid {
   
     width: 350px;
     
}
.btn {
     background-color: #6b4d2b;
     border: none;
     width: 120px;
     height: 40px;
     font-size: 17px;
}

.btn:hover {
     background-color: #4f391f;
}

.btn:checked {
     background-color: #4f391f;
}




h1 {
     font-size: 60px;
}

/** CSS using pseudo-elements: **/

.team {

     justify-content: center;
     text-align: center;
     width: 100%;
    
     height: 300px;
     color: white;
     background-color: #1d1b28;
}


 
.slogan{
     margin-top: 20px;
      margin-bottom: 20px;
     font-size: 20px;
} 

.titleteam {
     padding-top: 50px;
     
}

.name {
     font-size: 20px;
     margin-top: 10px;
     font-weight: 100;
}


section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 300px;
padding: 0px 20vw;
background: #41941d;
color: white;
margin-bottom: -200px;

}

.txt {
     margin-top: 40px;
     font-size: 20px;
     font-weight: 100;
     text-align: center;
}

.spacer {
     aspect-ratio: 900/300;
      position: relative; 
         z-index: -401;
     width: 100%;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;


}



.layer1 {
     background-image: url('/layer1.svg');
     z-index: 400;
}


.layer2 {
     background-image: url('/layer2.svg');
   
}

body {
     overflow-x: hidden;
}

footer {
     background-color: #6b4d2b;
     color: white;
     height: 300px;

     text-align: center;
     justify-content: center;
}

.mails {
     margin-top: 50px;
     font-size: 15px;
     font-weight: 200;
}
h3 {
     font-size: 40px;
}

.container {
     margin-top: 100px;
     width: 100%;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  width: 100%;
}

/* Create four equal columns that sits next to each other */
.column {

margin-left: auto;
  flex: 25%;
  max-width: 20%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;

  vertical-align: middle;
  width: 100%;
}



/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
  .team {
       height: 800px;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

     .row {
          max-width: 80%;
             margin-left: auto;
             margin-right: auto;
            text-align: center;
    justify-content: center;
     }
  .column {
    flex: 100%;

    max-width: 100%;

  }
    .team {
       height: 150%;
  }
}