@font-face {
  font-family: Gilroy;
  font-weight: 700;
  src: url("../fonts/Gilroy-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: Gilroy;
  font-weight: 600;
  src: url("../fonts/Gilroy-Bold.ttf") format("truetype");
}
@font-face {
  font-family: Gilroy;
  font-weight: 500;
  src: url("../fonts/Gilroy-Medium.ttf") format("truetype");
}
@font-face {
  font-family: Gilroy;
  font-weight: 400;
  src: url("../fonts/Gilroy-Regular.ttf") format("truetype");
}
@font-face {
  font-family: Gilroy;
  font-weight: 300;
  src: url("../fonts/Gilroy-Light.ttf") format("truetype");
}
* {
  font-family: Gilroy;
  font-weight: 500;
  min-width: 0;
  min-height: 0;
  text-align: left;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

body {
  background-image: url(../img/welcome.png), url(../img/bg.png), url(../img/bg.png), linear-gradient(180deg, rgb(233, 251, 255) 100%, rgb(255, 255, 255) 100%), linear-gradient(90deg, rgb(110, 169, 189) 0%, rgb(1, 86, 114) 40%);
  background-position: left calc(60% - 75px), top -180px left 415px, bottom -410px right 260px, top, bottom;
  background-size: 700px, 650px, 750px, 100% 60%, 100% 100%;
  background-repeat: no-repeat;
  margin: 0px;
  position: relative;
  overflow: hidden;
}

header {
  position: fixed;
  width: calc(100% - 260px);
  padding: 55px 130px 0;
  padding-top: 55px;
  margin-bottom: 55px;
  display: flex;
  justify-content: space-between;
  z-index: 1000;
}
@media screen and (max-width: 1440px) {
  header {
    padding: 55px 60px 0;
    width: calc(100% - 120px);
  }
}
@media screen and (max-width: 768px) {
  header {
    width: 100vw;
    box-sizing: border-box;
    padding: 55px 15px 0;
  }
  header img {
    width: 150px;
  }
}
header #Gruppe_7895 {
  display: none;
  opacity: 0;
}
header .herowrapper .outline-wrapper {
  transition: 0.3s;
  position: relative;
}
header .herowrapper .outline-wrapper .outline-wrapper-inner {
  border-radius: 50%;
  background: #eefaff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 0 20px;
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  border: 3px solid #2a5370;
  transition: 0.3s;
}
@media screen and (max-width: 1024px) {
  header .herowrapper .outline-wrapper .outline-wrapper-inner {
    height: 50px;
    width: 50px;
  }
}
header .herowrapper .outline-wrapper .outline-wrapper-inner img {
  width: auto;
  position: absolute;
  bottom: 0px;
  padding: 0px;
  transform: none !important;
  height: 80px;
}
@media screen and (max-width: 1024px) {
  header .herowrapper .outline-wrapper .outline-wrapper-inner img {
    height: 40px;
  }
}
header .herowrapper .outline-wrapper:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #1ACF84;
  border: 2px solid #ffffff;
  border-radius: 50%;
  top: 0px;
  right: 0px;
  transform: translateX(-50%) scale(0);
  transition: 1s;
}
@media screen and (max-width: 1024px) {
  header .herowrapper .outline-wrapper:after {
    height: 7.5px;
    width: 7.5px;
  }
}
header .herowrapper .outline-wrapper.animated:after {
  animation-name: slidein;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
header .herowrapper .outline-wrapper.animated:nth-of-type(2):after {
  animation-delay: 0.1s;
}
header .herowrapper .outline-wrapper:nth-of-type(1) {
  transform: translateX(15%);
  z-index: 2;
}
header .herowrapper .outline-wrapper:nth-of-type(2) .outline-wrapper-inner {
  transition-delay: 0.1s;
}
header .herowrapper:hover {
  cursor: pointer;
}
header .herowrapper:hover .outline-wrapper-inner {
  border: 3px solid #FDBE1F;
}

@keyframes slidein {
  0% {
    transform: scale(0) translateX(-50%);
  }
  50% {
    transform: scale(1.5) translateX(-50%);
  }
  100% {
    transform: scale(1) translateX(-50%);
  }
}
.openmenu_wrapper {
  display: flex;
  font-size: 1.375rem;
  align-items: center;
  gap: 20px;
  color: #015672;
}
@media screen and (max-width: 768px) {
  .openmenu_wrapper > span {
    display: none;
  }
}
.openmenu_wrapper .openmenu {
  background: #015672;
  margin: 0px;
  border: 4px solid #015672;
}
@media screen and (max-width: 768px) {
  .openmenu_wrapper .openmenu {
    padding: 5px;
  }
  .openmenu_wrapper .openmenu svg {
    height: 20px !important;
  }
}
.openmenu_wrapper .openmenu:hover {
  background: #fff;
  border: 4px solid #FDBE1F;
}
.openmenu_wrapper .openmenu:hover svg line {
  stroke: #000;
}

footer {
  position: fixed;
  bottom: 0px;
  width: calc(100% - 260px);
  padding: 0 130px;
  padding-bottom: 55px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 15px;
  pointer-events: none;
  z-index: 999;
}
@media screen and (max-width: 1440px) {
  footer {
    width: calc(100% - 120px);
    padding: 0 60px 55px;
  }
}
@media screen and (max-width: 768px) {
  footer {
    flex-direction: column;
    align-items: flex-start;
    width: calc(100vw - 30px);
    padding: 0 0 55px;
    left: 15px;
  }
}
footer > div {
  display: flex;
  gap: 55px;
  align-items: flex-end;
  pointer-events: auto;
}
@media screen and (max-width: 768px) {
  footer > div {
    gap: 15px;
  }
}

.dynamicspeechbubble {
  background: white;
  color: black;
  position: relative;
  padding: 15px 80px;
  font-size: 22px;
  line-height: 1.2em;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.11);
  margin: auto auto;
  width: max-content;
  max-width: 45%;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .dynamicspeechbubble {
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .dynamicspeechbubble {
    font-size: 16px;
    padding: 15px;
    width: auto;
    max-width: 100%;
    margin: auto;
  }
}
.dynamicspeechbubble.bubble2:before {
  background-image: url(../img/bubble2.png);
}
.dynamicspeechbubble:before {
  content: "";
  background-image: url(../img/bubble1.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 130px;
  height: 110px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(10%, -80%);
}
.dynamicspeechbubble.active {
  opacity: 1;
  pointer-events: auto;
}

h2 {
  font-size: 2.5rem;
  margin: 0 0 1.5rem;
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 1.8rem;
    margin: 0 0 1.2rem;
  }
}

h3 {
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 1.2rem;
  }
}

