Datei-Viewer-Komponente

<div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen font-sans antialiased text-stone-800 dark:text-stone-200">

  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">

    <!-- Header / Toolbar -->
    <div class="flex items-center justify-between p-4 sm:p-5 border-b border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-700/50">
      <h2 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 uppercase tracking-wide">Document.pdf</h2>
      <div class="flex space-x-2 sm:space-x-3">
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          <span class="sr-only">Search</span>
        </button>
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          <span class="sr-only">Download</span>
        </button>
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
          <span class="sr-only">View</span>
        </button>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 md:p-8 bg-stone-50 dark:bg-stone-900/50 text-stone-700 dark:text-stone-300 leading-relaxed">

      <div class="mb-6 sm:mb-8 md:mb-10">
        <h3 class="text-xl sm:text-2xl font-bold mb-3 text-stone-800 dark:text-stone-100">The Foundations of Industrial Design</h3>
        <p class="text-sm sm:text-base mb-4">Industrial design often stems from the raw interplay of materials and function. This section explores the underlying principles that shape the aesthetic of utilitarian objects, emphasizing exposed components and a no-nonsense approach to form.</p>
        <figure class="mb-4">
          <img src="https://picsum.photos/800/450?random=1" alt="Industrial workshop interior" class="w-full h-auto rounded-md shadow-sm border border-stone-200 dark:border-stone-700 object-cover">
          <figcaption class="text-xs sm:text-sm text-center mt-2 text-stone-600 dark:text-stone-400">Fig 1. Exposed concrete and metal beams in a modern industrial setting.</figcaption>
        </figure>
        <p class="text-sm sm:text-base">The design philosophy reveres the honest display of construction and materials. Unpolished surfaces, visible welding, and structural elements are not defects but celebrated features, telling a story of the object's creation and purpose.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 mb-6 sm:mb-8 md:mb-10">
        <div>
          <h4 class="text-lg sm:text-xl font-semibold mb-3 text-stone-800 dark:text-stone-100">Materiality: Texture and Tone</h4>
          <ul class="list-disc list-inside text-sm sm:text-base space-y-2">
            <li><strong class="text-stone-700 dark:text-stone-200">Steel & Iron:</strong> Often left untreated or with a patinated finish.</li>
            <li><strong class="text-stone-700 dark:text-stone-200">Reclaimed Wood:</strong> Imperfections and grain celebrated for character.</li>
            <li><strong class="text-stone-700 dark:text-stone-200">Concrete:</strong> Raw, poured surfaces providing a robust base.</li>
            <li><strong class="text-stone-700 dark:text-stone-200">Leather:</strong> Distressed or aged, adding warmth and tactile quality.</li>
          </ul>
        </div>
        <div>
          <h4 class="text-lg sm:text-xl font-semibold mb-3 text-stone-800 dark:text-stone-100">Color Palette: Warm Neutrals</h4>
          <p class="text-sm sm:text-base mb-3">The chosen scheme of warm neutrals complements the industrial character, softening its edges while maintaining an earthy, grounded feel. These colors reflect natural materials and aged patinas.</p>
          <div class="flex flex-wrap gap-2 sm:gap-3">
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-beige-300 dark:bg-beige-700 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Beige</span></div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-cream-200 dark:bg-cream-800 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Cream</span></div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-400 dark:bg-stone-600 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Warm Gray</span></div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-900 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Accent Brown</span></div>
          </div>
        </div>
      </div>

      <p class="text-sm sm:text-base">The utilitarian approach extends beyond aesthetics to functionality, where form directly follows purpose. There is an inherent beauty in components that are designed purely for their task, without superfluous ornamentation. This ethos creates products that are durable, timeless, and deeply honest in their expression.</p>

      <div class="mt-6 sm:mt-8 md:mt-10 py-4 border-t border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 text-xs sm:text-sm flex items-center justify-between">
        <div class="flex items-center space-x-2">
           <img class="w-6 h-6 sm:w-8 sm:h-8 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
           <span>Authored by <span class="font-medium text-stone-700 dark:text-stone-200">J. Miller</span></span>
        </div>
        <span>Page <span class="font-medium text-stone-700 dark:text-stone-200">1</span> of <span class="font-medium text-stone-700 dark:text-stone-200">7</span></span>
      </div>

    </div>

    <!-- Footer / Pagination -->
    <div class="flex items-center justify-center p-4 sm:p-5 border-t border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-700/50">
      <nav class="flex space-x-2 sm:space-x-4">
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600 group">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 text-stone-600 dark:text-stone-300 group-hover:text-stone-700 dark:group-hover:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
          <span class="sr-only">Previous Page</span>
        </button>
        <span class="px-3 py-1 text-sm bg-stone-200 dark:bg-stone-600 text-stone-800 dark:text-stone-100 rounded-md font-semibold">1</span>
        <button class="px-3 py-1 text-sm text-stone-600 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">2</button>
        <button class="px-3 py-1 text-sm text-stone-600 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">3</button>
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600 group">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 text-stone-600 dark:text-stone-300 group-hover:text-stone-700 dark:group-hover:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          <span class="sr-only">Next Page</span>
        </button>
      </nav>
    </div>

  </div>
</div>