:root {
  --font-family-normal: "Montserrat", sans-serif;
  --font-family-serif: "Spectral", serif;

  --color-white: #fff;
  --color-black: #000;
  --color-gray-light: #f4f6f5;
  --color-blue: #157fe2;
  --color-green-light: #d3deda;
  --color-red: #ff9381;
  --color-yellow: #f9dc77;

  --grid-gutter: 1.25rem;
  --page-padding: 1.25rem;
  --vh-100: 100vh;
  --border-radius: 1.5rem;
  --header-height: 77px;

  --font-size-xxs: 0.75rem; /* 12px */
  --font-size-xs: 1rem; /* 16px */
  --font-size-s: 1rem; /* 20px */
  --font-size-m: 1.25rem; /* 28px */
  --font-size-l: 2rem; /* 40px */
  --font-size-xl: 2.5rem; /* 60px */
  --font-size-xxl: 3rem; /* 80px */
}

@media screen and (min-width: 700px) {
  :root {
    --border-radius: 2.5rem;

    --font-size-s: 1.25rem; /* 20px */
    --font-size-m: 1.75rem; /* 28px */
    --font-size-l: 2.5rem; /* 40px */
    --font-size-xl: 3.75rem; /* 60px */
    --font-size-xxl: 5rem; /* 112px */
  }
}

@media screen and (min-width: 1400px) {
  :root {
    --font-size-xxl: 7rem; /* 112px */
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-normal);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: var(--font-size-s);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  min-height: var(--vh-100);
}

.main {
  flex: 1;
}

.will-appear {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 800ms ease, transform 800ms ease;
}

.did-appear {
  opacity: 1;
  transform: scale(1);
}

.container {
  max-width: 1920px;
  margin: 0 auto;
}

.button {
  padding: 0.75rem 2rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: 1000px;
  display: inline-block;
  border: 1px solid var(--color-blue);
  transition: color 100ms ease, background-color 100ms ease;
}

.button--inverted {
  background-color: var(--color-white);
  color: var(--color-blue);
  border: 1px solid var(--color-white);
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-white);
    color: var(--color-blue);
  }

  .button--inverted:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
  }
}

/* Richtext */

.richtext a {
  color: var(--color-blue);
  transition: color 100ms ease;
}

@media (hover: hover) {
  .richtext a:hover {
    color: var(--color-black);
    text-decoration: underline;
  }
}

.richtext a[href^="tel:"]::before {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/images/icon-phone.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5rem;
}

.richtext a[href^="mailto:"]::before {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/images/icon-mail.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5rem;
}

.richtext strong {
  font-weight: bold;
}

.richtext p {
  margin-bottom: 1rem;
}

.richtext em,
.richtext i {
  font-style: italic;
}

.richtext h2 {
  font-family: var(--font-family-title);
  line-height: 0.85;
  text-transform: uppercase;
  font-size: var(--font-size-xl);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.richtext h3 {
  font-family: var(--font-family-title);
  line-height: 0.85;
  text-transform: uppercase;
  font-size: var(--font-size-l);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.richtext ul {
  list-style-type: disc;
  padding-left: 1em;
  margin-bottom: 1rem;
}

.richtext ol {
  list-style-type: decimal;
  padding-left: 1em;
  margin-bottom: 1rem;
}

.richtext p:last-child,
.richtext ul:last-child,
.richtext ol:last-child {
  margin-bottom: 0;
}

/* Responsive Image */

.responsive-image {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.responsive-image span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0ms ease;
}

.responsive-image.did-appear span {
  opacity: 0;
}

.responsive-image.contain span {
  background-size: contain;
}

.responsive-image img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0;
  transform: scale(1.1);
  transform-origin: center;
  transition: opacity 0ms ease, transform 0ms ease;
  will-change: opacity, transform;
}

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

.responsive-image.did-appear img {
  opacity: 1;
  transform: scale(1.001);
}

/* Accessability Classes */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  left: -10000px;
  top: auto;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  z-index: 999999;
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  width: auto;
  height: auto;
  line-height: normal;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 1rem 2rem;
  border-radius: 1000px;
  font-size: 1.25rem;
  border: 4px solid #ff7226;
}

/* Header */

.header {
  padding: var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: var(--font-size-xs);
  z-index: 2;
}

.header__logo-wrapper {
  max-width: 185px;
  display: block;
  z-index: 1;
}

.header__logo {
  width: 100%;
  display: block;
}

.header__navigation-trigger {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 2rem;
  height: 2rem;
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
}

.header__navigation-trigger:focus {
  outline: auto;
}