p {
  line-height: 1.875rem;
}
@media screen and (max-width: 768px) {
  p {
    margin: 0.5rem 0;
  }
}

.lines {
  visibility: hidden;
}

.popup {
  position: absolute;
  /*pointer-events: none; !* Stellt sicher, dass das Popup die Mausereignisse nicht blockiert *!*/
  z-index: 99999;
  width: 90%;
  background: #ffffff;
  box-sizing: border-box;
  border-radius: 20px;
  height: auto;
  max-height: 90%;
  margin: auto;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  display: none;
  opacity: 0;
  box-sizing: border-box;
}
.popup.smallerpopup {
  max-height: 100%;
  max-width: 70%;
  width: max-content;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
@media screen and (max-width: 1280px) {
  .popup.smallerpopup {
    max-width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .popup.smallerpopup {
    max-width: 90%;
    width: 100%;
    max-height: calc(100vh - 100px);
  }
}
.popup.smallerpopup .popup_wrapper {
  padding: 0 125px;
}
@media screen and (max-width: 1280px) {
  .popup.smallerpopup .popup_wrapper {
    padding: 0 100px;
  }
}
@media screen and (max-width: 480px) {
  .popup.smallerpopup .popup_wrapper {
    padding: 0 15px;
    max-height: calc(100vh - 125px);
  }
}
.popup .popup_wrapper {
  padding: 100px 90px 0px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  height: 100%;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .popup .popup_wrapper {
    flex-direction: column;
    padding: 15px;
    overflow: scroll;
    overflow-x: hidden;
    height: auto;
    max-height: calc(100vh - 100px);
  }
}
@media screen and (max-width: 768px) {
  .popup .popup_wrapper .popup_closepopup {
    z-index: 2;
  }
}
.popup .popup_wrapper .popup_content.popup_content_left {
  flex: 0 0 65%;
  font-size: 1.375rem;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.popup .popup_wrapper .popup_content.popup_content_left::-webkit-scrollbar {
  width: 4px;
  margin-right: 100px;
  border-radius: 4px;
}
.popup .popup_wrapper .popup_content.popup_content_left::-webkit-scrollbar-track {
  background: rgba(112, 112, 112, 0.2);
  border-radius: 10px;
  background-clip: content-box; /* THIS IS IMPORTANT */
  margin-bottom: 30px;
}
.popup .popup_wrapper .popup_content.popup_content_left::-webkit-scrollbar-thumb {
  background: #426E90;
  border-radius: 10px;
  transition: 0.3s;
}
.popup .popup_wrapper .popup_content.popup_content_left::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background: #3291DA;
}
.popup .popup_wrapper .popup_content.popup_content_left img {
  width: 100%;
}
.popup .popup_wrapper .popup_content.popup_content_left .popup_content_left__wrapper {
  box-sizing: border-box;
  padding: 35px 65px;
  background: #F5F5F5;
  border: 1px solid #EBEBEB;
  border-radius: 20px;
  margin-bottom: 30px;
  width: calc(100% - 40px);
}
@media screen and (max-width: 1024px) {
  .popup .popup_wrapper .popup_content.popup_content_left .popup_content_left__wrapper {
    width: 100%;
    padding: 35px 25px;
  }
}
@media screen and (max-width: 768px) {
  .popup .popup_wrapper .popup_content.popup_content_left .popup_content_left__wrapper {
    padding: 15px;
    width: 100%;
    font-size: 16px;
  }
}
@media screen and (max-width: 1024px) {
  .popup .popup_wrapper .popup_content.popup_content_left {
    overflow: auto;
    flex: 1 0 auto;
  }
}
.popup .popup_wrapper .popup_content.popup_content_right {
  flex: 1 1 auto;
  font-size: 1.625rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media screen and (max-width: 1024px) {
  .popup .popup_wrapper .popup_content.popup_content_right {
    flex: 1 0 auto;
    font-size: 18px;
  }
}
.popup .popup_wrapper .popup_content.popup_content_right .button {
  width: 100%;
}
.popup .popup_wrapper .popup_content__label {
  font-size: 1rem;
  font-weight: 600;
  background: #015672;
  padding: 5px 15px;
  color: #ffffff;
  display: inline-block;
  margin-bottom: 1rem;
  border-radius: 10px;
}
.popup .popup_wrapper .popup_content__quickinfowrapper {
  padding: 0 35px;
  position: absolute;
}
.popup .popup_wrapper .popup_content__quickinfowrapper .herowrapper {
  z-index: 2;
  position: absolute;
  top: 0px;
  transform: translateY(-50%);
}
.popup .popup_wrapper .popup_content__quickinfowrapper .herowrapper img {
  pointer-events: none;
  width: 100px;
}
@media screen and (max-width: 768px) {
  .popup .popup_wrapper .popup_content__quickinfowrapper .herowrapper img {
    width: 60px;
  }
}
.popup .popup_wrapper .popup_content__quickinfowrapper .herowrapper img:last-of-type {
  transform: translateX(-15%);
}
.popup .popup_wrapper .popup_content__quickinfowrapper .herowrapper img:first-of-type {
  transform: translateX(0%);
}
.popup .popup_wrapper .popup_content__quickinfo {
  background: #015672;
  color: white;
  padding: 45px 35px;
  border-radius: 10px;
  position: relative;
  overflow-y: scroll;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.popup .popup_wrapper .popup_content__quickinfo::-webkit-scrollbar {
  width: 4px;
  margin-right: 100px;
  border-radius: 4px;
  margin: 30px;
}
.popup .popup_wrapper .popup_content__quickinfo::-webkit-scrollbar-track {
  background: rgba(112, 112, 112, 0.2);
  border-radius: 10px;
  background-clip: content-box; /* THIS IS IMPORTANT */
  margin-bottom: 30px;
  margin-top: 30px;
}
.popup .popup_wrapper .popup_content__quickinfo::-webkit-scrollbar-thumb {
  background: #426E90;
  border-radius: 10px;
  transition: 0.3s;
}
.popup .popup_wrapper .popup_content__quickinfo::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background: #3291DA;
}
@media screen and (max-width: 1280px) {
  .popup .popup_wrapper .popup_content__quickinfo {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 1024px) {
  .popup .popup_wrapper .popup_content__quickinfo {
    padding: 45px 25px;
  }
}
@media screen and (max-width: 768px) {
  .popup .popup_wrapper .popup_content__quickinfo {
    padding: 15px;
  }
}
.takeabreak_content ~ .takeabreak_content:before {
  content: none !important;
}

.herowrapper {
  display: flex;
  align-items: center;
}
.herowrapper img {
  width: 70px;
}
.herowrapper img:first-of-type {
  transform: translateX(15%);
}

.closeoverlay {
  padding: 10px;
  background: #015672;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 35px;
  top: 35px;
  border-radius: 10px;
  transition: 0.3s;
  box-sizing: border-box;
  z-index: 1;
}
.closeoverlay svg {
  width: 80%;
  height: auto;
}
.closeoverlay:hover {
  cursor: pointer;
  background: #FDBE1F;
}
.dynamicspeechbubble .closeoverlay {
  right: 35px;
  top: 25px;
  width: 35px;
  height: 35px;
}
@media screen and (max-width: 768px) {
  .dynamicspeechbubble .closeoverlay {
    right: 15px;
    top: 0;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 768px) {
  .closeoverlay {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 35px;
    top: 26px;
  }
}

.button {
  color: black;
  position: relative;
  background: #FDBE1F;
  padding: 17px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px;
  margin-top: 20px;
  text-decoration: none;
  width: max-content;
  gap: 15px;
  transition: 0.3s;
  box-sizing: border-box;
  border: 3px solid #FDBE1F;
}
@media screen and (max-width: 768px) {
  .button {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .button {
    max-width: 100%;
    padding: 5px 10px;
    font-size: 16px;
  }
}
.button.marginauto {
  margin: 40px auto 0;
}
.button.editname {
  padding: 17px 47px;
  margin-bottom: 25px;
}
@media screen and (max-width: 1024px) {
  .button.buttonshare {
    padding: 10px 10px;
  }
}
.button.outline {
  background: white;
}

a.button:hover {
  background: white;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #000;
  font-family: "Arial", sans-serif;
  z-index: 999;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
#preloader .preloader_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(233, 251, 255);
  background: url(../img/map.png), linear-gradient(90deg, rgba(233, 251, 255, 0.3) 0%, rgba(1, 86, 114, 0) 100%);
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  background-position: center center, center center;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-top: 4px solid #000;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.loading-text {
  position: absolute;
  top: auto;
  bottom: auto;
  font-size: 1.375rem;
  color: #015672;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#shortcut-menu {
  transform: translateY(-200%);
  width: 90%;
  max-height: 90vh;
  opacity: 0;
  position: absolute;
  z-index: 99999;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  bottom: 5vh;
  top: 150px;
  background: white;
  border-radius: 20px;
}
@media screen and (max-width: 1024px) {
  #shortcut-menu {
    overflow: scroll;
    overflow-x: hidden;
    top: 100px;
  }
}
#shortcut-menu .shortcut-menu_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px;
  overflow-y: scroll;
  position: relative;
  align-items: flex-start;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
@media screen and (max-width: 1024px) {
  #shortcut-menu .shortcut-menu_wrapper {
    overflow: hidden;
    gap: 15px;
    padding: 15px;
  }
}
#shortcut-menu .shortcut-menu_wrapper::-webkit-scrollbar {
  width: 4px;
  margin-right: 100px;
  border-radius: 4px;
  margin: 30px;
}
#shortcut-menu .shortcut-menu_wrapper::-webkit-scrollbar-track {
  background: rgba(112, 112, 112, 0.2);
  border-radius: 10px;
  background-clip: content-box; /* THIS IS IMPORTANT */
  margin-bottom: 30px;
  margin-top: 30px;
}
#shortcut-menu .shortcut-menu_wrapper::-webkit-scrollbar-thumb {
  background: #426E90;
  border-radius: 10px;
  transition: 0.3s;
}
#shortcut-menu .shortcut-menu_wrapper::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background: #3291DA;
}
#shortcut-menu .shortcut-menu_wrapper figure {
  margin: 0px;
  flex: 0 1 calc(25% - 22.5px);
  background: #F5F5F5;
  padding: 30px;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 1024px) {
  #shortcut-menu .shortcut-menu_wrapper figure {
    flex: 1 1 auto;
    padding: 15px;
  }
}
#shortcut-menu .shortcut-menu_wrapper figure:after {
  content: "";
  opacity: 0;
  transition: 0.3s;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  width: 100%;
  top: 0px;
  height: 100%;
  left: 0px;
}
#shortcut-menu .shortcut-menu_wrapper figure:hover:after {
  opacity: 1;
}
#shortcut-menu .shortcut-menu_wrapper figure:hover .showonhover {
  opacity: 1;
}
#shortcut-menu .shortcut-menu_wrapper figure figcaption {
  margin: 15px 0 0;
}
#shortcut-menu .shortcut-menu_wrapper figure figcaption h3 {
  margin: 0px;
}
#shortcut-menu .shortcut-menu_wrapper figure figcaption .showonhover {
  display: flex;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: 0.3s;
  color: #ffffff;
  z-index: 10;
  padding: 35px;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
