* {
  margin: 0;
  padding: 0;
}

/*Allgemein
==============================*/

*, *::before, *::after {
    box-sizing: border-box;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.row {
  display: flex;
  justify-content: center;
}

body {
  background: #aa7942;
  font-family: 'Poppins';
  padding-bottom: 1em;
}

/*Navigation
==========================*/
.nav-toggle {
    cursor: pointer;
    border: 0;
    width: 3em;
    height: 3em;
    padding: 0em;
    border-radius: 50%;
    background: black;
    color: white;
    transition: opacity 250ms ease;


}

.nav-toggle:focus,
.nav-toggle:hover {
    opacity: .75;
}

.hamburger {
    width: 50%;
    position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    margin: 0 auto;
    height: 3px;
    background: white;
}

.hamburger::before,
.hamburger::after {
    content: '';
    width: 100%;
}

.hamburger::before {
    transform: translateY(-6px);
}

.hamburger::after {
    transform: translateY(3px);
}

/*Contents
=============================================*/

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  z-index: 12;
  position: fixed;
}

header {
  background: #aa7942;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: solid .25em #261b0f;
}

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

.nav-toggle {
  position:fixed;
  right: 5%;
}

.navbar img {
  vertical-align: middle;
}

.schriftzug img {
  width: 100%;
  height: auto;
}

.schriftzug {
  width: 40%;
}

.nav-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}

.transparent {
  background-color: blue;
  opacity: 0;

}

