/* Breakpoints */
@keyframes fade-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-down {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mask-reveal {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.media__copy .media-headline {
  animation-name: fade-up, mask-reveal;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.media__main--dark .media__media::after {
  --stage-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 42%, rgba(0, 0, 0, 0.42) 57%, rgba(0, 255, 47, 0) 100%);
}
@media screen and (min-width: 768px) {
  .media__main--dark .media__media::after {
    --stage-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 60%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0) 100%);
  }
}
@media screen and (min-width: 1024px) {
  .media__main--dark .media__media::after {
    --stage-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 47%, rgba(0, 0, 0, 0.42) 63%, rgba(0, 0, 0, 0) 100%);
  }
}
@media screen and (min-width: 1440px) {
  .media__main--dark .media__media::after {
    --stage-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 45%, rgba(0, 0, 0, 0.42) 57%, rgba(0, 0, 0, 0) 100%);
  }
}
@media screen and (min-width: 1920px) {
  .media__main--dark .media__media::after {
    --stage-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 45%, rgba(0, 0, 0, 0.42) 57%, rgba(0, 0, 0, 0) 100%);
  }
}

.media__main--light .media__media::after {
  --stage-gradient:
  linear-gradient(
     180deg,
     rgba(255, 255, 255, 0.58) 0%,
     rgba(255, 255, 255, 0.58) 42%,
     rgba(255, 255, 255, 0.36) 57%,
     rgba(0, 255, 47, 0) 100%
   );
}
@media screen and (min-width: 768px) {
  .media__main--light .media__media::after {
    --stage-gradient:
    linear-gradient(
         90deg,
         rgba(255, 255, 255, 0.58) 0%,
         rgba(255, 255, 255, 0.58) 55%,
         rgba(255, 255, 255, 0.36) 75%,
         rgba(255, 255, 255, 0) 100%
       );
  }
}
@media screen and (min-width: 1024px) {
  .media__main--light .media__media::after {
    --stage-gradient:
    linear-gradient(
         90deg,
         rgba(255, 255, 255, 0.58) 0%,
         rgba(255, 255, 255, 0.58) 47%,
         rgba(255, 255, 255, 0.36) 63%,
         rgba(255, 255, 255, 0) 100%
       );
  }
}
@media screen and (min-width: 1440px) {
  .media__main--light .media__media::after {
    --stage-gradient:
    linear-gradient(
         90deg,
         rgba(255, 255, 255, 0.58) 0%,
         rgba(255, 255, 255, 0.58) 45%,
         rgba(255, 255, 255, 0.36) 57%,
         rgba(255, 255, 255, 0) 100%
       );
  }
}
@media screen and (min-width: 1920px) {
  .media__main--light .media__media::after {
    --stage-gradient:
    linear-gradient(
         90deg,
         rgba(255, 255, 255, 0.58) 0%,
         rgba(255, 255, 255, 0.58) 45%,
         rgba(255, 255, 255, 0.36) 57%,
         rgba(255, 255, 255, 0) 100%
       );
  }
}

.media__main, .media__content, .media__disclaimers-below {
  padding: 0 var(--grid-standard-margin);
}

.media__content {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-gap: var(--grid-standard-gutter);
}

