Einbettungskomponente für neumorphe Medien

<div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200">
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center text-indigo-700 dark:text-purple-400 drop-shadow-lg">CRM Media Insight</h2>

  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Media Player Section -->
    <div class="lg:col-span-2 p-6 rounded-3xl bg-blue-100 dark:bg-gray-850 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
      <div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark">
        <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
        <div>
          <h3 class="text-xl sm:text-2xl font-bold text-indigo-800 dark:text-purple-300 mb-1">Customer Onboarding: Module 1</h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Presented by Acme Solutions, Inc.</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-indigo-700 dark:text-purple-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Like Video">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 21.35l-1.95-1.8C4.24 14.07 2 12.16 2 9.5 2 7.02 3.99 5 6.5 5c1.74 0 3.41.81 4.5 2.09C12.09 5.81 13.76 5 15.5 5 18.01 5 20 7.02 20 9.5c0 2.66-2.24 4.57-8 10.09z"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-indigo-700 dark:text-purple-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Share Video">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.55 1.25.89 2.04.89 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.03.47.08.69L6 8.35v7.3l-2.07-1.12c-.01-.01-.02-.01-.03-.02-.12-.08-.2-.17-.28-.31-.1-.18-.18-.39-.23-.62-.05-.23-.08-.48-.08-.73 0-.25.03-.5.08-.73.05-.23.13-.44.23-.62.08-.14.16-.23.28-.31.01-.01.02-.01.03-.02l2.36-1.3c-.05-.22-.08-.46-.08-.7 0-1.66 1.34-3 3-3s3 1.34 3 3c0 .24-.03.47-.08.69L18 8.35c.76 0 1.44.3 1.96.77L21 12.3c-.05.23-.09.46-.09.7s.04.47.09.7L18.04 16.08l-.01.01z"/>
            </svg>
          </button>
        </div>
      </div>

      <div class="text-gray-700 dark:text-gray-300 mb-6">
        <p class="mb-2 text-justify">This comprehensive video provides an in-depth guide to the initial steps of customer onboarding within the CRM system. Learn how to efficiently set up new client profiles, assign tasks, and track their progress through the initial stages of their journey.</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">#CRM #Onboarding #CustomerSuccess #BusinessTools</p>
      </div>

      <!-- Comment / Interaction Section -->
      <div class="pt-4 border-t border-blue-200 dark:border-gray-700">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-10 h-10 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <input type="text" placeholder="Add a comment..." class="flex-grow p-3 rounded-full bg-blue-50 dark:bg-gray-750 placeholder-gray-500 text-gray-800 dark:text-gray-200 shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-purple-500 transition-all duration-200">
          <button class="p-3 rounded-full bg-green-400 dark:bg-green-600 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-white transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Post Comment">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
            </svg>
          </button>
        </div>

        <div class="space-y-4">
          <div class="flex items-start space-x-3 p-3 rounded-xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm">
            <img class="w-8 h-8 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Commenter Avatar">
            <div>
              <p class="font-semibold text-indigo-700 dark:text-purple-300 text-sm">Sarah J.</p>
              <p class="text-gray-700 dark:text-gray-300 text-sm">"Great insights! This really simplifies the initial setup."</p>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">2 days ago</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 p-3 rounded-xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm">
            <img class="w-8 h-8 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Commenter Avatar">
            <div>
              <p class="font-semibold text-indigo-700 dark:text-purple-300 text-sm">Mark P.</p>
              <p class="text-gray-700 dark:text-gray-300 text-sm">"How do I integrate this with our external reporting tools?"</p>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">1 day ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Sidebar / Related Content Section -->
    <div class="lg:col-span-1 p-6 rounded-3xl bg-blue-100 dark:bg-gray-850 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
      <h4 class="text-lg sm:text-xl font-bold text-indigo-800 dark:text-purple-300 mb-4">Related Content</h4>

      <div class="space-y-6">
        <!-- Related Item 1 -->
        <div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
          <img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1018/300/200" alt="Thumbnail">
          <div>
            <p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Advanced CRM Analytics</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Unlock deeper customer insights with advanced reporting features.</p>
          </div>
        </div>
        <!-- Related Item 2 -->
        <div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
          <img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1025/300/200" alt="Thumbnail">
          <div>
            <p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Integrate with Marketing Automation</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Seamlessly connect your CRM with popular marketing platforms.</p>
          </div>
        </div>
        <!-- Related Item 3 -->
        <div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
          <img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1069/300/200" alt="Thumbnail">
          <div>
            <p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Sales Workflow Optimization</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Streamline your sales process for maximum efficiency.</p>
          </div>
        </div>

        <button class="w-full mt-6 py-3 px-6 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white font-semibold text-lg shadow-neumorphic-vibrant dark:shadow-neumorphic-vibrant-dark hover:from-violet-600 hover:to-fuchsia-600 transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850">
          Explore More Topics
        </button>
      </div>
    </div>
  </div>

  <style>
  /* Neumorphic Shadows (light mode) */
  .shadow-neumorphic-light {
    box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
  }
  .shadow-neumorphic-light-sm {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-pressed-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }
  .shadow-inset-neumorphic-light {
    box-shadow: inset 7px 7px 14px #a3b1c6, inset -7px -7px 14px #ffffff;
  }

  /* Neumorphic Shadows (dark mode) */
  .dark .shadow-neumorphic-dark {
    box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #3a3a3a;
  }
  .dark .shadow-neumorphic-dark-sm {
    box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #3a3a3a;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #0e0e0e, inset -5px -5px 10px #4d4d4d;
  }
  .dark .shadow-inset-neumorphic-dark {
    box-shadow: inset 7px 7px 14px #0e0e0e, inset -7px -7px 14px #4d4d4d;
  }

  /* Vibrant neumorphic button shadow */
  .shadow-neumorphic-vibrant {
    box-shadow: 10px 10px 20px rgba(139, 92, 246, 0.4), -10px -10px 20px rgba(232, 107, 203, 0.4);
  }
  .dark .shadow-neumorphic-vibrant-dark {
    box-shadow: 10px 10px 20px rgba(139, 92, 246, 0.2), -10px -10px 20px rgba(232, 107, 203, 0.2);
  }

  /* Custom Background Colors for Neumorphism */
  .bg-blue-50 {
    background-color: #e0f2f7; /* Light cyan for softer neumorphism */
  }
  .dark .bg-gray-850 {
      background-color: #27272a; /* Slightly lighter than gray-900 */
  }
  .bg-blue-100 {
      background-color: #e9f5f9; /* Base for light elements */
  }
  .dark .bg-gray-850 {
      background-color: #27272a; /* Base for dark elements */
  }
  .bg-blue-150 {
      background-color: #f0f7fb; /* Slightly lighter for inner elements */
  }
  .dark .bg-gray-800 {
      background-color: #2c2c2f; /* Slightly lighter for inner elements in dark mode */
  }
  .dark .bg-gray-750 {
       background-color: #3b3b3e; /* Input background */
  }
  .bg-blue-200 {
      background-color: #cce9f5; /* For buttons and interactive elements */
  }

  /* Example of how to integrate this with Tailwind PostCSS setup:
  @layer base {
    :root {
      --color-blue-50: #e0f2f7;
      --color-blue-100: #e9f5f9;
      --color-blue-150: #f0f7fb;
      --color-blue-200: #cce9f5;
    }
    .dark {
      --color-gray-850: #27272a;
      --color-gray-750: #3b3b3e;
      --color-gray-800: #2c2c2f;
    }
  }
  @layer components {
    .shadow-neumorphic-light {
      box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
    }
    .shadow-neumorphic-dark {
      box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #3a3a3a;
    }
    /* ... rest of the neumorphic shadows */
  }
  */
  </style>
</div>