h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Realheadpro, sans-serif;
  color: #57534e;
  font-size: 120px;
  line-height: 120px;
  font-weight: 700;
}

.body {
  height: auto;
  background-color: #44403c;
}

.div-header {
  position: relative;
  overflow: hidden;
  width: 1400px;
  height: 75vh;
  margin-right: auto;
  margin-left: auto;
  padding-top: 15vh;
  background-color: #f5f5f4;
}

.heading {
  margin-top: 0px;
  margin-left: 100px;
  padding-top: 0px;
}

.button_mail_beruflich {
  margin-left: 20px;
  padding: 1px 30px;
  border-radius: 40px;
  background-color: #57534e;
  font-family: Realtextpro, sans-serif;
  font-size: 18px;
  line-height: 40px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.button_mail_privat {
  margin-top: 30px;
  margin-left: 100px;
  padding: 1px 30px;
  border-radius: 40px;
  background-color: #4f46e5;
  font-family: Realtextpro, sans-serif;
  font-size: 18px;
  line-height: 40px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.section_header {
  position: relative;
  height: auto;
  background-color: #f5f5f4;
}

.section_footer {
  position: relative;
  height: 217px;
  background-color: #44403c;
  line-height: 14px;
  text-align: center;
}

.div-footer {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  overflow: visible;
  height: 217px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  -o-object-fit: fill;
  object-fit: fill;
}

.lottie-animation {
  position: absolute;
  left: auto;
  top: 0px;
  right: 0%;
  bottom: auto;
  width: 220px;
  height: auto;
  margin-top: 5vh;
  margin-right: 480px;
  -o-object-fit: scale-down;
  object-fit: scale-down;
}

.dennis {
  position: absolute;
  left: auto;
  top: auto;
  right: 11.5vh;
  bottom: 0%;
  width: auto;
  height: 87%;
}

.skizze {
  position: absolute;
  left: auto;
  top: auto;
  right: 0vw;
  bottom: 0%;
  height: 63.122159%;
}

.vogel {
  position: absolute;
  left: auto;
  top: auto;
  right: 42vh;
  bottom: 0%;
  height: 36%;
}

.schmetterling02 {
  position: absolute;
  left: auto;
  top: auto;
  right: 44.4vh;
  bottom: 38%;
  height: 15%;
}

.schmetterling01 {
  position: absolute;
  left: auto;
  top: auto;
  right: 6.3vh;
  bottom: 10%;
  height: 18%;
}

.ballon01 {
  position: absolute;
  left: auto;
  top: auto;
  right: 6.5vh;
  bottom: 49%;
  height: 33%;
}

.ballon02 {
  position: absolute;
  left: auto;
  top: auto;
  right: 0vh;
  bottom: 30%;
  height: 28%;
}

.insta_link {
  position: relative;
  width: auto;
  height: auto;
  margin-right: 10px;
  margin-bottom: 10px;
}

.tiktok_link {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

.facebook_link {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

.twitter_link {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

.clubhouse_link {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

.youtube_link {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

.diverently_link {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

.xing_link {
  position: relative;
  margin-bottom: 10px;
  margin-left: 10px;
}

.div-buttonreihe {
  position: relative;
  height: 36px;
  margin-top: 40px;
}

.button_hover {
  position: relative;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  width: auto;
}

.button {
  position: absolute;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
}

.linkedin_link {
  position: relative;
  margin-bottom: 10px;
}

.paragraph2 {
  position: absolute;
  top: 0%;
  bottom: auto;
  display: block;
  width:100%;
  margin-top: 50px;
  font-family: Realtextpro, sans-serif;
  color: #a8a29e;
  font-size: 16px;
  line-height: 25px;
  font-weight: 300;
  text-align: center;
}

.div-animation {
  position: absolute;
  left: auto;
  top: auto;
  right: 115px;
  bottom: 0%;
  overflow: visible;
  width: 65vh;
  height: 45vh;
  -o-object-fit: scale-down;
  object-fit: scale-down;
}

.div-ani-skalieren {
  position: absolute;
  left: auto;
  top: auto;
  right: 81px;
  bottom: 0%;
  width: 620px;
  height: 550vw;
  -o-object-fit: scale-down;
  object-fit: scale-down;
}

.div-adressen {
  position: relative;
}

@media screen and (min-width: 1280px) {
  .skizze {
    height: 63.122159%;
  }

  .ballon01 {
    right: 6.5vh;
  }

  .paragraph2 {
    width: 100%;
  }

  .div-animation {
    height: 45vh;
  }


}

@media screen and (max-width: 991px) {
  .div-header {
    width: 768px;
    padding-top: 33px;
  }

  .heading {
    font-size: 91px;
    line-height: 91px;
  }

  .button_mail_beruflich {
    margin-left: 10px;
  }

  .button_mail_privat {
    margin-top: 20px;
    margin-right: 10px;
  }

  .section_header {
    -o-object-fit: fill;
    object-fit: fill;
  }

  .lottie-animation {
    left: 89px;
    top: 20vh;
    right: auto;
    bottom: auto;
    margin-top: 30vh;
    margin-right: 55px;
    -webkit-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
  }

  .dennis {
    right: 8vh;
    overflow: visible;
    height: 87%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .skizze {
    height: 63.122159%;
  }

  .vogel {
    right: 23vh;
    height: 36%;
  }

  .schmetterling02 {
    right: 25vh;
    height: 15%;
  }

  .schmetterling01 {
    height: 18%;
  }

  .ballon01 {
    right: 5vh;
    height: 33%;
  }

  .ballon02 {
    right: 1%;
    height: 28%;
  }

  .div-animation {
    right: 16px;
    width: 58vh;
    height: 25vh;
    -o-object-fit: fill;
    object-fit: fill;
  }

  .div-ani-skalieren {
    position: absolute;
    left: auto;
    right: 0%;
    bottom: 0%;
    height: 200px;
    -o-object-fit: fill;
    object-fit: fill;
  }
}

@media screen and (max-width: 767px) {
  .div-header {
    width: 100%;
    padding-top: 33px;
    text-align: center;
  }

  .heading {
    margin-left: auto;
    text-align: center;
  }

  .button_mail_beruflich {
    width: 300px;
    margin-top: 20px;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
  }

  .button_mail_privat {
    width: 300px;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
  }

  .lottie-animation {
    left: 40px;
    top: 380px;
    margin-top: 0px;
    -webkit-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
  }

  .dennis {
    right: 7.5vh;
  }

  .vogel {
    right: 28.6vh;
  }

  .schmetterling02 {
    right: 31.7vh;
    bottom: 40%;
  }

  .schmetterling01 {
    right: 4%;
  }

  .ballon01 {
    right: 5vh;
  }

  .div-animation {
    right: -28px;
    height: 30vh;
  }
}

@media screen and (max-width: 479px) {
  .body {
    text-align: left;
  }

  .div-header {
    width: 100%;
    height: 70vh;
  }

  .heading {
    font-size: 47px;
    line-height: 52px;
  }

  .button_mail_beruflich {
    width: 280px;
    margin-left: auto;
    padding-right: 10px;
    padding-left: 10px;
  }

  .button_mail_privat {
    width: 280px;
    margin-top: 20px;
    margin-left: auto;
  }

  .section_header {
    text-align: center;
  }

  .section_footer {
    position: static;
    height: 320px;
  }

  .div-footer {
    position: static;
    width: 250px;
    height: 320px;
    text-align: center;
  }

  .lottie-animation {
    left: 40px;
    top: 280px;
    width: 140px;
  }

  .dennis {
    right: 6vh;
  }

  .vogel {
    right: 23.2vh;
  }

  .schmetterling02 {
    right: 25vh;
  }

  .schmetterling01 {
    right: 3.5vh;
  }

  .ballon02 {
    right: 1vh;
  }

  .insta_link {
    position: relative;
  }

  .clubhouse_link {
    margin-right: 0px;
  }

  .youtube_link {
    margin-right: 10px;
  }

  .div-buttonreihe {
    position: static;
    left: auto;
    top: 0%;
    right: auto;
    bottom: auto;
    width: 250px;
    height: 100px;
    margin-top: 25px;
    float: none;
    clear: none;
    text-align: center;
    -o-object-fit: fill;
    object-fit: fill;
  }

  .button {
    position: absolute;
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
  }

  .paragraph2 {
    position: static;
    width: 100%;
    margin-top: 5px;
    text-align: center;
  }

  .div-animation {
    left: auto;
    top: auto;
    right: -3%;
    bottom: 0%;
    width: 40vh;
    height: 28vh;
  }

  .paragraph {
    position: static;
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }
}

@font-face {
  font-family: 'Realheadpro';
  src: url('../fonts/RealHeadPro-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Realtextpro';
  src: url('../fonts/RealTextPro-Semilight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Realtextpro';
  src: url('../fonts/RealTextPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}