.img-dummy {
  grid-area: grid-img;
  width: 100%;
  height: 100%;
  /* background-color: teal; */
}

/* header */

.grid_header {
  display: grid;
  grid-template-columns: 4% 6% 7.5% 10% 20.5% 45.5% 4% 1.14% 0.36% 1%;
  grid-template-rows: 11% 0.65% 2.35% 86%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 116vh;
}

.grid_header .div1 {
  grid-area: 1 / 1 / 5 / 2;
  background-color: #86bc25;
}
.grid_header .div2 {
  grid-area: 1 / 2 / 5 / 3;
  background-color: white;
}
.grid_header .div3 {
  grid-area: 1 / 3 / 2 / 10;
  background-color: white;
}
.grid_header .div4 {
  grid-area: 2 / 3 / 3 / 10;
  background-color: #86bc25;
  z-index: 3;
}
.grid_header .div5 {
  grid-area: 3 / 3 / 4 / 9;
  background-color: white;
}
.grid_header .div6 {
  grid-area: 4 / 3 / 5 / 8;
}
.grid_header .div7 {
  grid-area: 1 / 4 / 5 / 5;
  background-color: transparent;
  z-index: 3;
}
.grid_header .div8 {
  grid-area: 1 / 6 / 2 / 7;
  /* background-color: tomato; */
}
.grid_header .div9 {
  grid-area: 3 / 8 / 5 / 9;
  background-color: white;
  z-index: 2;
}
.grid_header .div10 {
  grid-area: 2 / 9 / 5 / 10;
  background-color: #86bc25;
}
.grid_header .div11 {
  grid-area: 1 / 10 / 5 / 11;
  background-color: white;
}

/* ------- index ------- */

.grid {
  display: grid;
  width: 100%;
  height: 116vh;
  grid-template-columns: 4% 4.5% 89% 1.14% 0.36% 1%;
}

.grid-item1,
.grid-item5 {
  background-color: #86bc25;
}

.grid-item2,
.grid-item3,
.grid-item4,
.grid-item6 {
  background-color: white;
}

.parent {
  display: grid;
  height: 100%;
  grid-template-columns: 33% 5% 62%;
  grid-template-rows: 11% 19% 2.5% 46.5% 7% 3.5% 10.5%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: white;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 2 / 1 / 3 / 2;
}

.div3 {
  grid-area: 3 / 1 / 4 / 2;
}

.div4 {
  grid-area: 4 / 1 / 5 / 2;
}

.div5 {
  grid-area: 5 / 1 / 6 / 2;
  z-index: 3;
}

.div6 {
  grid-area: 6 / 1 / 7 / 2;
}

.div7 {
  grid-area: 7 / 1 / 8 / 2;
}

.div8 {
  grid-area: 1 / 2 / 8 / 3;
}

.div9 {
  grid-area: 1 / 3 / 2 / 4;
}

.div10 {
  grid-area: 2 / 3 / 7 / 4;
}

.div11 {
  grid-area: 7 / 3 / 8 / 4;
}

/* special grid -> green */

.grid_special .grid-item1,
.grid_special .grid-item5 {
  background-color: white;
}

.grid_special .grid-item2,
.grid_special .grid-item3,
.grid_special .grid-item4,
.grid_special .grid-item6 {
  background-color: #86bc25;
}

.grid_special .parent div {
  background-color: #86bc25;
}

.grid_special .parent h3,
.grid_special .parent p,
.grid_special .parent a {
  color: white;
}

.grid_special .div6 {
  z-index: 2;
}

/* kontakt */

.grid_kontakt {
  display: grid;
  width: 100%;
  height: 116vh;
  grid-template-columns: 4% 4.5% 90.5% 1%;
}

.grid_kontakt .grid-item5 {
  background-color: white;
}

.parent2 {
  display: grid;
  height: 100%;
  grid-template-columns: 1.6% 30.9% 4.85% 55.8% 5.2% 1.24% 0.41%;
  grid-template-rows: 11% 5% 9% 7% 18% 31% 8.5% 0.8% 0.7% 6% 3%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: white;
}

.parent2 .div1 {
  grid-area: 1 / 1 / 12 / 2;
}

.parent2 .div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.parent2 .div3 {
  grid-area: 2 / 2 / 3 / 3;
}

.parent2 .div4 {
  grid-area: 3 / 2 / 4 / 3;
}

.parent2 .div5 {
  grid-area: 4 / 2 / 5 / 3;
}

.parent2 .div6 {
  grid-area: 5 / 2 / 6 / 3;
}

.parent2 .div7 {
  grid-area: 6 / 2 / 7 / 3;
}

.parent2 .div8 {
  grid-area: 7 / 2 / 8 / 3;
}

.parent2 .div9 {
  grid-area: 8 / 2 / 9 / 6;
}