.header__navigation-trigger-icon {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--color-black);
  transition: background-color 100ms ease;
}

.header__navigation-trigger[aria-expanded="true"]
  .header__navigation-trigger-icon {
  background-color: transparent;
}

.header__navigation-trigger-icon::before,
.header__navigation-trigger-icon::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--color-black);
  transition: transform 100ms ease;
}

.header__navigation-trigger-icon::before {
  transform: translate3d(0, -7px, 0);
}

.header__navigation-trigger[aria-expanded="true"]
  .header__navigation-trigger-icon::before {
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.header__navigation-trigger-icon::after {
  transform: translate3d(0, 7px, 0);
}

.header__navigation-trigger[aria-expanded="true"]
  .header__navigation-trigger-icon::after {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.nav-main__list {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-white);
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.header__navigation-trigger[aria-expanded="true"] + .nav-main .nav-main__list {
  opacity: 1;
  pointer-events: auto;
}

.nav-main__link {
  font-size: var(--font-size-xl);
}

.header__button {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}

.header__button svg {
  width: 16px;
  margin-left: 0.5rem;
}

.header__button .header__clock,
.header__button .header__clock-arrow {
  transition: fill 100ms ease, stroke 100ms ease;
}

.header__button:hover .header__clock {
  fill: var(--color-blue);
}

.header__button:hover .header__clock-arrow {
  stroke: var(--color-white);
}

@media (hover: hover) {
  .nav-main__link:hover {
    text-decoration: underline;
  }
}

@media screen and (min-width: 800px) {
  .nav-main__link--skip {
    display: none;
  }

  .nav-main__link {
    padding-left: 1.5rem;
    font-size: var(--font-size-xs);
  }

  .header__button {
    margin: 0 0 0 1rem;
  }

  .header__navigation-trigger {
    display: none;
  }

  .nav-main__list {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    flex-direction: row;
    justify-content: flex-end;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Footer */

.footer {
  background-color: var(--color-gray-light);
  padding: 3.75rem var(--page-padding) calc(var(--page-padding) / 2);
  font-size: var(--font-size-xxs);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.footer__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__nav ul {
  display: flex;
}

.footer__link {
  margin-left: 1.25rem;
}

@media (hover: hover) {
  .footer__link:hover {
    text-decoration: underline;
  }
}

/* Intro */

.intro {
  min-height: var(--vh-100);
  background-color: var(--color-white);
}

.intro .container {
  z-index: 1;
  position: relative;
}

.intro__decoration {
  position: sticky;
  bottom: 100%;
}

.intro__decoration-circle {
  width: 100vw;
  height: 100vw;
  position: absolute;
  left: 30%;
  top: 0;
  background-color: var(--color-green-light);
  border-radius: 50%;
  filter: blur(50px);
  transform: translate3d(-50%, -50%, 0);
}

.intro__claim {
  padding: 25vh var(--page-padding);
  text-align: center;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-xxl);
  line-height: 1.1;
  margin: 0 auto;
}

.intro__cards {
  padding-top: 25vh;
  margin-bottom: -30vh;
}

.intro__card-wrapper {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: calc(50vh);
  padding: var(--page-padding);
  padding-bottom: 20vh;
  overflow: hidden;
  transform: translate3d(
    0,
    calc(var(--card-offset) * -1 - 25% - calc(var(--intro-progress) * 20px)),
    0
  );
}

.intro__card {
  width: 100%;
  max-width: 930px;
  border-radius: var(--border-radius);
  background-color: var(--color-blue);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
}

.intro__card-wrapper:nth-child(1) .intro__card {
  transform: scale(calc(1 - calc(var(--intro-progress) * 0.2)));
}

.intro__card-wrapper:nth-child(2) .intro__card {
  transform: scale(calc(1.05 - calc(var(--intro-progress) * 0.2)));
}

.intro__card-wrapper:nth-child(3) .intro__card {
  transform: scale(calc(1.1 - calc(var(--intro-progress) * 0.2)));
}

.intro__card-wrapper:nth-child(4) .intro__card {
  transform: scale(calc(1.15 - calc(var(--intro-progress) * 0.2)));
}

.intro__card-wrapper:nth-child(2n) .intro__card {
  background-color: var(--color-gray-light);
  color: var(--color-black);
}

.intro__card-header {
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.intro__card-wrapper:nth-child(2n) .intro__card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.intro__card-count {
  padding-top: 5px;
}

.intro__card-title {
  flex: 1;
  padding-left: 1rem;
  font-size: var(--font-size-l);
  line-height: 1.1;
  font-family: var(--font-family-serif);
}

.intro__card-icon {
  display: none;
}

.intro__card-wrapper:nth-child(2n) .intro__card-icon path {
  fill: var(--color-blue);
}

.intro__card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.intro__card-text {
  flex: 1;
  margin-bottom: 2rem;
}

.intro__card-link {
  align-self: flex-end;
}

@media screen and (min-width: 700px) {
  .intro__decoration-circle {
    width: 80vw;
    height: 80vw;
  }

  .intro__claim {
    max-width: 75%;
    padding: 33vh var(--page-padding);
  }

  .intro__cards {
    margin-bottom: 0;
  }

  .intro__card-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: row;
    flex: 1;
  }

  .intro__card-count {
    padding-top: 10px;
  }

  .intro__card-icon {
    display: block;
    width: 31px;
  }

  .intro__card-header {
    padding: 2.5rem;
  }

  .intro__card-title {
    padding: 0 3.75rem;
    font-size: var(--font-size-xl);
  }

  .intro__card-text {
    flex: 1;
    margin-right: 2rem;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1024px) {
  .intro__decoration-circle {
    width: 80vh;
    height: 80vh;
  }
}

/* Text Image Component */

.text-image {
  padding: 10rem var(--page-padding);
}

.text-image__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--grid-gutter);
  align-items: center;
}

.text-image__title {
  grid-column: span 12;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-xxl);
  line-height: 1.1;
  margin-bottom: 2rem;
}

.text-image__text {
  grid-column: span 12;
  font-size: var(--font-size-m);
  line-height: 1.3;
}

.text-image__image {
  grid-column: span 12;
  overflow: hidden;
  border-radius: var(--border-radius);
  margin-bottom: 2rem;
}

.text-image__overlay-trigger {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  font-size: var(--font-size-m);
  font-family: var(--font-family-normal);
  position: relative;
  display: inline-block;
  padding: 0 1rem;
  color: var(--color-white);
  cursor: pointer;
  transition: color 100ms ease;
}

@media (hover: hover) {
  .text-image__overlay-trigger:hover {
    color: var(--color-blue);
  }
}

.text-image__overlay-trigger::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-blue);
  border-radius: 1000px;
  z-index: -1;
  transform: translate3d(0, -50%, 0);
  border: 1px solid var(--color-blue);
  transition: background-color 100ms ease;
}

