@media (max-width: 812px){
  p{
    font-size: 0.9rem;
  }

  .s-heading{
    font-size: 1rem;
  }
  .m-heading{
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .l-heading{
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }

  .btn{
    margin-top: 1rem;
    padding: 0.5rem;
  }

  

  .container{
    margin: auto;
    padding: 0;
    overflow: hidden;
  }
  .white-container{
    padding: 1rem 2rem;
    margin: 1rem 1rem;
  }
  .inner-container{
    flex-direction: column;
    /* border-radius: 0; */
    padding: 2rem 1rem;
    margin:0;
  }
  .picture-flex{
    border-right: none;
    border-top: 1px solid var(--light-grey);
    padding: 2rem 0;
  }
  .picture-flex-right{
    margin-left: 0;
    text-align: center;
    padding: 2rem 0;
  }

  #kontakt .picture-flex-right{
    padding-top: 1rem;
  }
  #kontakt .text-flex{
    padding-bottom: 1rem;
  }
  .border-right{
    border-right: none;
    border-bottom: 1px solid var(--light-grey);
  }
  .text-flex{
    padding-bottom: 2rem;
    padding-left: 1rem;
  }

  .flex-container{
    flex-direction: column-reverse;
  }

  #pinkerStreifen{
    height: 0rem;
  }
  #pinkerStreifen .pink-container{
    display: none;
  }

  #mobile-contact{
    display: block;
  }
  #mobile-contact .container{
    padding: 1rem;
    margin: 0;
    background: var(--light-rosa);
    color: var(--dark-grey);
  }

  #main-nav{
    top: 0;
    height: 6.2rem;
  }
  #main-nav .container{
    padding: 0 0.5rem;
  }
  #main-nav .menu-logo{
    display: flex;
    width: 160px;
    border-radius: 15px;
    border: 1px solid var(--light-rosa);
    justify-self: self-end;
  }
  #welcome .inner-container{
    margin: 1rem;
  }
  #showcase{
    padding: 2rem;
    height: 49vh;
  }
  #showcase::before{
    height: 100%;
  }
  #showcase .showcase-container{
    height: 100%;
  }

  #showcase .inner-container{
    border-radius: 15px;
    padding: 0.5rem;
  }
  #showcase .inner-container h1{
    padding-bottom: 0;
    font-size: 1.5rem;
  }
  #showcase .inner-container p{
    font-size: 1.3rem;
  }

  /* Leistungen */
  #leistungen .inner-container{
    margin: 1rem ;
    border-radius: 15px;
    flex-direction: column-reverse;
  }

  #leistungen .white-container{
    margin: 1rem;
  }
  #leistungen .inner-leist{
    flex-direction: column;
  }

   /* Wer wir sind */
   #wir .white-container{
    margin: 1rem;
  }

  #kontakt .container{
    padding: 1rem;
    height: 100%;
  }
  #kontakt .buttons{
    text-align: center;
    padding-top: 0;
  }

  /* Quali/Karriere */
  #quali .text-flex,
  #karriere .text-flex{
    padding: 0;

  }
  #quali .container,
  #karriere .container{
    padding: 1rem;
    height: 100vh;
  }

  /* Kontakt */
  #kontakt .btn-maps{
    font-size: smaller;
    padding: 0.4rem 0.5rem;
  }

  #datenschutz .white-container{
    padding-right: 2rem;
  }

  /* Footer */
  #main-footer a{
    font-size: smaller;
  }

  #main-footer .footer-content{
    flex-direction: column;
    text-align: center;
    align-items: center;
    border-bottom: 1px dotted var(--light-grey);
  }
  #main-footer .footer-content .items{
    padding: 0.5rem 0 1rem 0;
  }

  #main-footer .list{
    text-align: center;
    align-items: center;
    justify-content:center;
  }
}

@media (max-width: 440px){

  .mt-3{
    margin-top: 1rem;
  }
  .white-container{
    padding: 1rem 1.5rem;
    margin: 1rem 0;
  }
  .inner-container{
    flex-direction: column;
    /* border-radius: 0; */
    padding: 1.5rem 0.5rem;
    margin:0;
  }
  .picture-flex{
    border-right: none;
    border-top: 1px solid var(--light-grey);
    padding: 2rem 0;
  }
  .picture-flex-right{
    margin-left: 0;
    text-align: center;
    padding: 2rem 0;
  }
  .border-right{
    border-right: none;
    border-bottom: 1px solid var(--light-grey);
  }
  .text-flex{
    padding: 0;
    margin: 0 1rem;

  }
  p{
    font-size: 0.8rem;
  }
  .s-heading{
    font-size: 0.8rem;
  }
  .m-heading{
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
  .l-heading{
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  /* Home */
  #showcase{
    height: 41vh;
  }
  #showcase .inner-container h1{
    padding-bottom: 0;
    font-size: 1.3rem;
  }
  #showcase .inner-container p{
    font-size: 0.9rem;
  }
  #welcome a{
    font-size: 0.8rem;
  }
  #mobile-contact a{
    font-size: 0.8rem;
  }

  /* Leistungen */
  #leistungen .inner-container{
    margin: 1rem;
    /* border-radius: 0; */
  }
  /* Wer wir sind */
  #wir .white-container{
    padding: 1rem;
    /* border-radius: 0; */
  }
  #quali .container,
  #karriere .container{
    padding: 1rem;
  }
  /* Kontakt */
  #kontakt .container{
    padding: 1rem;
    height: 100%;
  }
  #kontakt .mobile{
    font-weight: bolder;
  }
  #osm{
    font-size: 0.5rem;
    color: var(--pink);
    text-align: center;
  }
  .btn{
    font-size: xx-small;
  }
  .btn-maps{
    display: inline-block;
    border: none;
    padding: 0.3rem;
    margin-top: 0.8rem;
    border-radius: 10px;
    font-size: small;
  }
}

@media (max-width: 320px){
  .m-heading{
    font-size: 0.7rem;
  }
  p{
    font-size: 0.7rem;
  }
  #welcome a{
    font-size: 0.7rem;
  }

  .l-heading{
    font-size: 0.9rem;
    
  }
 #kontakt .btn-maps{
   font-size: x-small;
 }
 .text-flex{
   padding-bottom: 0.8rem;
   margin: 0 0.5rem;
 }
 #kontakt .picture-flex-right{
   padding: 0;

 }
 .s-heading{
   font-size: 0.7rem;
 }
}