finalize suggestion mechanic

src/components/AIQueryInterface.astro

@@ -57,6 +57,27 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
       </div>
       
       <div class="ai-suggestions-section">
+        <div id="smart-prompting-hint" class="smart-prompting-hint">
+          <div class="hint-card">
+            <div class="hint-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                <line x1="12" y1="17" x2="12.01" y2="17"/>
+              </svg>
+            </div>
+            <div class="hint-content">
+              <h4 class="hint-title">Intelligente Hilfe</h4>
+              <p class="hint-description">
+                Während Sie tippen, analysiert die KI Ihre Eingabe und schlägt gezielten Fragen vor, um Ihr Szenario zu präzisieren.
+              </p>
+              <div class="hint-trigger">
+                <span class="hint-label">Aktiviert ab:</span>
+                <span class="hint-value">40+ Zeichen</span>
+              </div>
+            </div>
+          </div>
+        </div>
         <div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
           <div class="prompting-card">
             <div id="prompting-status" class="prompting-status">
@@ -158,7 +179,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
       <p id="ai-error-message" style="margin: 0;">Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es erneut.</p>
     </div>
   </div>
-
+<br>
   <div id="ai-results" class="ai-results" style="display: none;">
   </div>
 </section>
@@ -277,6 +298,7 @@ document.addEventListener('DOMContentLoaded', () => {
     switch (state) {
       case 'analyzing':
         smartPromptingContainer.style.display = 'block';
+        toggleHintVisibility(false);
         statusText.textContent = 'Analysiere Eingabe...';
         promptingSpinner.style.display = 'inline-block';
         suggestedQuestions.style.display = 'none';
@@ -293,9 +315,11 @@ document.addEventListener('DOMContentLoaded', () => {
         break;
       case 'error':
         smartPromptingContainer.style.display = 'none';
+        toggleHintVisibility(true);
         break;
       case 'hidden':
         smartPromptingContainer.style.display = 'none';
+        toggleHintVisibility(true);
         break;
     }
   }
@@ -378,6 +402,14 @@ document.addEventListener('DOMContentLoaded', () => {
       enhancementAbortController.abort();
     }
     showPromptingStatus('hidden');
+    toggleHintVisibility(true);
+  }
+
+  function toggleHintVisibility(show) {
+    const hint = document.getElementById('smart-prompting-hint');
+    if (hint) {
+      hint.style.display = show ? 'flex' : 'none';
+    }
   }
 
   toggleSwitch.addEventListener('click', () => {