.nav {
  visibility: hidden;
  height: 0;
  position: absolute;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.nav--visible {
    visibility: visible;
    height: auto;
    position: relative;
    text-align: center;
    width: 30%;
    background-color: #aa7942;
    padding-top: 8px;
    padding-bottom: 12.8px;
    border-bottom: solid .18em #261b0f;

}

.nav a {
  text-decoration: none;
  color: black;
  font-size: 17.6px;
  font-weight: 400;
  padding-top: 8px;
}

.top {
  z-index: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  visibility: hidden;
}

.home {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eingangsportal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eingangsportal img {
  width: 100%;
  height: auto;
  max-width: 500px;
}

.untertitel {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  justify-content: space-between;
  padding-top:8px;
  padding-bottom: 8px;
}

.untertitel p {
  font-size: 16.8px;
  font-weight: 300;
}

/*BILDER
=========================================================*/

    .shoes {/*richtet alle div( klasse .row1-17 bzw .pic) aus*/
      display:flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    .pic {/*richtet das div in class .pic bzw .row1-17 aus)*/
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: .4em;
    }

    .pic img {
      width: 100%;
      height: auto;
      display: block; /*damit extra Platz unter Bild verschwindet*/
      margin-left: auto; /*damit Bild trotzdem in Mitte der Zeile ist wenn unten kleiner gemacht*/
      margin-right: auto;/*selbes*/

    }

    .mobile-inline { /* d.h. Bilder sollen Mobil in einer Zeile stehen*/
      flex-direction: row;
      justify-content: center;
    }

    .mobile-inline div+div {
      margin-left: .4em;
    }

    .hoch {
      display: flex;
      flex-direction: column;
      flex: calc(1224/ calc(1632 + 1224 * 0.03)); */die 3% Margin werden zum Seitenverhältnis hinzugefügt*/
    }

    .hoch div+div {
      margin-left: 0;
      margin-bottom: 0;
    }






    /*Bildverhältnisse*/

    .img1 {
      flex: calc(1224/816);
    }

    .img2 {
      flex: calc(1224/816);
    }

    .img3 {
      flex: calc(1224/816);
    }

    .img4 {
      flex: calc(1224/816);
    }

    .img5 {
      flex: calc(1224/816);
    }

    .img6 {
      flex: calc(928/816);
    }

    .img7 {
      flex: calc(1147/816);
    }

    .img8 {
      flex: calc(964/816);
    }

    .img9 {
      flex: calc(1224/816);
    }

    .img10 {
      flex: calc(1224/816);
    }

    .img11 {
      flex: calc(1224/816);
    }

    .img12 {
      flex: calc(1224/816);
    }

    .img13 {
      flex: calc(1224/816);
    }

    .img14 {
      flex: calc(891/816);
    }

    .img15 {
      flex: calc(1224/816);
    }

    .img16 {
      flex: calc(1224/816);
    }

    .img17 {
      flex: calc(816/1333);
    }

    .img18 {
      flex: calc(1224/816);
    }

    .img19 {
      flex: calc(937/816);
    }

    .img20 {
      flex: calc(1224/816);
    }

    .img21 {
      flex: calc(1224/816);
    }

    .img22 {
      flex: calc(1224/816);
    }

    .img23 {
      flex: calc(1224/816);
    }

    .img24 {
      flex: calc(1224/816);
    }

    .img25 {
      flex: calc(1224/816);
    }

    .img26 {
      flex: calc(1000/563);
    }

    .img27 {
      flex: calc(1224/816);
    }

    .img28 {
      flex: calc(1224/816);
    }

    .img29 {
      flex: calc(1282/816);
    }

    .img30 {
      flex: calc(1224/816);
    }

    .img31 {
      flex: calc(1224/816);
    }

    .img32 {
      flex: calc(816/1224);
    }

    .img33 {
      flex: calc(1224/816);
      margin-bottom: 2.8%; */das ist basierend auf der breite des bilds. Muss oben beim seitenverhältnis des div hinzugefügt werden*/
    }

    .img34 {
      flex: calc(816/1110);
    }

    .img35 {
      flex: calc(1224/816);
      margin-bottom: 2.8%; */das ist basierend auf der breite des bilds. Muss oben beim seitenverhältnis des div hinzugefügt werden*/
    }

    .img36 {
      flex: calc(1088/816);
    }

    .img37 {
      flex: calc(1088/816);
    }

    .img38 {
      flex: calc(1088/816);
    }

    .img39 {
      flex: calc(1088/816);
    }


    .marken {
      flex: calc(1100/666);
    }




.adress {
  margin: 1em 0;
}

.adress h1 {
  font-weight: 600;
}

.map {
  height: 70vw;
  margin: 2em 0;
}

.shop {
  height: 100vw;
  text-align: center;
}

.shop img {
  height: 100%;
}

.impressum {
  text-decoration: none;
  color: black;
  padding: 1em 0;
}

.mediainfo {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
  margin-top: 3em;
}

.mediainfo h1 {
  font-weight: 600;
  font-size: .8rem;
}

.mediainfo p, a {
  font-size: .8rem;
  color: black;
}

@media (min-width: 450px) {
  .nav a {
    font-size: 24px;
  }

  .untertitel p {
    font-size: 24px;
    font-weight: 300;
  }
}

@media (min-width: 700px) {

  header {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .top {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .untertitel {
    padding-bottom: 16px;
  }

  /*Bilder
  ============================*/

.pic {
  margin-bottom: .6em;
}

  .pic img {
    margin-bottom: 0;
  }

  .mobile-inline div+div {
    margin-left: .6em;
  }

  .hoch div+div {
    margin-left: 0;
  }

  .adress h1 {
    font-size: 1.5rem;
  }

  .adress p {
    font-size: 1.2rem;
  }

  .impressum {
    font-size: 1.2rem;
  }
}

@media (min-width: 960px) {
  header {
    padding-top: 3em;
    padding-bottom: 3em;
    border-bottom: none;
  }

  .top {
    padding-top: 3em;
    padding-bottom: 3em;
  }

  .schriftzug {
    width: 26%;
  }

  .nav--visible {
    border-top: solid .18em #261b0f;
    width: 15%;
  }

  .nav a {
    text-decoration: none;
    color: black;
    font-weight: 400;
    font-size: 19.2px;
  }

  .home img {
    max-width: 732px;
  }

  .untertitel {
    max-width: 732px;
    padding-bottom: 39px;
  }

  .untertitel p {
    font-size: 39px;
    font-weight: 300;
  }


  /*BILDER
  =======================================*/
.pic { /*alle .row1-17 sollen als zeile angezeigt werden*/
  flex-direction: row;
  justify-content: center;
  margin-bottom: .6em;
}

.pic img {
  margin-bottom: 0em;
}

.pic div+div {
  margin-left: .6em;
}

.hoch div+div {
  margin-left: 0;
}



/*Kleiner machen von oben rückgängig*/




/*Falls ein Bild oder Zeile kleiner sein soll

.img19 img {
  width: 70%;
}

.img27 img {
  width: 70%;
}

*/

  /*KONTAKT
  ======================================*/

  .contact {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    padding-top: 2em;
  }

  .adress {
    padding-left: 2em;
  }

  .map {
    height: 20vw;
    width: 29vw;
    margin: 1em 0;
    padding-left: 2em;
  }

  .shop {
    height: 20vw;
    margin: 1em 0;
  }

  .impressum {
    font-size: 1em;
  }

  .mediainfo {
    margin-top: 3em;
  }

  .mediainfo h1 {
    font-weight: 600;
    font-size: 1.0rem;
  }

  .mediainfo p, a {
    font-size: 1.0rem;
  }
}