/* ==========================================================================
   Section: faq
   Figma frame "Geld-Zurück-Garantie" (217:25), band y 1610..2360.

   Measured anchors, reproduced exactly at 1440:
     h2         x = 121, y = 1671, 56 / 56, #1b1d36,
                explicit break, "zu unseren Garantien?" gradient
     intro      x = 124, y = 1824, 17 / 19 light
     rows       x = 122, w = 1210, radius 15, --shadow-card
                open row   y = 1879, h = 129, white at 0.8
                closed rows y = 2026 / 2110 / 2194, h = 59, white at 0.9
     question   x = 145 (row 3 at 143, row 4 at 144), 17 / 19
     answer     x = 145, y = 1946, 1150 wide
     chevron    right edge, 50px, brand gradient; the open row's points down
     ornament   box x = 774, y = 1704, 1080.446 square,
                inner render 786.028 square, flipped in Y, rotated -148.6deg

   Every question and answer here is an ORPHAN in Figma: parented to the canvas
   rather than the frame, so the codegen omits them and the frame render shows
   four empty boxes. Text and coordinates were recovered from the canvas
   metadata. Flagged in section.json.
   ========================================================================== */


  .faq {
    position: relative;
    padding-block: 61px 106px;
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 8.4028vw, 121px))
      calc(var(--stage-x) + clamp(1.25rem, 7.5vw, 108px));
  }

  .faq__title,
  .faq__intro,
  .faq__list {
    position: relative;
    z-index: 1;
  }

  .faq__title {
    max-inline-size: 881px;
    color: var(--color-heading-alt);
  }

  .faq__intro {
    /* h2 closes at 1783, intro opens at 1824. */
    margin-block-start: 41px;
    /* The three blocks each start on their own x: 121 / 124 / 122. */
    margin-inline-start: 3px;
  }

  .faq__list {
    /* intro closes at 1843, first row opens at 1879. */
    margin-block-start: 36px;
    margin-inline-start: 1px;
    display: grid;
    /* Row tops 1879 / 2026 / 2110 / 2194 against heights 129 / 59 / 59 / 59
       give gaps of 18 / 25 / 25. A repeater cannot carry a different first
       gap, so they are normalised to 23: the list totals 375 against the drawn
       374, and no row sits more than 5px off. */
    row-gap: 23px;
  }

  .faq__item {
    border-radius: var(--radius-md);
    background-color: rgb(255 255 255 / 0.9);
    box-shadow: var(--shadow-card);
  }

  .faq__item[open] {
    background-color: rgb(255 255 255 / 0.8);
  }

  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-block-size: 59px;
    padding-inline: 23px 20px;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--color-text);
    cursor: pointer;
    /* The design draws its own chevron, so the native marker goes. */
    list-style: none;
  }

  .faq__question::-webkit-details-marker {
    display: none;
  }

  /* The chevron: a 50px ">" in the brand gradient, rotated a quarter turn
     once the row is open. Decorative, hence a pseudo-element with no text. */
  .faq__question::after {
    content: ">";
    font-size: var(--text-2xl);
    line-height: 1;
    background-image: var(--gradient-brand);
    color: var(--color-brand-to);
    transition: rotate var(--duration-base) var(--ease-out);
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .faq__question::after {
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  .faq__item[open] .faq__question::after {
    rotate: 90deg;
  }

  .faq__answer {
    /* 13 rather than a rounder number so the open row totals the drawn 129:
       59 for the summary, 57 for three lines of answer, 13 beneath. */
    padding: 0 23px 13px;
    max-inline-size: 1150px;
  }

  .faq__ornament {
    position: absolute;
    inset-block-start: 94px;      /* 1704 - 1610 */
    inset-inline-start: calc(var(--stage-x) + 774px);
    inline-size: 1080.446px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }

  .faq__ornament-frame {
    flex: none;
    inline-size: 72.751%;         /* 786.028 / 1080.446 */
    aspect-ratio: 1;
    scale: 1 -1;
    rotate: -148.6deg;
    display: block;
  }

  .faq__ornament-frame img {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no comp. Decisions taken here:
       - rows keep their full width and simply grow taller as questions
         wrap; nothing about an accordion needs to reflow
       - the ornament is dropped below 64rem, where it would sit on the
         rows rather than beside them
     ------------------------------------------------------------------ */

  @media (width < 64rem) {
    .faq {
      padding-block: 64px 64px;
    }

    .faq__ornament {
      display: none;
    }
  }