@font-face {
  font-family: "Open Sans";
  font-weight: 300 800;
  font-stretch: 75% 100%;
  /* Original-Datei: OpenSans[wdth,wght].ttf */
  src: url("opensans.ttf") format("truetype-variations");
}
/* Kursiv wird nicht verwendet im Spiel */
/* @font-face {
  font-family: "Open Sans";
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  src: url("OpenSans-Italic[wdth,wght].ttf") format("truetype-variations");
} */

*,
::after,
::before {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  touch-action: none; /* pan-x pan-y; */
  width: 100%;
  height: 100%;
  background-color: black;
  /* Pull to Refresh auf Andoid ausmachen */
  overscroll-behavior: contain;
  /* Scroll Bounce auf Ios ausmachen */
  overflow: hidden;
}
img {
  display: block;
  height: auto;
  border-style: none;
}
b,
strong {
  font-weight: 600;
}
h1,
h2 {
  margin: 0 0 calc(var(--kunit) * 3) 0;
  font-stretch: 80%;
  white-space: nowrap;
}
p {
  margin: 0 0 calc(var(--kunit) * 3) 0;
  white-space: nowrap;
}
#app {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.gamecontainer {
  position: absolute;
  width: calc(var(--kunit) * 100);
  height: calc(var(--kunit) * 150);
  font-size: calc(var(--kunit) * 3.3);
  /* Nach der Drehung wieder mittig anzeigen */
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  line-height: 1.2em;
  line-height: calc(var(--kunit) * 5);
  font-family: "Open Sans";
}
.gamecontainer > div:not(.background) {
  /* Die Sprites nach dem Screendesign ausrichten */
  /* opacity: 0.2; */
}

/* BACKGROUND */
.background__image {
  position: absolute;
  left: calc(var(--kunit) * -30);
  top: calc(var(--kunit) * -45);
  width: calc(var(--kunit) * 160);
  height: calc(var(--kunit) * 240);
}

/* AUDIOPLAYER */
.audioplayer__debug {
  background-color: #1a3c32;
  position: relative;
  padding: calc(var(--kunit) * 2);
  width: calc(var(--kunit) * 40);
  color: white;
  z-index: 200;
}

/* DIALOGUE */
.dialogue {
  position: absolute;
  top: calc(var(--kunit) * 121);
  left: calc(var(--kunit) * 50);
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  overflow: hidden;
  transition: width 0.2s, height 0.2s;
}
.dialogue--small {
  /* kleinere Dialogbox */
  top: calc(var(--kunit) * 140);
}
.dialogue--medium {
  /* mittlere Dialogbox */
  top: calc(var(--kunit) * 131);
}
.dialogue--visible {
  width: calc(var(--kunit) * 107);
  height: calc(var(--kunit) * 80);
}
.dialogue--visible.dialogue--small {
  height: calc(var(--kunit) * 45);
}
.dialogue--visible.dialogue--medium {
  height: calc(var(--kunit) * 57);
}

.dialogue__inner {
  width: 100%;
  height: calc(100% - var(--kunit) * 10);
  padding: calc(var(--kunit) * 12) calc(var(--kunit) * 14);
  background-image: url(../components/dialogue/display-big.svg);
  background-size: 100% 100%;
  /* User dürfen nichts markieren und z.B. übersetzen */
  user-select: none;
}
.dialogue--small .dialogue__inner {
  background-image: url(../components/dialogue/display-small.svg);
}
.dialogue--medium .dialogue__inner {
  background-image: url(../components/dialogue/display-medium.svg);
}

