:root {
  --calendar-bg-image: url("/schwedisch/adventskalender/img/hintergrund_desktop.jpg");
}

body {
  position: relative;
  min-height: 100svh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 13, 18, 0.35),
      rgba(3, 13, 18, 0.12) 45%,
      rgba(3, 13, 18, 0.55)
    ),
    var(--calendar-bg-image);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 600px) and (max-width: 1024px) {
  :root {
    --calendar-bg-image: url("/schwedisch/adventskalender/img/hintergrund_tablet.jpg");
  }
}

@media (max-width: 599px) {
  :root {
    --calendar-bg-image: url("/schwedisch/adventskalender/img/hintergrund_smartphone.jpg");
  }
}

/* Dialoge bleiben am Viewport fixiert (sonst macht body > * sie im Top-Layer absolut → Sprung nach oben). */
body > dialog {
  position: fixed;
}