optimized webchat

frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte

@@ -4,6 +4,7 @@
     import ProductCategoryFrame from "../widgets/ProductCategoryFrame.svelte"
     import CrinkledSection from "../CrinkledSection.svelte"
     import { createVoicebotPreviewController } from "../voicebotDemo/voicebotPreviewController"
+    import Label from "../widgets/Label.svelte"
 
     const voiceProperties: Array<{ title: string; icon: string; color: string }> = [
         {
@@ -65,22 +66,23 @@
                     aria-pressed={$status === "connected"}
                     aria-busy={$status === "connecting"}
                     aria-label="Voicebot Demo starten"
-                    on:click={() => void toggle()}
-                    on:keydown={handleKeydown}
+                    onclick={() => void toggle()}
+                    onkeydown={handleKeydown}
                 >
                     <img
                         src="/media/iphone.png"
                         alt="Kontextwerk is calling"
                     />
                     <div class="shadow"></div>
-                    <div
-                        class="voice-overlay"
-                        data-status={$status}
-                        aria-live="polite"
-                    >
-                        <span>{$statusHint}</span>
-                    </div>
                 </div>
+                <button
+                    onclick={() => void toggle()}
+                    class="voice-status"
+                    data-status={$status}
+                    aria-live="polite"
+                >
+                    <Label label={$statusHint} />
+                </button>
             {/snippet}
         </ProductCategoryFrame>
     {/snippet}
@@ -111,40 +113,6 @@
             user-select: none;
         }
 
-        .voice-overlay {
-            position: absolute;
-            bottom: 1.2rem;
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 0.45rem 1.1rem;
-            border-radius: 999px;
-            background: rgba(13, 12, 12, 0.8);
-            color: white;
-            font-size: 0.8rem;
-            font-weight: 500;
-            letter-spacing: 0.01em;
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-            pointer-events: none;
-            white-space: nowrap;
-            transition:
-                background 0.2s ease,
-                color 0.2s ease;
-        }
-
-        .voice-overlay[data-status="connected"] {
-            background: rgba(76, 175, 80, 0.85);
-        }
-
-        .voice-overlay[data-status="connecting"] {
-            background: rgba(255, 152, 0, 0.85);
-        }
-
-        .voice-overlay[data-status="error"] {
-            background: rgba(235, 87, 87, 0.9);
-        }
-
         &:hover {
             transform: translateY(-4px);
         }
@@ -154,4 +122,11 @@
             outline-offset: 4px;
         }
     }
+    .voice-status {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 1.2rem;
+    }
 </style>