/* =========================================================
   Hinweisseite – responsive für Desktop, Tablet und Smartphone
   Die komplette Grafik wird exakt mittig im Browserfenster angezeigt.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

html {
  background: #020914;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #020914;
}

.hinweisseite {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hintergrund {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Tablet */
@media (max-width: 1024px) {
  .hinweisseite {
    width: 100%;
    height: 100svh;
  }

  .hintergrund {
    max-width: 100%;
    max-height: 100svh;
  }
}

/* Smartphone */
@media (max-width: 600px) {
  body {
    overflow: auto;
  }

  .hinweisseite {
    width: 100%;
    min-height: 100svh;
    height: auto;
  }

  .hintergrund {
    width: 100%;
    height: auto;
    max-height: 100svh;
    object-fit: contain;
  }
}

/* Kleine Geräte im Querformat */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    overflow: hidden;
  }

  .hinweisseite {
    width: 100vw;
    height: 100svh;
  }

  .hintergrund {
    width: auto;
    height: 100svh;
    max-width: 100vw;
    object-fit: contain;
  }
}