* {
  box-sizing: border-box;
  margin: 0;
}

html {
  background-color: #00376c;
}

body {
  background-color: #fff8de;
  color: #00376c;
  font-family: "Scala W02 Regular", serif;
  margin: 0px;
  font-size: 1.2rem;
  display: grid;
  grid-template-areas: "header header header header header header" "menu main main main main main" "footer1 footer1 footer1 footer1 footer1 footer1" "footer2 footer2 footer2 footer2 footer2 footer2";
  gap: 0px 10px;
}

body > div {
  padding: 1em;
}

.gp-header {
  background-color: #fff8de;
  grid-area: header;
  align-items: center;
  margin-left: 3em;
}

.gp-header a {
  text-decoration: none;
}

.gp-header a:visited, .gp-header a:link {
  color: #00376c;
}

.gp-line-spacer {
  border-bottom: 1px solid #00376c;
  grid-area: spacer;
}

.gp-main-menu {
  background-color: #fff8de;
  grid-area: menu;
  padding: 0 2em;
  margin-left: 20%;
}

.menu-toggle {
  display: inline-block;
  cursor: pointer;
  margin-bottom: 1em;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #00376c;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.gp-main-menu nav {
  position: -webkit-sticky;
  position: sticky;
  top: 1.4rem;
}

.gp-main-menu a {
  text-decoration: none;
}

.gp-main-menu a, .gp-main-menu a:visited, .gp-main-menu a:link {
  color: #00376c;
}

.gp-main-menu ul {
  list-style-type: none;
  padding: 0;
}

.gp-main-menu li {
  border-top: 1px solid #00376c;
  text-align: left;
  height: 3.5em;
  line-height: 3.5em;
  padding-left: 0.5em;
}

.gp-main-menu .gp-submenu li::before {
  content: ">  ";
  padding-left: 2em;
}

.gp-page-content {
  background-color: #fff5d0;
  grid-area: main;
  font-size: 1.3rem;
  line-height: 1.5;
  padding-left: 12.5%;
  padding-right: 12.5%;
  margin-right: 15%;
}

.gp-page-content h1 {
  margin-bottom: 1em;
}

.gp-page-content p {
  text-align: justify;
  margin-bottom: 0.5em;
}

.gp-page-content ul {
  margin-bottom: 0.5em;
}

.gp-page-content img {
  max-width: 100%;
  height: auto;
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.gp-footer {
  background-color: #00376c;
  text-align: center;
}

.img-container {
  grid-area: footer1;
}

.img-container img {
  height: 100px;
  width: auto;
  display: inline-block;
  background-color: white;
}

.imprint-container {
  grid-area: footer2;
}

.imprint-container a {
  text-decoration: none;
  color: white;
}

/* --------- PHONE ---------    */
@media only screen and (max-width: 600px) {
  .gp-header {
    grid-area: 1/1/span 1/span 6;
    margin-left: 0;
  }
  .gp-main-menu {
    grid-area: 2/1/auto/span 6;
    margin-left: 0px;
    padding: 0;
  }
  .gp-main-menu .mainNav {
    display: none;
  }
  .gp-main-menu .showNav {
    display: block;
  }
  .menu-toggle {
    display: block;
    margin-left: 1em;
  }
  .gp-main-menu li {
    height: 2.5em;
    line-height: 2.5em;
    padding-left: 1em;
    padding-right: 1em;
  }
  .gp-page-content {
    grid-area: 3/1/span 1/span 6;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 0%;
    border-top: 1px solid #00376c;
  }
  .img-container {
    grid-area: 4/1/span 1/span 6;
  }
  .imprint-container {
    grid-area: 5/1/span 1/span 6;
  }
}
/* --------- TABLET --------- */
@media only screen and (min-width: 600px) {
  .gp-header {
    grid-area: 1/1/span 1/span 6;
  }
  .gp-main-menu {
    grid-area: 2/1/span 1/span 1;
    margin-left: 0px;
  }
  .menu-toggle {
    display: none;
  }
  .gp-main-menu li {
    height: 2em;
    line-height: 2em;
  }
  .gp-main-menu .gp-submenu li::before {
    padding-left: 0.5em;
  }
  .gp-page-content {
    grid-area: 2/2/span 1/span 5;
    border-top: 1px solid #00376c;
    margin-right: 0%;
  }
  .img-container {
    grid-area: 3/1/span 1/span 6;
  }
  .imprint-container {
    grid-area: 4/1/span 1/span 6;
  }
}
/* --------- DESKTOP --------- */
@media only screen and (min-width: 768px) {
  .gp-header {
    grid-area: 1/1/span 1/span 6;
  }
  .gp-main-menu {
    grid-area: 2/1/span 1/span 1;
    margin-left: 5em;
  }
  .gp-main-menu li {
    height: 3.5em;
    line-height: 3.5em;
  }
  .menu-toggle {
    display: none;
  }
  .gp-page-content {
    grid-area: 2/2/span 1/span 5;
    margin-right: 20%;
  }
  .img-container {
    grid-area: 3/1/span 1/span 6;
  }
  .imprint-container {
    grid-area: 4/1/span 1/span 6;
  }
}

/*# sourceMappingURL=main.css.map */