@import url("satoshi.css");
@import url("brands.css");

/* Layout */

.side-paddings {
  padding-left: 32px;
  padding-right: 32px;
}

.flex {
  display: flex;
}

.col {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.between {
  justify-content: space-between;
}

.center {
  justify-content: center;
}

.align-end {
  align-self: flex-end;
}

.mt-24 {
  margin-top: 24px;
}

.w-72 {
  width: 72px;
}

/* Text Styles */

p {
  font-family: "Satoshi-Regular";
  line-height: 1.5rem;
  font-size: 1rem;
  font-weight: 400;
}

h1 {
  font-family: "Satoshi-Black";
  line-height: 1.75rem;
  font-size: 1.5rem;
  font-weight: 900;
}

h2 {
  font-family: "Satoshi-Black";
  font-size: 1rem;
  font-weight: 900;
  margin-top: 0.5rem;
  margin-bottom: 0rem;
}
h3 {
  font-family: "Satoshi-Bold";
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.5rem;
  margin-bottom: 0rem;
}

a {
  font-family: "Satoshi-Regular";
  line-height: 1.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  color: #95282d;
  font-style: normal;
}

a.impressumMail {
  font-family: "Satoshi-Regular";
  line-height: 1.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #95282d;
  font-style: normal;
}

.some {
  font-style: normal;
  font-size: 1.5rem;
}

.no-decoration {
  text-decoration: none;
}

/* Sections */

.fixed {
  height: 30vh;
  width: calc(100% - 64px);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
}

.hours {
  padding-bottom: 64px;
}

.about {
  background: #95282d;
  color: white;
}

.impressum {
  margin-top: 64px;
}

.container {
  display: grid;
  width: 80vw;
  margin-left: auto;
  margin-right: auto;

  grid-template-columns: 30% 20% 30%;
  grid-template-rows: 80vh 20vh 20vh;
  grid-template-areas:
    "hours-area logo-area about-area "
    "hours-area logo-area friends-area "
    "impressum-area impressum-area friends-area ";
  column-gap: 7.5%;
}

.logo-area {
  grid-area: logo-area;
  padding-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.logo {
  background: url(/imgs/VinzLogoBig.png) no-repeat;
  height: 100%;
  width: 100%;
  background-position-x: center;
  background-position-y: 100%;
  background-size: contain;
  margin-top: 0;
  align-self: flex-end;
}
.name_and_adress {
  width: 100%;
  align-self: flex-end;
  padding-bottom: 10vh;
}

.hours-area {
  grid-area: hours-area;
  align-self: end;
  padding-bottom: 10vh;
}
.about-area {
  grid-area: about-area;
  background: #95282d;
  color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.friends-area {
  grid-area: friends-area;
  background: #95282d;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 64px;
  padding-top: 64px;
}
.impressum-area {
  grid-area: impressum-area;
  display: grid;
  grid-template: auto auto auto / auto auto;
}
.imp_header {
  grid-column: 1/3;
  grid-row: 1;
}
.imp_adresse {
  grid-column: 1/2;
  grid-row: 2/4;
}
.imp_vertretung {
  grid-column: 2/3;
  grid-row: 2/3;
}
.imp_uid {
  grid-column: 2/3;
  grid-row: 3/4;
}

@media only screen and (max-width: 1640px) {
  .container {
    display: grid;
    width: 95vw;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 80vh 20vh 30vh;
    grid-template-areas:
      "hours-area logo-area about-area "
      "hours-area logo-area friends-area "
      "impressum-area impressum-area friends-area ";
    column-gap: 2.5%;
  }

  .friends-area {
    grid-area: friends-area;
    background: #95282d;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 64px;
    padding-top: 64px;
  }
  .name_and_adress {
    width: 100%;
    align-self: flex-end;
    padding-bottom: 0;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .container {
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 70vh 30vh auto auto;
    grid-template-areas:
      "logo-area hours-area"
      "about-area about-area"
      "friends-area friends-area"
      "impressum-area impressum-area";
    column-gap: 0%;
  }

  .vertical-padding {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .logo-area {
    grid-area: logo-area;
    padding-top: auto;
    padding-bottom: auto;
    display: flex;
    justify-content: end;
    height: 100%;
  }

  .logo {
    background: url(/imgs/VinzLogoBig.png) no-repeat;
    background-position-x: center;
    background-position-y: 100%;
    width: 100%;
    height: 100%;
    background-size: contain;
    margin-top: 40px;
    padding-bottom: 0;
  }
  .name_and_adress {
    width: 100%;
    align-self: flex-end;
    padding-bottom: 0;
    padding-left: 0px;
    padding-right: 0px;
  }

  .hours-area {
    grid-area: hours-area;
    align-self: end;
    padding-bottom: 16px;
  }
  .about-area {
    grid-area: about-area;
    background: #95282d;
    color: white;
    padding-top: 24px;
    padding-bottom: 24px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .friends-area {
    grid-area: friends-area;
    padding-bottom: 0;
    align-self: center;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .impressum-area {
    grid-area: impressum-area;
    display: grid;
    grid-template: auto auto auto / auto auto;
    margin-top: 0;
  }
  .imp_header {
    grid-column: 1/3;
    grid-row: 1;
  }
  .imp_adresse {
    grid-column: 1/2;
    grid-row: 2/4;
  }
  .imp_vertretung {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .imp_uid {
    grid-column: 2/3;
    grid-row: 3/4;
  }
}

/* Layout up to 480px */
@media only screen and (max-width: 480px) {
  .container {
    display: grid;
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: auto;
    grid-template-rows: 40vh 58vh auto auto auto;
    grid-template-areas:
      "logo-area"
      "hours-area"
      "about-area"
      "friends-area"
      "impressum-area";

    column-gap: 0%;
  }

  .vertical-padding {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .logo-area {
    grid-area: logo-area;
    padding-top: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  .logo {
    background: url(/imgs/HeaderMobile.png) no-repeat;
    height: 100%;
    width: 100%;
    background-position-x: center;
    background-position-y: 100%;
    background-size: contain;
    margin-bottom: -32px;
    align-self: flex-end;
  }

  .name_and_adress {
    width: 100%;
    align-self: flex-end;
    padding-bottom: 32px;
  }

  .hours-area {
    grid-area: hours-area;
    align-self: end;

    padding-top: 0;
    padding-bottom: 64px;
  }
  .about-area {
    grid-area: about-area;
    background: #95282d;
    color: white;
  }
  .friends-area {
    grid-area: friends-area;
    padding-bottom: 0;
    align-self: center;
  }
  .impressum-area {
    grid-area: impressum-area;
    display: grid;
    grid-template: auto auto auto auto / auto;
    margin-top: 0;
  }
  .imp_header {
    grid-column: 1;
    grid-row: 1;
  }
  .imp_adresse {
    grid-column: 1;
    grid-row: 2;
  }
  .imp_vertretung {
    grid-column: 1;
    grid-row: 3;
  }
  .imp_uid {
    grid-column: 1;
    grid-row: 4;
  }
}