.parent2 .div10 {
  grid-area: 9 / 1 / 10 / 8;
  background-color: #86bc25;
  z-index: 2;
}

.parent2 .div11 {
  grid-area: 10 / 1 / 11 / 3;
}

.parent2 .div12 {
  grid-area: 11 / 2 / 12 / 8;
  z-index: 2;
}

.parent2 .div13 {
  grid-area: 1 / 3 / 12 / 4;
}

.parent2 .div14 {
  grid-area: 1 / 4 / 2 / 6;
}

.parent2 .div15 {
  grid-area: 2 / 4 / 8 / 6;
}

.parent2 .div16 {
  grid-area: 10 / 4 / 11 / 5;
  z-index: 2;
}

.parent2 .div17 {
  grid-area: 10 / 5 / 11 / 8;
}

.parent2 .div18 {
  grid-area: 1 / 6 / 9 / 7;
  background-color: white;
}

.parent2 .div19 {
  grid-area: 1 / 7 / 9 / 8;
  background-color: #86bc25;
  z-index: 2;
}

/* impressum */

.grid_impressum {
  display: grid;
  width: 100%;
  height: 108vh;
  grid-template-columns: 4% 6% 7.5% 10% 10.5% repeat(2, 5%) 23% 3.5% 19% 1% 3% 1.14% 0.36% 1%;
  grid-template-rows: 11% 0.65% 12% 9% 13.5% 9% 25% 10.2% 0.65% 6% 3%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.grid_impressum .div1 {
  grid-area: 1 / 1 / 12 / 2;
  background-color: #86bc25;
}

.grid_impressum .div2 {
  grid-area: 1 / 2 / 12 / 3;
}

.grid_impressum .div3 {
  grid-area: 2 / 3 / 3 / 15;
  background-color: #86bc25;
}

.grid_impressum .div4 {
  grid-area: 9 / 3 / 10 / 15;
  background-color: #86bc25;
}

.grid_impressum .div5 {
  grid-area: 1 / 3 / 2 / 8;
}

.grid_impressum .div6 {
  grid-area: 1 / 4 / 4 / 5;
  z-index: 2;
}

.grid_impressum #div7 {
  grid-area: 1 / 8 / 2 / 11;
}

.grid_impressum .div8 {
  grid-area: 1 / 11 / 2 / 15;
}

.grid_impressum .div9 {
  grid-area: 3 / 3 / 9 / 13;
}

.grid_impressum .div10 {
  grid-area: 10 / 3 / 11 / 5;
}

.grid_impressum .div11 {
  grid-area: 10 / 7 / 11 / 11;
}

.grid_impressum .div12 {
  grid-area: 10 / 11 / 11 / 15;
}

.grid_impressum .div13 {
  grid-area: 11 / 3 / 12 / 15;
}

.grid_impressum .div14 {
  grid-area: 9 / 13 / 3 / 13;
}

.grid_impressum .div15 {
  grid-area: 10 / 14 / 2 / 14;
  background-color: #86bc25;
}

.grid_impressum .div16 {
  grid-area: 15 / 15 / 1 / 15;
}

