Feature Overlap Card

<style>
  .ws-features {
    --ws-features-bg: oklch(0.97 0.01 75);
    --ws-features-text: oklch(0.2 0.02 75);
    --ws-features-text-soft: oklch(0.45 0.02 75);
    --ws-features-text-muted: oklch(0.6 0.015 75);
    --ws-features-card-bg: oklch(1 0 0);
    --ws-features-border: oklch(0.9 0.01 75);
    --ws-features-icon-bg: oklch(0.93 0.04 75);
    --ws-features-icon-color: oklch(0.45 0.12 260);
  }
</style>

<!-- Upper colored strip — hardcoded dark, always dark -->
<div class="ws-features bg-slate-900 px-6 pb-24 pt-16 text-center"><!-- ws-ok -->
  <p class="mb-3 text-sm font-semibold uppercase tracking-widest text-slate-400">Why it matters</p>
  <h2 class="mx-auto max-w-2xl text-3xl font-bold tracking-tight text-white sm:text-4xl">
    Beratung, die wirklich weiterbringt
  </h2>
  <p class="mx-auto mt-4 max-w-xl text-slate-300">
    Wir verstehen Ihre Herausforderungen — und finden die IT-Lösung, die Ihnen den größten Nutzen bringt.
  </p>
</div>

<!-- Lower section with overlapping card -->
<section class="ws-features bg-[var(--ws-features-bg)] pb-20" aria-label="Unsere Stärken">
  <div class="mx-auto max-w-5xl px-6">
    <!-- Overlapping card -->
    <div
      class="-mt-12 overflow-hidden rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] shadow-xl"
      role="list"
      aria-label="Feature-Übersicht"
    >
      <div class="grid divide-y divide-[var(--ws-features-border)] md:grid-cols-3 md:divide-x md:divide-y-0">

        <!-- Feature 1 -->
        <div class="p-8" role="listitem">
          <div
            class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]"
            aria-hidden="true"
          >
            <svg
              class="h-5 w-5 text-[var(--ws-features-icon-color)]"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
            </svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-features-text)]">Fundierte Beratung</h3>
          <p class="text-sm leading-relaxed text-[var(--ws-features-text-soft)]">
            Wir stellen gemeinsam die Weichen — bevor die erste Zeile Code geschrieben wird.
          </p>
        </div>

        <!-- Feature 2 -->
        <div class="p-8" role="listitem">
          <div
            class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]"
            aria-hidden="true"
          >
            <svg
              class="h-5 w-5 text-[var(--ws-features-icon-color)]"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-features-text)]">Change-Management</h3>
          <p class="text-sm leading-relaxed text-[var(--ws-features-text-soft)]">
            Menschen nehmen Veränderungen an, wenn sie von Anfang an einbezogen werden.
          </p>
        </div>

        <!-- Feature 3 -->
        <div class="p-8" role="listitem">
          <div
            class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]"
            aria-hidden="true"
          >
            <svg
              class="h-5 w-5 text-[var(--ws-features-icon-color)]"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-features-text)]">Qualitätssicherung</h3>
          <p class="text-sm leading-relaxed text-[var(--ws-features-text-soft)]">
            Jedes Teilergebnis wird geprüft und getestet — Probleme früh erkennen statt spät beheben.
          </p>
        </div>

      </div>
    </div>
  </div>
</section>