make the list actually a list

src/components/AIQueryInterface.astro

@@ -37,15 +37,14 @@ const tools = data.tools;
       
       <!-- Privacy Notice -->
       <div style="margin-top: 0.5rem; margin-bottom: 1rem;">
-        <p style="font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; line-height: 1.0;">
+        <p style="font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; line-height: 1.4;">
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem; vertical-align: middle;">
             <circle cx="12" cy="12" r="10"/>
             <line x1="12" y1="8" x2="12" y2="12"/>
             <line x1="12" y1="16" x2="12.01" y2="16"/>
           </svg>
-          Die Anfrage wird an mistral.ai übertragen und unterliegt deren 
+          Ihre Anfrage wird an mistral.ai übertragen und unterliegt deren 
-          <a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary); text-decoration: underline;">Datenschutzrichtlinien</a>.
+          <a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary); text-decoration: underline;">Datenschutzrichtlinien</a>
-           Eine typische Anfrage kostet mich $0.0008.
         </p>
       </div>
       
@@ -228,6 +227,54 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   };
 
+  // Helper function to format workflow suggestions as proper lists
+  function formatWorkflowSuggestion(text) {
+    // Check if text contains numbered list items (1., 2., 3., etc.)
+    const numberedListPattern = /(\d+\.\s)/g;
+    
+    if (numberedListPattern.test(text)) {
+      // Split by numbered items and clean up
+      const items = text.split(/\d+\.\s/).filter(item => item.trim().length > 0);
+      
+      if (items.length > 1) {
+        const listItems = items.map(item => 
+          `<li style="margin-bottom: 0.5rem; line-height: 1.6;">${item.trim()}</li>`
+        ).join('');
+        
+        return `<ol style="margin: 0; padding-left: 1.5rem; color: var(--color-text);">${listItems}</ol>`;
+      }
+    }
+    
+    // Check for bullet points (-, *, •)
+    const bulletPattern = /^[\s]*[-\*•]\s/gm;
+    if (bulletPattern.test(text)) {
+      const items = text.split(/^[\s]*[-\*•]\s/gm).filter(item => item.trim().length > 0);
+      
+      if (items.length > 1) {
+        const listItems = items.map(item => 
+          `<li style="margin-bottom: 0.5rem; line-height: 1.6;">${item.trim()}</li>`
+        ).join('');
+        
+        return `<ul style="margin: 0; padding-left: 1.5rem; color: var(--color-text);">${listItems}</ul>`;
+      }
+    }
+    
+    // Check for line breaks that might indicate separate points
+    if (text.includes('\n')) {
+      const lines = text.split('\n').filter(line => line.trim().length > 0);
+      if (lines.length > 1) {
+        const listItems = lines.map(line => 
+          `<li style="margin-bottom: 0.5rem; line-height: 1.6;">${line.trim()}</li>`
+        ).join('');
+        
+        return `<ul style="margin: 0; padding-left: 1.5rem; color: var(--color-text);">${listItems}</ul>`;
+      }
+    }
+    
+    // Fallback to regular paragraph if no list format detected
+    return `<p style="margin: 0; line-height: 1.6; color: var(--color-text);">${text}</p>`;
+  }
+
   function displayResults(recommendation, originalQuery) {
     // Group tools by phase
     const toolsByPhase = {};
@@ -276,7 +323,7 @@ document.addEventListener('DOMContentLoaded', () => {
               </svg>
               Szenario-Analyse
             </h4>
-            <p style="margin: 0; line-height: 1.6; color: var(--color-text);">${recommendation.scenario_analysis}</p>
+            ${formatWorkflowSuggestion(recommendation.scenario_analysis)}
           </div>
         ` : ''}
 
@@ -355,7 +402,7 @@ document.addEventListener('DOMContentLoaded', () => {
               </svg>
               Workflow-Empfehlung
             </h4>
-            <p style="margin: 0; line-height: 1.6; color: var(--color-text);">${recommendation.workflow_suggestion}</p>
+            ${formatWorkflowSuggestion(recommendation.workflow_suggestion)}
           </div>
         ` : ''}
 
@@ -369,7 +416,9 @@ document.addEventListener('DOMContentLoaded', () => {
               </svg>
               Wichtige Hinweise
             </h4>
-            <p style="margin: 0; line-height: 1.6;">${recommendation.additional_notes}</p>
+            <div style="color: white;">
+              ${formatWorkflowSuggestion(recommendation.additional_notes).replace(/color: var\(--color-text\)/g, 'color: white')}
+            </div>
           </div>
         ` : ''}
       </div>