/* ######################## Globales ######################## */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  min-height:100%;
}

body {
  margin: 0;
  font-style: normal;
  overflow-x: hidden;
  position: relative;
  font-size: 17px;
  font-family: "Inter", Arial, sans-serif;
  image-rendering: smooth;
}

:root {
  /* Farben */
  --vin-rouge: #94416f;
  --main: #4c215f;
  --we-peep: #fbeef1;
  --hoverbtn: #fadae2;
  --we-peep-tr: #fbeef1ed;
  --mortar: #4d4351;
  --white: #fff;
  --white-tr: #ffffffc2;
  --nav-underline: #523063;
  --monarch: #8b0926;
  --footer: #4b235e;
  --yellow: #d8b93d;
  --beige: #f3ebc9;
  /* Abstands-Wert */
  --a-wert: 2.5rem;
  --hover: #d8b93d;
  /* Abstand zwischen Paragraphen */
  --p-size: 20px;
  /* Abstand von Überschriften zu Section */
  --h-size: 2rem;
}

/* ######################## Allgemeines ######################## */

a {
  text-decoration: none;
  transition: 0.4s;
}

a:hover,
a li:hover {
  color: var(--yellow) !important;
  transition: 0.4s !important;
}

.rand {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

section {
  padding-top: 3rem;
}

h1 {
  padding-top: -1rem;
  padding-bottom: 2rem;
}

#bewerbung_title h1, h2 {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 600;
  color: var(--vin-rouge);
  font-size: 1.5rem;
  margin: 0;
  padding:0;
}

.goldline {
  background-image: linear-gradient(
    to right,
    #f1dc8d 0%,
    #e6cb7a 3.36%,
    #f8edb9 9.5%,
    #fffad1 12.92%,
    #f0de9d 16.38%,
    #dbb755 21.63%,
    #ce9e27 25.4%,
    #c99516 27.29%,
    #f1dc8d 42.45%,
    #dab349 50.3%,
    #c99516 58.06%,
    #ce9e27 59.11%,
    #e3c56f 63.93%,
    #f2e2a4 67.94%,
    #fbf3c5 70.94%,
    #fffad1 72.58%,
    #f8edb9 74.29%,
    #e6cc7c 77.91%,
    #ca981b 83.1%,
    #c99516 83.33%,
    #cb981b 85.95%,
    #d0a12b 89.19%,
    #d0a12b 89.19%,
    #d8b044 92.78%,
    #e4c567 96.58%,
    #f1dc8d 100%
  );
  background-repeat: no-repeat;
  background-size: contain;
  height: 5px;
  position:relative;
  top:-5px;
}

address{
  font-style: normal;
}



/* Abstände */
/* Abstand für Paragraphen */
.p-gap {
  padding-top: var(--p-size);
}

/* Abstand für Überschriften */
.h-gap {
  padding-top: var(--h-size);
  padding-bottom: var(--h-size);
}

/* Abstand Überschrift nach oben */
.h_top {
  padding-top: var(--h-size);
}

/* Abstand Überschrift nach unten */
.h_bot {
  padding-bottom: var(--h-size);
}

/* Gestaltung der Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background-color: #d4d3d3;
}

::-webkit-scrollbar-thumb {
  background-color: var(--nav-underline);
  border-radius: 0px;
  border: 0px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* Gestaltung des Headers */
.header-container {
  background-color: var(--main);
}

#logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 15rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

/* Gestaltung der Navigationsleiste */
#active {
  border-bottom: solid 0.53mm var(--nav-underline);
  display: inline-block;
  font-weight: 600;
}

#navbar {
  background-color: var(--white-tr);
  padding: 0px;
  z-index: 100;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.navbar-item > a {
  flex: 0 1 auto;
  color: var(--mortar);
  text-decoration: none;
}

.navbar-item > a:hover {
  color: var(--mortar) !important;
  text-decoration: none;
}

.navbar-item:hover {
  font-weight: 800;
  border-bottom: 0.1mm solid var(--nav-underline);
}

#menu-toggle {
  display: none;
}