@media (hover: hover) {
  .text-image__overlay-trigger:hover::before {
    background-color: var(--color-white);
  }
}

@media screen and (min-width: 700px) {
  .text-image__title {
    margin-bottom: 3rem;
  }
  .text-image__image {
    grid-column-start: 2;
    grid-column-end: 12;
  }

  .text-image__text {
    grid-column-start: 2;
    grid-column-end: 12;
    font-size: var(--font-size-m);
    line-height: 1.3;
  }
}

@media screen and (min-width: 1024px) {
  .text-image__title {
    margin-bottom: 5.5rem;
  }

  .text-image__image {
    grid-column-start: 8;
    grid-column-end: 13;
    grid-row-start: 2;
  }

  .state--image .text-image__text {
    grid-column-start: 1;
    grid-column-end: 8;
  }
}

@media screen and (min-width: 1400px) {
  .text-image__title {
    grid-column: span 7;
  }

  .state--image .text-image__text {
    grid-column-start: 2;
    grid-column-end: 7;
  }
  .text-image__image {
    grid-column-end: 12;
  }
}

/* Overlays */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vh-100);
  overflow: hidden;
  z-index: 3;
  visibility: hidden;
  pointer-events: none;
}

.overlay.state--overlay-open {
  visibility: visible;
  pointer-events: auto;
}

.overlay__background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-blue);
  opacity: 0;
  transition: opacity 200ms ease;
}

.overlay.state--overlay-open .overlay__background {
  opacity: 0.9;
}

.overlay__close-trigger {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-white);
  border: none;
  position: absolute;
  top: var(--page-padding);
  right: var(--page-padding);
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 200ms ease;
}

.overlay.state--overlay-open .overlay__close-trigger {
  opacity: 0.9;
}

.overlay__close-trigger::before,
.overlay__close-trigger::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background-color: var(--color-black);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 200ms ease;
}

.overlay__close-trigger::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.overlay__close-trigger::after {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.overlay__close-trigger:hover::before {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.overlay__close-trigger:hover::after {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.overlay__inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  overflow: auto;
  padding-top: 6rem;
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 100%, 0);
  transition: transform 200ms ease;
}

.overlay.state--overlay-open .overlay__inner {
  transform: translate3d(0, 0, 0);
}

.overlay__content {
  flex: 1;
  background-color: var(--color-white);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  padding: 4rem var(--page-padding);
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--grid-gutter);
}

