Cards Product Grid

<!-- Apple homepage-style 2-column product lineup grid.
     Tiles use hardcoded product-specific colors — dekorative Farben bleiben hardcoded. -->
<section class="ws-cards bg-[#f5f5f7] py-3" aria-label="Produktübersicht" style="color: var(--ws-color-text);"><!-- ws-ok -->
  <div class="mx-auto max-w-[1200px] px-3">
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">

      <!-- Tile 1: Dark (AirPods Max) -->
      <article class="flex min-h-[420px] flex-col items-center overflow-hidden rounded-3xl bg-[#1d1d1f] px-8 pb-0 pt-12 text-center">
        <p class="text-sm font-semibold text-[#6e6e73]">Jetzt verfügbar</p>
        <h2 class="mt-1 text-3xl font-bold tracking-tight text-white sm:text-[2rem]">
          AirPods&nbsp;Max&nbsp;2
        </h2>
        <p class="mt-2 text-base text-[#f5f5f7]">
          Außergewöhnlicher Klang. Neues&nbsp;USB‑C.
        </p>
        <div class="mt-3 flex items-center justify-center gap-1 text-sm"
          role="group" aria-label="AirPods Max 2 Aktionen">
          <a href="#" class="font-medium text-[#2997ff] hover:underline">Weitere Infos</a>
          <span class="mx-1 text-[#6e6e73]" aria-hidden="true">|</span>
          <a href="#" class="font-medium text-[#2997ff] hover:underline">Kaufen</a>
        </div>
        <!-- Product image — replace with real photo, bleeds off bottom -->
        <div class="mt-8 flex flex-1 items-end justify-center">
          <div class="h-52 w-44 rounded-t-2xl bg-gradient-to-b from-slate-500/60 to-slate-700"
            role="img" aria-label="AirPods Max 2 Abbildung"></div>
        </div>
      </article>

      <!-- Tile 2: Light silver (Apple Watch Series 11) -->
      <article class="flex min-h-[420px] flex-col items-center overflow-hidden rounded-3xl bg-[#f5f5f7] px-8 pb-0 pt-12 text-center">
        <p class="text-sm font-semibold text-[#6e6e73]">Neu</p>
        <h2 class="mt-1 text-3xl font-bold tracking-tight text-[#1d1d1f] sm:text-[2rem]">
          Apple Watch Series&nbsp;11
        </h2>
        <p class="mt-2 text-base text-[#6e6e73]">
          Deine Gesundheit. Auf&nbsp;dem&nbsp;Handgelenk.
        </p>
        <div class="mt-3 flex items-center justify-center gap-1 text-sm"
          role="group" aria-label="Apple Watch Series 11 Aktionen">
          <a href="#" class="font-medium text-[#0066cc] hover:underline">Weitere Infos</a>
          <span class="mx-1 text-[#6e6e73]" aria-hidden="true">|</span>
          <a href="#" class="font-medium text-[#0066cc] hover:underline">Kaufen</a>
        </div>
        <!-- Product image placeholder -->
        <div class="mt-8 flex flex-1 items-end justify-center">
          <div class="h-52 w-44 rounded-t-2xl bg-gradient-to-b from-stone-200 to-stone-300"
            role="img" aria-label="Apple Watch Series 11 Abbildung"></div>
        </div>
      </article>

      <!-- Tile 3: Deep space black (MacBook Pro) -->
      <article class="flex min-h-[420px] flex-col items-center overflow-hidden rounded-3xl bg-[#161617] px-8 pb-0 pt-12 text-center">
        <p class="text-sm font-semibold text-[#6e6e73]">Jetzt kaufen</p>
        <h2 class="mt-1 text-3xl font-bold tracking-tight text-white sm:text-[2rem]">
          MacBook&nbsp;Pro
        </h2>
        <p class="mt-2 text-base text-[#f5f5f7]">
          M4 Pro und M4 Max. Monster&nbsp;Performance.
        </p>
        <div class="mt-3 flex items-center justify-center gap-1 text-sm"
          role="group" aria-label="MacBook Pro Aktionen">
          <a href="#" class="font-medium text-[#2997ff] hover:underline">Weitere Infos</a>
          <span class="mx-1 text-[#6e6e73]" aria-hidden="true">|</span>
          <a href="#" class="font-medium text-[#2997ff] hover:underline">Kaufen</a>
        </div>
        <!-- Product image placeholder -->
        <div class="mt-8 flex flex-1 items-end justify-center">
          <div class="h-44 w-64 rounded-t-xl bg-gradient-to-b from-zinc-600/50 to-zinc-800"
            role="img" aria-label="MacBook Pro Abbildung"></div>
        </div>
      </article>

      <!-- Tile 4: Orange/Titan (Apple Watch Ultra 3) -->
      <article class="flex min-h-[420px] flex-col items-center overflow-hidden rounded-3xl bg-[#f0ebe3] px-8 pb-0 pt-12 text-center">
        <p class="text-sm font-semibold text-[#8a7a6a]">Neu</p>
        <h2 class="mt-1 text-3xl font-bold tracking-tight text-[#1d1d1f] sm:text-[2rem]">
          Apple Watch Ultra&nbsp;3
        </h2>
        <p class="mt-2 text-base text-[#6e6e73]">
          Built for&nbsp;limits. Designed for&nbsp;life.
        </p>
        <div class="mt-3 flex items-center justify-center gap-1 text-sm"
          role="group" aria-label="Apple Watch Ultra 3 Aktionen">
          <a href="#" class="font-medium text-[#0066cc] hover:underline">Weitere Infos</a>
          <span class="mx-1 text-[#8a7a6a]" aria-hidden="true">|</span>
          <a href="#" class="font-medium text-[#0066cc] hover:underline">Kaufen</a>
        </div>
        <!-- Product image placeholder -->
        <div class="mt-8 flex flex-1 items-end justify-center">
          <div class="h-52 w-44 rounded-t-2xl bg-gradient-to-b from-amber-200 to-amber-400/60"
            role="img" aria-label="Apple Watch Ultra 3 Abbildung"></div>
        </div>
      </article>

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