@media(max-height: 480px) {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :root {
    --color-triangle: #40E2A0;
    --color-square: #FF69F8;
    --color-cross: #7CB2E8;
    --color-circle: #FF6666;
    --color-button: #474448;
    --color-psone: #C1C1C1;
  }

  .controller-buttons {
    width: 100%;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    top: -10px;
    display: flex;
    justify-content: space-around;
    align-items: end;
    flex-direction: row;
  }

  .controller-buttons .button {
    background-color: var(--color-button);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    box-shadow: inset 0 5px 6px 1px #fff, 0 5px 10px 1px #000;
    user-select: none;
    -webkit-user-select: none; /* Für Safari */
    -ms-user-select: none; /* Für alte IE-Versionen */
  }

  .controller-buttons .button:active {
    box-shadow: inset 0 5px 6px 5px #000, 0 0 0 0;
  }

  .controller-buttons .button span {
    display: block;
    width: 25px;
    height: 25px;
    margin: 7px auto 0;
  }

  .controller-buttons .triangle {
    top: 10px;
    left: 40%;
    z-index: 10;
  }

  .controller-buttons .triangle .parent {
    position: relative;
    top: -4px;
    width: 0;
    border-bottom: solid 25px var(--color-triangle);
    border-right: solid 15px transparent;
    border-left: solid 15px transparent;
  }

  .controller-buttons .triangle .parent span {
    position: absolute;
    top: -10px;
    left: -9px;
    width: 0;
    border-bottom: solid 15px var(--color-button);
    border-right: solid 9px transparent;
    border-left: solid 9px transparent;
  }

  .controller-buttons .square {
    left: 10px;
    top: 50%;
  }

  .controller-buttons .square span {
    border: 4px solid var(--color-square);
    width: 22px;
    height: 22px;
    margin-top: 9px;
  }

  .controller-buttons .cross {
    bottom: 5px;
    left: 50%;
  }

  .controller-buttons .cross span {
    width: 30px;
    height: 4px;
    /* Halbiert die Höhe */
    background-color: var(--color-cross);
    transform: rotate(45deg);
    margin-top: 18px;
  }

  .controller-buttons .cross span+span {
    transform: rotate(-45deg);
    margin-top: -4px;
  }

  .controller-buttons .circle {
    right: 5px;
    top: 50%;
  }

  .controller-buttons .circle span {
    border: 4px solid var(--color-circle);
    border-radius: 50%;
    width: 22px;
    height: 22px;
  }

  .rotateRight {
    rotate: 90deg;
    box-shadow: inset 5px 0 6px 1px #fff, 5px 0 10px 1px #000 !important;
  }

  .rotateLeft {
    rotate: -90deg;
    box-shadow: inset -5px 0 6px 1px #fff, -5px 0px 10px 1px #000 !important;
  }

  .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 18px;
  }

  .canvasAndController {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
}