#menu {
  display: none;
}

.show {
  display: flex;
}

.menu-icon2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 30px;
  gap: 0.4rem;
  cursor: pointer;
}
.bar {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--nav-underline);
  transition: all 0.3s ease;
  border-radius: 30px;
}
.menu-icon2.active .bar:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
.menu-icon2.active .bar:nth-child(2) {
  opacity: 0;
}
.menu-icon2.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(45deg);
}

@media only screen and (max-width: 919px) {
  #menu-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1.875rem;
  }
}

#menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2.5rem;
  visibility: visible;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#navbar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#navbar il {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#navbar ul li {
  display: inline;
  margin: 10px;
  padding: 2rem;
}

#navbar ul li a:hover {
  color: var(--monarch);
  text-decoration: none;
  font-weight: 600;
  border-bottom: solid 0.15rem #dbb75542;
}

#navbar ul li a {
  color: black;
  text-decoration: none;
  color: var(--main);
}

li,
a {
  font-family: "Crimson Text";
  font-style: normal;
  font-size: 19.6px;
  text-decoration: none;
}

/* Responsive Styles */
@media only screen and (max-width: 777px) {
  #menu-toggle:checked ~ #menu {
    display: block;
  }

  #menu-toggle:checked ~ #menu-icon:before {
    content: "\2715";
  }

  #menu-toggle:checked ~ #menu-icon {
    color: #8b0926;
  }

  #menu {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }

  #menu-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    font-size: 30px;
  }

  a:hover {
    text-decoration: none;
  }
}

@media only screen and (min-width: 778px) {
  #menu-icon2 {
    visibility: hidden;
    display: none;
  }
}

/* Cover-Gestaltung */
.cover-img {
  width: 100%;
  height: 445px;
  object-fit: cover;
}

/* Willkommen-Section */
#willkommen h1,
h1 {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 600;
  color: var(--vin-rouge);
  font-size: 1.5rem;
}

.round {
  border-radius: 50%;
  width: 100%;
}

.leitspruch {
  position: absolute;
  text-align: center;
}

.leitspruch > h2 {
  font-weight: 200;
  color: #94416f;
  font-family: "Inter", Arial, sans-serif;
}

.double-heading {
  position: absolute;
  color: #94416f;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 2.1rem;
  width: 100%;
  font-size: 1.2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  font-family: "Inter", Arial, sans-serif;
  align-items: flex-start;
  font-weight: 100;
  opacity: 0.4;
}

.double-heading span {
  color: #94416f;
  position: absolute;
  font-size: 1.3rem;
  opacity: 0.2;
  top: 3px;
  left: 0px;
  right: -27px;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-weight: 800;
  justify-content: flex-end;
  align-items: flex-start;
}

/* ######################## Card-Slider ######################## */
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #52306385;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  height: 296px;
}

.swiper-wrapper {
  height: unset !important;
  padding-bottom: 3rem;
}

.swiper-content {
  z-index: 1;
}

.swiper-content > h2 {
  font-size: 1.4rem;
  text-align: left;
  hyphens: auto;
}

.swiper-content > p {
  font-size: 1rem;
  text-align: left;
  padding-top: 1rem;
}

.swiper-button-next {
  color: var(--main) !important;
}

.swiper-button-prev {
  color: var(--main) !important;
}

/* .swiper-button-next,
.swiper-button-prev {
  top: var(--swiper-navigation-top-offest, 92%) !important;
} */

.swiper-content {
  height: 15rem;
  position: relative;
  top: 2rem;
}

@media screen and (min-width: 992px) {
  .swiper-content {
    padding: 10px;
  }
}

.swiper-content > h2,
.swiper-content > p {
  color: white;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

.swiper-slide > p,
.swiper-slide p > a {
  color: white;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 1rem;
  text-decoration: none;
}

/* .swiper-slide p > a:hover {
  color: var(--main) !important;
} */

.p-btm {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
}

.beruf {
  color: var(--nav-underline);
  font-weight: 700;
}

#stellenangebote h3,
#stellenangebote h4 {
  font-weight: 600;
}
#stellenangebote h4 {
  text-transform: uppercase;
}

