/* Shared Schatten und Licht artwork, kept local to the Markttool domain. */
html { background: #080706; }
body { position: relative; isolation: isolate; min-height: 100vh; }
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: -2;
  background: #080706 url('/images/sul-bg-fhd.jpg') 78% 18% / cover no-repeat;
}
@supports (background-image: image-set(url('/images/sul-bg-wide.webp') type('image/webp'))) {
  body::before {
    background-image: image-set(
      url('/images/sul-bg-wide.webp') type('image/webp'),
      url('/images/sul-bg-fhd.jpg') type('image/jpeg')
    );
  }
}
@media (min-width: 1700px), (min-resolution: 1.5dppx) {
  body::before { background-image: url('/images/sul-bg-wide.jpg'); }
  @supports (background-image: image-set(url('/images/sul-bg-wide.webp') type('image/webp'))) {
    body::before {
      background-image: image-set(
        url('/images/sul-bg-wide.webp') type('image/webp'),
        url('/images/sul-bg-wide.jpg') type('image/jpeg')
      );
    }
  }
}
@media (min-width: 2300px), (min-resolution: 2dppx) {
  body::before { background-image: url('/images/sul-bg-uhd.jpg'); }
}
body::after {
  z-index: -1;
  background:
    radial-gradient(70% 80% at 82% 16%, rgba(217, 164, 65, .1), transparent 58%),
    radial-gradient(55% 70% at 12% 88%, rgba(90, 18, 18, .2), transparent 60%),
    linear-gradient(180deg, rgba(8, 7, 6, .57), rgba(8, 7, 6, .45) 40%, rgba(8, 7, 6, .77)),
    linear-gradient(90deg, rgba(8, 7, 6, .42), transparent 26%, transparent 74%, rgba(8, 7, 6, .38));
}
@media (max-width: 900px) {
  body::before { background-position: 70% 20%; }
}
.app header.top {
  margin-top: 16px;
  padding: 16px;
  background: rgba(12, 9, 6, .88);
  border: 1px solid rgba(217, 164, 65, .3);
  margin-bottom: 14px;
}
.app nav.tabs {
  padding: 8px;
  background: rgba(12, 9, 6, .84);
  border: 1px solid rgba(217, 164, 65, .27);
}
.auth-banner img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .app header.top { margin-top: 10px; padding: 14px; }
  .app nav.tabs { margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; }
}
