:root {
  --paragraph: #333d4c;
  --headline: #181a1d;
  --max-container-width: 1280px;
  --padding-space-desktop: 2.5rem;
  --padding-space-tablet: 2rem;
  --padding-space-mobile: 1.5rem;
  --border-radius-s: .25rem;
  --waku-blau: #3471cb;
  --white: white;
  --waku-blau-hover: #29589e;
  --button-outline-focused: #254b85;
  --blue-tint-2: #d7e3f6;
  --blue-tint-3: #c3d2ea;
  --blue-tint-4: #b6c8e3;
  --waku-rot: #d43e0c;
  --blue-tint-1: #ebf1fa;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: var(--paragraph);
  font-family: Redhattext, sans-serif;
  font-size: 1rem;
  line-height: 150%;
}

h1 {
  color: var(--headline);
  letter-spacing: -.05rem;
  max-width: 20ch;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Redhatdisplay, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 110%;
}

h2 {
  color: var(--headline);
  letter-spacing: -.05rem;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Redhatdisplay, sans-serif;
  font-size: 2.125rem;
  font-weight: 800;
  line-height: 110%;
}

h3 {
  color: var(--headline);
  letter-spacing: -.025rem;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Redhatdisplay, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 110%;
}

h4 {
  color: var(--headline);
  letter-spacing: -.025rem;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Redhatdisplay, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 120%;
}

h5 {
  color: var(--headline);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Redhatdisplay, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 120%;
}

h6 {
  color: var(--headline);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Redhatdisplay, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 120%;
}

p {
  max-width: 55ch;
  margin-bottom: 0;
}

a {
  color: var(--headline);
  font-family: Redhatdisplay, sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
}

a:hover {
  color: #333d4cb3;
}

ul {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 2rem;
  padding-left: 2rem;
  display: flex;
}

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.section.top-space {
  padding-top: 2.5rem;
  overflow: hidden;
}

.section.hidden {
  display: none;
}

.section.tilt-space, .section.relative {
  position: relative;
}

.section.footer-space {
  padding-top: 2.5rem;
}

.container {
  max-width: var(--max-container-width);
  padding-right: var(--padding-space-desktop);
  padding-left: var(--padding-space-desktop);
}

.container.centered {
  perspective: 2000px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.flex-wrap {
  perspective: 1000px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.flex-wrap.vertical {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}

.right-overlap {
  background-color: #ebf1fa;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 84%;
  margin-left: -16%;
  padding: 10rem 2.5rem 10rem 22.5%;
  display: flex;
  position: relative;
}

._3-4-image {
  z-index: 1;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 32%;
  position: relative;
}

.content-wrap {
  perspective: 1000px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.button {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border-radius: var(--border-radius-s);
  background-color: var(--waku-blau);
  color: var(--white);
  text-transform: none;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  padding: .75rem 1.25rem .75rem 1rem;
  font-family: Redhatdisplay, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s cubic-bezier(.075, .82, .165, 1);
  display: flex;
}

.button:hover {
  background-color: var(--waku-blau-hover);
  color: var(--white);
  transform: scale(1);
}

.button:active {
  background-color: var(--button-outline-focused);
  transform: scale(.975);
}

.button:focus-visible {
  border: 2px solid var(--button-outline-focused);
}

.button[data-wf-focus-visible] {
  border: 2px solid var(--button-outline-focused);
}

.button.secondary {
  background-color: var(--blue-tint-2);
  color: var(--waku-blau);
}

.button.secondary:hover {
  background-color: var(--blue-tint-3);
}

.button.secondary:active {
  background-color: var(--blue-tint-4);
}

.button.secondary:focus-visible {
  border-color: var(--blue-tint-4);
}

.button.secondary[data-wf-focus-visible] {
  border-color: var(--blue-tint-4);
}

.button.s {
  padding: .5rem .75rem;
}

.button.inverted {
  background-color: var(--white);
  color: var(--waku-blau);
  max-width: none;
}

.button.icon-right {
  padding-left: 1.25rem;
  padding-right: 1rem;
}

.image-2 {
  z-index: 0;
  width: 84%;
  position: absolute;
  top: -90.375px;
  right: 0;
}

.paragraph-s {
  font-size: .875rem;
}

.topline {
  color: var(--waku-rot);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Redhatmono, sans-serif;
  font-size: .875rem;
  font-weight: 600;
}

.topline.space-h2 {
  margin-bottom: .5rem;
}

.topline.space-h1 {
  margin-bottom: 1rem;
}

.bold {
  color: var(--headline);
  font-weight: 600;
}

.bold.no-break {
  flex: none;
}

.bold.space-subpoint {
  margin-bottom: 1rem;
}

.nav-wrap {
  max-width: var(--max-container-width);
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: .75rem 2.5rem;
  display: flex;
}

.nav-link-wrapper {
  grid-column-gap: 1.75rem;
  grid-row-gap: 1.75rem;
  align-items: center;
  display: flex;
}

.nav-link {
  color: var(--headline);
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
}

.nav-link:hover {
  color: #333d4cb3;
}

.navigation {
  z-index: 999;
  background-color: var(--white);
  position: sticky;
  inset: 0% 0% auto;
}

.button-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: flex;
}

.button-wrap.space-slider {
  perspective: 1000px;
  margin-bottom: 1.5rem;
}

.centered {
  text-align: center;
}

.centered.space-botton-large {
  margin-bottom: 1.5rem;
}

._16-9-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

._16-9-image.top-space {
  margin-top: 3rem;
}

.service-wrap {
  grid-column-gap: 6rem;
  grid-row-gap: 2rem;
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
  grid-auto-columns: 1fr;
  display: grid;
}

.service-card {
  flex-flow: column;
  display: flex;
}

.bottom-space {
  margin-bottom: 3rem;
}

.cta-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: var(--waku-blau);
  perspective: 1000px;
  color: var(--white);
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 4rem;
  display: flex;
  transform: none;
}

.inverted {
  color: var(--white);
}

.inverted.max-width {
  max-width: 17ch;
}

.h-space-p {
  margin-bottom: .75rem;
}

.space-button {
  margin-bottom: 1.75rem;
}

.h1-space-p {
  margin-bottom: 1rem;
}

.masonry-grid {
  column-count: 3;
  column-gap: 1rem;
}

.testimonial-cell {
  background-color: var(--blue-tint-1);
  margin-bottom: 1rem;
  padding: 2rem;
}

.space-p {
  color: var(--paragraph);
  margin-bottom: 1rem;
}

.check-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  display: flex;
}

