/* OLO Start-Splash — bildschirmfüllend, responsiv, zentriert */

/* Bereits in dieser Browser-Session gesehen → kein Flash beim Dashboard-Reload */
html.olo-intro-seen #olo-splash {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.olo-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  box-sizing: border-box;
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
  background: var(--olo-bg, #F2F3F5);
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.olo-splash--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Lottie-Container: maximal groß, proportional (16:9), ohne feste Pixelgrenze */
.olo-splash__lottie {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* So groß wie möglich bei „contain“ — breite vs. hohe Viewports */
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  max-width: 100vw;
  max-height: 100dvh;
}

.olo-splash__lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}