/* =========================
   Global: kein Rand
   ========================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3:2 Bühne, nie größer als der Viewport */
.stage {
  aspect-ratio: 3 / 2;

  /* so groß wie möglich, ohne Verhältnis zu brechen */
  width: min(100vw, calc(100vh * 3 / 2));
  height: auto;

  background-image: url("img/bg_landscape.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* kein Abschneiden */

  position: relative;
  overflow: hidden;
}

/* Fade nur im DIV */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

background:
	linear-gradient(to right, rgba(0,0,0,1), transparent 20%),
	linear-gradient(to left, rgba(0,0,0,1), transparent 20%),
	linear-gradient(to bottom, rgba(0,0,0,1), transparent 20%),
	linear-gradient(to top, rgba(0,0,0,1), transparent 20%);
}

@media (orientation: portrait) {
  .stage {
    aspect-ratio: 2 / 3;

    /* Normal: 100% breit
       Wenn Höhe 100vh erreicht → Breite passt sich an */
    width: min(100%, calc(100vh * 2 / 3));
    height: auto;
    max-height: 100vh;

    background-image: url("img/bg_portrait.png");
  }
}