.check-wrap.space-button {
  grid-column-gap: 1.5rem;
  grid-row-gap: .5rem;
}

.pill {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.space-pill {
  margin-bottom: 1.5rem;
}

.slider-overlay {
  z-index: 1;
  background-image: linear-gradient(90deg, var(--white), transparent 0%, transparent 85%, var(--white));
  pointer-events: none;
  display: block;
  position: absolute;
  inset: 0%;
}

.slider-overlay.mirrored {
  background-image: linear-gradient(90deg, white, var(--white) 0%, transparent 15%, transparent);
  pointer-events: none;
}

.logos-partner {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  max-width: 60%;
  display: none;
}

.head-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: flex;
}

.head-wrap.h-space-p {
  justify-content: flex-start;
  align-items: center;
}

.place-holder-icon {
  background-color: var(--blue-tint-1);
  width: 32px;
  height: 24px;
}

.img-tilted {
  background-image: url('../images/dachkante_waku_blau_1.svg');
  background-position: 0 0;
  background-size: cover;
  width: 100%;
  height: 5vw;
  margin-bottom: -1px;
}

.svg-icon {
  width: 20px;
  height: 20px;
}

.svg-icon.l {
  width: 32px;
  height: 32px;
}

.svg-icon.l.space-bottom {
  margin-bottom: 2rem;
}

.svg-icon.quer {
  width: 22px;
  height: 22px;
}

.h4 {
  letter-spacing: -.01rem;
  font-size: 1.375rem;
}

.footer-wrap {
  max-width: var(--max-container-width);
  border-top: 1px #c3d2ea24;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  display: flex;
}

.link-wrap {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  color: var(--white);
  display: flex;
}

.link-block-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.brand {
  width: 180px;
}

.tilt-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.icon-wrap {
  position: relative;
}

.icon-absolute {
  position: absolute;
}

.icon-absolute.l {
  z-index: 1;
  width: 36px;
  height: 36px;
  top: -5px;
  left: -9px;
}

.image-4 {
  z-index: -1;
  max-width: 30%;
  position: absolute;
  inset: 59% -7% 0% auto;
}

.pattern-parallax {
  z-index: -1;
  opacity: .3;
  max-width: 16%;
  position: absolute;
  top: 242.398px;
  left: -24px;
}

.pattern-parallax.b {
  max-width: 10%;
  inset: 4% 0% 0% auto;
}

.div-block-3 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  display: flex;
}

