Tailwind CSS & Material Design 3 Komponenten

<!-- Filled Button -->
<button class="px-6 py-2.5 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-full shadow-md hover:shadow-lg active:scale-95 transition-all flex items-center gap-2 cursor-pointer text-xs">
  <span class="material-symbols-rounded text-base">rocket_launch</span> Filled Button
</button>

<!-- Outlined Button -->
<button class="px-6 py-2.5 border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 font-medium rounded-full active:scale-95 transition-all flex items-center gap-2 cursor-pointer text-xs">
  <span class="material-symbols-rounded text-base">settings</span> Outlined
</button>

<!-- Elevated Button -->
<button class="px-6 py-2.5 bg-white dark:bg-slate-800 text-primary-600 dark:text-primary-400 font-medium rounded-full shadow-md hover:shadow-xl active:scale-95 transition-all flex items-center gap-2 border border-slate-100 dark:border-slate-700 cursor-pointer text-xs">
  <span class="material-symbols-rounded text-base">star</span> Elevated
</button>

<!-- Bullet Badge -->
<span class="inline-flex items-center gap-1.5 py-1 px-3.5 rounded-full text-2xs font-bold bg-primary-100 text-primary-800 dark:bg-primary-950/60 dark:text-primary-300 border border-primary-200/35 dark:border-primary-900/40">
  <span class="w-1.5 h-1.5 rounded-full bg-primary-600 dark:bg-primary-400"></span> Aktiv
</span>

<!-- Success Pill -->
<span class="inline-flex items-center gap-1.5 py-1 px-3.5 rounded-full text-2xs font-bold bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300 border border-emerald-200/35 dark:border-emerald-900/40">
  Erfolgreich
</span>

<!-- Error Pill -->
<span class="inline-flex items-center gap-1.5 py-1 px-3.5 rounded-full text-2xs font-bold bg-red-100 text-red-800 dark:bg-red-950/60 dark:text-red-300 border border-red-200/35 dark:border-red-900/40">
  Fehler
</span>

<!-- MD3 Outlined Text Field -->
<div class="relative group w-full max-w-sm">
  <input type="text" id="demo-name" required placeholder=" "
    class="peer block w-full py-3.5 px-4 text-sm bg-transparent rounded-2xl border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-0 focus:border-primary-600 dark:focus:border-primary-400 transition-all duration-150">
  <label for="demo-name"
    class="absolute text-sm text-slate-500 dark:text-slate-400 duration-150 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-slate-900 px-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-primary-600 dark:peer-focus:text-primary-400 start-3">
    Ihre E-Mail
  </label>
</div>

<!-- Checkbox -->
<label class="flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="w-5 h-5 rounded-lg border-slate-300 dark:border-slate-700 text-primary-600 focus:ring-primary-500/20 bg-transparent transition-all">
  <span class="text-xs text-slate-600 dark:text-slate-300">Merken</span>
</label>

<!-- Toggle Switch -->
<label class="flex items-center gap-3 cursor-pointer select-none">
  <div class="relative">
    <input type="checkbox" class="sr-only peer">
    <div class="w-10 h-6 bg-slate-200 dark:bg-slate-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-primary-500/20 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:bg-slate-400 peer-checked:bg-primary-600 dark:peer-checked:bg-primary-500"></div>
  </div>
  <span class="text-xs text-slate-600 dark:text-slate-300">Option</span>
</label>

<!-- Elevated Card -->
<div class="p-6 bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-md hover:shadow-xl rounded-2xl transition-all duration-300">
  <h4 class="font-bold text-sm mb-2 text-slate-800 dark:text-white">Elevated Card</h4>
  <p class="text-xs text-slate-500 dark:text-slate-400">Sanfte Schatten und dezenter Hover-Effekt.</p>
</div>

<!-- Outlined Card -->
<div class="p-6 bg-transparent border border-slate-200 dark:border-slate-800 rounded-2xl hover:bg-slate-100/30 dark:hover:bg-slate-800/20 transition-all duration-300">
  <h4 class="font-bold text-sm mb-2 text-slate-800 dark:text-white">Outlined Card</h4>
  <p class="text-xs text-slate-500 dark:text-slate-400">Minimalistisch gezeichneter Rand.</p>
</div>

