/* Styles für das Hintergrundbild während der Startphase */

.background-image-container {
  position: fixed;
  bottom: 0;
  /* Am unteren Rand des Viewports beginnen */
  left: 0;
  right: 0;
  /* Geändert von width: 100% für Flexbox-Kontext */
  height: auto;
  /* Automatische Höhe basierend auf Bildproportionen */
  z-index: -1;
  /* Hinter allen anderen Elementen */
  overflow: hidden;
  display: none;
  /* Initial versteckt */

  /* NEU: Für Zentrierung und Ausrichtung des Kind-Elements */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.background-image {
  width: 100%;
  /* Volle Breite (Standard, wird im Landscape überschrieben) */
  height: auto;
  /* Automatische Höhe, um Proportionen beizubehalten */
  display: block;
  /* Entfernt mögliche Lücken unter dem Bild */
}

@media (orientation: landscape) {
  .background-image {
    width: auto;
    /* Breite passt sich an, um Proportionen bei Höhenbeschränkung zu wahren */
    height: auto;
    /* Bleibt für Proportionen, max-height greift */
    /* max-height berücksichtigt Header-Höhe (var(--min-touch-size)), Apple Status Bar und einen Puffer */
    max-height: calc(100vh - var(--min-touch-size) - var(--safe-area-top, 0px) - 10px);
    max-width: 100%;
    /* Stellt sicher, dass es nicht breiter als der Container wird */
    /* NEU: Explizite horizontale Zentrierung für das Bild selbst */
    margin-left: auto;
    margin-right: auto;
  }
}