.overlay__title {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-xl);
  margin-bottom: 3rem;
}

.overlay__image {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 2rem;
}

.overlay__title,
.overlay__image,
.overlay__text {
  grid-column: span 12;
}

.overlay__text--top {
  margin-bottom: 2rem;
}

@media screen and (min-width: 700px) {
  .overlay__title,
  .overlay__image,
  .overlay__text {
    grid-column-start: 2;
    grid-column-end: 12;
  }
}

@media screen and (min-width: 1024px) {
  .overlay__title,
  .overlay__image,
  .overlay__text {
    grid-column-start: 3;
    grid-column-end: 11;
  }
}

@media screen and (min-width: 1400px) {
  .overlay__title,
  .overlay__image,
  .overlay__text {
    grid-column-start: 4;
    grid-column-end: 10;
  }
}

/* Teaser List */

.teaser-list {
  position: relative;
  min-height: calc(var(--vh-100) - var(--header-height));
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
}

.teaser-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background-color: var(--color-white);
  z-index: 1;
}

.teaser-list__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.teaser-list__background-inner {
  position: sticky;
  top: 0;
  height: calc(var(--vh-100));
  max-height: 100%;
  background-color: var(--color-gray-light);
  overflow: hidden;
}

.teaser-list__background-circle {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -90%, 0);
  width: 50vw;
  height: 50vw;
  background-color: var(--color-blue);
  filter: blur(50px);
  border-radius: 50%;
}

.teaser-list__grid {
  flex: 1;
  position: relative;
  z-index: 1;
  border-left: var(--page-padding) solid var(--color-white);
  border-right: var(--page-padding) solid var(--color-white);
  display: flex;
  flex-direction: column;
}

.teaser-list__title-wrapper {
  grid-column: span 12;
  overflow: hidden;
}

.teaser-list__title {
  border: var(--border-radius) solid white;
  border-radius: calc(var(--border-radius) + calc(var(--border-radius) / 2));
  width: calc(100% + calc(var(--border-radius) * 2));
  transform: translate3d(
    calc(var(--border-radius) * -1),
    calc(var(--border-radius) * -1),
    0
  );
  margin-bottom: calc(var(--border-radius) * -1);

  padding: 5rem var(--page-padding);
}

.teaser-list__title::after {
  content: "";
  height: var(--border-radius);
  width: 100%;
  position: absolute;
  bottom: calc(var(--border-radius) * -1);
  left: 0;
  background-color: var(--color-white);
}

.teaser-list__title-word {
  display: inline-block;
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 0.5rem 1.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 10000px;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-l);
}

.teaser-list__list {
  background-color: var(--color-white);
  flex: 1;
}

.teaser-list__teaser {
  border-bottom: 1px solid #e4eae8;
  padding: 0.625rem 0;
  display: grid;
  gap: 0 var(--grid-gutter);
  grid-template-columns: repeat(12, 1fr);
  align-items: flex-start;
}

.teaser-list__teaser:last-child {
  border-bottom: none;
}

.teaser-list__teaser-title {
  grid-column: span 11;
  font-family: var(--font-family-serif);
  line-height: 1.1;
  font-size: var(--font-size-xl);
}

.teaser-list__teaser-count {
  font-family: var(--font-family-serif);
  line-height: 1.1;
  font-size: var(--font-size-xl);
}

.teaser-list__teaser-claim {
  grid-column: span 10;
}

.teaser-list__teaser-text {
  grid-column: span 12;
  margin-top: 3rem;
  font-size: var(--font-size-xs);
}

.teaser-list__teaser-trigger {
  width: 2rem;
  height: 2rem;
  background-color: var(--color-blue);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  justify-self: flex-end;
}

.teaser-list__teaser-trigger::before,
.teaser-list__teaser-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  background-color: var(--color-white);
  transition: transform 100ms ease;
}

.teaser-list__teaser-trigger::before {
  width: 1px;
  height: 0.75rem;
}

.teaser-list__teaser-trigger::after {
  height: 1px;
  width: 0.75rem;
}

@media (hover: hover) {
  .teaser-list__teaser-trigger:hover::before,
  .teaser-list__teaser-trigger:hover::after {
    transform: translate3d(-50%, -50%, 0) scale(1.2);
  }
}