<!-- Success Alert -->
<div class="p-4 bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/50 rounded-2xl text-emerald-800 dark:text-emerald-300 text-xs flex items-center gap-3">
  <span class="material-symbols-rounded text-lg shrink-0">check_circle</span>
  <span>Aktion erfolgreich abgeschlossen! Die Änderungen wurden synchronisiert.</span>
</div>

<!-- Danger Alert -->
<div class="p-4 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50 rounded-2xl text-red-800 dark:text-red-300 text-xs flex items-center gap-3">
  <span class="material-symbols-rounded text-lg shrink-0">error</span>
  <span>Kritischer Fehler: Verbindung zum Datenbank-Cluster unterbrochen.</span>
</div>

<!-- Tab Bar -->
<div class="flex border-b border-slate-200 dark:border-slate-800 w-full max-w-md">
  <button class="flex-1 py-3 text-xs font-bold text-primary-600 dark:text-primary-400 border-b-2 border-primary-600 dark:border-primary-400 flex items-center justify-center gap-2">
    <span class="material-symbols-rounded text-base">person</span> Profil
  </button>
  <button class="flex-1 py-3 text-xs font-bold text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 border-b-2 border-transparent flex items-center justify-center gap-2 cursor-pointer">
    <span class="material-symbols-rounded text-base">settings</span> Einstellungen
  </button>
</div>

<!-- MD3 HTML5 Accordion -->
<div class="w-full max-w-md space-y-2">
  <details class="group bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-850 rounded-2xl overflow-hidden transition-all duration-300">
    <summary class="flex justify-between items-center p-4 text-xs font-bold text-slate-800 dark:text-slate-200 cursor-pointer list-none select-none">
      <span>Was ist ByDex Studio?</span>
      <span class="material-symbols-rounded transition-transform duration-300 group-open:rotate-180 text-lg">expand_more</span>
    </summary>
    <div class="px-4 pb-4 text-2xs text-slate-500 dark:text-slate-400 leading-relaxed border-t border-slate-100 dark:border-slate-850 pt-2">
      ByDex Studio ist ein agiles Programmier-Team, das moderne Webportale, Design-Systeme und Individualsoftware entwickelt.
    </div>
  </details>
</div>

<!-- Responsive Table -->
<div class="overflow-x-auto w-full border border-slate-200 dark:border-slate-800 rounded-2xl bg-white dark:bg-slate-900">
  <table class="w-full text-left text-xs text-slate-500 dark:text-slate-400 border-collapse">
    <thead class="bg-slate-50 dark:bg-slate-900/60 text-slate-700 dark:text-slate-300 font-bold border-b border-slate-200 dark:border-slate-800">
      <tr>
        <th class="px-6 py-4">Projekt</th>
        <th class="px-6 py-4">Status</th>
        <th class="px-6 py-4">Sprache</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100 dark:divide-slate-850">
      <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-850/30 transition-colors">
        <td class="px-6 py-4 font-bold text-slate-800 dark:text-slate-100">ByDex DevPage</td>
        <td class="px-6 py-4 text-emerald-600 dark:text-emerald-400 font-semibold">Online</td>
        <td class="px-6 py-4">EJS / JS</td>
      </tr>
      <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-850/30 transition-colors">
        <td class="px-6 py-4 font-bold text-slate-800 dark:text-slate-100">Shop System</td>
        <td class="px-6 py-4 text-amber-500 dark:text-amber-400 font-semibold">In Arbeit</td>
        <td class="px-6 py-4">Node / SQL</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- List Group -->
<div class="w-full max-w-sm rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden divide-y divide-slate-100 dark:divide-slate-850">
  <a href="#" class="flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-850/30 transition-colors group">
    <div class="flex items-center gap-3">
      <span class="material-symbols-rounded text-primary-600 dark:text-primary-400 text-lg">description</span>
      <span class="text-xs text-slate-700 dark:text-slate-200 font-semibold">Projektdokumentation</span>
    </div>
    <span class="material-symbols-rounded text-slate-400 group-hover:translate-x-1 transition-transform text-lg">chevron_right</span>
  </a>
  <a href="#" class="flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-850/30 transition-colors group">
    <div class="flex items-center gap-3">
      <span class="material-symbols-rounded text-primary-600 dark:text-primary-400 text-lg">folder_shared</span>
      <span class="text-xs text-slate-700 dark:text-slate-200 font-semibold">Gemeinsame Dateien</span>
    </div>
    <span class="material-symbols-rounded text-slate-400 group-hover:translate-x-1 transition-transform text-lg">chevron_right</span>
  </a>