.mark {
  color: var(--nav-underline);
  font-weight: 700;
}

/* ######################## Footer ######################## */
.footer-logo-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  background-color: var(--footer);
}

.footer-container {
  background-color: var(--footer);
  padding-bottom: 9px;
}

.footer-item > h2 {
  color: var(--white);
  font-size: 1.155rem;
  padding-top: 1rem;
  text-align: center;
}

.footer-item > p {
  font-size: 0.9rem;
  margin-block-start: 0.4rem;
  margin-block-end: 0.4rem;
}

.footer-logo a img {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.5rem;
}

.footer-item,
.footer-item > p > a {
  text-align: center;
  font-size: 0.9rem;
  text-decoration: none;
  font-family: "Inter", Arial, sans-serif;
  color: var(--white);
}

.footer-item > ul > li {
  text-align: center;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.9rem;
  padding-left: 0rem;
  list-style-position: inside;
  padding-top: 0.4rem;
}

.footer-item:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.footer-item > ul {
  display: inline;
  padding: 0;
}

.right {
  text-align: left;
  width: 143px;
}

.right > a {
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  text-decoration: none;
  font-size: 0.9rem;
}

.rechtl-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1rem;
  font-size: 0.6rem;
  gap: 0.3rem;
  text-align: center;
  background-color: var(--footer);
  padding-bottom: 1rem;
}

.rechtl-item,
.rechtl-item > a {
  text-decoration: none;
  color: var(--white);
  font-size: 0.8rem;
  font-family: "Inter", Arial, sans-serif;
}

/* Button-Gestaltung */
.btn {
  position: relative;
  font-size: 0.93rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1em 2.5em;
  display: inline-block;
  border-radius: 6em;
  transition: all 0.2s;
  border: none;
  font-weight: 500;
  color: black;
  background-color: #fbeef1;
  font-family: "Inter", Arial, sans-serif;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  font-family: "Inter", Arial, sans-serif;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

.btn::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

.more {
  margin-bottom: 2rem;
  position:relative;
  z-index:2;
}

@media screen and (min-width: 375px) {
  .double-heading span {
    font-size: 1.6rem;
  }

  .double-heading {
    font-size: 1.5rem;
    margin-top: 2rem;
  }

  .leitspruch > h2 {
    font-size: 1.5rem;
    width: 100vw;
  }

  .leitspruch {
    margin-top: 5rem;
  }

  .round {
    width: 233px;
  }
}

@media screen and (min-width: 512px) {
  .double-heading span {
    font-size: 1.9rem;
    top: 9px;
    right: -7px;
  }

  .double-heading {
    font-size: 1.9rem;
    margin-top: 2rem;
  }

  .leitspruch {
    margin-top: 7rem;
  }

  .leitspruch > h2 {
    font-size: 2.3rem;
  }
}

@media screen and (min-width: 387px) {
  h1,
  h2 {
    text-align: left;
  }
}

@media screen and (min-width: 503px) {
  #willkommen h1,
  h1 {
    text-align: left !important;
  }
}

@media screen and (min-width: 667px) {
  .leitspruch {
    margin-right: -8rem;
  }
}

@media screen and (min-width: 743px) {
  .round {
    width: 343px;
  }

  .leitspruch {
    margin-top: 14rem;
  }
}

@media screen and (min-width: 768px) {
  #willkommen h1,
  h1 {
    font-size: 2rem;
  }

  .round {
    width: 300px;
    height: 300px;
  }

  .leitspruch {
    margin-top: 28rem;
  }

  .cover-img {
    height: 630px;
  }

  .stellenangebot_container {
    flex-direction: row !important;
  }

  .location-card {
    top: 3.7rem;
  }
}

@media screen and (min-width: 970px) {
  .double-heading {
    font-size: 2.5rem;
  }

  .double-heading span {
    top: 8px;
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 992px) {
  .leitspruch {
    margin-top: 21rem;
    margin-right: -13rem;
  }

  .round {
    width: 400px;
    height: 400px;
  }

  h2 {
    font-size: 1.8rem;
  }

  .footer-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
  }
}

@media screen and (min-width: 1052px) {
  .double-heading span {
    font-size: 3.3rem;
    top: 10px;
  }

  .double-heading {
    margin-top: 2.8rem;
    font-size: 3.2rem;
  }
}

@media screen and (min-width: 1086px) {
  .leitspruch {
    margin-right: -310px;
  }
}

@media screen and (min-width: 1273px) {
  .leitspruch > h2 {
    font-size: 2.5rem;
  }

  .double-heading span {
    font-size: 2.9rem;
  }

  .leitspruch {
    margin-top: 23rem;
    margin-right: -346px;
  }
}

@media screen and (min-width: 1640px) {
  .double-heading {
    margin-top: 4rem;
    font-size: 4rem;
  }

  .double-heading span {
    font-size: 4.2rem;
    right: -31px;
  }
}

/* Reveal-Animation */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Unterseite: Labor */

#labor-cover {
  object-position: 1% 17%;
}

