* {
  box-sizing: border-box;
}

.menu {
  float: left;
  width: 100%;
  text-align: center;
}

#body {
  --normal-color: rgb(207, 185, 133);
  /* #efeed2*/
  --normal-color-hover: rgb(189, 154, 80);
  --yellow-color: #ffed00;
  --yellow-color-font: black;
  --yellow-color-hover: #eed460;
  /*#002eff;*/
  --green-color: #40a535;
  --green-color-font: black;
  --green-color-hover: #56d148;
  /* #9a35a5;*/
  --blue-color: #009fe4;
  --blue-color-font: black;
  --blue-color-hover: #27aae2;
  /* #e44500;*/
  --purple-color: #683784;
  --purple-color-font: black;
  --purple-color-hover: #8a4baf;
  /* #538437;*/
  --pink-color: #e6007d;
  --pink-color-font: black;
  --pink-color-hover: #e6499f;
  /* #00e669;*/
  --orange-color: #f18900;
  --orange-color-font: black;
  --orange-color-hover: #da9c4c;
  /* #0068f1;*/
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';

}

.menu a {
  background-color: #e5e5e583;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 14.25%;
  color: black;
  display: inline-block;
  border-color: black;
  border: 5px;
  text-decoration: none;
  transition-duration: 0.25s;
}

.main {
  --main_height: 65vh;
  --main_img_width: calc(30vw + 60px);
  --main_img_height: calc(30vh + 20px);
  --main_img_a: calc(min(var(--main_img_width), var(--main_img_height)));
  float: right;
  width: 80%;
  height: var(--main_height);
}

.menu.normal_color {
  background-color: var(--normal-color);
}

.menu.normal_color:hover {
  background-color: var(--normal-color-hover);
}

.menu.yellow_color {
  background-color: var(--yellow-color);
}

.menu.yellow_color:hover {
  background-color: var(--yellow-color-hover);
}

.menu.green_color {
  background-color: var(--green-color);
}

.menu.green_color:hover {
  background-color: var(--green-color-hover);
}

.menu.blue_color {
  background-color: var(--blue-color);
}

.menu.blue_color:hover {
  background-color: var(--blue-color-hover);
}

.menu.purple_color {
  background-color: var(--purple-color);
}

.menu.purple_color:hover {
  background-color: var(--purple-color-hover);
}

.menu.pink_color {
  background-color: var(--pink-color);
}

.menu.pink_color:hover {
  background-color: var(--pink-color-hover);
}

.menu.orange_color {
  background-color: var(--orange-color);
}

.menu.orange_color:hover {
  background-color: var(--orange-color-hover);
}

.left {
  background-color: #e5e5e59f;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
  /* border-style: double;
  border: 5px double black;*/
  float: left;
  width: 20%;
  margin-top: 7px;
  text-align: center;
}

.homepage_button {
  --width: 250px;
  --height: 8vh;
  width: var(--width);
  height: var(--height);
  position: absolute;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
  font-weight: bold;
  align-items: center;
  font-size: calc(0.7vh + 1.4vw);
  margin-top: 5vh;
  border: 5px;
  border-radius: 10%;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition-duration: 0.25s;
  text-align: center;
}

.button_text {
  display: block;
  align-self: center;
  width: 100%;
  text-decoration: none;
  font-size: calc(0.7vh + 1.4vw);
}

.homepage_button.yellow {
  background-color: var(--yellow-color);
  color: var(--yellow-color-font);
  margin-left: calc(40vw - 8px - var(--width)/2);
}

.homepage_button.yellow:hover {
  background-color: var(--yellow-color-hover);
}

.homepage_button.blue {
  background-color: var(--blue-color);
  color: var(--blue-color-font);
  margin-left: calc(40vw - 8px + var(--main_img_a)/2);
  margin-top: 42vh;
}

.homepage_button.blue:hover {
  background-color: var(--blue-color-hover);
}

