integration: name case metrics, split delivered offerings from offers, and frame the stack honestly

Give every metrics list a localized heading, keep delivered Rösterei tools out of the offer boundary, and describe the skills grid as a familiarity overview with an evidence note instead of claiming public-case backing for every item.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/features/services/service-page-view/service-page-view.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import {
+  type OfferingCopy,
   type ProcessStepCopy,
   type ServicePageId,
   type ServiceSequenceCopy,
@@ -42,4 +43,24 @@ export class ServicePageView {
     const section = this.page().sections.find((item) => item.id === 'sequence');
     return section ? `section-${section.id}` : null;
   });
+  protected readonly deliveredOfferings = computed(() =>
+    this.page().offerings.filter((offering) => offering.status === 'delivered'),
+  );
+  protected readonly offerOfferings = computed(() =>
+    this.page().offerings.filter((offering) => offering.status === 'offer'),
+  );
+  protected readonly deliveredHeadingId = computed(() => `offerings-delivered-${this.routeId()}`);
+  protected readonly offerHeadingId = computed(() => `offerings-offer-${this.routeId()}`);
+
+  protected caseBackedNote(offering: OfferingCopy): string | null {
+    const caseId = offering.referenceCaseId;
+    if (!caseId) {
+      return null;
+    }
+
+    return this.page().offeringCaseBackedLabel.replace(
+      '{case}',
+      this.content.caseStudy(caseId)().client,
+    );
+  }
 }