/* Timeline Gestaltung */
/* Timeline Container */
.timeline {
  background: var(--primary-color);
  margin: 10px auto;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}

/* Card container */
.card {
  position: relative;
  width: 50vw;
}

@media screen and (max-width: 1076px) {
  .card {
    width: auto;
  }
}

.info > p {
  hyphens: auto;
  margin: 10px;
  padding-bottom: 1rem;
}

/* setting padding based on even or odd */
.card:nth-child(odd) {
  padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
  padding: 30px 30px 30px 0;
}
/* Global ::before */
.card::before {
  content: "";
  position: absolute;
  width: 50%;
  border: solid var(--main);
}

/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
  left: 0px;
  top: -4.5px;
  bottom: -4.5px;
  border-width: 5px 0 5px 5px;
  border-radius: 50px 0 0 50px;
}

.card:nth-child(odd)::before {
  top: -5px;
  bottom: -5px;
}

/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
  right: 0;
  top: 0;
  bottom: 0;
  border-width: 5px 5px 5px 0;
  border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.card:first-child::before {
  border-top: 0;
  border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(odd)::before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(even)::before {
  border-bottom: 0;
  border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  background: #c8bdcd;
  color: var(--font);
  border-radius: 10px;
}

/* Title of the card */
.title {
  color: var(--vin-rouge);
  position: relative;
}

.info > h3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 1rem;
}

/* Timeline dot  */
.title::before {
  content: "";
  position: absolute;
  width: 10px !important;
  height: 10px !important;
  background: white;
  border-radius: 999px;
  border: 3px solid var(--vin-rouge);
}

/* text right if the card is even  */
.card:nth-child(even) > .info > .title {
  text-align: right;
}

/* setting dot to the left if the card is odd */
.card:nth-child(odd) > .info > .title::before {
  left: -36px;
}

/* setting dot to the right if the card is odd */
.card:nth-child(even) > .info > .title::before {
  right: -36px;
}

ul {
  display: inline-block;
  padding-left: 3rem;
  padding-top: var(--p-size);
}

.aufzaehlung a li,
.aufzaehlung li,
.aufzaehlung a {
  color: black;
  font-family: "Inter", Arial, sans-serif;
  font-size: unset;
}

.leistung-container {
  margin: 5px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  padding-bottom: 0rem;
}

.leistung-bild {
  padding-bottom: 1rem;
}

.leistung-bild > img {
  width: 100%;
  max-width: 378px;
}

.leistung-beschreibung {
  max-width: 378px;
}

.leistung-beschreibung > h2 {
  text-align: left;
  padding-bottom: 1rem;
}

@media screen and (min-width: 916px) {
  .leistung-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
  }

  .leistung-bild {
    width: 600px;
  }

  .leistung-bild > img {
    max-width: 600px;
    height: 300px;
    object-fit: cover;
  }

  /* .leistung-container:nth-child(2n + 2) {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
  } */

  .rowreverse {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
  }
}

.rosa-bogen {
  background-image: url("../img/waves/rosa-bg.svg");
  width: 20%;
}

