diff --git a/soundboard-mockup.html b/soundboard-mockup.html
new file mode 100644
index 0000000..e61865d
--- /dev/null
+++ b/soundboard-mockup.html
@@ -0,0 +1,1077 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Soundboard — Discord</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
+
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+
+  :root {
+    --bg-deep: #1a1b1e;
+    --bg-primary: #1e1f22;
+    --bg-secondary: #2b2d31;
+    --bg-tertiary: #313338;
+    --bg-modifier-hover: rgba(79,84,92,.16);
+    --bg-modifier-active: rgba(79,84,92,.24);
+    --bg-modifier-selected: rgba(79,84,92,.32);
+    --text-normal: #dbdee1;
+    --text-muted: #949ba4;
+    --text-faint: #6d6f78;
+    --blurple: #5865f2;
+    --blurple-hover: #4752c4;
+    --blurple-glow: rgba(88,101,242,.45);
+    --green: #23a55a;
+    --red: #f23f42;
+    --yellow: #f0b232;
+    --white: #ffffff;
+    --font: 'DM Sans', 'gg sans', 'Noto Sans', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --radius: 8px;
+    --radius-lg: 12px;
+    --shadow-low: 0 1px 3px rgba(0,0,0,.24);
+    --shadow-med: 0 4px 12px rgba(0,0,0,.32);
+    --shadow-high: 0 8px 24px rgba(0,0,0,.4);
+    --transition: 150ms cubic-bezier(.4,0,.2,1);
+  }
+
+  html, body {
+    height: 100%;
+    overflow: hidden;
+    background: var(--bg-deep);
+    color: var(--text-normal);
+    font-family: var(--font);
+    font-size: 14px;
+    line-height: 1.4;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 8px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+  }
+  ::-webkit-scrollbar-thumb:hover { background: #3f4147; }
+
+  /* ── LAYOUT ── */
+  .app {
+    display: grid;
+    grid-template-rows: 48px 1fr 52px;
+    grid-template-columns: 220px 1fr;
+    grid-template-areas:
+      "topbar topbar"
+      "sidebar main"
+      "bottombar bottombar";
+    height: 100vh;
+    position: relative;
+  }
+
+  /* Subtle noise overlay */
+  .app::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  /* ── TOP BAR ── */
+  .topbar {
+    grid-area: topbar;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid rgba(0,0,0,.24);
+    z-index: 10;
+    gap: 12px;
+  }
+
+  .topbar-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .topbar-icon {
+    width: 24px; height: 24px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .topbar-title {
+    font-size: 16px;
+    font-weight: 700;
+    letter-spacing: -.01em;
+    white-space: nowrap;
+    color: var(--white);
+  }
+
+  .topbar-divider {
+    width: 1px;
+    height: 24px;
+    background: rgba(255,255,255,.08);
+    flex-shrink: 0;
+  }
+
+  .connection-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--text-muted);
+    white-space: nowrap;
+  }
+
+  .status-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    box-shadow: 0 0 6px rgba(35,165,90,.5);
+    animation: pulse-dot 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-dot {
+    0%,100% { box-shadow: 0 0 6px rgba(35,165,90,.5); }
+    50% { box-shadow: 0 0 12px rgba(35,165,90,.8); }
+  }
+
+  .topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .topbar-btn {
+    width: 32px; height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all var(--transition);
+  }
+  .topbar-btn:hover {
+    background: var(--bg-modifier-hover);
+    color: var(--text-normal);
+  }
+  .topbar-btn svg { width: 20px; height: 20px; }
+
+  /* ── SEARCH (in topbar) ── */
+  .search-wrap {
+    position: relative;
+    width: 200px;
+    flex-shrink: 0;
+  }
+  .search-wrap svg {
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px; height: 16px;
+    color: var(--text-faint);
+    pointer-events: none;
+    transition: color var(--transition);
+  }
+  .search-input {
+    width: 100%;
+    height: 28px;
+    padding: 0 8px 0 30px;
+    border: none;
+    border-radius: 4px;
+    background: var(--bg-deep);
+    color: var(--text-normal);
+    font-family: var(--font);
+    font-size: 13px;
+    outline: none;
+    transition: all var(--transition);
+  }
+  .search-input::placeholder { color: var(--text-faint); }
+  .search-input:focus {
+    background: var(--bg-primary);
+    box-shadow: 0 0 0 2px var(--blurple);
+  }
+  .search-input:focus + svg { color: var(--blurple); }
+
+  /* ── SIDEBAR ── */
+  .sidebar {
+    grid-area: sidebar;
+    background: var(--bg-secondary);
+    border-right: 1px solid rgba(0,0,0,.16);
+    padding: 12px 8px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .sidebar-header {
+    padding: 6px 8px 10px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    color: var(--text-faint);
+  }
+
+  .sidebar-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all var(--transition);
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-muted);
+    position: relative;
+    user-select: none;
+  }
+
+  .sidebar-item:hover {
+    background: var(--bg-modifier-hover);
+    color: var(--text-normal);
+  }
+
+  .sidebar-item.active {
+    background: var(--bg-modifier-selected);
+    color: var(--white);
+  }
+
+  .sidebar-item.active::before {
+    content: '';
+    position: absolute;
+    left: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 60%;
+    border-radius: 0 3px 3px 0;
+    background: var(--blurple);
+  }
+
+  .sidebar-item .emoji {
+    font-size: 18px;
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+  }
+
+  .sidebar-item .count {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--text-faint);
+    font-weight: 400;
+    background: var(--bg-primary);
+    padding: 1px 6px;
+    border-radius: 10px;
+    min-width: 20px;
+    text-align: center;
+  }
+
+  /* ── MAIN CONTENT ── */
+  .main {
+    grid-area: main;
+    background: var(--bg-primary);
+    padding: 20px 24px;
+    overflow-y: auto;
+    position: relative;
+  }
+
+  .main-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .main-title {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    color: var(--text-faint);
+  }
+
+  .sort-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    font-family: var(--font);
+    font-size: 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all var(--transition);
+  }
+  .sort-btn:hover { background: var(--bg-modifier-hover); color: var(--text-normal); }
+  .sort-btn svg { width: 14px; height: 14px; }
+
+  /* ── SOUND GRID ── */
+  .sound-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
+    max-width: 100%;
+    gap: 10px;
+  }
+
+  .sound-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 14px 8px 10px;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all var(--transition);
+    border: 2px solid transparent;
+    user-select: none;
+    overflow: hidden;
+    min-height: 100px;
+  }
+
+  .sound-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity var(--transition);
+    background: radial-gradient(ellipse at center, var(--blurple-glow) 0%, transparent 70%);
+    pointer-events: none;
+  }
+
+  .sound-card:hover {
+    background: var(--bg-tertiary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-med), 0 0 20px var(--blurple-glow);
+    border-color: rgba(88,101,242,.25);
+  }
+  .sound-card:hover::before { opacity: 1; }
+
+  .sound-card:active {
+    transform: translateY(0);
+    transition-duration: 50ms;
+  }
+
+  .sound-card.playing {
+    border-color: var(--blurple);
+    animation: playing-pulse 800ms ease-in-out;
+  }
+
+  @keyframes playing-pulse {
+    0% { border-color: var(--blurple); box-shadow: 0 0 0 0 var(--blurple-glow); }
+    50% { box-shadow: 0 0 16px 4px var(--blurple-glow); }
+    100% { border-color: transparent; box-shadow: 0 0 0 0 transparent; }
+  }
+
+  /* Ripple */
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(88,101,242,.35);
+    transform: scale(0);
+    animation: ripple-expand 500ms ease-out forwards;
+    pointer-events: none;
+  }
+  @keyframes ripple-expand {
+    to { transform: scale(3); opacity: 0; }
+  }
+
+  .sound-emoji {
+    font-size: 28px;
+    line-height: 1;
+    z-index: 1;
+    transition: transform var(--transition);
+  }
+  .sound-card:hover .sound-emoji { transform: scale(1.15); }
+  .sound-card.playing .sound-emoji { animation: emoji-bounce 400ms ease; }
+
+  @keyframes emoji-bounce {
+    0%,100% { transform: scale(1); }
+    40% { transform: scale(1.3); }
+    70% { transform: scale(0.95); }
+  }
+
+  .sound-name {
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+    color: var(--text-normal);
+    z-index: 1;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sound-duration {
+    font-size: 10px;
+    color: var(--text-faint);
+    z-index: 1;
+    font-weight: 500;
+  }
+
+  /* Favorite star */
+  .fav-star {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 18px;
+    height: 18px;
+    opacity: 0;
+    transition: all var(--transition);
+    cursor: pointer;
+    z-index: 2;
+    color: var(--text-faint);
+    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
+  }
+  .sound-card:hover .fav-star { opacity: .7; }
+  .fav-star:hover { opacity: 1 !important; color: var(--yellow); transform: scale(1.2); }
+  .fav-star.active { opacity: 1 !important; color: var(--yellow); }
+
+  /* Playing wave indicator */
+  .playing-indicator {
+    position: absolute;
+    bottom: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+    gap: 2px;
+    align-items: flex-end;
+    height: 12px;
+  }
+  .sound-card.playing .playing-indicator { display: flex; }
+  .wave-bar {
+    width: 2px;
+    background: var(--blurple);
+    border-radius: 1px;
+    animation: wave 600ms ease-in-out infinite alternate;
+  }
+  .wave-bar:nth-child(1) { height: 4px; animation-delay: 0ms; }
+  .wave-bar:nth-child(2) { height: 8px; animation-delay: 150ms; }
+  .wave-bar:nth-child(3) { height: 6px; animation-delay: 300ms; }
+  .wave-bar:nth-child(4) { height: 10px; animation-delay: 100ms; }
+  .wave-bar:nth-child(5) { height: 5px; animation-delay: 250ms; }
+
+  @keyframes wave {
+    from { height: 3px; }
+    to { height: 12px; }
+  }
+
+  /* ── ADD SOUND CARD ── */
+  .sound-card.add-card {
+    border: 2px dashed rgba(255,255,255,.1);
+    background: transparent;
+    color: var(--text-faint);
+    gap: 6px;
+  }
+  .sound-card.add-card:hover {
+    border-color: var(--blurple);
+    color: var(--blurple);
+    background: rgba(88,101,242,.06);
+    box-shadow: none;
+    transform: translateY(-1px);
+  }
+  .sound-card.add-card::before { display: none; }
+  .add-icon {
+    font-size: 24px;
+    font-weight: 300;
+    line-height: 1;
+  }
+  .add-label {
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  /* ── EMPTY STATE ── */
+  .empty-state {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 60px 20px;
+    text-align: center;
+  }
+  .empty-state.visible { display: flex; }
+  .empty-emoji { font-size: 48px; }
+  .empty-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-normal);
+  }
+  .empty-desc {
+    font-size: 13px;
+    color: var(--text-muted);
+    max-width: 280px;
+  }
+
+  /* ── BOTTOM BAR ── */
+  .bottombar {
+    grid-area: bottombar;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 20px;
+    background: var(--bg-secondary);
+    border-top: 1px solid rgba(0,0,0,.24);
+    z-index: 10;
+  }
+
+  .now-playing {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--text-muted);
+    min-width: 0;
+    flex: 1;
+  }
+  .now-playing .np-label { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
+  .now-playing .np-name {
+    color: var(--blurple);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .np-waves {
+    display: none;
+    gap: 1.5px;
+    align-items: flex-end;
+    height: 14px;
+  }
+  .np-waves.active { display: flex; }
+  .np-wave-bar {
+    width: 2.5px;
+    background: var(--blurple);
+    border-radius: 1px;
+    animation: wave 500ms ease-in-out infinite alternate;
+  }
+  .np-wave-bar:nth-child(1) { height: 5px; animation-delay: 0ms; }
+  .np-wave-bar:nth-child(2) { height: 10px; animation-delay: 120ms; }
+  .np-wave-bar:nth-child(3) { height: 7px; animation-delay: 240ms; }
+  .np-wave-bar:nth-child(4) { height: 12px; animation-delay: 80ms; }
+
+  .volume-section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+  }
+  .volume-icon {
+    width: 20px; height: 20px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+    cursor: pointer;
+    transition: color var(--transition);
+  }
+  .volume-icon:hover { color: var(--text-normal); }
+
+  .volume-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100px;
+    height: 4px;
+    border-radius: 2px;
+    background: linear-gradient(to right, var(--blurple) 0%, var(--blurple) var(--vol, 80%), var(--bg-tertiary) var(--vol, 80%));
+    outline: none;
+    cursor: pointer;
+    transition: height var(--transition);
+  }
+  .volume-slider:hover { height: 6px; }
+  .volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px; height: 14px;
+    border-radius: 50%;
+    background: var(--white);
+    box-shadow: 0 1px 4px rgba(0,0,0,.3);
+    cursor: pointer;
+    transition: transform var(--transition);
+  }
+  .volume-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
+
+  .volume-pct {
+    font-size: 12px;
+    color: var(--text-faint);
+    min-width: 32px;
+    text-align: right;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .stop-all-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border: none;
+    border-radius: var(--radius);
+    background: var(--red);
+    color: var(--white);
+    font-family: var(--font);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition);
+    white-space: nowrap;
+    opacity: .85;
+  }
+  .stop-all-btn:hover { opacity: 1; transform: scale(1.03); box-shadow: 0 0 12px rgba(242,63,66,.3); }
+  .stop-all-btn svg { width: 14px; height: 14px; }
+
+  /* ── CONTEXT MENU ── */
+  .ctx-menu {
+    position: fixed;
+    min-width: 170px;
+    background: var(--bg-deep);
+    border: 1px solid rgba(255,255,255,.06);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-high);
+    padding: 4px;
+    z-index: 1000;
+    display: none;
+    animation: ctx-in 120ms ease-out;
+  }
+  .ctx-menu.visible { display: block; }
+
+  @keyframes ctx-in {
+    from { opacity: 0; transform: scale(.96) translateY(-4px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  .ctx-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    border-radius: 4px;
+    font-size: 13px;
+    color: var(--text-normal);
+    cursor: pointer;
+    transition: all var(--transition);
+  }
+  .ctx-item:hover { background: var(--blurple); color: var(--white); }
+  .ctx-item.danger { color: var(--red); }
+  .ctx-item.danger:hover { background: var(--red); color: var(--white); }
+  .ctx-sep { height: 1px; background: rgba(255,255,255,.06); margin: 4px 8px; }
+  .ctx-item svg { width: 16px; height: 16px; flex-shrink: 0; }
+
+  /* ── TOOLTIP ── */
+  .tooltip {
+    position: fixed;
+    padding: 6px 10px;
+    background: var(--bg-deep);
+    color: var(--text-normal);
+    font-size: 13px;
+    font-weight: 600;
+    border-radius: 6px;
+    box-shadow: var(--shadow-high);
+    pointer-events: none;
+    z-index: 999;
+    display: none;
+    white-space: nowrap;
+    animation: tt-in 100ms ease-out;
+  }
+  .tooltip.visible { display: block; }
+  @keyframes tt-in { from { opacity: 0; transform: translateY(4px); } }
+
+  /* ── RESPONSIVE ── */
+  @media (max-width: 768px) {
+    .app {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "topbar"
+        "main"
+        "bottombar";
+    }
+    .sidebar { display: none; }
+    .search-wrap { width: 140px; }
+  }
+
+  /* ── ENTRANCE ANIMATION ── */
+  .sound-card {
+    opacity: 0;
+    animation: card-enter 400ms ease-out forwards;
+  }
+  @keyframes card-enter {
+    from { opacity: 0; transform: translateY(12px) scale(.96); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+</style>
+</head>
+<body>
+<div class="app">
+
+  <!-- TOP BAR -->
+  <header class="topbar">
+    <div class="topbar-left">
+      <svg class="topbar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+      <span class="topbar-title">Soundboard</span>
+      <div class="topbar-divider"></div>
+      <div class="connection-status">
+        <span class="status-dot"></span>
+        <span>Verbunden mit Sprachkanal</span>
+      </div>
+    </div>
+    <div class="topbar-right">
+      <div class="search-wrap">
+        <input class="search-input" type="text" placeholder="Sounds durchsuchen…" id="searchInput">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      </div>
+      <button class="topbar-btn" title="Einstellungen">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      </button>
+    </div>
+  </header>
+
+  <!-- SIDEBAR -->
+  <nav class="sidebar">
+    <div class="sidebar-header">Kategorien</div>
+    <div class="sidebar-item active" data-cat="all">
+      <span class="emoji">🎵</span>
+      <span>Alle Sounds</span>
+      <span class="count" id="countAll">15</span>
+    </div>
+    <div class="sidebar-item" data-cat="favorites">
+      <span class="emoji">⭐</span>
+      <span>Favoriten</span>
+      <span class="count" id="countFav">0</span>
+    </div>
+    <div class="sidebar-item" data-cat="memes">
+      <span class="emoji">🐸</span>
+      <span>Memes</span>
+      <span class="count">5</span>
+    </div>
+    <div class="sidebar-item" data-cat="music">
+      <span class="emoji">🎸</span>
+      <span>Musik</span>
+      <span class="count">3</span>
+    </div>
+    <div class="sidebar-item" data-cat="effects">
+      <span class="emoji">💥</span>
+      <span>Effekte</span>
+      <span class="count">5</span>
+    </div>
+    <div class="sidebar-item" data-cat="custom">
+      <span class="emoji">🎨</span>
+      <span>Eigene</span>
+      <span class="count">2</span>
+    </div>
+  </nav>
+
+  <!-- MAIN -->
+  <main class="main" id="mainArea">
+    <div class="main-header">
+      <span class="main-title" id="mainTitle">Alle Sounds — 15</span>
+      <button class="sort-btn">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>
+        Sortieren
+      </button>
+    </div>
+
+    <div class="sound-grid" id="soundGrid"></div>
+
+    <div class="empty-state" id="emptyState">
+      <div class="empty-emoji">🔇</div>
+      <div class="empty-title">Keine Sounds gefunden</div>
+      <div class="empty-desc">In dieser Kategorie sind noch keine Sounds vorhanden. Füge welche hinzu!</div>
+    </div>
+  </main>
+
+  <!-- BOTTOM BAR -->
+  <div class="bottombar">
+    <div class="now-playing">
+      <div class="np-waves" id="npWaves">
+        <div class="np-wave-bar"></div>
+        <div class="np-wave-bar"></div>
+        <div class="np-wave-bar"></div>
+        <div class="np-wave-bar"></div>
+      </div>
+      <span class="np-label">Spielt:</span>
+      <span class="np-name" id="npName">—</span>
+    </div>
+    <div class="volume-section">
+      <svg class="volume-icon" id="volIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
+      <input type="range" class="volume-slider" id="volSlider" min="0" max="100" value="80">
+      <span class="volume-pct" id="volPct">80%</span>
+    </div>
+    <button class="stop-all-btn" id="stopAllBtn">
+      <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+      Alle stoppen
+    </button>
+  </div>
+
+</div>
+
+<!-- Context Menu -->
+<div class="ctx-menu" id="ctxMenu">
+  <div class="ctx-item" data-action="play">
+    <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+    Abspielen
+  </div>
+  <div class="ctx-item" data-action="fav">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    Favorit umschalten
+  </div>
+  <div class="ctx-sep"></div>
+  <div class="ctx-item" data-action="edit">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+    Bearbeiten
+  </div>
+  <div class="ctx-item danger" data-action="delete">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+    Löschen
+  </div>
+</div>
+
+<!-- Tooltip -->
+<div class="tooltip" id="tooltip"></div>
+
+<script>
+const SOUNDS = [
+  { id: 1,  name: 'Airhorn',        emoji: '📯', duration: '0:02', cat: 'memes',   fav: false },
+  { id: 2,  name: 'Bruh',           emoji: '😐', duration: '0:01', cat: 'memes',   fav: false },
+  { id: 3,  name: 'Sad Trombone',   emoji: '🎺', duration: '0:03', cat: 'memes',   fav: false },
+  { id: 4,  name: 'Applause',       emoji: '👏', duration: '0:04', cat: 'effects', fav: false },
+  { id: 5,  name: 'Drum Roll',      emoji: '🥁', duration: '0:05', cat: 'effects', fav: false },
+  { id: 6,  name: 'Vine Boom',      emoji: '💥', duration: '0:01', cat: 'memes',   fav: false },
+  { id: 7,  name: 'Oof',            emoji: '😵', duration: '0:01', cat: 'memes',   fav: false },
+  { id: 8,  name: 'Rickroll',       emoji: '🕺', duration: '0:08', cat: 'music',   fav: false },
+  { id: 9,  name: 'Suspense',       emoji: '😰', duration: '0:06', cat: 'effects', fav: false },
+  { id: 10, name: 'Victory Fanfare',emoji: '🏆', duration: '0:05', cat: 'music',   fav: false },
+  { id: 11, name: 'Crickets',       emoji: '🦗', duration: '0:03', cat: 'effects', fav: false },
+  { id: 12, name: 'Laugh Track',    emoji: '😂', duration: '0:04', cat: 'effects', fav: false },
+  { id: 13, name: 'Epic Sax',       emoji: '🎷', duration: '0:07', cat: 'music',   fav: false },
+  { id: 14, name: 'Mein Sound 1',   emoji: '🔊', duration: '0:03', cat: 'custom',  fav: false },
+  { id: 15, name: 'Custom Alert',   emoji: '🔔', duration: '0:02', cat: 'custom',  fav: false },
+];
+
+let currentCat = 'all';
+let currentlyPlaying = null;
+let ctxTarget = null;
+
+const grid = document.getElementById('soundGrid');
+const emptyState = document.getElementById('emptyState');
+const mainTitle = document.getElementById('mainTitle');
+const searchInput = document.getElementById('searchInput');
+const ctxMenu = document.getElementById('ctxMenu');
+const tooltip = document.getElementById('tooltip');
+const npName = document.getElementById('npName');
+const npWaves = document.getElementById('npWaves');
+const volSlider = document.getElementById('volSlider');
+const volPct = document.getElementById('volPct');
+const stopAllBtn = document.getElementById('stopAllBtn');
+const countFav = document.getElementById('countFav');
+
+// ── Render ──
+function render() {
+  const q = searchInput.value.toLowerCase().trim();
+  let filtered = SOUNDS.filter(s => {
+    if (currentCat === 'favorites') return s.fav;
+    if (currentCat !== 'all') return s.cat === currentCat;
+    return true;
+  });
+  if (q) filtered = filtered.filter(s => s.name.toLowerCase().includes(q));
+
+  grid.innerHTML = '';
+  emptyState.classList.toggle('visible', filtered.length === 0);
+
+  const catLabels = { all:'Alle Sounds', favorites:'Favoriten', memes:'Memes', music:'Musik', effects:'Effekte', custom:'Eigene' };
+  mainTitle.textContent = `${catLabels[currentCat] || 'Sounds'} — ${filtered.length}`;
+
+  filtered.forEach((s, i) => {
+    const card = document.createElement('div');
+    card.className = 'sound-card' + (currentlyPlaying === s.id ? ' playing' : '');
+    card.dataset.id = s.id;
+    card.style.animationDelay = `${i * 30}ms`;
+    card.innerHTML = `
+      <svg class="fav-star ${s.fav ? 'active' : ''}" viewBox="0 0 24 24" fill="${s.fav ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+      <span class="sound-emoji">${s.emoji}</span>
+      <span class="sound-name">${s.name}</span>
+      <span class="sound-duration">${s.duration}</span>
+      <div class="playing-indicator">
+        <div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
+      </div>
+    `;
+    grid.appendChild(card);
+  });
+
+  // Add sound card
+  const addCard = document.createElement('div');
+  addCard.className = 'sound-card add-card';
+  addCard.innerHTML = `<span class="add-icon">+</span><span class="add-label">Sound hinzufügen</span>`;
+  grid.appendChild(addCard);
+
+  updateFavCount();
+}
+
+function updateFavCount() {
+  countFav.textContent = SOUNDS.filter(s => s.fav).length;
+}
+
+// ── Events ──
+
+// Sound card click
+grid.addEventListener('click', e => {
+  const star = e.target.closest('.fav-star');
+  const card = e.target.closest('.sound-card');
+  if (!card || card.classList.contains('add-card')) return;
+
+  const id = parseInt(card.dataset.id);
+  const sound = SOUNDS.find(s => s.id === id);
+  if (!sound) return;
+
+  if (star) {
+    sound.fav = !sound.fav;
+    render();
+    return;
+  }
+
+  // Ripple
+  const rect = card.getBoundingClientRect();
+  const ripple = document.createElement('div');
+  ripple.className = 'ripple';
+  const size = Math.max(rect.width, rect.height);
+  ripple.style.width = ripple.style.height = size + 'px';
+  ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
+  ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
+  card.appendChild(ripple);
+  setTimeout(() => ripple.remove(), 500);
+
+  playSound(id, sound.name);
+});
+
+function playSound(id, name) {
+  // Remove previous playing
+  document.querySelectorAll('.sound-card.playing').forEach(c => c.classList.remove('playing'));
+  currentlyPlaying = id;
+
+  const card = grid.querySelector(`[data-id="${id}"]`);
+  if (card) card.classList.add('playing');
+
+  npName.textContent = name;
+  npWaves.classList.add('active');
+
+  // Auto stop after a bit
+  const s = SOUNDS.find(s => s.id === id);
+  const dur = s ? parseDuration(s.duration) : 3;
+  setTimeout(() => {
+    if (currentlyPlaying === id) stopPlaying();
+  }, dur * 1000);
+}
+
+function parseDuration(str) {
+  const parts = str.split(':');
+  return parseInt(parts[0]) * 60 + parseInt(parts[1]);
+}
+
+function stopPlaying() {
+  currentlyPlaying = null;
+  document.querySelectorAll('.sound-card.playing').forEach(c => c.classList.remove('playing'));
+  npName.textContent = '—';
+  npWaves.classList.remove('active');
+}
+
+stopAllBtn.addEventListener('click', stopPlaying);
+
+// Sidebar
+document.querySelectorAll('.sidebar-item').forEach(item => {
+  item.addEventListener('click', () => {
+    document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
+    item.classList.add('active');
+    currentCat = item.dataset.cat;
+    render();
+  });
+});
+
+// Search
+searchInput.addEventListener('input', render);
+
+// Volume
+volSlider.addEventListener('input', () => {
+  const v = volSlider.value;
+  volPct.textContent = v + '%';
+  volSlider.style.setProperty('--vol', v + '%');
+});
+volSlider.style.setProperty('--vol', '80%');
+
+// Context menu
+grid.addEventListener('contextmenu', e => {
+  e.preventDefault();
+  const card = e.target.closest('.sound-card');
+  if (!card || card.classList.contains('add-card')) return;
+
+  ctxTarget = parseInt(card.dataset.id);
+  ctxMenu.style.left = Math.min(e.clientX, window.innerWidth - 180) + 'px';
+  ctxMenu.style.top = Math.min(e.clientY, window.innerHeight - 160) + 'px';
+  ctxMenu.classList.add('visible');
+});
+
+document.addEventListener('click', () => ctxMenu.classList.remove('visible'));
+document.addEventListener('keydown', e => { if (e.key === 'Escape') ctxMenu.classList.remove('visible'); });
+
+ctxMenu.addEventListener('click', e => {
+  const item = e.target.closest('.ctx-item');
+  if (!item || ctxTarget == null) return;
+  const action = item.dataset.action;
+  const sound = SOUNDS.find(s => s.id === ctxTarget);
+  if (!sound) return;
+
+  if (action === 'play') playSound(sound.id, sound.name);
+  if (action === 'fav') { sound.fav = !sound.fav; render(); }
+  if (action === 'delete') {
+    const idx = SOUNDS.findIndex(s => s.id === ctxTarget);
+    if (idx > -1) { SOUNDS.splice(idx, 1); render(); }
+  }
+  ctxMenu.classList.remove('visible');
+});
+
+// Tooltip
+let ttTimeout;
+grid.addEventListener('mouseover', e => {
+  const card = e.target.closest('.sound-card');
+  if (!card || card.classList.contains('add-card')) return;
+  const nameEl = card.querySelector('.sound-name');
+  if (!nameEl || nameEl.scrollWidth <= nameEl.clientWidth) return;
+
+  clearTimeout(ttTimeout);
+  ttTimeout = setTimeout(() => {
+    const rect = card.getBoundingClientRect();
+    tooltip.textContent = nameEl.textContent;
+    tooltip.style.left = (rect.left + rect.width / 2) + 'px';
+    tooltip.style.top = (rect.top - 8) + 'px';
+    tooltip.style.transform = 'translateX(-50%) translateY(-100%)';
+    tooltip.classList.add('visible');
+  }, 600);
+});
+
+grid.addEventListener('mouseout', e => {
+  if (e.target.closest('.sound-card')) {
+    clearTimeout(ttTimeout);
+    tooltip.classList.remove('visible');
+  }
+});
+
+// Init
+render();
+</script>
+</body>
+</html>