.parent3 {
  display: grid;
  height: 100%;
  grid-template-columns: 31.1% 5.5% 32.8% 4.1% 21.3% 1.5% 3.7%;
  grid-template-rows: 15.7% 11.2% 17% 11.9% 30.6% 13.6%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.parent3 .div1,
.parent3 .div3,
.parent3 .div4,
.parent3 .div10,
.parent3 .div12,
.parent3 .div13,
.parent3 .div14,
.parent3 .div15,
.parent3 .div16 {
  grid-area: 1 / 1 / 2 / 8;
  background-color: transparent;
}

.parent3 .div2 {
  grid-area: 2 / 1 / 3 / 2;
}

.parent3 .div3 {
  grid-area: 2 / 2 / 3 / 8;
}

.parent3 .div4 {
  grid-area: 3 / 1 / 4 / 2;
}

.parent3 .div5 {
  grid-area: 4 / 1 / 5 / 2;
}

.parent3 .div6 {
  grid-area: 5 / 1 / 6 / 2;
}

.parent3 .div7 {
  grid-area: 6 / 1 / 7 / 8;
}

.parent3 .div8 {
  grid-area: 3 / 2 / 6 / 3;
}

.parent3 .div9 {
  grid-area: 3 / 3 / 4 / 4;
}

.parent3 .div10 {
  grid-area: 4 / 3 / 5 / 8;
}

.parent3 .div11 {
  grid-area: 5 / 3 / 6 / 4;
}

.parent3 .div12 {
  grid-area: 3 / 4 / 6 / 5;
}

.parent3 .div13 {
  grid-area: 3 / 5 / 4 / 6;
}

.parent3 .div14 {
  grid-area: 5 / 5 / 6 / 6;
}

.parent3 .div15 {
  grid-area: 3 / 7 / 4 / 8;
}

.parent3 .div16 {
  grid-area: 5 / 6 / 6 / 8;
}

/* ------------------------------ MEDIA QUERIES ------------------------------ */

@media screen and (max-width: 1919px) {
  .grid_header,
  .grid,
  .grid_special {
    height: 102vh;
  }

  .parent {
    grid-template-rows: 11% 19% 2.5% 51.5% 2% 3.5% 10.5%;
  }

  /* KONTAKT */

  .grid_kontakt {
    height: 105vh;
  }

  /* IMPRESSUM */

  .grid_impressum {
    height: 100vh;
  }

  .grid_impressum .parent3 {
    grid-template-rows: 15% 11.2% 19.3% 11.9% 30.6% 12%;
  }

  .parent3 .div13 {
    grid-area: 3 / 5 / 4 / 7;
  }
}

@media screen and (min-width: 1300px) and (max-width: 1540px) {
  .grid_header,
  .grid,
  .grid_special,
  .grid_impressum {
    height: 116vh;
  }

  .grid_kontakt {
    height: 120vh;
  }
}

@media screen and (max-width: 1050px) and (orientation: landscape) {
  .grid_header,
  .grid,
  .grid_special,
  .grid_impressum,
  .grid_kontakt {
    height: 100vh;
  }

  .grid_impressum {
    height: 96vh;
  }

  .grid_header {
    grid-template-columns: 4% 6% 7.5% 10% 15% 51% 4% 1.14% 0.36% 1%;
  }

  .parent {
    grid-template-rows: 11% 19% 2% 57.5% 2% 2.5% 6%;
    grid-template-columns: 36% 4% 60%;
  }

  .grid_impressum {
    grid-template-columns: 4% 6% 7.5% 10% 10.5% repeat(2, 4.5%) 24% 3.5% 19% 1% 3% 1.14% 0.36% 1%;
  }

  .grid_impressum #div7 {
    grid-area: 1 / 7 / 2 / 11;
  }

  .grid_impressum .div10 {
    grid-area: 10 / 3 / 11 / 6;
  }

  .grid_impressum .parent3 {
    grid-template-rows: 10% 12% 20% 12% 31% 15%;
    grid-template-columns: 33.7% 3.9% 33.7% 3.9% 21.3% 1.5% 2%;
  }
}