@media screen and (min-width: 700px) {
  .teaser-list__teaser-claim {
    grid-column-start: 3;
    grid-column-end: 12;
  }

  .teaser-list__teaser-text {
    padding-top: 5.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .teaser-list__background {
    width: 50%;
  }

  .teaser-list__background-circle {
    width: 50vh;
    height: 50vh;
    top: 50%;
    left: 0;
    transform: translate3d(-50%, -50%, 0);
  }

  .teaser-list__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border: none;
    align-items: flex-start;
  }

  .teaser-list__title-wrapper {
    grid-column: span 5;
    position: sticky;
    top: var(--header-height);
    overflow: visible;
  }

  .teaser-list__title {
    display: flex;
    align-items: center;
    height: calc(
      var(--vh-100) - var(--header-height) + calc(var(--border-radius) * 2)
    );

    border-radius: 0 calc(var(--border-radius) + calc(var(--border-radius) / 2))
      calc(var(--border-radius) + calc(var(--border-radius) / 2)) 0;
  }

  .teaser-list__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-white);
    transform: translate3d(0, -100%, 0);
  }

  .teaser-list__list {
    height: 100%;
    grid-column: span 7;
    padding: 0 var(--page-padding) var(--border-radius);
  }

  .teaser-list__teaser-claim {
    grid-column-start: 3;
    grid-column-end: 12;
  }
}

@media screen and (min-width: 1400px) {
  .teaser-list__teaser-claim {
    grid-column-start: 7;
  }

  .teaser-list__teaser-text {
    grid-column-start: 7;
    grid-column-end: 13;
  }

  .teaser-list__title-word {
    font-size: var(--font-size-xl);
  }
}

/* Teaser List Compact */

.teaser-list-compact {
  margin-bottom: 5rem;
}

.teaser-list-compact__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
  padding: 0 var(--page-padding);
}

.teaser-list-compact__teaser {
  grid-column: span 12;
  background: linear-gradient(
    to left,
    var(--color-green-light),
    var(--color-gray-light)
  );
  border-radius: calc(var(--border-radius) / 2);
  padding: var(--page-padding);
  display: flex;
  align-items: flex-start;
}

.teaser-list-compact__claim {
  align-self: center;
  padding: 1.75rem 5rem;
  flex: 1;
}

.teaser-list-compact__teaser:nth-child(2n) {
  background: linear-gradient(
    to left,
    var(--color-gray-light),
    var(--color-green-light)
  );
}

@media screen and (min-width: 1024px) {
  .teaser-list-compact {
    margin-bottom: 10rem;
  }

  .teaser-list-compact__teaser {
    grid-column: span 6;
  }
}

@media screen and (min-width: 1400px) {
  .teaser-list-compact__claim-inner {
    display: inline-block;
    max-width: 75%;
  }
}

/* Image Grid */

.image-grid {
  margin-bottom: 5rem;
}

.image-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
  padding: 0 var(--page-padding);
}

.image-grid__image {
  grid-column: span 3;
  border-radius: var(--border-radius);
  overflow: hidden;
}

@media screen and (min-width: 700px) {
  .image-grid__image {
    grid-column: span 1;
  }
}

/* Testimonial Slider */

.testimonial {
  padding: 0 var(--page-padding);
  overflow: hidden;
  margin-bottom: 5rem;
}

.testimonial__slider .swiper {
  overflow: visible;
}

.testimonial__slider .swiper-slide {
  height: auto;
}

.testimonial__slider-card {
  padding: 2.5rem;
  background-color: var(--color-gray-light);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial__slider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.75rem;
}

.testimonial__slider-count {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-xl);
}

.testimonial__slider-icon {
  display: inline-block;
  width: 2rem;
}

.testimonial__slider-text {
  flex: 1;
  margin-bottom: 6rem;
}

.testimonial__slider-name {
  font-size: var(--font-size-xs);
}

.testimonial__slider-buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.testimonial__slider-button {
  position: relative;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-blue);
  border-radius: 50%;
  margin-left: 0.75rem;
  cursor: pointer;
  border: 1px solid var(--color-blue);
  transition: background-color 100ms ease;
}

.testimonial__slider-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--color-white);
  transform: rotate(0deg);
  transform: translate3d(-40%, -50%, 0);
}

.testimonial__slider-button--prev::after {
  transform: translate3d(-60%, -50%, 0) rotate(180deg);
}

@media (hover: hover) {
  .testimonial__slider-button:hover {
    background-color: var(--color-white);
  }

  .testimonial__slider-button:hover::after {
    border-color: transparent transparent transparent var(--color-blue);
  }
}