.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: var(--color-background);


}

.overlay-content {
  position: fixed;
  background-color: var(--color-background);
  padding-top: 5rem;
  right: 5rem;
  text-align: right;
}

.overlay a {
  padding: 3px;
  padding-top: 0.6rem;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-black);
  display: block;
  transition: 0.3s;

}

.overlay a:hover, .overlay a:focus {
  color: var(--color-active);
}

.mobile-menu-logo{
  width: 200px;
  margin-bottom: -7px;
}

.mobilebtn {
  display: none;
  position: fixed;
  z-index: 1000;
  right:20px;
  top:20px;
  color: var(--color-background);
  background-color: var(--color-text);
  border-style: solid;
}

.openbtn {
  display : block;
  position: relative;
  padding: 10px;
  top:0px;
  font-size: 15px;
  font-weight: bold;

}
.closebtn {
  display : none;
  position: relative;
  padding: 10px;
  top: 0px;
  font-size: 15px;
  font-weight: bold;

}

.mobileintro {
  display: none;
}




.logoText a, .logoText a:hover, .logoText a:focus {
  color: var(--color-active);
  font-size: 2rem;
}
  
  



@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
    padding: 6px 8px 6px 16px;}

}

@media screen and (max-width: 700px) {

    body {
        position: relative;
        top: 0;
    }



        .main {
            margin-left: 0px; /* Same as the width of the sidebar */
            padding: 5px 30px 30px 30px;
          }
          /* Style page content */
        .main-content {
          max-width: var(--max-maincontent);
          margin-right:0px;
          padding-bottom:100px

}

          .main-pic {
            margin-top: 20px;
            padding: 0px -15px -15px 0px;
           }

           .intro {
            padding-top: 0.2rem;
            margin-bottom: 2rem;
            line-height: 1rem;
          }
          .h1 {
            font-size: 2rem;
          }

          .datenschutz {
           
            width:80%;
          }
          .formstyle {
            font-size: .6rem;
           
          }



          .main-pic-big {
            width: 100rem;
            padding-right:30px;
            
           }
           .text p,
           .text ul,
           .text ol {
            font-size: 0.8rem;
            }


    :root {
     

    }

   
    .sidenav {
        display: none;
    }

    .mobilebtn {
      display: block;
  }

  .mobileintro {
    display: block;
}


   

}


@media screen and (max-width: 400px) {

  body {
      position: relative;
      top: 0;
  }



      .main {
          margin-left: 0px; /* Same as the width of the sidebar */
          padding: 0px 15px 15px 10px;
        }

        .main-pic {
          margin-top: 20px;
          padding: 0px -15px -15px 0px;
         }

         .intro {
          padding-top: 0.2rem;
          margin-bottom: 2rem;
          line-height: 1rem;
        }
        .h1 {
          font-size: 1.5rem;
        }

        .datenschutz {
         
          width:80%;
        }
        .formstyle {
          font-size: .6rem;
         
        }



        .main-pic-big {
          width: 100rem;
          padding-right:30px;
          
         }

         .text p,
         .text ul,
         .text ol {
          font-size: 0.7rem;
          }
          .mobilebtn {  
            right:15px;
            top:15px;  
          }


  :root {
   

  }

 
  .sidenav {
      display: none;
  }

  .mobilebtn {
    display: block;
}

.mobileintro {
  display: block;
}




 

}