:root {
  --contentblock-blue: #5889f1;
  --contentblock-pink: #ec0b5d;
  --contentblock-pink-light: #f24c82;
  --contentblock-pink-dark: #bd0b4d;
  --contentblock-pink-gradient-end: #f0447f;
  --contentblock-orange: #f9781d;
  --contentblock-orange-light: #ffae56;
  --contentblock-yellow: #ffc21b;
  --contentblock-cyan: #44c8f5;
  --contentblock-cyan-light: #63dbfc;
  --contentblock-green: #1de08f;
  --contentblock-anthrazit: #3c3c3b;
  --contentblock-white: #ffffff;
}

.contentblock-hero {
  position: relative;
  overflow: hidden;
}

.contentblock-desktop-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  pointer-events: none;
}

.contentblock-desktop-menu .containerheader {
  pointer-events: auto;
}

.contentblock-hero #caseclip {
  display: block;
}

.contentblock-typography {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  left: clamp(28px, 5vw, 100px);
  bottom: clamp(50px, 8vw, 105px);
  width: min(650px, 42vw);
  min-height: 0;
  transform: scale(0.81);
  transform-origin: bottom left;
  pointer-events: none;
}

.contentblock-block {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  min-height: clamp(54px, 4.8vw, 68px);
  padding: 8px clamp(18px, 1.8vw, 36px);
  border-radius: 6px;
  background: var(--contentblock-white);
  color: var(--contentblock-anthrazit);
  font-family: faricy-new-web, Arial, sans-serif;
  font-size: clamp(1.7rem, 2.7vw, 3.35rem);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

.contentblock-block--top {
  z-index: 4;
  left: 0;
  margin-bottom: -10px;
}

.contentblock-typography .contentblock-block--top,
.contentblock-typography .contentblock-block--bottom {
  background: linear-gradient(90deg, var(--contentblock-pink), var(--contentblock-pink-dark));
  background-size: 115% 100%;
  background-position: left center;
  color: var(--contentblock-white);
}

.contentblock-block--highlighted {
  z-index: 5;
  left: 28px;
  margin-top: -10px;
  margin-bottom: -10px;
  background: linear-gradient(90deg, var(--contentblock-orange), var(--contentblock-yellow));
  background-size: 115% 100%;
  background-position: left center;
  color: var(--contentblock-white);
  box-shadow: 0 5px 12px rgba(60, 60, 59, 0.22);
}

.contentblock-block > span {
  display: inline-block;
  opacity: 0;
}

.contentblock-block--bottom {
  z-index: 2;
  left: 0;
  margin-top: -10px;
}

.contentblock-block.is-visible {
  animation: contentblock-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.contentblock-block.is-visible > span {
  animation: contentblock-text-enter 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}

.contentblock-block--highlighted.is-highlighted {
  opacity: 1;
  background: linear-gradient(90deg, var(--contentblock-orange), var(--contentblock-yellow));
  background-size: 115% 100%;
  background-position: left center;
  color: var(--contentblock-white);
}

@keyframes contentblock-enter {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes contentblock-text-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 800px) {
  .contentblock-typography {
    left: 20px;
    bottom: 20px;
    width: calc(100% - 40px);
    transform: scale(0.81);
  }

  .contentblock-block {
    min-height: 42px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: clamp(1.05rem, 5.3vw, 1.5rem);
    line-height: 1.08;
    white-space: normal;
  }

  .contentblock-block--top {
    left: 0;
    margin-bottom: -5px;
  }

  .contentblock-block--highlighted {
    left: 12px;
    margin-top: -5px;
    margin-bottom: -5px;
  }

  .contentblock-block--bottom {
    left: 0;
    margin-top: -5px;
  }

}

.contentblock-content-typography {
  --contentblock-content-base: var(--contentblock-pink);
  --contentblock-content-highlight: var(--contentblock-pink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 620px);
}

.contentblock-content-block {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(46px, 3.8vw, 58px);
  padding: 1px clamp(8px, 0.8vw, 16px);
  border-radius: 6px;
  background: var(--contentblock-content-base);
  color: var(--contentblock-white);
  font-family: faricy-new-web, Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.2rem;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  white-space: nowrap;
}

.contentblock-content-block--top {
  z-index: 2;
  margin-bottom: -5px;
}

.contentblock-content-block--highlighted {
  z-index: 3;
  left: 0;
  margin-top: -5px;
  margin-bottom: -5px;
  background: var(--contentblock-content-highlight);
  color: var(--contentblock-white);
}

.contentblock-content-block--bottom {
  z-index: 2;
  margin-top: -5px;
}

.contentblock-content-block > span {
  display: inline-block;
  opacity: 0;
}

.contentblock-content-block.is-visible {
  animation: contentblock-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.contentblock-content-block.is-visible > span {
  animation: contentblock-text-enter 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}

.contentblock-content-block--highlighted.is-highlighted {
  opacity: 1;
}

@media (max-width: 800px) {
  .contentblock-content-typography {
    width: 100%;
  }

  .contentblock-content-block {
    min-height: 46px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: clamp(1.2rem, 5.5vw, 1.65rem);
    line-height: 1.15;
    white-space: nowrap;
  }

  .contentblock-content-block--highlighted {
    left: 0;
    margin-top: -5px;
    margin-bottom: -5px;
  }

  .contentblock-content-block--bottom {
    margin-top: -5px;
  }

  .contentblock-content-block--top {
    border-radius: 6px 6px 0 0;
  }

  .contentblock-content-block--bottom {
    border-radius: 0 0 6px 6px;
  }

  .contentblock-content-block--top {
    margin-bottom: -5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contentblock-block,
  .contentblock-block.is-visible,
  .contentblock-block--highlighted.is-highlighted,
  .contentblock-content-block,
  .contentblock-content-block.is-visible,
  .contentblock-content-block--highlighted.is-highlighted {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .contentblock-block > span,
  .contentblock-block.is-visible > span,
  .contentblock-content-block > span,
  .contentblock-content-block.is-visible > span {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .contentblock-block--highlighted,
  .contentblock-block--highlighted.is-highlighted {
    background: linear-gradient(90deg, var(--contentblock-orange), var(--contentblock-yellow));
    background-size: 115% 100%;
    background-position: left center;
    color: var(--contentblock-white);
  }

  .contentblock-content-block--highlighted,
  .contentblock-content-block--highlighted.is-highlighted {
    background: var(--contentblock-content-highlight);
  }
}

.contentblock-content-block,
.contentblock-content-block--highlighted,
.contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-pink);
  background-image: linear-gradient(90deg, var(--contentblock-pink-dark), var(--contentblock-pink));
  background-size: 33.333% 100%;
  background-position: left center;
  background-repeat: no-repeat;
}

.contentblock-typography .contentblock-block,
.contentblock-typography .contentblock-block--highlighted,
.contentblock-typography .contentblock-block--highlighted.is-highlighted {
  left: 0;
  background-color: var(--contentblock-pink);
  background-image: linear-gradient(90deg, var(--contentblock-pink-dark), var(--contentblock-pink));
  background-size: var(--contentblock-stage-gradient-length, 33.333%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  box-shadow: none;
}

.contentblock-typography--apotheke,
.contentblock-content-typography--apotheke {
  --contentblock-apotheke-green-dark: #94b57c;
  --contentblock-apotheke-green-light: #a6cf75;
  --contentblock-apotheke-gradient-extra: clamp(12px, 1.5vw, 24px);
}

.contentblock-typography--apotheke .contentblock-block,
.contentblock-typography--apotheke .contentblock-block--highlighted,
.contentblock-typography--apotheke .contentblock-block--highlighted.is-highlighted {
  background-color: var(--contentblock-apotheke-green-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-apotheke-green-dark),
    var(--contentblock-apotheke-green-light)
  );
  background-size: calc(
    var(--contentblock-stage-gradient-length, 33.333%) + var(--contentblock-apotheke-gradient-extra, 0px)
  ) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-content-typography--apotheke .contentblock-content-block,
.contentblock-content-typography--apotheke .contentblock-content-block--highlighted,
.contentblock-content-typography--apotheke .contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-apotheke-green-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-apotheke-green-dark),
    var(--contentblock-apotheke-green-light)
  );
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-typography--surseepark,
.contentblock-content-typography--surseepark {
  --contentblock-surseepark-color-dark: #628fba;
  --contentblock-surseepark-color-light: #6f9cc8;
  --contentblock-surseepark-gradient-extra: clamp(12px, 1.5vw, 24px);
}

.contentblock-typography--surseepark .contentblock-block,
.contentblock-typography--surseepark .contentblock-block--highlighted,
.contentblock-typography--surseepark .contentblock-block--highlighted.is-highlighted {
  background-color: var(--contentblock-surseepark-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-surseepark-color-dark),
    var(--contentblock-surseepark-color-light)
  );
  background-size: calc(
    var(--contentblock-stage-gradient-length, 33.333%) + var(--contentblock-surseepark-gradient-extra, 0px)
  ) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-content-typography--surseepark .contentblock-content-block,
.contentblock-content-typography--surseepark .contentblock-content-block--highlighted,
.contentblock-content-typography--surseepark .contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-surseepark-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-surseepark-color-dark),
    var(--contentblock-surseepark-color-light)
  );
  background-size: 33.333% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-typography--techlearn,
.contentblock-content-typography--techlearn {
  --contentblock-techlearn-blue-dark: #0786c5;
  --contentblock-techlearn-blue-light: #35b3ea;
}

.contentblock-typography--techlearn .contentblock-block,
.contentblock-typography--techlearn .contentblock-block--highlighted,
.contentblock-typography--techlearn .contentblock-block--highlighted.is-highlighted {
  background-color: var(--contentblock-techlearn-blue-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-techlearn-blue-dark),
    var(--contentblock-techlearn-blue-light)
  );
  background-size: var(--contentblock-stage-gradient-length, 33.333%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-content-typography--techlearn .contentblock-content-block,
.contentblock-content-typography--techlearn .contentblock-content-block--highlighted,
.contentblock-content-typography--techlearn .contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-techlearn-blue-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-techlearn-blue-dark),
    var(--contentblock-techlearn-blue-light)
  );
  background-size: 33.333% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-typography--netze,