</div>

<!-- Marketing Hero Section -->
<div class="relative py-12 px-6 bg-slate-900 text-white rounded-3xl overflow-hidden border border-slate-800">
  <div class="absolute inset-0 bg-gradient-to-tr from-primary-950 via-slate-900 to-indigo-950 opacity-90"></div>
  <div class="relative max-w-xl mx-auto text-center space-y-4">
    <span class="px-3 py-1 bg-primary-500/20 text-primary-300 border border-primary-500/30 rounded-full text-3xs font-bold uppercase tracking-wider">
      Neuigkeiten
    </span>
    <h3 class="text-xl md:text-2xl font-extrabold tracking-tight">Erschaffen Sie die Zukunft</h3>
    <p class="text-xs text-slate-300 leading-relaxed">
      Unsere Plattform bietet die fortschrittlichsten Tools für die Cloud-native Applikationsentwicklung. Starten Sie noch heute.
    </p>
    <div class="flex gap-3 justify-center pt-2">
      <a href="#" class="px-5 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-full text-xs font-bold transition-all shadow-md">Starten</a>
      <a href="#" class="px-5 py-2 border border-slate-700 hover:bg-slate-800 text-slate-300 rounded-full text-xs font-bold transition-all">Mehr Details</a>
    </div>
  </div>
</div>

<!-- Call to Action (CTA) Sektion -->
<div class="p-8 bg-gradient-to-r from-primary-600 to-indigo-600 rounded-3xl text-white shadow-xl flex flex-col md:flex-row items-center justify-between gap-6">
  <div class="space-y-2 max-w-lg text-center md:text-left">
    <h3 class="text-lg font-bold">Verpassen Sie keine Updates!</h3>
    <p class="text-xs text-primary-100">Melden Sie sich für unseren Newsletter an und erhalten Sie exklusive Angebote.</p>
  </div>
  <div class="w-full md:w-auto shrink-0 flex flex-col sm:flex-row gap-2 justify-center">
    <input type="email" placeholder="E-Mail Adresse" class="px-4 py-2.5 text-xs rounded-full bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 min-w-[200px]">
    <button class="px-5 py-2.5 bg-white text-slate-900 font-bold rounded-full text-xs hover:bg-slate-100 transition-all cursor-pointer">Abonnieren</button>
  </div>
</div>

<!-- Feature Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Feature 1 -->
  <div class="p-6 bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 rounded-2xl space-y-3">
    <span class="w-10 h-10 rounded-xl bg-primary-50 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 flex items-center justify-center">
      <span class="material-symbols-rounded text-lg">bolt</span>
    </span>
    <h4 class="font-bold text-xs text-slate-800 dark:text-slate-200">Schnelle Performance</h4>
    <p class="text-2xs text-slate-400 leading-relaxed">Optimierte Assets und moderne Rendering-Pipes für blitzschnelle Ladezeiten.</p>
  </div>
  <!-- Feature 2 -->
  <div class="p-6 bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 rounded-2xl space-y-3">
    <span class="w-10 h-10 rounded-xl bg-primary-50 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 flex items-center justify-center">
      <span class="material-symbols-rounded text-lg">security</span>
    </span>
    <h4 class="font-bold text-xs text-slate-800 dark:text-slate-200">Hohe Sicherheit</h4>
    <p class="text-2xs text-slate-400 leading-relaxed">Verschlüsselte Datenströme, OAuth 2.0 Integration und CSRF-Schutz standardmäßig.</p>
  </div>
  <!-- Feature 3 -->
  <div class="p-6 bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 rounded-2xl space-y-3">
    <span class="w-10 h-10 rounded-xl bg-primary-50 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 flex items-center justify-center">
      <span class="material-symbols-rounded text-lg">sync</span>
    </span>
    <h4 class="font-bold text-xs text-slate-800 dark:text-slate-200">Echtzeit-Synchronisation</h4>
    <p class="text-2xs text-slate-400 leading-relaxed">Websocket-basierte Updates halten alle Clients ohne Reload sofort synchron.</p>
  </div>
</div>