@font-face {
  font-family: "Display Zahlen";
  font-style: normal;
  font-display: swap;
  src: url("fonts/9x9_Zahlen-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter var";
  font-style: "normal";
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/Inter.var.woff2") format("woff2");
}

.smTypo {
  font-size: calc(var(--baseFontSize) * 0.8);
}

.smDigit {
  font-family: "Display Zahlen";
  font-size: calc(var(--baseFontSize) * 2);
}

.bigDigit {
  font-family: "Display Zahlen";
  font-size: calc(var(--baseFontSize) * 3.5);
  line-height: 0.9;
}

.hugeTypeBU {
  font-variation-settings: "wght" var(--boldWeight), "slnt" 0;
  font-size: calc(var(--baseFontSize) * 4);
  letter-spacing: -5;
  line-height: 1;
  /*

    */
}

.hugeType {
  font-family: "Display Zahlen";
  font-size: calc(var(--baseFontSize) * 4);
  letter-spacing: -5;
  line-height: 1.1;
}

.abstand {
  margin-bottom: 0px;
}

.bigshadow {
  text-shadow: 1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black,
    4px 4px 0px black, 5px 5px 0px black, 6px 6px 0px black, 7px 7px 0px black,
    8px 8px 0px black, 9px 9px 0px black, 10px 10px 0px black;
  transform: translateY(60%);
}
.mediumTypeBU {
  font-variation-settings: "wght" var(--boldWeight), "slnt" 0;
  font-size: calc(var(--baseFontSize) * 2);

  text-shadow: 1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black,
    4px 4px 0px black, 5px 5px 0px black;
}

.mediumType {
  font-family: "Display Zahlen";
  font-size: calc(var(--baseFontSize) * 2);

  text-shadow: 1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black,
    4px 4px 0px black, 5px 5px 0px black;
}

.red {
  color: magenta;
}

.blue {
  color: #00bdff;
}
.bold {
  font-variation-settings: "wght" var(--boldWeight), "slnt" 0;
}

.gold {
  background-image: linear-gradient(
    45deg,
    #fccb00 0%,
    #fffad1 25%,
    #c89516 60%,
    #f1dc8d 87%,
    #fffad1 100%
  );
  background-size: 100% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: saturate(2);
  transform: translateY(-40%);
  opacity: 0;
}

.rutschRauf {
  transform: translateY(-90%);
}