#shortcut-menu .shortcut-menu_wrapper figure figcaption .showonhover p {
  font-size: 1.2rem;
  margin: 0px;
}
@media screen and (max-width: 480px) {
  #shortcut-menu .shortcut-menu_wrapper figure figcaption .showonhover p {
    font-size: 16px;
  }
}
#shortcut-menu .shortcut-menu_wrapper figure figcaption a {
  font-size: 1.2rem;
}
#shortcut-menu .shortcut-menu_wrapper figure img {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.circle-container {
  width: 350px;
  height: 350px;
  position: relative;
  border-radius: 50%;
  margin: 50px;
}
@media screen and (max-width: 480px) {
  .circle-container {
    width: 100vw;
    height: 100vw;
  }
}
@media screen and (max-width: 480px) {
  .circle-container svg {
    width: 100%;
    height: 100vw;
    overflow: visible;
  }
}

.icon {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .icon {
    height: 50px;
    width: 50px;
  }
}
.icon img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

.flex-wrapper {
  display: flex;
  gap: 30px;
}

.flex-end {
  justify-content: flex-end;
  align-items: flex-end;
}

.flex-column {
  flex-direction: column;
}

/* Positionierung der einzelnen Icons */
#icon1 {
  transform: translate(-50%, -50%) rotate(0deg) translate(175px) rotate(0deg);
}
@media screen and (max-width: 480px) {
  #icon1 {
    transform: translate(-50%, -50%) rotate(0deg) translate(130px) rotate(0deg);
  }
}