svg {
  width: 100%;
  position: absolute;
  margin-top: 502px;
  z-index: -1;
}

/* @media screen and (min-width:260px){
  svg{
    margin-top:814px;
  }

  .background-wave > .row{
    margin-top:962px !important;
    height:950px !important;
  }

  .bogen-container{
    margin-top:155rem !important;
  }

  .background-wave2 > .row{
    height:1216px !important;
    top:333.9rem !important;
  }
} */

.background-wave > .row {
  position: absolute;
  background-color: #bc9ecb;
  height: 193vh;
  width: 110vw;
  position: absolute;
  margin-top: 6rem;
  z-index: -2;
}

.background-wave2 > .row {
  position: absolute;
  background-color: #bc9ecb;
  height: 101vh;
  width: 119vw;
  position: absolute;
  top: 271.966rem;
  z-index: -2;
}

.bogen-container {
  position: absolute;
  width: 100vw;
  height: 20vh;
}

.beige {
  color: var(--beige) !important;
}

.white {
  color: var(--white) !important;
}

.stellenangebot-container {
  position: absolute;
  margin-top: -26rem;
  background-color: #9451b540;
  padding: 2rem;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.side-info-pers {
  font-family: "Inter", Arial, sans-serif;
  color: #fe79c3;
  font-weight: 600;
}

.stellenangebot-container > h2 {
  font-family: "Inter", Arial, sans-serif;
  color: white;
  font-weight: 300;
}

.stellenangebot-container > h3 {
  text-align: center;
  font-weight: 200;
  font-size: 1.2rem;
  color: white;
}

.stellenangebot-bild > img {
  max-width: 300px;
  width: 100%;
  border-radius: 8px;
  min-width: 200px;
  min-height: 200px;
  object-fit: cover;
}

.sa_beruf > h2 {
  color: black;
  text-align: left;
  font-weight: 300;
}

.gender {
  font-size: 1.2rem;
}

.sa_duration p {
  font-style: italic;
}

.stellenangebot_container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
  background-color: #f8f8f8;
  padding: 20px;
  width: 900px;
  gap: 3rem;
  border-radius: 8px;
}

.button-container {
  padding-top: 1.5rem;
}

@media screen and (min-width: 260px) {
  .stellenangebot_container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }
}

#kontaktformular {
  background-color: #b3a7b8;
  padding-top: 1rem !important;
}

.kontaktformular-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kontaktformular2 {
  background-color: #dddddd;
  width: 90%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding-top: 2rem;
  max-width: 690px;
}

@media screen and (max-width:767px){
  .kontaktformular2{
    padding:27px;
  }
}

.kontaktformular {
  width: 100%;
  max-width: 500px;
  font-family: "Inter";
}