@media screen and (max-width: 414px),
  screen and (orientation: portrait) and (max-width: 834px) {
  /* HEADER */

  .grid_header {
    width: 100%;
    height: 48vh;
    grid-template-columns: 100%;

    grid-template-rows: 16% 1% 3% minmax(80%, 90%);
    grid-template-areas:
      "space-top"
      "header-line"
      "header-space"
      "header-img";
  }

  .grid_header .div1,
  .grid_header .div2,
  .grid_header .div9,
  .grid_header .div10,
  .grid_header .div11 {
    display: none;
  }

  .grid_header .div3 {
    grid-area: space-top;
  }

  .grid_header .div4 {
    grid-area: header-line;
  }

  .grid_header .div5 {
    grid-area: header-space;
  }

  .grid_header .div6 {
    grid-area: header-img;
  }

  .grid_header .div8 {
    grid-area: unset;
  }

  /* NORMAL */

  .grid {
    width: 100%;
    height: 100%;
    grid-template-columns: 100%;
  }

  .grid-item1,
  .grid-item2,
  .parent .div9,
  .parent .div11 {
    display: none;
  }

  .parent {
    width: 88%;
    margin: auto;
    grid-template-columns: 100%;
    grid-template-areas:
      "grid-space"
      "grid-headline"
      "grid-headline-space"
      "grid-image"
      "grid-image-space"
      "grid-text"
      "grid-text-space"
      "grid-button"
      "grid-button-space";
    grid-template-rows: unset;
  }

  .parent .div1 {
    grid-area: grid-space;
    height: 3vh;
  }

  .parent .div2 {
    grid-area: grid-headline;
  }

  .parent .div3 {
    grid-area: grid-headline-space;
    height: 1vh;
  }

  .parent .div4 {
    grid-area: grid-text;
  }

  .parent .div5 {
    grid-area: grid-button;
  }

  .parent .div6 {
    grid-area: grid-image-space;
    height: 1vh;
  }

  .parent .div7 {
    grid-area: grid-text-space;
    height: 3vh;
  }

  .parent .div8 {
    grid-area: grid-button-space;
    height: 3vh;
  }

  .parent .div10 {
    grid-area: grid-image;
  }

  /* KONTAKT */

  .grid_kontakt {
    width: 100%;
    height: 100%;
    grid-template-columns: 100%;
  }

  .grid_kontakt .grid-item5 {
    display: none;
  }

  .parent2 {
    width: 88%;
    margin: auto;
    grid-template-columns: 100%;
    grid-template-areas:
      "grid-space"
      "grid-headline"
      "grid-headline-space"
      "grid-text"
      "grid-text-space"
      "grid-logo"
      "grid-image"
      "grid-image-space";
    grid-template-rows: unset;
  }

  .parent2 .div1,
  .parent2 .div2,
  .parent2 .div9,
  .parent2 .div10,
  .parent2 .div11,
  .parent2 .div12,
  .parent2 .div13,
  .parent2 .div14,
  .parent2 .div17,
  .parent2 .div18,
  .parent2 .div19 {
    display: none;
  }

  .parent2 .div3 {
    grid-area: grid-space;
    height: 3vh;
  }

  .parent2 .div4 {
    grid-area: grid-headline;
  }

  .parent2 .div5 {
    grid-area: grid-headline-space;
    height: 4vh;
  }

  .parent2 .div6 {
    grid-area: grid-text;
  }

  .parent2 .div7 {
    grid-area: grid-logo;
    height: 100%;
  }

  .parent2 .div8 {
    grid-area: grid-text-space;
    height: 1vh;
  }

  .parent2 .div15 {
    grid-area: grid-image;
  }

  .parent2 .div16 {
    grid-area: grid-image-space;
    height: 3vh;
  }

  /* IMPRESSUM */

  .grid_impressum {
    width: 100%;
    height: 100%;
    grid-template-columns: 75% 25%;
    grid-template-rows: unset;
    grid-template-areas:
      "grid-space grid-space"
      "grid-line grid-line"
      "grid-logo grid-menu"
      "grid-text grid-text";
  }

  .grid_impressum .div1,
  .grid_impressum .div4,
  .grid_impressum .div5,
  .grid_impressum .div8,
  .grid_impressum .div10,
  .grid_impressum .div11,
  .grid_impressum .div12,
  .grid_impressum .div13,
  .grid_impressum .div14,
  .grid_impressum .div15,
  .grid_impressum .div16 {
    display: none;
  }

  .grid_impressum .div2 {
    grid-area: grid-space;
    height: 70px;
  }

  .grid_impressum .div3 {
    grid-area: grid-line;
    height: 5px;
  }

  .grid_impressum .div6 {
    grid-area: grid-logo;
  }

  .grid_impressum #div7 {
    grid-area: grid-menu;
    /* background-color: black; */
    z-index: 4;
  }

  .grid_impressum .div9 {
    grid-area: grid-text;
  }

  .parent3 {
    width: 88%;
    margin: auto;
    grid-template-columns: 100%;
    grid-template-areas:
      "grid-space"
      "grid-headline"
      "grid-headline-space"
      "grid-text1"
      "grid-text2"
      "grid-text-space1"
      "grid-text3"
      "grid-text-space2"
      "grid-text4"
      "grid-text-space3"
      "grid-text5"
      "grid-text-space4"
      "grid-text6"
      "grid-text-space5"
      "grid-logo";
    grid-template-rows: unset;
  }

  .parent3 .div1 {
    display: block;
    grid-area: grid-space;
    height: 50px;
  }

  .parent3 .div2 {
    display: block;
    grid-area: grid-headline;
  }

  .parent3 .div3 {
    display: block;
    grid-area: grid-headline-space;
  }

  .parent3 .div4 {
    display: block;
    grid-area: grid-text1;
  }

  .parent3 .div5 {
    display: block;
    grid-area: grid-text2;
  }

  .parent3 .div6 {
    display: block;
    z-index: 1;
    grid-area: grid-text3;
  }

  .grid_impressum .parent3 .div7 {
    display: block;
    grid-area: grid-text-space1;
    height: 2vh;
  }

  .parent3 .div8 {
    display: block;
    grid-area: grid-text-space2;
    height: 2vh;
  }

  .parent3 .div9 {
    display: block;
    grid-area: grid-text5;
  }

  .parent3 .div10 {
    display: block;
    grid-area: grid-text-space3;
    height: 2vh;
  }

  .parent3 .div11 {
    display: block;
    grid-area: grid-text4;
  }

  .parent3 .div12 {
    display: block;
    grid-area: grid-text-space3;
    height: 2vh;
  }

  .parent3 .div13 {
    display: block;
    grid-area: grid-text6;
  }

  .parent3 .div14 {
    display: block;
    grid-area: grid-logo;
  }

  .parent3 .div15 {
    display: block;
    grid-area: grid-text-space4;
    height: 2vh;
  }

  .parent3 .div16 {
    display: block;
    grid-area: grid-text-space5;
    height: 2vh;
  }
}

@media screen and (orientation: portrait) and (max-width: 1536px) {
  /* IMPRESSUM */
  .grid_impressum .parent3 {
    grid-template-rows: unset;
  }
}