feat: Chat-Highlight scrollt zum Element, roter prominenter Pulse-Effekt

src/static/css/style.css

@@ -4927,17 +4927,19 @@ a.map-popup-article:hover {
 
 /* Chat UI-Highlight: Bedienelemente hervorheben */
 @keyframes chat-ui-pulse {
-    0%   { box-shadow: 0 0 0 0 rgba(200, 168, 81, 0.7); }
+    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
-    40%  { box-shadow: 0 0 0 8px rgba(200, 168, 81, 0.3); }
+    15%      { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0.5); }
-    80%  { box-shadow: 0 0 0 12px rgba(200, 168, 81, 0); }
+    30%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2); }
-    100% { box-shadow: 0 0 0 0 rgba(200, 168, 81, 0); }
+    45%      { box-shadow: 0 0 0 12px rgba(220, 53, 69, 0.5); }
+    60%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2); }
+    75%      { box-shadow: 0 0 0 14px rgba(220, 53, 69, 0.4); }
+    90%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1); }
 }
 .chat-ui-highlight {
-    animation: chat-ui-pulse 1s ease-out 3;
+    animation: chat-ui-pulse 2s ease-in-out 2;
-    outline: 2px solid var(--accent) !important;
+    outline: 3px solid #dc3545 !important;
-    outline-offset: 3px;
+    outline-offset: 4px;
     border-radius: var(--radius-sm);
     position: relative;
     z-index: 100;
-    transition: outline 0.3s ease;
 }

src/static/js/chat.js

@@ -253,11 +253,14 @@ const Chat = {
                         var el = document.querySelector(sel);
                         if (el) {
                             highlighted.add(sel);
-                            el.classList.add('chat-ui-highlight');
+                            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                             (function(element) {
+                                setTimeout(function() {
+                                    element.classList.add('chat-ui-highlight');
+                                }, 400);
                                 setTimeout(function() {
                                     element.classList.remove('chat-ui-highlight');
-                                }, 3000);
+                                }, 4400);
                             })(el);
                         }
                     }