* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020816;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
  width: 100vw;
  height: 100dvh;
}

.image-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  line-height: 0;
  background: #020816;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.canvas {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.canvas picture,
.canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.billboard-link {
  position: absolute;
  top: 18.49%;
  left: 53.17%;
  width: 40.61%;
  height: 54.2%;
  clip-path: polygon(0.15% 28.24%, 100% 0, 100% 100%, 0 96.86%);
  cursor: pointer;
}

.billboard-link:focus-visible {
  outline: 4px solid rgba(255, 122, 31, 0.9);
  outline-offset: 4px;
}

.imprint-button {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(14px, 2.2vw, 30px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  color: #ffffff;
  background: rgba(7, 21, 45, 0.76);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(242, 106, 22, 0.28);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(12px);
}

.imprint-button:hover,
.imprint-button:focus-visible {
  background: #e86b16;
  border-color: rgba(255, 255, 255, 0.54);
}

.imprint-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
}

@media (min-width: 701px) and (max-width: 1280px) {
  .canvas {
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 1448 / 1086;
  }

  .canvas img {
    object-fit: contain;
  }

  .billboard-link {
    top: 24.4%;
    left: 44.3%;
    width: 52.9%;
    height: 47.8%;
    clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .canvas {
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 941 / 1672;
  }

  .canvas img {
    object-fit: contain;
  }

  .billboard-link {
    top: 14.65%;
    left: 44.85%;
    width: 51.35%;
    height: 62.5%;
    clip-path: polygon(0 1.6%, 100% 0, 100% 100%, 0 98.4%);
  }

  .imprint-button {
    bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 38px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 0.84rem;
    background: rgba(7, 21, 45, 0.82);
  }
}