.nebeneinander-datenschutz {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

.datenschutz_item a,
.datenschutz_item p {
  font-size: 0.9rem;
  font-family: "Inter";
}

.datenschutz_item a {
  color: var(--footer);
}

.kontaktformular .kontakt-row {
  padding: 0px 10px 15px 10px;
}

.kontaktformular label {
  display: block;
  width: 100%;
  padding-bottom: 10px;
}

.sm_input {
  height: 41px;
}

.kontaktformular .field {
  display: block;
  width: 100%;
}

.kontaktformular input,
.kontaktformular textarea {
  padding: 6px;
  width: 100%;
  font-family: "Inter";
  font-size: 1rem;
}

.pflicht {
  color: #8b1729;
}

.buttons {
  text-align: center;
}

.pflichtfelder {
  text-align: right;
  font-size: 0.7rem;
  padding-right: 2rem;
  color: #8b0926;
}

.buttons input {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
  text-align: center;
  background-color: white;
  cursor: pointer;
}

input {
  border-radius: 30px;
  border-color: white;
  box-shadow: none;
  border: 2px solid white;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 30px 20px;
  box-sizing: border-box;
  border: 2px solid white;
  border-radius: 20px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
  font-family: "Inter";
}

*:focus {
  outline: none;
}

.kontaktformular input[type="checkbox"] {
  height: calc(0.6rem / 16 * 34);
  width: calc(0.6rem / 16 * 34);
  border: 1px solid white;
  border-radius: 0.25rem;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  display: block;
  float: left;
  cursor: pointer;
}

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

.checkbox-container {
  display: flex;
}

@media screen and (max-width: 500px) {
  .kontaktformular .kontakt-row {
    padding: 14px 10px 15px 10px;
  }
  .kontaktformular label {
    display: block;
    width: 100%;
    padding-bottom: 10px;
  }
  .kontaktformular .field {
    display: block;
    width: 100%;
  }
  .kontaktformular input,
  .kontaktformular textarea,
  .kontaktformular select {
    padding: 6px;
  }
  .buttons {
    margin-top: 20px;
    text-align: center;
  }
}

@media screen and (min-width: 991px) {
  .kontaktformular2 {
    width: 70%;
    width:100%;
  }
}

.location-card {
  background-color: #523063b0;
  position: relative;
  width: 100%;
  padding: 27px;
  border-radius: 5px;
  margin-bottom:-1rem;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

@media screen and (min-width:992px){
  .location-card{
    max-width:430px;
    padding:60px;
    right:-42px;
    top:2.7rem;
  }

}

@media screen and (min-width:1200px){
  .location-card{
    right:-118px;
  }
}

@media screen and (min-width:1400px){
  .location-card{
    right:-182px;
  }
}


.location-card > h3 {
  font-family: "Crimson Text";
  font-size:1.9rem;
  color: #f3ebc9;
  font-weight: 600;
}

@media screen and (min-width:768px){
  .location-card > h3{
    font-size:2rem;
  }
}


.location-card address,
.location-card p a,
.location-card p {
  text-decoration: none;
  color: white;
  font-family: "Inter", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: unset;
  font-weight: 200;
}


/* @media screen and (min-width: 260px) {
  .location-card {
    position: relative !important;
    width: 100% !important;
    padding: 69px;
  }

  .location-card p,
  .location-card a {
    font-size: 1.2rem !important;
  }
} */

.scrollToTopBtn:hover {
  background-color: var(--vin-rouge);
}

.scrollToTopBtn {
  background-color: black;
  border: none;
  color: white;
  font-weight: 900;
  cursor: pointer;
  font-size: 18px;
  line-height: 48px;
  width: 48px;

  /* place it at the bottom right corner */
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* keep it at the top of everything else */
  z-index: 100;
  /* hide with opacity */
  opacity: 0;
  /* also add a translate effect */
  transform: translateY(100px);
  /* and a transition */
  transition: all 0.5s ease;
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
}

/*Back to Top-Button*/

.top-btn {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  height: 2.2rem;
  width: 2.6rem;
  z-index: 2000;
  opacity: 1;
}

/* Unterseite: Job: Zahntechnikerin, Zahntechnikermeisterin */
.bewerbung_container {
  background-color: #52306345;
  padding: 10px;
  /* max-width: 722px; */
  width: 87%;
  border-bottom-right-radius: 7px;
  border-top-right-radius: 7px;
  padding-left: 15px;
}

@media screen and (min-width: 556px) {
  .bewerbung_container {
    width: 528px;
  }
}

.bewerbung_container h2 {
  font-family: "Inter", Arial, sans-serif;
  font-size: 1rem;
  text-align: left;
}

@media screen and (min-width: 472px) {
  .bewerbung_container h2 {
    font-size: 1.3rem;
  }
}

.bewerbung_container .gender {
  font-size: 0.9rem;
}

#anforderung li,
#anforderung a {
  font-family: "Inter", Arial, sans-serif;
  font-size: unset;
}

@media screen and (min-width: 1312px) {
  .bewerbung_container {
    width: 772px;
    padding-left: 4rem;
  }

  .bewerbung_container h2 {
    font-size: 1.6rem;
  }

  .bewerbung_container .gender {
    font-size: 1rem;
  }
}

#anforderung h3 {
  color: #8b0926;
  font-size: 1.1rem;
  font-weight: 400;
}

