:root { --page-bg:#171512; }
* { box-sizing:border-box; }
html, body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background:var(--page-bg);
  overflow:hidden;
}
body { min-height:100vh; min-height:100dvh; }
.placeholder {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--page-bg);
}
/* Füllt freie Flächen, ohne das eigentliche Artwork zu beschneiden. */
.placeholder::before {
  content:"";
  position:absolute;
  inset:-3%;
  background:url('../img/helvetia-tell-placeholder.png') center center / cover no-repeat;
  filter:blur(20px) brightness(.62) saturate(.8);
  transform:scale(1.04);
}
.placeholder::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,9,8,.18);
}
.artwork {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  margin:0;
  padding:clamp(0px, .7vw, 10px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.artwork img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  user-select:none;
  -webkit-user-drag:none;
}
@supports (height: 100svh) {
  .placeholder { height:100svh; }
}