.marquee-2 {
  grid-column-gap: 1rem;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.marquee-content-2 {
  grid-column-gap: 1rem;
  flex: none;
  justify-content: space-around;
  min-width: 100%;
  display: flex;
}

.anchor {
  position: absolute;
  inset: -50px auto auto 0%;
}

.anchor.large {
  top: -100px;
}

.hidden {
  display: none;
}

.space-h2, .space-h3 {
  margin-bottom: 2rem;
}

.long-p {
  max-width: 100%;
}

.long-p.space-h3 {
  margin-bottom: 2.5rem;
}

.long-p.space-h2 {
  margin-bottom: 3rem;
}

.long-p.space-p {
  margin-bottom: 1rem;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.blue {
  color: var(--waku-blau);
}

.space-link {
  color: var(--paragraph);
  margin-bottom: .25rem;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 2.5rem;
  }

  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .section.top-space {
    padding-top: 1.5rem;
  }

  .section.tilt-space {
    padding-top: 5rem;
  }

  .section.footer-space {
    padding-top: 1.25rem;
  }

  .container {
    padding-right: var(--padding-space-tablet);
    padding-left: var(--padding-space-tablet);
    max-width: 100%;
  }

  .right-overlap {
    margin-left: -16%;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  .image-2 {
    top: -70.375px;
  }

  .topline.space-h1 {
    margin-bottom: .5rem;
  }

  .nav-wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .nav-link-wrapper {
    display: none;
  }

  .button-wrap.space-slider {
    margin-bottom: 2rem;
  }

  .centered.space-botton-large {
    margin-bottom: 1.25rem;
  }

  ._16-9-image.top-space {
    margin-top: 2.5rem;
  }

  .service-wrap {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
  }

  .cta-wrap {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-bottom: 2.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .inverted {
    max-width: none;
  }

  .h1-space-p {
    margin-bottom: .75rem;
  }

  .masonry-grid {
    column-count: 2;
  }

  .logos-partner {
    max-width: 75%;
  }

  .footer-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .link-wrap {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .link-block-wrap {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .image-4 {
    max-width: 40%;
    display: none;
    top: auto;
    bottom: -7%;
    right: -2%;
  }

  .pattern-parallax {
    max-width: 30%;
    display: none;
    top: 256.398px;
    left: -63px;
  }

  .pattern-parallax.b {
    max-width: 20%;
    right: -9%;
  }

  .marquee-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 2.125rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .section.top-space {
    padding-top: 1.5rem;
  }

  .section.tilt-space {
    margin-top: 0;
    padding-top: 2.5rem;
  }

  .section.footer-space {
    padding-top: 0;
  }

  .container {
    padding-right: var(--padding-space-mobile);
    padding-left: var(--padding-space-mobile);
  }

  .flex-wrap {
    flex-flow: column;
  }

  .right-overlap {
    width: 100%;
    margin-top: -3rem;
    margin-left: 0;
    padding: 5rem 1.5rem 1.5rem;
  }

  ._3-4-image {
    width: calc(100% - 3rem);
  }

  .image-2 {
    width: 100%;
    display: none;
    top: auto;
    bottom: 413.312px;
    right: auto;
  }

  ._16-9-image.top-space {
    margin-top: 2rem;
  }

  .service-wrap {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: minmax(200px, 1fr);
  }

  .bottom-space {
    margin-bottom: 1.5rem;
  }

  .cta-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    padding: 1.5rem;
  }

  .masonry-grid {
    column-count: 1;
  }

  .testimonial-cell {
    padding: 1.5rem;
  }

  .logos-partner {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: column;
    width: 100%;
    max-width: 100%;
  }

  .head-wrap.h-space-p {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .place-holder-icon {
    width: 24px;
    height: 16px;
  }

  .footer-wrap {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: wrap;
    padding-top: 2.5rem;
    padding-left: 0;
    padding-right: 0;
  }

  .link-wrap {
    flex-flow: wrap;
  }

  .brand {
    width: 132px;
  }

  .icon-absolute.l {
    width: 24px;
    height: 24px;
    left: -6px;
  }

  .image-4 {
    max-width: 55%;
    top: 5%;
    right: -2%;
  }

  .pattern-parallax {
    max-width: 46%;
    display: none;
    inset: -2% auto auto -35px;
  }

  .pattern-parallax.b, .marquee-image.hide-mobile {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .container {
    max-width: 100%;
  }

  ._3-4-image {
    box-shadow: none;
  }

  .button {
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: .5rem;
    padding-bottom: .5rem;
    display: flex;
  }

  .button.inverted {
    width: 100%;
  }

  .image-2 {
    top: 412px;
    bottom: auto;
  }

  .button-wrap {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: column;
    width: 100%;
  }

  .button-wrap.space-slider {
    margin-bottom: 1rem;
  }

  .cta-wrap {
    padding-top: 1.5rem;
  }

  .testimonial-cell {
    padding: 1.5rem;
  }

  .space-p {
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .pattern-parallax {
    max-width: 50%;
  }

  .pattern-parallax.b {
    max-width: 35%;
  }
}


@font-face {
  font-family: 'Redhatmono';
  src: url('../fonts/RedHatMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Redhatdisplay';
  src: url('../fonts/RedHatDisplay-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Redhatdisplay';
  src: url('../fonts/RedHatDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Redhattext';
  src: url('../fonts/RedHatText-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Redhattext';
  src: url('../fonts/RedHatText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Redhatdisplay';
  src: url('../fonts/RedHatDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}