.homepage_button.pink {
  background-color: var(--pink-color);
  color: var(--pink-color-font);
  margin-left: calc(40vw - 8px - var(--width) - var(--main_img_a)/2);
  margin-top: 42vh;
}

.homepage_button.pink:hover {
  background-color: var(--pink-color-hover);
}

.homepage_button.purple {
  background-color: var(--purple-color);
  color: var(--purple-color-font);
  margin-top: 52.5vh;
  margin-left: calc(40vw - 8px - var(--width)/2);
}

.homepage_button.purple:hover {
  background-color: var(--purple-color-hover);
}

.homepage_button.orange {
  background-color: var(--orange-color);
  color: var(--orange-color-font);
  margin-left: calc(40vw - 8px - var(--width) - var(--main_img_a)/2);
  margin-top: 15vh;
}

.homepage_button.orange:hover {
  background-color: var(--orange-color-hover);
}

.homepage_button.green {
  background-color: var(--green-color);
  color: var(--green-color-font);
  margin-left: calc(40vw - 8px + var(--main_img_a)/2);
  margin-top: 15vh;
}

.homepage_button.green:hover {
  background-color: var(--green-color-hover);
}

#title_container {
  background-color: #e5e5e59f;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
  padding: 15px;
  text-align: center;
  padding: 1vw;
  height: 15vh;
  display: flex;
  align-items: center;
}

#title_container h1 {
  font-size: calc(1.9vh + 1.9vw);
  margin-left: calc(15% - 28px);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
}

#img_logo {
  max-height: 100%;
  float: left;
  padding-left: 4%;
}

#main_img {
  display: flex;
  position: absolute;
  width: var(--main_img_a);
  height: var(--main_img_a);
  margin-left: calc(40vw - 8px - var(--main_img_a)/2);
  margin-top: calc((var(--main_height) - var(--main_img_a))/2);
}

#upper_menu {
  overflow: auto;
  align-items: center;
}

.main_content {
  text-align: center;
  align-content: center;
  align-items: center;
  overflow: auto;
  align-items: center;
  display: block;
  min-height: 70vh;
}

.main_content h1 {
  font-size: calc(3vh + 2vw);
}

.main_content p {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
  font-size: calc(1vw+1vh);
}

.main_content.grundgedanken h1 {
  font-size: calc(3vh + 2vw);
}

.main_content.grundsätze h1 {
  font-size: calc(3vh + 2vw);
}

.text_content {
  text-align: justify;
  width: calc(66vw + 68px);
  margin-left: calc(17vw - 45px);
  font-size: calc(0.8vw + 0.8vh + 6px);
}

.text_content.wer_sind_wir h2 {
  text-align: center;
}

.text_content.über_regional {
  width: calc(32vw + 156px);
  margin-left: calc(34vw - 90px);
  text-align: left;
}

.text_content.über_regional h2 {
  text-align: center;
}

.text_content.kontakt {
  width: calc(48vw + 156px);
  margin-left: calc(26vw - 90px);
  text-align: left;
}

.mitglied_button {
  align-items: center;
  align-self: center;
  float: none;
  border: 5px;
  border-radius: 10%;
  padding: 10px;
  display: flex;
  text-decoration: none;
  transition-duration: 0.25s;
  text-align: center;
  background-color: lightgrey;
  width: fit-content;
  margin: auto;
  margin-bottom: 15px;
}

.mitglied_button:hover {
  background-color: rgb(180, 180, 180);
}

.mitglied_button_text {
  font-size: calc(0.45vw + 0.45vh + 8px);
  color: black;
  display: block;
  align-self: center;
  text-decoration: none;
}

.mitglied_button.kontakt {
  background-color: rgba(211, 211, 211, 0.534);
}

.mitglied_button.kontakt:hover {
  background-color: rgb(153, 153, 153);
}

.mitglied_button_text.kontakt {
  font-size: calc(0.8vw + 0.8vh + 8px);
  padding: 5px;

}


