/* ==========================================================================
   Section: why-us  (Warum wir)
   Figma band y 4020..4980 in a 1440 frame. 73 owned nodes, the densest
   section on Startseite.

   Measured anchors, all reproduced exactly at 1440:
     content inset       x = 133
     h2                  y = 4134, 56/56, #1b1d36, "uns entscheiden" gradient
     block titles        y = 4299 / 4604 / 4741, 26/24, dark-navy
     block copy          y = 4342 / 4647 / 4784, 17/19 weight 300, measure 486
     step list           y = 4409, six rows, 27.2px pitch
     step dots           x = 133, 13 x 13, fully round
     CTA pill            x = 133, y = 4889, 238 x 37, radius 55, gradient @ 70%
     dark card           x = 773, y = 4288, 667 x 574, radius 15 left side only
     weekday row         y = 4359, line centred at 4373
     calendar grid       first cell x = 870, y = 4427; cells 63 x 60,
                         column gap 13.5, row gap 9, seven columns, five rows
     price card          x = 1155, y = 4740, 285 x 208, radius 15 left side only
     price headline      centre x = 1298 / y = 4814, 34/36, gradient
     price note          x = 1194, y = 4872, 17/19, gradient
     ornament            x = -344.64, y = 3393.36, 932.681 square, -21.32deg

   Column split: the left text column is 640 wide (133 -> 773) and the card
   column is 667 (773 -> 1440, bleeding off the right edge). Expressed as
   640fr / 667fr so the ratio survives every width, exact at 1440.

   THREE SURFACES ARE REBUILT, NOT EXPORTED. The dark card, the sixth step dot
   and the "31" cell carry an image fill in Figma (a blurred aurora mesh). The
   code export dropped all three — its companion asset, "Rectangle 50", exports
   as an empty 32x32 SVG — so they are reconstructed here as layered gradients
   fitted to colours sampled off the reference render. Anchors used:
     card top-left #171a31, bottom-left #363464,
     warm bloom #bea387 at 85%/18%, violet bloom #75569b at 47%/54%.

   Two selector notes, both deliberate:
     - :where() wraps every :nth-child and [data-*] qualifier so the rules stay
       at the 0-1-0 specificity ceiling the conventions set.
     - the ornament sits at z-index -1 and .why-us therefore must NOT become a
       stacking context (no isolation, no z-index, no transform on the root).
       That is what keeps it behind the neighbouring section's glass card, the
       way the design draws it.
   ========================================================================== */



  .why-us {
    position: relative;
    /* h2 top 4134 - band top 4020 = 114. Price card bottom 4948 -> 4980 = 32.
       No background: the ornament paints in the page's negative z layer and a
       background here would cover it. */
    padding-block: 114px 32px;
    /* 133/1440 = 9.236vw, exactly 133px at 1440. The card bleeds off the right
       edge, so there is no end inset. */
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 9.236vw, 133px))
      calc(var(--stage-x) + 0px);
  }

  /* ---------------------------------------------------------------- ornament
     Figma places this 932.681 square at x -344.64 / y 3393.36 canvas, i.e.
     626.64px above this section's top edge. Only its bottom ~60px falls inside
     the band; the rest overhangs the section above, where the design has it
     sitting behind a translucent card. Hence z-index: -1. */

  .why-us__ornament {
    position: absolute;
    z-index: -1;
    inset-block-start: -835.52px;
    inset-inline-start: -459.52px;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 932.681px;
    block-size: 932.681px;
    pointer-events: none;
  }

  .why-us__ornament img {
    inline-size: 720.135px;
    block-size: 720.135px;
    max-inline-size: none;
    object-fit: cover;
    transform: rotate(-21.32deg);
  }

  /* ------------------------------------------------------------------ title */

  .why-us__title {
    /* Figma H2: 56/56. #1b1d36 is the design's near-duplicate of dark-navy,
       reproduced rather than normalised (CONVENTIONS section 4). */
    color: var(--color-heading-alt);
    max-inline-size: 881px;
  }

  /* The gradient fills the whole 881px text frame in Figma, not the coloured
     run, so "uns entscheiden" ends on a blue-violet rather than on #9745ff.
     Sampled: #4dd0ff at x=133, (115,135,255) at x=590. Reproduced by sizing the
     background to the frame instead of to the span. 61.181vw = 881px at 1440. */
  .why-us__accent {
    background-size: clamp(20rem, 61.181vw, 881px) 100%;
    background-repeat: no-repeat;
  }

  /* ------------------------------------------------------------------- body */

  .why-us__body {
    display: grid;
    grid-template-columns: minmax(0, 640fr) minmax(0, 667fr);
    align-items: start;
    /* h2 ends 4134 + 112 = 4246, card starts 4288. */
    margin-block-start: 42px;
  }

  .why-us__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* The card starts at 4288, the first block title at 4299. */
    padding-block-start: 11px;
  }

  .why-us__blocks {
    display: flex;
    flex-direction: column;
    /* Figma has 40px after the step list and 37px after the second block.
       38.5 is the average: it lands the third block and the CTA on their exact
       y, and puts the second block 1.5px high. A repeater cannot carry two
       different gaps without hardcoding item positions. */
    gap: 38.5px;
    inline-size: 100%;
  }

  .why-us__block-text {
    /* Figma text frame 486 wide. This is what produces the design's line
       breaks; do not widen it. */
    max-inline-size: 486px;
    margin-block-start: 19px;
    color: var(--color-heading);
  }

  /* -------------------------------------------------------------- step list */

  .why-us__steps {
    display: flex;
    flex-direction: column;
    /* Figma pitch runs 26, 27, 27, 28, 28 — designer drift. 8.2px of gap on a
       19px line box averages to 27.2 and lands the last row exactly on 4545. */
    gap: 8.2px;
    margin-block-start: 29px;
  }

  .why-us__step {
    position: relative;
    /* dot at x=133, label at x=157 */
    padding-inline-start: 24px;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--color-heading);
  }

  .why-us__step::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 3px;
    inline-size: 13px;
    block-size: 13px;
    border-radius: 50%;
    background: var(--why-us-dot, transparent);
  }

  /* Six dots, six different fills, read off the Figma nodes 190:120..190:136.
     The fifth is a 20% grey that renders as #e4e4e4 on white; the sixth has the
     dropped image fill and is approximated from sampled pixels. */
  .why-us__step:where(:nth-child(1)) { --why-us-dot: var(--color-accent-deep); }
  .why-us__step:where(:nth-child(2)) { --why-us-dot: var(--color-accent); }
  .why-us__step:where(:nth-child(3)) { --why-us-dot: var(--gradient-brand); }
  .why-us__step:where(:nth-child(4)) { --why-us-dot: var(--color-accent-deep); }
  .why-us__step:where(:nth-child(5)) { --why-us-dot: rgb(120 118 118 / 0.2); }
  .why-us__step:where(:nth-child(6)) {
    --why-us-dot: linear-gradient(96deg,
      #322b52 0%, #443a66 19%, #654e89 35%, #7c5ba6 50%, #6b5681 73%, #675f6e 100%);
  }

  /* -------------------------------------------------------------------- CTA
     Same treatment as the hero's: the gradient sits at 70% opacity in Figma and
     the label does not, so the fill lives on a pseudo-element. The drop shadow
     belongs to the same node and therefore inherits the 70% too. */

  .why-us__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 238px;
    block-size: 37px;
    /* third paragraph ends 4841, pill starts 4889 */
    margin-block-start: 48px;
    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;
  }

  .why-us__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--gradient-brand);
    box-shadow: var(--shadow-card);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

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

  /* ------------------------------------------------------------------ aside */

  .why-us__aside {
    position: relative;
    /* The price card is absolute and overhangs the dark card by 86px. Reserving
       it here keeps the section's own height honest (960px total, as drawn). */
    padding-block-end: 86px;
  }

  /* --------------------------------------------------------------- the card */

  .why-us__card {
    /* 71 top / 48 right / 99 bottom / 97 left, measured. 97 + 522 + 48 = 667
       and 71 + 28 + 40 + 336 + 99 = 574. */
    padding: 71px 48px 99px 97px;
    /* Bleeds off the right edge, so only the left corners are rounded. */
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--color-on-dark);
    background-color: #171a31;
    background-image:
      /* warm bloom, top right, continuing past the right edge */
      radial-gradient(61% 61% at 83% 14%,
        #d4a882 0%,
        rgb(178 158 140 / 0.92) 25%,
        rgb(160 126 148 / 0.56) 55%,
        rgb(135 112 148 / 0.28) 78%,
        rgb(40 40 80 / 0) 100%),
      /* violet bloom, centre */
      radial-gradient(52% 62% at 47% 55%,
        rgb(178 122 220 / 0.62) 0%,
        rgb(158 104 152 / 0.34) 40%,
        rgb(90 70 126 / 0.16) 70%,
        rgb(90 53 126 / 0.06) 100%),
      /* base: dark navy at the top, indigo at the bottom */
      linear-gradient(180deg,
        #29273c 0%,
        #0b142b 20%,
        #26253b 36%,
        #2f3050 48%,
        #322e5b 60%,
        #262b5c 72%,
        #373463 100%);
  }

  .why-us__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 13.5px;
    /* Figma frame is 28 tall with the 19px line centred in it. */
    block-size: 28px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
    text-align: center;
  }

  .why-us__weekdays span {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .why-us__weeks {
    display: grid;
    /* weekday frame ends 4387, first cell row starts 4427 */
    margin-block-start: 40px;
  }

  /* Two grids stacked in the same cell: the highlight runs underneath, the day
     numbers on top. Keeping them apart is what lets the numbers auto-place in
     reading order while the runs are placed explicitly. */
  .why-us__spans,
  .why-us__days {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 13.5px;
    row-gap: 9px;
  }

  .why-us__spans {
    grid-template-rows: repeat(5, 60px);
  }

  .why-us__days {
    /* positioned so the numbers paint above the run backgrounds */
    position: relative;
    grid-auto-rows: 60px;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
  }

  .why-us__day {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .why-us__span {
    border-radius: var(--radius-md);
  }

  /* Where each highlighted run sits. Named by the days it covers so the markup
     stays readable; the grid does the arithmetic. */
  .why-us__span:where([data-span="1"])     { grid-row: 1; grid-column: 1; }
  .why-us__span:where([data-span="2-5"])   { grid-row: 1; grid-column: 2 / span 4; }
  .why-us__span:where([data-span="8-14"])  { grid-row: 2; grid-column: 1 / span 7; }
  .why-us__span:where([data-span="15-17"]) { grid-row: 3; grid-column: 1 / span 3; }
  .why-us__span:where([data-span="19"])    { grid-row: 3; grid-column: 5; }
  .why-us__span:where([data-span="22-28"]) { grid-row: 4; grid-column: 1 / span 7; }
  .why-us__span:where([data-span="29-30"]) { grid-row: 5; grid-column: 1 / span 2; }
  .why-us__span:where([data-span="31"])    { grid-row: 5; grid-column: 3; }

  /* Four fills, exactly as the nodes carry them. Only the solid and gradient
     runs have the shadow; the glass ones have a 1px light stroke instead, which
     the code export dropped but the render shows clearly (measured 168,155,199
     against a 110,98,142 interior). */
  .why-us__span:where([data-fill="deep"]) {
    background-color: var(--color-accent-deep);
    box-shadow: var(--shadow-card);
  }

  .why-us__span:where([data-fill="brand"]) {
    background-image: var(--gradient-brand);
    box-shadow: var(--shadow-card);
  }

  .why-us__span:where([data-fill="glass-violet"]) {
    background-color: rgb(157 114 206 / 0.2);   /* figma: purple @ 20% */
    border: 1px solid rgb(255 255 255 / 0.4);
    box-shadow: var(--shadow-card);
  }

  .why-us__span:where([data-fill="glass-light"]) {
    background-color: var(--color-glass-muted); /* figma: light-gray @ 20% */
    border: 1px solid rgb(255 255 255 / 0.4);
  }

  /* The "31" cell: no fill in the export, an image fill in the file. Rebuilt as
     a soft warm bloom over a slight darkening, matching the sampled interior. */
  .why-us__span:where([data-fill="glass-dark"]) {
    background-image:
      radial-gradient(58% 62% at 78% 38%,
        rgb(255 226 190 / 0.13) 0%,
        rgb(255 238 214 / 0.05) 45%,
        rgb(0 0 20 / 0.08) 100%);
    border: 1px solid rgb(255 255 255 / 0.4);
  }

  /* --------------------------------------------------------- the price card
     Overlaps the dark card by 122px and hangs 86px below it. Its right edge is
     the section's right edge, so it bleeds too. */

  .why-us__price {
    position: absolute;
    inset-block-start: 452px;     /* 4740 - 4288 */
    inset-inline-end: 0;
    inline-size: 285px;
    block-size: 208px;
    padding-block-start: 38px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    text-align: center;
  }

  .why-us__price-value {
    /* Figma frame 268 wide, centred in the 285 card. The gradient spans this
       frame, which is why both lines share one sweep. */
    inline-size: 268px;
    margin-inline: auto;
    font-size: var(--text-xl);
    line-height: var(--leading-lead);
  }

  .why-us__price-note {
    inline-size: 206px;
    margin-inline: auto;
    /* headline block ends 4850, note frame starts 4872 */
    margin-block-start: 22px;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
  }

  /* ------------------------------------------------------------------------
     Below 1440 there is no comp. Decisions made here, listed in the report:
       - the two columns stack at 1024, the card keeps its left-side radius and
         still runs to the right edge
       - the price card leaves absolute positioning and sits under the calendar
       - the calendar keeps seven columns at every width; only the cell height,
         the type size and the card padding shrink, because a calendar that
         reflows to fewer columns stops reading as a calendar
       - the ornament is dropped below 1024: it is a 932px shape anchored 627px
         above the section, and there is nothing sensible for it to overhang
     ------------------------------------------------------------------------ */

  @media (width < 1024px) {
    .why-us {
      padding-block: 64px 64px;
      padding-inline: var(--gutter) 0;
    }

    .why-us__ornament {
      display: none;
    }

    .why-us__body {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 48px;
    }

    .why-us__col {
      padding-block-start: 0;
    }

    .why-us__aside {
      padding-block-end: 0;
    }

    .why-us__card {
      padding: 40px 32px 48px;
    }

    .why-us__price {
      position: static;
      inline-size: min(285px, 100%);
      margin-block-start: 24px;
      block-size: auto;
      padding-block: 38px;
      border-radius: var(--radius-md);
    }
  }

  @media (width < 640px) {
    .why-us__card {
      padding: 28px 16px 32px;
    }

    .why-us__weekdays,
    .why-us__days {
      font-size: 0.8125rem;   /* 13px: seven columns at 320 leaves ~34px each */
    }

    .why-us__spans {
      grid-template-rows: repeat(5, 44px);
    }

    .why-us__days {
      grid-auto-rows: 44px;
    }

    .why-us__spans,
    .why-us__days {
      column-gap: 6px;
      row-gap: 6px;
    }

    .why-us__weekdays {
      column-gap: 6px;
    }

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