.contentblock-content-typography--netze {
  --contentblock-netze-color-dark: #f29a00;
  --contentblock-netze-color-light: #ffb718;
}

.contentblock-typography--netze .contentblock-block,
.contentblock-typography--netze .contentblock-block--highlighted,
.contentblock-typography--netze .contentblock-block--highlighted.is-highlighted {
  background-color: var(--contentblock-netze-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-netze-color-dark),
    var(--contentblock-netze-color-light)
  );
  background-size: var(--contentblock-stage-gradient-length, 33.333%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-content-typography--netze .contentblock-content-block,
.contentblock-content-typography--netze .contentblock-content-block--highlighted,
.contentblock-content-typography--netze .contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-netze-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-netze-color-dark),
    var(--contentblock-netze-color-light)
  );
  background-size: 33.333% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-typography--chur-unihockey,
.contentblock-content-typography--chur-unihockey {
  --contentblock-chur-color-dark: #1a1a1a;
  --contentblock-chur-color-light: #30302f;
}

.contentblock-content-typography--chur-unihockey {
  --contentblock-chur-content-red-dark: #a5121a;
  --contentblock-chur-content-red: #e30613;
}

.contentblock-typography--chur-unihockey .contentblock-block,
.contentblock-typography--chur-unihockey .contentblock-block--highlighted,
.contentblock-typography--chur-unihockey .contentblock-block--highlighted.is-highlighted {
  background-color: var(--contentblock-chur-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-chur-color-dark),
    var(--contentblock-chur-color-light)
  );
  background-size: var(--contentblock-stage-gradient-length, 33.333%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-content-typography--chur-unihockey .contentblock-content-block,
.contentblock-content-typography--chur-unihockey .contentblock-content-block--highlighted,
.contentblock-content-typography--chur-unihockey .contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-chur-content-red);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-chur-content-red-dark),
    var(--contentblock-chur-content-red)
  );
  background-size: 33.333% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-typography--hcdavos,