#termine {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
  font-size: calc(0.5vw + 0.5vh + 8px);
}

#img_line {
  display: flow-root;
  text-align: center;
  padding: 10px;
  margin-top: 7px;
  width: 100%;
}

#form_submit {
  margin-top: 40px;
}

.bottom_img {
  width: 16.6667%;
  float: left;
}

.embed.pre {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
}

#footer {
  background-color: #e5e5e59f;
  text-align: center;
  padding: 10px;
  margin-top: 7px;
}


@media only screen and (max-width: 1200px) {

  /* For mobile phones: */
  .left,
  .main,
  .right {
    width: 100%;
  }

  #main_img {
    margin-left: calc(50vw - 8px - var(--main_img_a)/2);
    margin-top: calc((var(--main_height) - var(--main_img_a))/2);
  }

  .homepage_button {
    --width: calc(15vw + 45px);
    --height: 8vh;
    width: var(--width);
  }

  .homepage_button.yellow {
    margin-top: calc((((var(--main_height) - var(--main_img_a)) / 2) - var(--height))/ 2);
    margin-left: calc(50vw - 8px - var(--width)/2);
  }

  .homepage_button.blue {
    margin-left: calc(50vw - 8px + var(--main_img_a)/2);
    margin-top: 43vh;
  }

  .homepage_button.pink {
    margin-left: calc(50vw - 8px - var(--width) - var(--main_img_a)/2);
    margin-top: 43vh;
  }

  .homepage_button.purple {
    margin-top: calc(((((var(--main_height) - var(--main_img_a)) / 2) - var(--height))/ 2) + ((var(--main_height) + var(--main_img_a)) / 2));
    margin-left: calc(50vw - 8px - var(--width)/2);
  }

  .homepage_button.orange {
    margin-left: calc(50vw - 8px - var(--width) - var(--main_img_a)/2);
    margin-top: 17vh;
  }

  .homepage_button.green {
    margin-left: calc(50vw - 8px + var(--main_img_a)/2);
    margin-top: 17vh;
  }

}

@media only screen and (max-width: 1200px) and (min-width:800px) {
  .h2_container {
    width: 50vw;
    margin-left: calc(25vw - 8px);
    float: left;
  }

  #termine {
    width: 50vw;
    margin-left: calc(25vw - 8px);
    float: left;
  }

  #termine p {
    width: 100%;
  }

  .mitglied_button.homepage {
    position: relative;
    top: -50px;
    margin-right: calc(15px + 1vw);
    float: right;
    display: inline-block;
  }
}

@media only screen and (max-width: 1000px) {
  .menu a {
    width: 100%;
  }
}

@media only screen and (max-width: 800px) {
  .bottom_img {
    width: 33.333%;
  }
}


@media only screen and (max-width: 380px) {

  .homepage_button {
    --width: calc(15vw + 45px);
    --height: 8vh;
    width: var(--width);
  }

  .homepage_button.yellow {
    margin-top: calc((((var(--main_height) - var(--main_img_a)) / 2) - var(--height))/ 2);
    margin-left: calc(50vw - 8px - var(--width)/2);
  }

  .homepage_button.blue {
    margin-left: calc(100vw - 12px - var(--width));
    margin-top: 48vh;
  }

  .homepage_button.pink {
    margin-left: 0;
    margin-top: 48vh;
  }

  .homepage_button.purple {
    margin-top: calc(((((var(--main_height) - var(--main_img_a)) / 2) - var(--height))/ 2) + ((var(--main_height) + var(--main_img_a)) / 2));
    margin-left: calc(50vw - 8px - var(--width)/2);
  }

  .homepage_button.orange {
    margin-left: 0;
    margin-top: 12vh;
  }

  .homepage_button.green {
    margin-left: calc(100vw - 12px - var(--width));
    margin-top: 12vh;
  }
}