Komponente "Medien einbetten"

<div class="font-sans antialiased bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-slate-900 dark:to-teal-950 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto rounded-3xl overflow-hidden shadow-2xl relative bg-white dark:bg-gray-800 border border-emerald-200 dark:border-teal-700 backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90">
    <!-- Organic Top Shape -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 1440 600" preserveAspectRatio="none">
        <path fill="url(#flowyGradient)" d="M0,224C0,224,374.8,2.7,720,0c345.2,-2.7,720,224,720,224L1440,600L0,600L0,224Z"></path>
        <defs>
          <linearGradient id="flowyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#34D399" />
            <stop offset="100%" stop-color="#10B981" />
          </linearGradient>
        </defs>
      </svg>
    </div>

    <div class="relative z-10 p-6 sm:p-8 md:p-10 lg:p-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Main Content Area -->
      <div class="lg:col-span-2 space-y-8">
        <!-- Video Embed Area -->
        <div class="relative pb-[56.25%] h-0 rounded-2xl overflow-hidden shadow-xl border border-emerald-300 dark:border-teal-600 transform scale-[0.99] hover:scale-100 transition-transform duration-300 ease-in-out">
          <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=WpIK1mX4qIK0wK2X" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>

        <!-- Article Details & Content -->
        <article class="space-y-6 text-lg leading-relaxed">
          <header class="space-y-4">
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-800 dark:text-emerald-300 capitalize tracking-tight leading-snug">
              The Serene Dance of Emerald Forests
            </h1>
            <div class="flex items-center space-x-4 text-emerald-600 dark:text-teal-400 text-sm">
              <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full object-cover border-2 border-emerald-400 dark:border-teal-500 shadow-md"/>
                <span>By Sarah Green</span>
              </div>
              <span>•</span>
              <span>October 26, 2023</span>
              <span>•</span>
              <span>8 min read</span>
            </div>
          </header>

          <p class="text-gray-700 dark:text-gray-300 first-letter:text-5xl first-letter:font-bold first-letter:float-left first-letter:mr-3 first-letter:text-emerald-700 dark:first-letter:text-teal-400">
            In the heart of ancient lands, where the veil between worlds thins, lies a realm of unparalleled beauty – the Emerald Forests. Here, sunlight filters through a canopy of vibrant leaves, painting the forest floor in shifting patterns of gold and green. The air is thick with the scent of damp earth and blooming wildflowers, carried on a gentle breeze that whispers secrets through the rustling foliage.
          </p>
          <p class="text-gray-700 dark:text-gray-300">
            Towering trees, their roots deeply intertwined, form natural cathedrals. Moss-covered rocks, worn smooth by centuries of rain, punctuate crystal-clear streams that meander through the landscape, their murmuring currents a soothing melody. This verdant sanctuary is a testament to nature's enduring power and delicate balance, a symphony of life playing out in vibrant hues.
          </p>
          <blockquote class="p-4 border-l-4 border-emerald-500 dark:border-teal-400 text-gray-700 dark:text-gray-300 italic rounded-r-lg bg-emerald-50 dark:bg-teal-900 shadow-inner">
            "Nature does not hurry, yet everything is accomplished." – Lao Tzu
          </blockquote>
          <p class="text-gray-700 dark:text-gray-300">
            From the smallest beetle scuttling through fallen leaves to the majestic deer grazing in sun-dappled clearings, every creature plays a vital role in this thriving ecosystem. Birds with plumage like living jewels flit between branches, their songs echoing through the silence, adding to the immersive experience. It's a place where time slows, allowing one to truly connect with the rhythms of the earth.
          </p>
          <h2 class="text-2xl sm:text-3xl font-bold text-emerald-700 dark:text-emerald-400 mt-8 mb-4">The Flow of Life's Energies</h2>
          <p class="text-gray-700 dark:text-gray-300">
            The very essence of the Emerald Forests is its flow – the cyclical dance of growth and decay, the ceaseless movement of water and air, the interconnectedness of all living things. This natural rhythm inspires a sense of profound peace and understanding, reminding us of our own place within the grand tapestry of existence. Observing the intricate patterns of a fern, or the graceful bend of a willow by a stream, reveals lessons in resilience and adaptation.
          </p>
        </article>
      </div>

      <!-- Sidebar Area -->
      <aside class="space-y-8">
        <!-- Related Content -->
        <section class="bg-emerald-50 dark:bg-gray-900 p-6 rounded-2xl shadow-lg border border-emerald-200 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
          <h2 class="text-xl font-bold mb-4 text-emerald-700 dark:text-emerald-400">More from Nature's Embrace</h2>
          <ul class="space-y-4">
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=1" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Whispers of the Ancient Woods
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">A deep dive into old-growth forests.</p>
              </div>
            </li>
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=2" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Rivers of Sapphire: Journey Through Waterways
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">Exploring the lifeblood of ecosystems.</p>
              </div>
            </li>
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=3" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Ruby Sunset: The Colors of Wildlife
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">A photographic essay on vibrant animal life.</p>
              </div>
            </li>
          </ul>
        </section>

        <!-- Newsletter Signup -->
        <section class="bg-emerald-100 dark:bg-emerald-950 p-6 rounded-2xl shadow-lg border border-emerald-300 dark:border-teal-600 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
          <h2 class="text-xl font-bold mb-4 text-emerald-800 dark:text-emerald-300">Embrace the Flow with Our Newsletter</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">
            Join our community for weekly insights into nature, sustainability, and mindful living.
          </p>
          <form class="space-y-4">
            <input type="email" placeholder="[email protected]" class="w-full p-3 rounded-lg border border-emerald-400 dark:border-teal-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-emerald-500 dark:focus:ring-teal-400 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500" aria-label="Email address for newsletter signup" required />
            <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-xl shadow-md transition-colors duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-teal-400 dark:focus:ring-offset-gray-900">
              Subscribe Now
            </button>
          </form>
        </section>
      </aside>
    </div>
  </div>
</div>