/* ab 1600px */


.maps {
  -webkit-box-flex: 1.3;
      -ms-flex: 1.3;
          flex: 1.3;
}



/*Queries*/



@media (max-width: 1323px) {

/* footer */

  .maps {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }


/* Startseite */

  .container-oben .laden{
    height: 350px;
    max-width: 350px;
  }

.container-mitte{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.bilder-mitte .bild{
  margin-top: 3rem;
  margin-left: 3rem;
  margin-right: 3rem;
  max-width: 170px;
}


.subtitle{
-webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
        transform: translateY(100px);
}


.text-mitte{
  margin: 5rem 0 3rem 0;
  text-align: center;
  max-width: 80%;
  padding: 0;

}

.text-mitte .catering li{
  text-align: center;
}

}







@media (max-width: 1213px) {

/* FOOTER */

  .maps {
    display: none;
  }

.container-oben{
  text-align: justify;
}

.container-oben .laden{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.container-oben p{
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

.bild-unten{
  max-width: 700px;
}

}

@media (max-width: 1155px){

#header{
  height: 130px;
}


header .container{
  height: 130px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

ul.navigation li a.aktiv{
  color:  var(--metzger-gelb);
  border: none;
}

ul.navigation li a:hover{
  border: none;
}

}


@media (max-width: 1100px) {


:root{
  font-size: 0.6rem;
}


.logo h1{

  margin-top: 0.5rem;
}

  .container-oben{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: justify;
  }




  .container-oben .laden{
    margin-top: 3rem;
    max-width: 80%;
    max-height: 200px;

  }

  .container-oben .generation{
    max-width: 650px;
    max-height: 250px;
    margin-top: 3rem;
    -o-object-position: 0px -120px ;
       object-position: 0px -120px ;

  }

  .bilder-leistungen img{
    max-width: 150px;
  }


  .bild-unten{
    max-width: 600px;
  }


}


@media (max-width: 952px){

  .kontakt {
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px);

  }
}




@media (max-width: 810px){

  :root{
    font-size: 0.5rem;
  }




  .logo{
    margin-top: 1rem;
  }

  .navigation{
    padding-bottom: 0.5rem;

  }

  ul.navigation li a:hover{
    border: none;
  }


  .container-oben .generation{
    max-width: 650px;
    max-height: 250px;
    margin-top: 3rem;
    -o-object-position: 0px -100px ;
       object-position: 0px -100px ;

  }


  .container-mitte-ueberuns{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .text-mitte.links{
    margin: 0;
  }

  .text-mitte.rechts{
    margin: 0;
  }

  .bilder-mitte{
    margin-top: 2rem;
  }

  .bilder-mitte .bild{
    max-width: 250px;
    margin: 1rem;
  }


  .container-footer{
    width: 90%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: flex;
            flex-direction: flex;
  }



}


@media (max-width: 680px){




  .bilder-mitte{
    margin-top: 2rem;
    max-width: 100%;
  }

  .subtitle{
    display: none;
  }


  .bilder-leistungen{
    width: 90%;

  }


  .bilder-leistungen img{
    max-width: 110px;
  }



  .bild-unten{
    max-width: 500px;
  }

}


@media (max-width: 550px){

  :root{
    font-size: 0.5rem;
  }


.navigation-burger{
  display: block;
}

  header .container{
    width: 100%;
  }

  ul.navigation {

    display: none;
  }

  .logo{
    margin-top: 2rem;
  }

  .container, .container-oben, .container-mitte, .text-mitte {
    width: 95%;
  }


  .logo h1{
    margin-top: 2rem;
  }

  ul.navigation li{
    margin: 0 1rem;
  }

  .container-oben .generation{
    max-width: 650px;
    max-height: 250px;
    margin-top: 3rem;
    -o-object-position: 0px -80px ;
       object-position: 0px -80px ;

  }


  .container-oben.leistungen{
    width: 95%;
    text-align: justify;
  }

  .container-mitte-leistungen{
    width: 95%;
    text-align: justify;
  }

  .container-mitte-leistungen p{
    font-size: 2rem;
    line-height: 2;
    padding: 0rem;
  }


  .bilder-leistungen{
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

  }


  .bilder-leistungen img{
    max-width: 200px;
  }


  .untere-section {
    width: 95%;
    margin: 0 auto;
    padding: 3.5rem 0;
    text-align: justify;
  }

  .container-footer{
    width: 90%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  .kontaktdaten{
    margin-bottom: 1rem;
  }

  .zeiten {
    padding-top: 1rem;
    border-top: 1px solid var(--metzger-gelb);
  }


  .impressum, .datenschutz{
    width: 95%;
    padding: 3rem 1rem;
  }

}







@media (max-width: 392px) {
  ul.navigation li{
    margin: 0 0.6rem;
  }

}