#icon2 {
  transform: translate(-50%, -50%) rotate(72deg) translate(175px) rotate(-72deg);
}
@media screen and (max-width: 480px) {
  #icon2 {
    transform: translate(-50%, -50%) rotate(72deg) translate(130px) rotate(-72deg);
  }
}

#icon3 {
  transform: translate(-50%, -50%) rotate(144deg) translate(175px) rotate(-144deg);
}
@media screen and (max-width: 480px) {
  #icon3 {
    transform: translate(-50%, -50%) rotate(144deg) translate(130px) rotate(-144deg);
  }
}

#icon4 {
  transform: translate(-50%, -50%) rotate(216deg) translate(175px) rotate(-216deg);
}
@media screen and (max-width: 480px) {
  #icon4 {
    transform: translate(-50%, -50%) rotate(216deg) translate(130px) rotate(-216deg);
  }
}

#icon5 {
  transform: translate(-50%, -50%) rotate(288deg) translate(175px) rotate(-288deg);
}
@media screen and (max-width: 480px) {
  #icon5 {
    transform: translate(-50%, -50%) rotate(288deg) translate(130px) rotate(-288deg);
  }
}

.labels {
  opacity: 0;
  height: 6vh;
  transition: 0.3s;
}
.labels:hover {
  cursor: pointer;
  opacity: 1;
}

