<section class="features-section" id="features-section">
  <div class="features-section__wrapper">
    <div class="features-section__header">
      <span class="features-section__label">Unsere Vorteile</span>
      <h2>Warum Kunden uns wählen</h2>
      <p class="text-muted">Kein Baukasten, keine Kompromisse – nur echtes Handwerk für Ihre digitale Präsenz.</p>
    </div>
    <div class="features-section__grid">
      @for (feature of featuresList; track feature.id; let i = $index) {
        <div
          #cardRef
          class="features-section__card"
          [style.--delay]="(i * 120) + 'ms'"
          opTrack="feature_card_click"
          [opTrackProps]="{ feature_id: feature.id, claim: feature.claim }">

          <div class="features-section__icon-wrap">
            <ng-icon [name]="feature.icon" class="features-section__icon"></ng-icon>
          </div>

          <h3 class="features-section__claim">{{ feature.claim }}</h3>
          <p class="features-section__description">{{ feature.description }}</p>

          <div class="features-section__benefit">
            <span class="features-section__check">✓</span>
            {{ feature.benefit }}
          </div>
        </div>
      }
    </div>
  </div>
</section>
