@media (min-width: 1100px) {
  :root { --support-font-size: clamp(1.55rem, 2.15vw, 1.9rem); }

  .site-header {
    width: calc(100% - var(--page-pad) - var(--page-pad));
    max-width: 88rem;
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 1.45vw, 1.4rem);
    font-size: clamp(1.1rem, 1.45vw, 1.32rem);
  }

  .site-name { font-size: clamp(1.3rem, 1.7vw, 1.55rem); }

}

@media (min-width: 1100px) and (min-height: 841px) {
  .hero {
    min-height: 0;
    height: calc(100svh - var(--header-height));
  }

  .hero-support {
    position: relative;
    top: clamp(-6rem, -8vh, -4rem);
    margin-top: -6.75rem;
    transform: translateY(clamp(2rem, 4vh, 2.75rem));
  }
  .hero-support__cta { margin-top: 0; }
}

@media (min-width: 1100px) and (max-height: 840px) {
  :root { --header-height: 4.8rem; }
  .hero {
    min-height: 0;
    height: calc(100svh - var(--header-height));
    padding-top: 1rem;
  }
  .site-header,
  .hero-stage { max-width: 70rem; }
  .statement__copy { font-size: clamp(2rem, 3.15vw, 3.25rem); }
  .hero-support { transform: translateY(2rem); }
  .hero-support__cta { margin-top: 0; }
}

@media (max-width: 960px) {
  .hero {
    grid-template-rows: auto auto;
    padding-top: 2rem;
  }

  .hero-stage {
    grid-template-columns: 1fr 0.82fr 1fr;
  }

  .statement__copy {
    width: 82%;
    font-size: clamp(1.7rem, 4.25vw, 2.55rem);
  }

  .statement--right .statement__copy { width: 80%; }
  .hero-support { margin-top: -1rem; }
}

@media (max-width: 700px) {
  :root {
    --header-height: 5.4rem;
    --mobile-content-width: min(calc(100vw - 2rem), 23rem);
    --mobile-frame-size: min(172vw, 42rem);
    --mobile-frame-row: 10.5rem;
    --page-pad: 1rem;
    --support-font-size: 1.08rem;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    font-size: 0.9rem;
  }

  .site-header > p { display: none; }

  .site-identity {
    display: grid;
    gap: 0.15rem;
    align-content: center;
  }

  .site-name { font-size: 1rem; }

  .site-role {
    display: block;
    max-width: 15rem;
    padding-left: 0;
    border-left: 0;
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .site-role__desktop { display: none; }
  .site-role__mobile { display: inline; }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--header-height));
    padding-top: 1.5rem;
  }

  .hero-stage {
    order: 1;
    grid-template-columns: 1fr;
    grid-template-rows: var(--mobile-frame-row) auto var(--mobile-frame-row);
    align-items: center;
    max-width: var(--mobile-content-width);
    transform: none;
  }

  .hero-mark {
    grid-column: 1;
    grid-row: 2;
    width: min(46vw, 11rem);
    margin: -1.1rem auto;
  }

  .frame-target {
    top: 50%;
    left: 50%;
    width: var(--mobile-frame-size);
  }

  .statement {
    grid-column: 1;
    width: 100%;
    height: var(--mobile-frame-row);
    aspect-ratio: auto;
  }

  .statement--left { grid-row: 1; }
  .statement--right { grid-row: 3; }
  .frame-target--left { transform: translate(-50%, -35.2%); }
  .frame-target--right { transform: translate(-50%, -64.3%); }

  .statement__copy {
    width: 50%;
    font-size: clamp(1.35rem, 6vw, 1.72rem);
    line-height: 1.12;
    text-align: center;
  }

  html[lang="de"] .statement__copy {
    font-size: clamp(1.13rem, 5.2vw, 1.55rem);
    line-height: 1.14;
  }

  .statement--right .statement__copy {
    width: 50%;
    text-align: center;
    transform: none;
  }
  .hero-support {
    order: 3;
    margin-top: 0;
    padding-bottom: 1rem;
  }

  .hero-support__intro {
    order: 2;
    max-width: 24rem;
    margin-top: 1.4rem;
    line-height: 1.4;
  }

  .hero-support__intro br { display: none; }

  .hero-support__cta {
    width: var(--mobile-content-width);
    margin-top: 2.75rem;
    padding: 0.95rem 1rem 1rem;
  }

  .preloader__mark,
  .moving-piece {
    width: var(--mobile-frame-size);
  }

  .preloader__tagline {
    top: calc(50% + min(50vw, 12.2rem) + 0.75rem);
    font-size: clamp(1.45rem, 7vw, 2rem);
  }
}

@media (max-width: 390px) {
  :root { --mobile-content-width: min(calc(100vw - 1.2rem), 23rem); }
  .hero { padding-inline: 0.6rem; }
  .statement__copy { font-size: 1.25rem; }
  html[lang="de"] .statement__copy { font-size: 1.05rem; }
}