.labels p {
  margin-top: -55px;
  padding: 5px 15px;
  background: #015672;
  font-weight: 500;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  box-sizing: border-box;
  transition: 0.3s;
}
.labels p:hover {
  background: #FDBE1F;
  color: #000;
}
.labels p:hover:after {
  border-top: 15px solid #FDBE1F;
}

.labels p::after {
  position: absolute;
  top: -17px;
  left: 50%;
  margin-left: -20px;
  border: 15px solid transparent;
  border-top: 15px solid #005672;
  content: "";
  transition: 0.3s;
}

@keyframes bounce {
  0% {
    transform: translateY(0px) var(--transform);
  }
  50% {
    transform: translateY(20px) var(--transform);
  }
  100% {
    transform: translateY(0px) var(--transform);
  }
}
:root {
  --transform: rotateY(45deg) rotate3d(0.9, 0, 1, 30deg) translateX(90px) translateZ(-80px);
}

.form-step .herocontainer {
  pointer-events: none;
}
.form-step .herocontainer + div {
  width: 400px;
}
@media screen and (max-width: 1280px) {
  .form-step .herocontainer + div {
    width: 500px;
  }
}

.herocontainer {
  position: relative;
  flex: 0 0 auto;
}
.herocontainer img {
  width: 310px;
  margin-left: 125px;
}
@media screen and (max-width: 1440px) {
  .herocontainer img {
    width: 250px;
    margin-left: 75px;
  }
}
@media screen and (max-width: 768px) {
  .herocontainer img {
    width: 200px;
    margin-left: 75px;
  }
}
@media screen and (max-width: 768px) {
  .herocontainer img {
    width: 135px;
    margin-left: 35px;
  }
}
.herocontainer img:first-of-type {
  position: absolute;
  left: 0px;
  margin-left: 0px;
  top: 35px;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .herocontainer img:first-of-type {
    top: 25px;
  }
}
.herocontainer img:nth-of-type(3) {
  position: absolute;
  left: 0px;
  margin-left: 0px;
  top: 35px;
  transform: translateX(-35%);
  z-index: 1;
}

