html, body {
  width: 100vw; /* Vollständige Breite des Viewports */
  height: 100vh; /* Vollständige Höhe des Viewports */
  margin: 0; /* Keine Ränder um das Dokument */
  padding: 0; /* Kein Padding um das Dokument */
  overflow: hidden; /* Kein Scrollen */
  display: flex;
  justify-content: center; /* Zentriert den Container horizontal */
  align-items: center; /* Zentriert den Container vertikal */
  background: #fff; /* Hintergrundfarbe weiß, nur zur Sicherheit */
  background: #FFFFFF;
  background-size: 100% 100%;
}
#customer_logo {
  position: absolute;
  top: 0;              /* Setzt den div ganz oben */
  left: 50%;           /* Startet den div in der Mitte von links nach rechts */
  transform: translateX(-50%); /* Verschiebt den div zurück um die Hälfte seiner Breite */
  width: auto;          /* Breite des div */
  padding: 25px;       /* Padding von 50px auf allen Seiten */
  box-sizing: border-box;
  transform-origin: center; /* Setzt den Ursprung für die Skalierung */
}

#animation_container {
  width: 50vw; /* Setzt die Breite relativ zur Viewport-Breite */
  height: 25vw; /* Setzt die Höhe basierend auf der Breite, um das Seitenverhältnis 2:1 zu erhalten */
  position: relative;
  overflow: hidden; /* Verhindert Scrollbalken innerhalb des Containers */
  transform-origin: center; /* Setzt den Ursprung für die Skalierung */
  max-width: 400px; /* Maximalwerte für Breite */
  max-height: 200px; /* Maximalwerte für Höhe */
  padding: 50px;
  box-sizing: border-box;
}

#canvas {
  position: absolute;
  width: 100%; /* Passt sich der Größe des Containers an */
  height: 100%; /* Passt sich der Größe des Containers an */
  top: 0;
  left: 0;
  /* padding-right: 100px;*/
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.contain {
  display:block;
  width:100%; height:100%;
  object-fit: contain;
}

.stretch {
  display:block;
  width:100%; height:100%;
}

.cover {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    margin:0;
    height:100%;
    background: #FFFFFF;
    
    background-size: 100% 100%;
  }
}