.contentblock-content-typography--hcdavos {
  --contentblock-hcdavos-color-dark: #f29a00;
  --contentblock-hcdavos-color-light: #ffc21b;
}

.contentblock-typography--hcdavos .contentblock-block,
.contentblock-typography--hcdavos .contentblock-block--highlighted,
.contentblock-typography--hcdavos .contentblock-block--highlighted.is-highlighted {
  background-color: var(--contentblock-hcdavos-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-hcdavos-color-dark),
    var(--contentblock-hcdavos-color-light)
  );
  background-size: var(--contentblock-stage-gradient-length, 33.333%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-content-typography--hcdavos .contentblock-content-block,
.contentblock-content-typography--hcdavos .contentblock-content-block--highlighted,
.contentblock-content-typography--hcdavos .contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-hcdavos-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-hcdavos-color-dark),
    var(--contentblock-hcdavos-color-light)
  );
  background-size: 33.333% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-typography--spenglercup,
.contentblock-content-typography--spenglercup {
  --contentblock-spengler-color-dark: #1aa7d9;
  --contentblock-spengler-color-light: #44c8f5;
}

.contentblock-typography--spenglercup .contentblock-block,
.contentblock-typography--spenglercup .contentblock-block--highlighted,
.contentblock-typography--spenglercup .contentblock-block--highlighted.is-highlighted {
  background-color: var(--contentblock-spengler-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-spengler-color-dark),
    var(--contentblock-spengler-color-light)
  );
  background-size: var(--contentblock-stage-gradient-length, 33.333%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}

.contentblock-content-typography--spenglercup .contentblock-content-block,
.contentblock-content-typography--spenglercup .contentblock-content-block--highlighted,
.contentblock-content-typography--spenglercup .contentblock-content-block--highlighted.is-highlighted {
  background-color: var(--contentblock-spengler-color-light);
  background-image: linear-gradient(
    90deg,
    var(--contentblock-spengler-color-dark),
    var(--contentblock-spengler-color-light)
  );
  background-size: 33.333% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  color: var(--contentblock-white);
}