.dialogue__inner--quizsolved {
  background-image: url(../components/dialogue/display-correct.svg);
}
.dialogue__text {
  margin-bottom: calc(var(--kunit) * 2);
  text-shadow: 0 0 calc(var(--kunit) * 1) #00d178;
  color: #00d178;
}
.dialogue__verticalspacer {
  margin-bottom: calc(var(--kunit) * 2);
}
.dialogue__buttongroup {
  display: inline-block;
  position: relative;
  background-color: #7e2300;
  border-radius: calc(var(--kunit) * 4);
  margin-bottom: calc(var(--kunit) * 1);
  padding: calc(var(--kunit) * 0.5) 0;
}
.dialogue__button,
.dialogue__button::before,
.dialogue__button::after {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.dialogue__button {
  position: relative;
  color: #6d0700;
  padding-right: calc(var(--kunit) * 0.2);
  line-height: calc(var(--kunit) * 7);
  background-image: url(../components/dialogue/button-middle-inactive.svg);
  /* background-size: contain; */
  margin-left: calc(var(--kunit) * 4);
  margin-right: calc(var(--kunit) * 4);
  height: calc(var(--kunit) * 7);
  min-width: calc(var(--kunit) * 7);
  text-align: center;
  font-size: calc(var(--kunit) * 2.8);
  font-weight: 600;
}
.dialogue__button + .dialogue__button {
  margin-left: calc(var(--kunit) * 3);
}
.dialogue__button::before {
  background-image: url(../components/dialogue/button-front-inactive.svg);
  left: calc(var(--kunit) * -3.8);
  background-position: top right;
}
.dialogue__button::after {
  background-image: url(../components/dialogue/button-back-inactive.svg);
  right: calc(var(--kunit) * -3.8);
  background-position: top left;
}
.dialogue__button::before,
.dialogue__button::after {
  content: " ";
  position: absolute;
  /* background-size: contain; */
  top: 0;
  width: calc(var(--kunit) * 4);
  height: calc(var(--kunit) * 7);
  background-repeat: no-repeat;
}
.dialogue__button--clicked {
  color: #e2894e;
  background-image: url(../components/dialogue/button-middle-active.svg);
}
.dialogue__button--clicked::before {
  background-image: url(../components/dialogue/button-front-active.svg);
}
.dialogue__button--clicked::after {
  background-image: url(../components/dialogue/button-back-active.svg);
}
.dialogue__button--animation {
  animation: dialoguebuttonanimation 0.5s linear;
}
@keyframes dialoguebuttonanimation {
  0% {
    scale: 1;
  }
  20% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}

.dialogue__quizwrong {
  position: absolute;
  top: calc(var(--kunit) * 0);
  left: calc(var(--kunit) * 5);
  width: calc(var(--kunit) * 50);
  height: calc(var(--kunit) * 12);
  padding: calc(var(--kunit) * 1);
  background-image: url(../components/dialogue/tiny-display.svg);
  background-size: contain;
  background-repeat: no-repeat;
  line-height: calc(var(--kunit) * 10);
  text-align: center;
  color: #00d178;
  font-weight: 600;
  text-shadow: 0 0 calc(var(--kunit) * 1) #00d178;
}

/* START */
.start__sprite {
  position: absolute;
}
.start__elementc {
  top: calc(var(--kunit) * 3);
  left: calc(var(--kunit) * -1);
  width: calc(var(--kunit) * 6);
  box-shadow: 0 0 calc(var(--kunit) * 1) #00d178;
  animation: startc 3s infinite;
  transform-origin: calc(var(--kunit) * 3) calc(var(--kunit) * -3);
}
@keyframes startc {
  0% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}
.start__elementcl {
  top: calc(var(--kunit) * 76);
  left: calc(var(--kunit) * 56);
  width: calc(var(--kunit) * 9);
}
.start__elementh {
  display: none;
}
.start__elementhe {
  top: calc(var(--kunit) * 80);
  left: calc(var(--kunit) * 2);
  width: calc(var(--kunit) * 15);
}
.start__elementn {
  display: none;
}
.start__elementna {
  top: calc(var(--kunit) * 88);
  left: calc(var(--kunit) * 104);
  width: calc(var(--kunit) * 6);
}
.start__elemento {
  top: calc(var(--kunit) * 63);
  left: calc(var(--kunit) * 93);
  width: calc(var(--kunit) * 6);
  box-shadow: 0 0 calc(var(--kunit) * 1) #00d178;
  animation: starto 9s linear infinite;
}
@keyframes starto {
  100% {
    transform: rotate(360deg);
  }
}

.start__logo {
  top: calc(var(--kunit) * 10);
  left: calc(var(--kunit) * 10);
  width: calc(var(--kunit) * 79);
}
.start__spaceship {
  top: calc(var(--kunit) * 60);
  left: calc(var(--kunit) * -20);
  width: calc(var(--kunit) * 26);
  animation: startspaceship 10s linear infinite;
  transform-origin: calc(var(--kunit) * 44) calc(var(--kunit) * 20);
}
@keyframes startspaceship {
  100% {
    transform: rotate(360deg);
  }
}
.start__schrotti {
  top: calc(var(--kunit) * 76);
  left: calc(var(--kunit) * 62);
  width: calc(var(--kunit) * 32);
  animation: startschrotti 7s infinite;
  transform-origin: calc(var(--kunit) * 3) calc(var(--kunit) * -3);
}
@keyframes startschrotti {
  0% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}

.start__warningmessage {
  position: absolute;
  top: calc(var(--kunit) * 50);
  left: calc(var(--kunit) * 8);
  width: calc(var(--kunit) * 54);
  height: calc(var(--kunit) * 15);
  animation: startwarningmessage 7s infinite;
  /* Drehpunkt festlegen */
  transform-origin: calc(var(--kunit) * 52) calc(var(--kunit) * 2);
  background-image: url(../components/start/warning.svg);
  background-size: contain;
  background-repeat: no-repeat;
  color: black;
  text-shadow: 0 0 calc(var(--kunit) * 1) #00d178;
  text-align: center;
  padding-top: calc(var(--kunit) * 2);
}
@keyframes startwarningmessage {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

/* LEVELSELECT */
.levelselect__level {
  position: absolute;
}
.levelselect__level--button {
  animation: levelselectblinker 4s linear infinite;
}
@keyframes levelselectblinker {
  90% {
    scale: 1;
  }
  95% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}
.levelselect__level--0 {
  top: calc(var(--kunit) * 32);
  left: calc(var(--kunit) * 36);
  width: calc(var(--kunit) * 20);
}
.levelselect__level--1 {
  top: calc(var(--kunit) * 38);
  left: calc(var(--kunit) * 12);
  width: calc(var(--kunit) * 31);
  animation-delay: 0.1s;
}
.levelselect__level--2 {
  top: calc(var(--kunit) * 82);
  left: calc(var(--kunit) * 22);
  width: calc(var(--kunit) * 30);
  animation-delay: 0.2s;
}
.levelselect__level--3 {
  top: calc(var(--kunit) * 79);
  left: calc(var(--kunit) * 40);
  width: calc(var(--kunit) * 30);
  animation-delay: 0.1s;
}
.levelselect__level--4 {
  top: calc(var(--kunit) * 74);
  left: calc(var(--kunit) * -3);
  width: calc(var(--kunit) * 29);
  animation-delay: 0.2s;
}
.levelselect__schrotti {
  position: absolute;
  top: calc(var(--kunit) * 52);
  left: calc(var(--kunit) * -100);
  width: calc(var(--kunit) * 40);
  height: auto;
  display: block;
  opacity: 0;
  transition: left 1s, opacity 1s;
}
.levelselect__schrotti--visible {
  left: calc(var(--kunit) * 59);
  opacity: 1;
}

/* SIGN */
.sign__abort {
  position: absolute;
  top: calc(var(--kunit) * 0.9);
  left: calc(var(--kunit) * 0.2);
  width: calc(var(--kunit) * 13.3);
  height: calc(var(--kunit) * 13.3);
  opacity: 0;
  transition: opacity 0.2s;
}
.sign__abort--visible {
  opacity: 1;
}

.sign__spaceship {
  position: absolute;
  top: calc(var(--kunit) * -200);
  left: calc(var(--kunit) * 2);
  width: calc(var(--kunit) * 60);
  height: auto;
  opacity: 0;
  transition: top 2s;
}
.sign__spaceship--visible {
  opacity: 1;
}
.sign__spaceship--landed {
  top: calc(var(--kunit) * 14);
}
.sign__flames {
  position: absolute;
  top: calc(var(--kunit) * -123);
  left: calc(var(--kunit) * 17);
  width: calc(var(--kunit) * 30);
  height: calc(var(--kunit) * 53);
  opacity: 0;
  transition: top 2s;
  background-image: url("../components/sign/flames.svg");
  background-size: 800%;
  animation: signflames 0.3s infinite;
  animation-timing-function: steps(7);
}
@keyframes signflames {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 100%;
  }
}
.sign__flames--visible {
  opacity: 1;
}
.sign__flames--landed {
  top: calc(var(--kunit) * 91);
}
.sign__schrotti {
  position: absolute;
  top: calc(var(--kunit) * 47);
  left: calc(var(--kunit) * -100);
  width: calc(var(--kunit) * 40);
  height: auto;
  display: block;
  opacity: 0;
  transition: left 1s, opacity 1s;
}
.sign__schrotti--visible {
  left: calc(var(--kunit) * 52);
  opacity: 1;
}

/* LESSON */
.lesson__schrotti {
  position: absolute;
  top: calc(var(--kunit) * 61);
  left: calc(var(--kunit) * -100);
  width: calc(var(--kunit) * 40);
  height: auto;
  display: block;
  opacity: 0;
  transition: left 1s, opacity 1s;
}
.lesson__schrotti--visible {
  left: calc(var(--kunit) * 58);
  opacity: 1;
}
.lesson__periodic {
  position: absolute;
  top: calc(var(--kunit) * 5);
  left: calc(var(--kunit) * -6);
  width: calc(var(--kunit) * 112);
}
.lesson__periodiclevel {
  /* Grüne Elemente, die bei geschafften Leveln über den roten liegen */
  position: absolute;
  top: calc(var(--kunit) * 5);
  left: calc(var(--kunit) * -6);
  width: calc(var(--kunit) * 112);
}

.lesson__periodicselector {
  position: absolute;
  top: calc(var(--kunit) * 51);
  left: calc(var(--kunit) * 1);
}
.lesson__periodicselectorbutton {
  display: inline-block;
  padding: calc(var(--kunit) * 3);
  color: transparent;
  user-select: none;
  z-index: 1;
  position: relative;
}
.lesson__slingshoterror {
  position: absolute;
  top: calc(var(--kunit) * 33);
  left: calc(var(--kunit) * 30);
  width: calc(var(--kunit) * 40);
  height: calc(var(--kunit) * 13);
  opacity: 0;
  transition: opacity 0.5s;
  background-image: url(../components/lesson/slingshot-wrong.svg);
  background-size: contain;
  background-repeat: no-repeat;
  line-height: calc(var(--kunit) * 12);
  text-align: center;
  font-weight: 600;
  text-shadow: 0 0 calc(var(--kunit) * 1) #00d178;
}
.lesson__slingshoterror--visible {
  opacity: 1;
}

/* SLINGSHOT */
.slingshot__mount {
  position: absolute;
  top: calc(var(--kunit) * 62.5);
  left: calc(var(--kunit) * -5);
  width: calc(var(--kunit) * 110);
}
.slingshot__fingerarea {
  /* Der Touch-Bereich */
  z-index: 10;
  position: absolute;
  top: calc(var(--kunit) * 73);
  left: calc(var(--kunit) * 0);
  width: calc(var(--kunit) * 100);
  height: calc(var(--kunit) * 25);
}
.slingshot__fingerarea--visible {
  background-color: #ffffff80;
}
.slingshot__cursor {
  /* Der Kreis auf dem Periodensystem, wo wir hinzielen */
  position: absolute;
  width: calc(var(--kunit) * 10);
  height: calc(var(--kunit) * 10);
  background-image: url(../components/slingshot/crosshairs.svg);
  background-size: 100% 100%;
  display: none;
}
.slingshot__cursor--tighten {
  display: block;
}
.slingshot__scrap {
  position: absolute;
  width: calc(var(--kunit) * 2);
}
/* .slingshot__scrap--hit {
  display: block;
} */
.slingshot__arrow {
  position: absolute;
  width: calc(var(--kunit) * 5);
}
.slingshot__arrow--idle {
  /* Der Pfeil ist in der Mitte */
  top: calc(var(--kunit) * 65);
  left: calc(var(--kunit) * 47.5);
  animation: slingshotblink 2s infinite both;
}
@keyframes slingshotblink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.slingshot__arrow--shot {
  transition: left 1s, top 1s, transform 1s;
  transform: rotate(720deg);
}
.slingshot__arrow--hit {
  /* Wenn der Pfeil eingeschlagen ist, wird nur der eingeschlagene Pfeil gezeigt. */
  display: none;
}
.slingshot__arrowarm {
  position: absolute;
  /* 10 Einheiten über der Toucharea */
  top: calc(var(--kunit) * 63);
}
.slingshot__arrowarm--left {
  background: linear-gradient(
    to top right,
    transparent calc(50% - var(--kunit) * 0.7),
    black,
    transparent calc(50% + var(--kunit) * 0.7)
  );
  left: 0;
}
.slingshot__arrowarm--right {
  background: linear-gradient(
    to top left,
    transparent calc(50% - var(--kunit) * 0.7),
    black,
    transparent calc(50% + var(--kunit) * 0.7)
  );
  right: 0;
}
.slingshot__arrowarm--idle {
  /* Arme zur Schraube */
  width: calc(var(--kunit) * 50);
  height: calc(var(--kunit) * 20);
  animation: slingshotblink 2s infinite both;
}

/* STATION */
.station__stationwrapper {
  transform: rotate(11deg);
}
.station__stationwrapper--rotating {
  animation: stationrotating 10s linear infinite;
  transform-origin: calc(var(--kunit) * 55) calc(var(--kunit) * 55);
}
@keyframes stationrotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.station__main {
  position: absolute;
  top: calc(var(--kunit) * 19);
  left: calc(var(--kunit) * 38);
  width: calc(var(--kunit) * 20);
}
.station__main--button {
  animation: stationblinker 2s linear infinite;
}
@keyframes stationblinker {
  90% {
    scale: 1;
  }
  95% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}
.station__module {
  position: absolute;
  width: calc(var(--kunit) * 20);
}
.station__module--0 {
  top: calc(var(--kunit) * 24);
  left: calc(var(--kunit) * 18);
  transform: rotate(90deg);
}
.station__module--1 {
  top: calc(var(--kunit) * 44);
  left: calc(var(--kunit) * 18);
  transform: rotate(90deg);
}
.station__module--2 {
  top: calc(var(--kunit) * 64);
  left: calc(var(--kunit) * 38);
}
.station__module--3 {
  top: calc(var(--kunit) * 23);
  left: calc(var(--kunit) * 58);
  transform: rotate(-90deg);
}
.station__module--4 {
  top: calc(var(--kunit) * 44);
  left: calc(var(--kunit) * 58);
  transform: rotate(-90deg);
}
.station__tunnel {
  position: absolute;
  width: calc(var(--kunit) * 8);
}
.station__tunnel--0 {
  top: calc(var(--kunit) * 31);
  left: calc(var(--kunit) * 34);
  transform: rotate(90deg);
}
.station__tunnel--1 {
  top: calc(var(--kunit) * 51);
  left: calc(var(--kunit) * 34);
  transform: rotate(90deg);
}
.station__tunnel--2 {
  top: calc(var(--kunit) * 61);
  left: calc(var(--kunit) * 44);
}
.station__tunnel--3 {
  top: calc(var(--kunit) * 31);
  left: calc(var(--kunit) * 54);
  transform: rotate(-90deg);
}
.station__tunnel--4 {
  top: calc(var(--kunit) * 51);
  left: calc(var(--kunit) * 54);
  transform: rotate(-90deg);
}
.station__schrotti {
  position: absolute;
  top: calc(var(--kunit) * 62);
  left: calc(var(--kunit) * 45);
  width: calc(var(--kunit) * 45);
  transform: rotate(12deg);
}
.station__spaceship {
  position: absolute;
  top: calc(var(--kunit) * 7);
  left: calc(var(--kunit) * 38);
  width: calc(var(--kunit) * 20);
  transition: top 3s;
  transition-timing-function: ease-in;
}
.station__spaceship--started {
  top: calc(var(--kunit) * -93);
}
.station__flames {
  position: absolute;
  top: calc(var(--kunit) * 24);
  left: calc(var(--kunit) * 41);
  width: calc(var(--kunit) * 13);
  height: 0;
  opacity: 0;
  transition: top 3s, opacity 0.5s;
  transition-timing-function: ease-in;
  background-image: url("../components/station/flames.svg");
  background-size: 800%;
  animation: stationflames 0.3s infinite;
  animation-timing-function: steps(7);
}
@keyframes stationflames {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 100%;
  }
}
.station__flames--started {
  top: calc(var(--kunit) * -76);
  opacity: 1;
  /* Die Flammen sollen die Schaltfläche vom Lager nicht verdecken.
  Daher jetzt erst anzeigen. */
  height: calc(var(--kunit) * 23);
}

