App Icon Strip Base

<div class="ws-app-icon-strip bg-[var(--ws-app-icon-strip-bg)] py-12">
  <div class="mx-auto max-w-5xl px-6">
    <!-- Header -->
    <div class="mb-8 flex items-end justify-between">
      <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-app-icon-strip-text)]">
        Creative Cloud-Programme entdecken.
      </h2>
      <a href="#" class="hidden text-sm font-semibold text-[var(--ws-color-primary)] hover:underline underline-offset-2 sm:block">
        Alle Produkte →
      </a>
    </div>

    <!-- App icon grid — horizontal scroll on mobile -->
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
      <!-- Photoshop -->
      <a href="#" class="group flex items-center gap-3 rounded-xl border border-[var(--ws-app-icon-strip-border)] bg-[var(--ws-app-icon-strip-card-bg)] p-3 transition hover:border-[var(--ws-color-primary)]/30 hover:shadow-md lg:flex-col lg:items-start lg:gap-2 lg:p-4">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#31A8FF] text-sm font-black text-white shadow-sm lg:size-12">Ps</span>
        <div class="min-w-0">
          <p class="truncate text-sm font-semibold text-[var(--ws-app-icon-strip-text)]">Photoshop</p>
          <p class="hidden truncate text-xs text-[var(--ws-app-icon-strip-text-soft)] lg:block">Bildbearbeitung &amp; Design</p>
        </div>
      </a>

      <!-- Illustrator -->
      <a href="#" class="group flex items-center gap-3 rounded-xl border border-[var(--ws-app-icon-strip-border)] bg-[var(--ws-app-icon-strip-card-bg)] p-3 transition hover:border-[var(--ws-color-primary)]/30 hover:shadow-md lg:flex-col lg:items-start lg:gap-2 lg:p-4">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#FF9A00] text-sm font-black text-white shadow-sm lg:size-12">Ai</span>
        <div class="min-w-0">
          <p class="truncate text-sm font-semibold text-[var(--ws-app-icon-strip-text)]">Illustrator</p>
          <p class="hidden truncate text-xs text-[var(--ws-app-icon-strip-text-soft)] lg:block">Vektorgrafik &amp; Illustration</p>
        </div>
      </a>

      <!-- Premiere Pro -->
      <a href="#" class="group flex items-center gap-3 rounded-xl border border-[var(--ws-app-icon-strip-border)] bg-[var(--ws-app-icon-strip-card-bg)] p-3 transition hover:border-[var(--ws-color-primary)]/30 hover:shadow-md lg:flex-col lg:items-start lg:gap-2 lg:p-4">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#9999FF] text-sm font-black text-white shadow-sm lg:size-12">Pr</span>
        <div class="min-w-0">
          <p class="truncate text-sm font-semibold text-[var(--ws-app-icon-strip-text)]">Premiere Pro</p>
          <p class="hidden truncate text-xs text-[var(--ws-app-icon-strip-text-soft)] lg:block">Videobearbeitung</p>
        </div>
      </a>

      <!-- InDesign -->
      <a href="#" class="group flex items-center gap-3 rounded-xl border border-[var(--ws-app-icon-strip-border)] bg-[var(--ws-app-icon-strip-card-bg)] p-3 transition hover:border-[var(--ws-color-primary)]/30 hover:shadow-md lg:flex-col lg:items-start lg:gap-2 lg:p-4">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#FF3366] text-sm font-black text-white shadow-sm lg:size-12">Id</span>
        <div class="min-w-0">
          <p class="truncate text-sm font-semibold text-[var(--ws-app-icon-strip-text)]">InDesign</p>
          <p class="hidden truncate text-xs text-[var(--ws-app-icon-strip-text-soft)] lg:block">Layout &amp; Publishing</p>
        </div>
      </a>

      <!-- Firefly -->
      <a href="#" class="group flex items-center gap-3 rounded-xl border border-[var(--ws-app-icon-strip-border)] bg-[var(--ws-app-icon-strip-card-bg)] p-3 transition hover:border-[var(--ws-color-primary)]/30 hover:shadow-md lg:flex-col lg:items-start lg:gap-2 lg:p-4">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-600 text-sm font-black text-white shadow-sm lg:size-12">Fi</span>
        <div class="min-w-0">
          <p class="truncate text-sm font-semibold text-[var(--ws-app-icon-strip-text)]">Firefly</p>
          <p class="hidden truncate text-xs text-[var(--ws-app-icon-strip-text-soft)] lg:block">KI-Bildgenerierung</p>
        </div>
      </a>

      <!-- Acrobat -->
      <a href="#" class="group flex items-center gap-3 rounded-xl border border-[var(--ws-app-icon-strip-border)] bg-[var(--ws-app-icon-strip-card-bg)] p-3 transition hover:border-[var(--ws-color-primary)]/30 hover:shadow-md lg:flex-col lg:items-start lg:gap-2 lg:p-4">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#FF0000] text-sm font-black text-white shadow-sm lg:size-12">Ac</span>
        <div class="min-w-0">
          <p class="truncate text-sm font-semibold text-[var(--ws-app-icon-strip-text)]">Acrobat</p>
          <p class="hidden truncate text-xs text-[var(--ws-app-icon-strip-text-soft)] lg:block">PDF-Tools &amp; E-Signaturen</p>
        </div>
      </a>
    </div>

    <a href="#" class="mt-6 block text-center text-sm font-semibold text-[var(--ws-color-primary)] hover:underline underline-offset-2 sm:hidden">
      Alle Produkte anzeigen →
    </a>
  </div>
</div>