.form-content {
  background: #015672;
  color: #ffffff;
  position: relative;
  padding: 15px 25px;
  font-size: 26px;
  line-height: 1.2em;
  border-radius: 20px;
  margin-top: 80px;
  box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.11);
}
@media screen and (max-width: 768px) {
  .form-content {
    margin-top: 30px;
  }
}
.form-content > div {
  margin-bottom: 50px;
}
.form-content > div:last-of-type {
  margin-bottom: 0px;
}
.form-content > div > label {
  font-size: 24px;
  margin-bottom: 20px;
}
.form-content > div > input {
  padding: 0 20px;
  font-size: 20px;
  border-radius: 10px;
}
.form-content > div > input::placeholder {
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .form-content {
    font-size: 20px;
  }
}
.form-content.takeabreak_content, .form-content.getguided_content {
  padding: 15px 25px 30px;
  width: 800px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .form-content.takeabreak_content, .form-content.getguided_content {
    width: 100%;
    font-size: 16px;
  }
}
.form-content.takeabreak_content > div, .form-content.getguided_content > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.form-content:before {
  content: "";
  position: absolute;
  left: -70px;
  top: 35px;
  width: 45px;
  height: 24px;
  background-image: url(../img/gedankenblase.png);
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .form-content:before {
    left: -57px;
    top: 37px;
    width: 32px;
    height: 17px;
  }
}
@media screen and (max-width: 768px) {
  .form-content:before {
    top: -35px;
    width: 32px;
    height: 17px;
    left: 0;
    right: auto;
    left: 5px;
    transform: rotate(120deg);
  }
}

#social-share {
  position: relative;
  width: 280px;
  display: flex;
  height: auto;
  align-items: center;
  justify-content: flex-end;
}
#social-share .toggle {
  position: relative;
  transition: 0.7s;
  z-index: 5;
}
#social-share li {
  position: absolute;
  left: 0;
  list-style: none;
  transition: 0.5s;
  transform: rotate(calc(45deg * var(--i)));
  transform-origin: 140px;
  scale: 0;
  transition-delay: calc(0.05s * var(--i));
}
#social-share li a {
  position: relative;
  display: flex;
  transform: rotate(calc(-45deg * var(--i)));
  width: 60px;
  height: 60px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.75rem;
  color: var(--clr);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  transition: 0.5s;
}
#social-share li:hover a {
  font-size: 2.5rem;
  box-shadow: 0 0 0 2px var(--clr), 0 0 0 6px #fff;
}
#social-share .buttonshare {
  margin-top: 0px;
}
#social-share.active .toggle {
  transform: translateX(-100px);
}
#social-share.active .toggle .buttonshare {
  background: #ffffff;
}
#social-share.active li {
  scale: 1;
}

@media screen and (max-width: 768px) {
  .form-step {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 1280px) {
  .speechbubble_anim {
    font-size: 20px;
  }
}

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