@font-face {
  font-family: Barlow;
  src: url('../fonts/Barlow-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Barlow;
  src: url('../fonts/Barlow-Black.ttf') format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Barlow;
  src: url('../fonts/Barlow-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Barlow;
  src: url('../fonts/Barlow-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --weinrot: #b62140;
  --grey: #b3b3b3;
  --whitesmoke: #f5f5f5;
  --apotheke-rot: #e2001a;
}

a {
  text-decoration: underline;
}

.hero-section {
  width: 100%;
  height: 100dvh;
  padding: 3vh;
}

.hero-image-text-wrapper, .image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.image {
  z-index: 4;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.image.contain {
  object-fit: contain;
}

.image.bg {
  object-position: 50% 0%;
}

.image.move {
  object-position: 50% 30%;
}

.gradient {
  z-index: 4;
  background-image: linear-gradient(202deg, #fff0 47%, #fff);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.hero-text-wrapper {
  z-index: 5;
  justify-content: flex-start;
  align-items: center;
  width: 35%;
  display: flex;
  position: absolute;
  inset: 20% auto 0% 8vh;
}

.hero-text {
  color: var(--weinrot);
  text-transform: uppercase;
  font-family: Barlow, Arial, sans-serif;
  font-size: 5.7em;
  font-weight: 500;
  line-height: 1em;
}

.hero-bold {
  font-weight: 900;
}

.kammer-logo-wrapper {
  z-index: 6;
  width: 15vh;
  height: auto;
  margin-bottom: 3vh;
  margin-left: 3vh;
  position: absolute;
  inset: auto auto 0% 0%;
}

.intro-section {
  flex-flow: column;
  width: 100%;
  padding: 50px 5vh;
  display: flex;
  position: relative;
}

.termine-section {
  width: 100%;
  height: 50vh;
  position: relative;
  overflow: hidden;
}

.bg-wrapper {
  z-index: 2;
  position: relative;
}

.stoerer-wrapper {
  z-index: 8;
  width: 25%;
  position: absolute;
  inset: 30% 5% auto auto;
}

.logo-wrapper {
  z-index: 10;
  background-color: #fff;
  width: 20%;
  padding: 20px;
  position: absolute;
  inset: -1% 3% auto auto;
}

.termine-stoerer-1 {
  width: 20%;
  height: auto;
  margin-left: 10%;
  position: absolute;
  inset: 5% auto auto 0%;
}

.termine-stoerer-2 {
  width: 20%;
  margin-left: 30%;
  position: absolute;
  inset: 18% auto auto 0%;
}

.termine-stoerer-3 {
  width: 20%;
  margin-left: 50%;
  position: absolute;
  inset: 10% auto auto 0%;
}

.bg-karte-wrapper {
  z-index: 1;
  opacity: .4;
  width: 90%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.intro-text-wrapper {
  z-index: 10;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.infografik-wahlkarte-wrapper {
  z-index: 5;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
}

.div-block {
  width: 60%;
  height: 80%;
}

.intro-text-holder {
  width: 100%;
}

.h1-heading {
  color: var(--weinrot);
  text-transform: uppercase;
  white-space: pre-wrap;
  margin-bottom: 50px;
  font-family: Barlow, Arial, sans-serif;
  font-size: 4em;
  font-weight: 500;
  line-height: 1.1em;
}

.wrap-bold {
  font-weight: 900;
}

.fliesstext-p-bold {
  color: #000;
  font-family: Barlow, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.3em;
}

.fliesstext-p-bold.white {
  color: #fff;
}

.fliesstext-rot {
  color: var(--weinrot);
  margin-top: 30px;
  font-family: Barlow, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.3em;
}

.fliesstext-rot.no-margin {
  margin-top: 0;
}

.fliesstext-aufz-hlung {
  color: var(--grey);
  margin-top: 30px;
  font-family: Barlow, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.4em;
}

.fliesstext-aufz-hlung.white {
  color: #fff;
}

.content-wrapper {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.div-block-2 {
  width: 100%;
  height: 100%;
}

.split-section {
  flex-flow: column;
  width: 100%;
  height: auto;
  position: relative;
}

.split-left-wrapper {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 50px 5vh;
  display: flex;
}

.split-left-wrapper.no-margin {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 0;
  padding-left: 0;
}

.split-right-wrapper {
  background-color: var(--whitesmoke);
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 50px 5vh;
  display: flex;
}

.split-right-wrapper.no-margin {
  height: auto;
  padding-top: 0;
  padding-left: 0;
  position: static;
}

.text-holder {
  width: 90%;
}

.h2-heading {
  color: var(--weinrot);
  text-transform: uppercase;
  white-space: pre-wrap;
  width: 100%;
  margin-bottom: 50px;
  font-family: Barlow, Arial, sans-serif;
  font-size: 2.4em;
  font-weight: 500;
  line-height: 1em;
}

.h2-heading.white {
  color: #fff;
  width: 100%;
}

.fliesstext-p {
  color: #000;
  margin-top: 30px;
  font-family: Barlow, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.3em;
}

.fliesstext-p.red {
  color: var(--weinrot);
}

.fliesstext-p.is--grey {
  color: var(--grey);
}

.fliesstext-p.is--grey.no-margin {
  margin-top: 0;
}

.fliesstext-p.is--white {
  color: #fff;
  margin-top: 0;
}

.wrap-bold-red {
  color: var(--weinrot);
  font-weight: 700;
}

.wrap-bold-red.is--white {
  color: #fff;
}

.information-icon-wrapper {
  width: 80px;
  position: absolute;
  inset: 3vh 10vh auto auto;
}

.image-red-split-section {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.image-section {
  width: 100%;
  height: 50vh;
  padding-left: 0;
}

.big-red-wrapper {
  background-image: linear-gradient(180deg, var(--apotheke-rot), #b62140);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5vh;
  display: flex;
}

.text-span {
  font-weight: 500;
}

.text-holder-big-red-section {
  width: 95%;
}

.footer {
  justify-content: space-between;
  align-items: center;
  padding: 2vh 15vh 2vh 5vh;
  display: flex;
}

.abbinder-section {
  background-color: var(--whitesmoke);
  width: 100%;
  padding-top: 10vh;
  padding-bottom: 10vh;
  padding-left: 5vh;
}

.split-wrapper {
  flex-flow: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.text-link {
  color: var(--weinrot);
  text-decoration: none;
  transition: opacity .2s cubic-bezier(.55, .085, .68, .53);
}

.text-link:hover {
  opacity: .7;
}

.text-link.is--grey {
  color: var(--grey);
  font-family: Barlow, Arial, sans-serif;
  transition: opacity .2s cubic-bezier(.55, .085, .68, .53);
}

.text-link.is--grey:hover {
  opacity: .7;
}

.text-link.is--white {
  color: #fff;
}

.footer-logo-wrapper {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.logo-holder {
  width: 200px;
}

.footer-text-wrapper {
  margin-left: 20px;
}

.footer-link-wrapper {
  flex-flow: column;
  display: flex;
}

.more-information-section {
  background-color: var(--grey);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 5vh 15vh;
  display: flex;
}

.h3-heading {
  color: #000;
  text-transform: uppercase;
  white-space: pre-wrap;
  margin-top: 50px;
  font-family: Barlow, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1em;
}

.h3-heading.white {
  color: #fff;
  width: 55%;
}

.image-termine {
  z-index: 4;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.image-termine.contain {
  object-fit: contain;
}

.image-termine.bg {
  object-position: 50% 0%;
}

.image-termine.move {
  object-position: 50% 30%;
}

.div-block-red {
  background-color: var(--weinrot);
  margin-top: 30px;
  padding: 20px;
}

.sticky-wrapper {
  z-index: 2;
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}

.split-grey-bg {
  background-color: #f5f5f5;
  display: none;
}

.split-grey-bg.hidden {
  display: none;
}

@media screen and (min-width: 1280px) {
  .hero-section {
    padding: 5vh;
  }

  .hero-text-wrapper {
    top: 0%;
  }

  .hero-text {
    font-size: 6.5em;
  }

  .intro-section {
    height: 100vh;
    padding: 0 15vh;
    position: relative;
  }

  .termine-section {
    height: 100dvh;
  }

  .stoerer-wrapper {
    width: 17%;
    right: 15%;
  }

  .logo-wrapper {
    width: 160px;
  }

  .termine-stoerer-1 {
    width: 18%;
    margin-left: 10vh;
    top: 17%;
  }

  .termine-stoerer-2 {
    width: 18%;
    margin-left: 50vh;
    top: 38%;
  }

  .termine-stoerer-3 {
    width: 18%;
    margin-left: 90vh;
    top: 19%;
  }

  .infografik-wahlkarte-wrapper {
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100vh;
    display: flex;
    position: absolute;
    top: auto;
    right: 0;
  }

  .div-block, .intro-text-holder {
    width: 100%;
  }

  .h1-heading {
    font-size: 4.5em;
    line-height: 1em;
  }

  .fliesstext-p-bold, .fliesstext-p-bold.white, .fliesstext-rot, .fliesstext-rot.no-margin, .fliesstext-aufz-hlung, .fliesstext-aufz-hlung.white {
    font-size: 1.4em;
  }

  .content-wrapper {
    justify-content: center;
    align-items: flex-start;
    width: 50%;
    position: absolute;
  }

  .split-section {
    flex-flow: row;
    height: 100vh;
  }

  .split-left-wrapper {
    width: 50%;
    height: 100%;
    padding: 10vh 5vh 0 15vh;
  }

  .split-right-wrapper {
    z-index: 2;
    background-color: #0000;
    width: 50%;
    height: 100%;
    padding: 10vh 5vh 0 10vh;
    position: absolute;
    inset: 0% 0% 0% auto;
  }

  .split-right-wrapper.no-margin {
    padding-left: 5vh;
  }

  .h2-heading {
    width: 60%;
    font-size: 2.6em;
  }

  .h2-heading.white {
    width: 55%;
  }

  .fliesstext-p, .fliesstext-p.red {
    font-size: 1.4em;
  }

  .fliesstext-p.is--white {
    color: #fff;
    margin-top: 0;
  }

  .wrap-bold-red.is--white {
    color: #fff;
  }

  .information-icon-wrapper {
    width: 12vh;
    position: relative;
    top: auto;
    bottom: 5vh;
    right: 20vh;
  }

  .image-red-split-section {
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
    height: 120vh;
    padding: 5vh;
  }

  .image-section {
    width: 30%;
    height: 100%;
  }

  .big-red-wrapper {
    justify-content: flex-start;
    align-items: center;
    width: 70%;
    margin-right: 0;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 10vh;
  }

  .footer, .abbinder-section {
    padding-left: 15vh;
  }

  .split-wrapper {
    flex-flow: row;
    display: flex;
  }

  .text-link.is--white {
    color: #fff;
  }

  .image-termine.move {
    object-position: 50% 0%;
  }

  .div-block-red {
    background-color: var(--weinrot);
    margin-top: 30px;
    padding: 30px;
  }

  .sticky-wrapper {
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
  }

  .sticky-wrapper.hidden {
    display: none;
  }

  .split-grey-bg {
    z-index: 1;
    width: 50%;
    height: 100%;
    display: none;
    position: relative;
  }
}

@media screen and (max-width: 991px) {
  .intro-section {
    align-items: flex-start;
  }

  .content-wrapper {
    flex-flow: column;
  }
}

@media screen and (max-width: 479px) {
  .hero-section {
    height: 100dvh;
    padding: 2vh;
  }

  .image.contain {
    object-fit: contain;
  }

  .hero-text-wrapper {
    top: auto;
    bottom: 28%;
    left: 3vh;
  }

  .hero-text {
    font-size: 3em;
  }

  .kammer-logo-wrapper {
    width: 33%;
  }

  .intro-section {
    padding-left: 4vh;
    padding-right: 4vh;
    overflow: hidden;
  }

  .termine-section {
    height: 100dvh;
  }

  .bg-wrapper {
    height: 100%;
  }

  .stoerer-wrapper {
    width: 48%;
    inset: 20% auto auto 5%;
  }

  .logo-wrapper {
    width: 38%;
    padding: 10px;
    right: 0%;
  }

  .termine-stoerer-1 {
    width: 50%;
    margin-left: 25%;
    top: 3%;
  }

  .termine-stoerer-2 {
    width: 50%;
    margin-left: 5%;
    top: 27%;
  }

  .termine-stoerer-3 {
    width: 50%;
    margin-left: 46%;
    top: 45%;
  }

  .bg-karte-wrapper {
    width: 100%;
    height: 75%;
    left: 0;
  }

  .infografik-wahlkarte-wrapper {
    width: 90%;
    margin-top: 50px;
  }

  .div-block {
    width: 100%;
    height: 100%;
  }

  .intro-text-holder {
    width: 100%;
  }

  .h1-heading {
    width: 100%;
    font-size: 2.2em;
  }

  .wrap-bold {
    overflow-wrap: break-word;
  }

  .fliesstext-p-bold, .fliesstext-p-bold.white, .fliesstext-rot, .fliesstext-rot.no-margin, .fliesstext-aufz-hlung, .fliesstext-aufz-hlung.white {
    font-size: 1.2em;
  }

  .split-left-wrapper {
    padding-left: 4vh;
    padding-right: 4vh;
  }

  .split-right-wrapper {
    padding-top: 80px;
    padding-left: 4vh;
    padding-right: 4vh;
  }

  .split-right-wrapper.no-margin {
    padding-right: 0;
  }

  .text-holder {
    width: 100%;
  }

  .h2-heading {
    font-size: 2.2em;
  }

  .fliesstext-p {
    font-size: 1.2em;
  }

  .fliesstext-p.red {
    word-break: break-all;
  }

  .fliesstext-p.is--grey.no-margin {
    font-size: 1.1em;
  }

  .information-icon-wrapper {
    width: 55px;
    top: 2vh;
    right: 3vh;
  }

  .big-red-wrapper {
    padding-left: 4vh;
    padding-right: 4vh;
  }

  .text-holder-big-red-section {
    width: 100%;
  }

  .footer {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding-top: 50px;
    padding-left: 5vh;
    padding-right: 5vh;
  }

  .abbinder-section {
    padding-left: 4vh;
    padding-right: 4vh;
  }

  .footer-logo-wrapper {
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-bottom: 25px;
  }

  .footer-text-wrapper {
    margin-left: 0;
  }

  .h3-heading {
    line-height: 1.1em;
  }

  .image-termine.contain {
    object-fit: contain;
  }
}


@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}