/* Only the approved homepage phone composition, proof strip and store row. */
@font-face {
  font-family: "WinNet Access Badges";
  src: url("/zugang/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
.hero-art-wrap.home-access-art {
  width: min(620px, 100%);
  min-width: 0;
  margin-right: 0;
  perspective: none;
}
.home-access-viewport { position: relative; width: 100%; aspect-ratio: 580 / 640; }
.home-access-frame {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 800 / 656;
  container-type: inline-size;
}
.home-access-scene {
  position: absolute !important;
  /* 120px left clearance and 16px top clearance in the 800 x 656 canvas. */
  left: 15%; top: 2.439024%; width: 72.5%;
  color: #12141a;
  font-family: "WinNet Access Badges", sans-serif;
  line-height: normal;
}
/* /zugang uses content-box. The homepage reset must not shrink the phone or
   cards, otherwise even the original offsets cover the dashboard again. */
.home-access-scene, .home-access-scene * { box-sizing: content-box; }
.home-access-badge { pointer-events: none; }
@media (min-width: 1320px) {
  /* Use the existing hero gutter, without changing its grid or left copy. */
  .home-access-frame {
    --home-access-bleed: clamp(0px, calc(50vw - 640px), 64px);
    width: calc(100% + var(--home-access-bleed) + var(--home-access-bleed));
    left: calc(0px - var(--home-access-bleed));
  }
}
@media (max-width: 900px) {
  .home-access-viewport { aspect-ratio: 800 / 656; }
}
.home-access-trust { flex-wrap: wrap; text-align: left; }
.home-access-trust > div:first-child { flex-shrink: 0; }
.home-access-rating { width: fit-content; text-decoration: none; border-radius: 4px; }
.home-access-rating:focus-visible { outline: 2px solid #9db1ff; outline-offset: 5px; }
.home-access-rating:hover { text-decoration: underline; }
.hero-store-badges {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.hero-store-badges > a, .hero-store-badges > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.hero-store-badges img { display: block; width: auto; height: 36px; }
.hero-store-badges > a:hover, .hero-store-badges > button:hover { filter: brightness(1.1); }
.hero-store-badges > a:focus-visible, .hero-store-badges > button:focus-visible {
  outline: 2px solid #9db1ff;
  outline-offset: 4px;
}
@media (max-width: 900px) {
  .hero-store-badges { justify-content: center; gap: 10px; margin-top: 16px; }
  .hero-store-badges img { height: 32px; }
}
@media (max-width: 600px) {
  .home-access-trust { gap: 12px !important; }
  .home-access-trust > div:last-child { flex: 1; min-width: 150px; }
  .home-access-trust > div:last-child > span { font-size: 12px !important; }
}