/* ==========================================================================
   Section: hero
   Figma band y 0..767 in a 1440 frame.

   Measured anchors, all reproduced exactly at 1440:
     content inset      x = 146
     h1                 y = 214, w = 532, 72/76, white, "mehr Umsatz" gradient
     stat values        y = 493, 34/36, gradient
     stat labels        y = 545, 17/19, white
     stat left edges    x = 147, 264, 400, 534
     CTA pill           x = 146, y = 633, 238 x 37, radius 55, gradient @ 70%
     figure             x = 690, y = -82, 872 x 889
   ========================================================================== */


  .hero {
    position: relative;
    isolation: isolate;
    background-image: var(--gradient-hero);
    color: var(--color-on-dark);
    /* The header overlays this section, so the top padding has to clear it.
       84px trust bar + its own height, then the h1 lands at y=214. */
    /* Derived, not guessed: 214 top puts the h1 at its Figma y. The bottom
       value is whatever makes the section total exactly 767. */
    padding-block: 214px 97px;
    /* 146/1440 = 10.139vw. Resolves to exactly 146px at 1440. */
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 10.139vw, 146px))
      calc(var(--stage-x) + clamp(1.25rem, 10.139vw, 146px));
    min-height: 767px;
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    max-width: 532px;
  }

  .hero__title {
    /* Figma H1: 72/76. The line break after "für" is the designer's, the
       break before it comes from the 532px measure. */
    font-size: var(--text-4xl);
    line-height: var(--leading-h1);
    color: var(--color-on-dark);
    margin: 0;
  }

  .hero__stats {
    display: grid;
    /* Left edges at 147, 264, 400, 534 give columns of 117, 136, 134, auto.
       Not a regular grid; reproduced as measured. */
    grid-template-columns: 117px 136px 134px auto;
    /* h1 occupies 214..442 (3 lines x 76). Values start at 493, so 51. */
    margin-block: 51px 0;
    /* The design's own 1px inconsistency: the h1 sits at x=146, the stat
       column at x=147. Reproduced rather than tidied. */
    margin-inline-start: 1px;
  }

  .hero__stat {
    display: flex;
    flex-direction: column;
    /* value at 493, label at 545: a 52px step, of which 36 is the value's
       own line box. */
    gap: 16px;
  }

  .hero__stat-value {
    font-size: var(--text-xl);
    line-height: var(--leading-lead);
  }

  .hero__stat-label {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--color-on-dark);
  }

  .hero__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 238px;
    block-size: 37px;
    margin-block-start: 50px;   /* stats occupy 493..583, pill starts 633 */
    border-radius: var(--radius-2xl);
    color: var(--color-on-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-button);
    text-decoration: none;
    isolation: isolate;
  }

  /* The gradient sits at 70% opacity in Figma, the label does not. Applying
     opacity to the element itself would fade the text too, so the fill lives
     on a pseudo-element. */
  .hero__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--gradient-brand);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .hero__cta:hover::before,
  .hero__cta:focus-visible::before {
    opacity: 1;
  }

  .hero__figure {
    position: absolute;
    /* 690/1440, -82/767, 872/1440 — kept proportional so the composition
       holds as the hero narrows. */
    inset-block-start: -10.69%;
    /* Freezes at the drawn 690 x 4/3, then rides the centred stage. Raw %
       is what made this grow to 1550px at 2560 and spill 731px out of the
       hero. */
    inset-inline-start: calc(var(--stage-x) + 690px);
    inline-size: 872.0003px;
    aspect-ratio: 872 / 889;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .hero__figure img {
    position: absolute;
    /* The source is larger than its frame in Figma and offset left. */
    inset-block-start: 0;
    inset-inline-start: -27.18%;
    inline-size: 127.18%;
    block-size: 124.69%;
    max-inline-size: none;
    object-fit: cover;
  }

  /* ------------------------------------------------------------------
     Below the width the design was drawn at, no comp exists. Decisions
     made here, logged in CONVENTIONS section 5:
       - the stat grid drops to two columns, then one
       - the figure stops being an overlay and becomes a block, because
         absolute positioning over the text is unreadable when narrow
     ------------------------------------------------------------------ */

  @media (width < 1024px) {
    .hero {
      padding-block: 160px 64px;
      min-height: 0;
    }

    .hero__inner {
      max-width: none;
    }

    .hero__figure {
      position: static;
      inline-size: 100%;
      margin-block-start: 48px;
    }

    .hero__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px;
    }

    .hero__cta {
      margin-block-start: 48px;
    }
  }

  @media (width < 480px) {
    .hero__stats {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero__cta {
      inline-size: 100%;
      max-inline-size: 238px;
    }
  }