/* STATION BUILDER */
.stationbuilder__planet {
  position: absolute;
  top: calc(var(--kunit) * 101);
  left: calc(var(--kunit) * -126);
  width: calc(var(--kunit) * 200);
  animation: stationbuilderplanet 100s linear infinite;
}
@keyframes stationbuilderplanet {
  100% {
    transform: rotate(360deg);
  }
}
.stationbuilder__main {
  position: absolute;
  top: calc(var(--kunit) * 19);
  left: calc(var(--kunit) * 34);
  width: calc(var(--kunit) * 33);
}
.stationbuilder__module {
  position: absolute;
  width: calc(var(--kunit) * 33);
}
.stationbuilder__module--0 {
  top: calc(var(--kunit) * 27);
  left: calc(var(--kunit) * 1);
  transform: rotate(90deg);
}
.stationbuilder__module--1 {
  top: calc(var(--kunit) * 60);
  left: calc(var(--kunit) * 1);
  transform: rotate(90deg);
}
.stationbuilder__module--2 {
  top: calc(var(--kunit) * 93);
  left: calc(var(--kunit) * 33);
}
.stationbuilder__module--3 {
  top: calc(var(--kunit) * 27);
  left: calc(var(--kunit) * 67);
  transform: rotate(-90deg);
}
.stationbuilder__module--4 {
  top: calc(var(--kunit) * 60);
  left: calc(var(--kunit) * 67);
  transform: rotate(-90deg);
}
.stationbuilder__module--button {
  animation: stationbuilderblinker 3s linear infinite;
}
@keyframes stationbuilderblinker {
  85% {
    opacity: 1;
  }
  90% {
    opacity: 0;
    scale: 1;
  }
  95% {
    opacity: 1;
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}
.stationbuilder__tunnel {
  position: absolute;
  width: calc(var(--kunit) * 14);
}
.stationbuilder__tunnel--0 {
  top: calc(var(--kunit) * 38);
  left: calc(var(--kunit) * 27);
  transform: rotate(90deg);
}
.stationbuilder__tunnel--1 {
  top: calc(var(--kunit) * 72);
  left: calc(var(--kunit) * 27);
  transform: rotate(90deg);
}
.stationbuilder__tunnel--2 {
  top: calc(var(--kunit) * 88);
  left: calc(var(--kunit) * 43);
}
.stationbuilder__tunnel--3 {
  top: calc(var(--kunit) * 38);
  left: calc(var(--kunit) * 60);
  transform: rotate(-90deg);
}
.stationbuilder__tunnel--4 {
  top: calc(var(--kunit) * 72);
  left: calc(var(--kunit) * 60);
  transform: rotate(-90deg);
}
.stationbuilder__schrotti {
  position: absolute;
  top: calc(var(--kunit) * 83);
  left: calc(var(--kunit) * 56);
  width: calc(var(--kunit) * 45);
}
.stationbuilder__spaceship {
  position: absolute;
  top: calc(var(--kunit) * 0);
  left: calc(var(--kunit) * 32);
  width: calc(var(--kunit) * 36);
}

/* MAINNAV */
.mainnav__hamburger {
  position: absolute;
  top: calc(var(--kunit) * 0.9);
  right: calc(var(--kunit) * 0.2);
  width: calc(var(--kunit) * 13.3);
  height: calc(var(--kunit) * 13.3);
  background-image: url(../components/mainnav/menu-button-2.svg);
  background-size: 100% 100%;
}
.mainnav__background {
  z-index: 100;
  position: absolute;
  left: calc(var(--kunit) * -30);
  top: calc(var(--kunit) * -45);
  width: calc(var(--kunit) * 160);
  height: calc(var(--kunit) * 240);
}

.mainnav__button {
  z-index: 101;
  position: absolute;
  animation: mainnavblinker 4s linear infinite;
}
.mainnav__button--back {
  top: calc(var(--kunit) * 22);
  width: calc(var(--kunit) * 50);
  left: calc(var(--kunit) * 58);
  animation-delay: 0.1s;
}
.mainnav__button--credits {
  top: calc(var(--kunit) * 42);
  width: calc(var(--kunit) * 22);
  left: calc(var(--kunit) * 0);
  animation-delay: 0.3s;
}
.mainnav__button--contact {
  top: calc(var(--kunit) * 82);
  width: calc(var(--kunit) * 30);
  left: calc(var(--kunit) * -5);
  animation-delay: 0.4s;
}
.mainnav__button--privacy {
  top: calc(var(--kunit) * 4);
  width: calc(var(--kunit) * 36);
  left: calc(var(--kunit) * 1);
  animation-delay: 0.2s;
}
.mainnav__button--reset {
  top: calc(var(--kunit) * 55);
  width: calc(var(--kunit) * 15);
  left: calc(var(--kunit) * 0);
  animation-delay: 0.4s;
}
/* Button im Dialog zur Bestätigung des Reset */
.mainnav__button--resetconfirm {
  top: calc(var(--kunit) * 48);
  width: calc(var(--kunit) * 27);
  left: calc(var(--kunit) * 21);
  animation-delay: 0.4s;
}
@keyframes mainnavblinker {
  85% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    scale: 1;
  }
  95% {
    opacity: 1;
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}

.mainnav__text {
  z-index: 101;
  position: absolute;
  top: calc(var(--kunit) * 29);
  left: calc(var(--kunit) * 30);
  width: calc(var(--kunit) * 71);
  height: calc(var(--kunit) * 122);
  background-image: url(../components/mainnav/display-vertical.svg);
  background-size: 100% 100%;
  padding: calc(var(--kunit) * 12) calc(var(--kunit) * 14);
  text-shadow: 0 0 calc(var(--kunit) * 1) #00d178;
  color: #00d178;
}

a:link,
a:visited,
a:active,
a:hover {
  color: #00d178;
}