/* Website demo (isolate.mjs): static fallback for devices without WebGL (app/webgl-check.js). */
.no-3d .loader,
.no-3d #stage,
.no-3d #chips,
.no-3d #floors,
.no-3d .tools { display: none; }
.no-3d body > .demo-fallback { visibility: visible; }
.demo-fallback {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 16px;
  padding: 24px;
  background: #fff;
  color: #15171a;
  font: 16px/1.5 system-ui, sans-serif;
  text-align: center;
}
.demo-fallback[hidden] { display: none; }
.demo-fallback p { margin: 0 auto; max-width: 32em; }
.demo-fallback img { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto; }

/* Link back to the demo page (isolate.mjs, DAM-157): a chip at the head of the status row, and a
   plain link under the fallback picture. Visible while the 3D view loads (the app hides the rest
   of the page until then); hidden when the demo is framed in that page (webgl-check.js). */
html body .demo-back { visibility: visible; }
html.framed body .demo-back { display: none; }
html body .pill.demo-back { text-decoration: none; }
html body .demo-back:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.demo-fallback a { color: inherit; }
/* Narrow frames: "← Zurück" only (the full name stays the link's aria-label), so the chip row keeps
   the two rows that sun-slider.css places the floors and the popover under. */
@media (max-width: 700px) {
  html body .demo-back__more { display: none; }
}