/* Alert-Gestaltung */
.alert {
  position: absolute;
  width: 100vw;
  text-align: left;
  padding: 4px;
  background-color: #fffade75;
  color: black;
  margin-bottom: 15px;
  font-family: "Crimson Text";
  font-size: 1.2rem;
  font-weight: 400;
  padding-right: 20px;
  padding-left: 20px;
}

.alert > a {
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
}

.berufsbezeichnung {
  color: var(--main);
  font-weight: 800;
}

/* The close button */

.closebtn {
  position: absolute !important;
  top: 0 !important;
  right: 8px !important;
  color: black;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (min-width: 662px) {
  .closebtn {
    margin-left: 15px;
    margin-right: 20px;
    margin-top: 5px;
    color: black;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
  }

  .alert {
    text-align: center;
  }
}
/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600ms to fade out */
}

/* The Modal (background) */
#myModal {
  display: block;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
  overflow-x: hidden;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 4; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100vw; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

#stellenangebote {
  background-image: url("../img/popup/bewerbung.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom 1rem right 1rem;
  background-position: bottom 2vh right 8vw;
}

.bg-white {
  background-color: white;
  width: 100%;
  max-width: 803px;
  margin-left: 1.5rem;
}

@media screen and (min-width: 462px) {
  .bg-white {
    background-color: white;
    padding: 50px;
  }
}

/* Modal Content */
.modal-content {
  margin: auto;
  display: block;
  animation-name: zoom;
  animation-duration: 0.6s;
}

/* The Close Button */
.close {
  position: relative;
  top: 2px;
  right: 36px;
  color: var(--main);
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

@media screen and(min-width:508px) {
  .close {
    right: 50px;
  }
}
.close:hover,
.close:focus {
  color: var(--hoverbtn);
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

.container_wave {
  padding-top: 3rem !important;
}

.leistung_sonder {
  margin-top: -13rem;
}

@media screen and (min-width: 336px) {
  .leistung_sonder {
    margin-top: -15rem;
  }
}

@media screen and (min-width: 438px) {
  .leistung_sonder {
    margin-top: -18rem;
  }
}

@media screen and (min-width: 632px) {
  .leistung_sonder {
    margin-top: -23rem;
  }
}

@media screen and (min-width: 854px) {
  .leistung_sonder {
    margin-top: -29rem;
  }
}

@media screen and (min-width: 1290px) {
  .leistung_sonder {
    margin-top: -36rem;
  }
}

@media screen and (min-width: 1562px) {
  .leistung_sonder {
    margin-top: -40rem;
  }
}

@media screen and (min-width: 1796px) {
  .leistung_sonder {
    margin-top: -44rem;
  }
}

@media screen and (min-width: 418px) {
  .leistung_sonder2 {
    margin-top: -3rem;
  }
}

@media screen and (min-width: 538px) {
  .leistung_sonder2 {
    margin-top: -5rem;
  }
}

@media screen and (min-width: 796px) {
  .leistung_sonder2 {
    margin-top: -9rem;
  }
}

@media screen and (min-width: 1028px) {
  .leistung_sonder2 {
    margin-top: -13rem;
  }
}

@media screen and (min-width: 1256px) {
  .leistung_sonder2 {
    margin-top: -16rem;
  }
}

@media screen and (min-width: 1580px) {
  .leistung_sonder2 {
    margin-top: -23rem;
  }
}

@media screen and (min-width: 1874px) {
  .leistung_sonder2 {
    margin-top: -30rem;
  }
}

.lila_con {
  width: 100%;
  margin-bottom: -3px;
  position: absolute;
  height: 730px;
}

#scrollToTopButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--amulet);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
}

#scrollToTopButton:hover {
  background-color: var(--amulet);
}

#menu-icon {
  transition: transform 0.3s;
  transform: rotate(0deg);
}

#menu-icon.active {
  transform: rotate(135deg);
}

.performance .description {
  display: none;
}

.toggle-button{
  color:#8B0926;
  cursor: pointer;
}

nav {
  position: relative;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}