.media {
  --stage-tooltip-color: var(--colors-interaction-interactive);
  --stage-tooltip-color-hover: var(--colors-interaction-hover-fg);
  --stage-tooltip-background: transparent;
  --stage-tooltip-background-hover: var(--colors-interaction-hover);
}
.media__wrapper {
  grid-row-gap: 0;
  position: relative;
  overflow-x: clip;
}
.media .tooltip__trigger .tooltip__icon {
  background-color: var(--stage-tooltip-background);
  color: var(--stage-tooltip-color);
}
.media .tooltip__trigger:active .tooltip__icon, .media .tooltip__trigger:focus .tooltip__icon, .media .tooltip__trigger:hover .tooltip__icon {
  background-color: var(--stage-tooltip-background-hover);
  color: var(--stage-tooltip-color-hover);
}
.media__main--light .media__media::after {
  --gradient: classic-dark;
  background: var(--stage-gradient);
}
@media screen and (min-width: 768px) {
  .media__main--light {
    --stage-tooltip-color: var(--colors-text-copy);
    --stage-tooltip-color-hover: var(--colors-text-copy);
  }
}
.media__main--dark {
  --colors-text-headline: rgba(255, 255, 255, 1);
  --colors-background-default: rgba(18, 20, 22, 1);
}
@media screen and (min-width: 768px) {
  .media__main--dark {
    --colors-text-copy: rgba(255, 255, 255, 1);
    --stage-tooltip-color: var(--colors-interaction-interactive-fg);
    --stage-tooltip-background-hover: var(--colors-interaction-hover-fg);
    --stage-tooltip-color-hover: var(--colors-interaction-hover);
  }
}
.media__main--dark .media__media::after {
  --gradient: classic-light;
  background: var(--stage-gradient);
}
.media__main--dark .media__header,
.media__main--dark .media__copy {
  color: var(--colors-text-headline);
}
@media screen and (min-width: 768px) {
  .media__main--dark .media__button.variant_primary {
    background-color: var(--colors-interaction-primary-fg);
    color: var(--colors-interaction-primary);
    border-color: var(--colors-interaction-primary-fg);
  }
  .media__main--dark .media__button.variant_primary .hover {
    background-color: var(--colors-interaction-primary-fg);
  }
  .media__main--dark .media__button.variant_primary .hover-icon {
    color: var(--colors-interaction-primary);
  }
}
@media screen and (min-width: 768px) {
  .media__main--dark .media__button.variant_secondary {
    background-color: transparent;
    color: var(--colors-interaction-primary-fg);
    border-color: var(--colors-interaction-primary-fg);
  }
  .media__main--dark .media__button.variant_secondary .hover {
    background-color: var(--colors-interaction-primary-fg);
  }
  .media__main--dark .media__button.variant_secondary .hover-icon {
    color: var(--colors-interaction-primary);
  }
}
.media__main--gradient-0 .media__media::after {
  opacity: 0;
}
.media__main--gradient-30 .media__media::after {
  opacity: 0.3;
}
.media__main--gradient-60 .media__media::after {
  opacity: 0.6;
}
.media__main--gradient-100 .media__media::after {
  opacity: 1;
}
.media .media__media::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}
.media__main {
  position: relative;
}
.media__main--fullwidth {
  padding-inline: unset;
}
.media [data-player=play] .media__copy {
  opacity: 0;
}
.media__content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: subgrid;
  pointer-events: none;
  z-index: 10;
}
.media__main--fullwidth .media__content {
  padding-inline: unset;
}
.media__content .media-headline,
.media__content .animated-facts__item {
  pointer-events: all;
}
.media__copy {
  z-index: 2;
  grid-column: 1/5;
  padding-block: var(--spacing-m);
  padding-inline: var(--spacer-9) 0;
  align-self: end;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.media__main--image.media__main--left-centered .media__copy {
  align-self: center;
}
.media__main--image.media__main--bottom .media__copy {
  align-self: end;
}
.media__main--hidden .media__copy {
  display: none;
}
.media__copy .media-headline .disclaimer-indicator {
  vertical-align: super;
  font-size: small;
}
.media__disclaimer {
  position: absolute;
  left: var(--grid-standard-margin);
  bottom: 0;
  z-index: 10;
}
.media__main--fullwidth .media__disclaimer {
  left: 0;
}
.media__disclaimer .disclaimer-indicator {
  --colors-background-default: rgba(18, 20, 22, 1);
  --colors-text-copy: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 26px;
  min-height: 26px;
  padding: 0 var(--spacer-3);
  color: var(--colors-text-copy);
  background-color: var(--colors-background-default);
}
.media__disclaimers-below .disclaimers-below__disclaimer {
  margin-top: var(--spacer-3);
}
.media__media {
  position: relative;
  z-index: 1;
}
.media__main--gradient-none .media__media::after {
  content: none;
}
@media screen and (min-width: 768px) {
  .media__main--bottom .media__media::after {
    transform: rotate(-90deg) scale(0.56, 1.78);
  }
}
.media__cookie-notification {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  background-image: linear-gradient(-180deg, rgba(100, 0, 0, 0), #999 90%);
}
.media__cookie-notification--hidden {
  display: none;
}
@media (min-width: 768px) {
  .media__cookie-notification {
    padding: 4rem 0;
  }
}
.media__cookie-container {
  background-color: white;
  padding-block: var(--spacer-4);
}
@media (min-width: 768px) {
  .media__cookie-container {
    padding-inline: var(--spacer-4);
    width: 450px;
  }
}
@media (min-width: 1024px) {
  .media__cookie-container {
    width: 550px;
  }
}
@media (min-width: 1440px) {
  .media__cookie-container {
    width: 650px;
  }
}
.media__cookie-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
@media (min-width: 768px) {
  .media__cookie-inner {
    gap: 35px;
  }
}
.media__cookie-svg {
  width: 32px;
  height: 32px;
}
@media (min-width: 768px) {
  .media__cookie-svg {
    width: 64px;
    height: 64px;
  }
}
.media__cookie-text {
  text-align: center;
}
.media__cookie-button .button {
  max-width: none;
}

.media__cookie-container {
  background-color: var(--colors-background-alternative);
  color: var(--colors-text-primary-highlight);
}