diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro
index b8b3969..88dae7e 100644
--- a/src/components/AIQueryInterface.astro
+++ b/src/components/AIQueryInterface.astro
@@ -3,7 +3,6 @@
 
 import { getToolsData } from '../utils/dataService.js';
 import { isToolHosted } from '../utils/toolHelpers.js';
-import { AuditTrailRenderer } from '../js/auditTrailRenderer.js';
 
 const data = await getToolsData();
 const tools = data.tools;
@@ -211,21 +210,575 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
 
     <!-- Results -->
     <div id="ai-results" class="ai-results hidden">     
-      <!-- Audit trail container - managed by AuditTrailRenderer -->
       <div id="audit-trail-container"></div>
     </div>
   </div>
 </section>
 
 <script type="module" define:vars={{ tools, phases, domainAgnosticSoftware }}>
-  import { AuditTrailRenderer } from '../js/auditTrailRenderer.js';
 
+// ===================================================================
+// CONSOLIDATED UTILITIES
+// ===================================================================
+
+const Utils = {
+  // Phase configuration for audit trail
+  phaseConfig: {
+    'initialization': { icon: '🚀', displayName: 'Initialisierung' },
+    'retrieval': { icon: '🔍', displayName: 'Datensuche' },
+    'selection': { icon: '🎯', displayName: 'Tool-Auswahl' },
+    'micro-task': { icon: '⚡', displayName: 'Detail-Analyse' },
+    'validation': { icon: '✓', displayName: 'Validierung' },
+    'completion': { icon: '✅', displayName: 'Finalisierung' }
+  },
+
+  // Action translations for display
+  actionTranslations: {
+    'pipeline-start': 'Analyse gestartet',
+    'embeddings-search': 'Ähnliche Tools gesucht', 
+    'ai-tool-selection': 'Tools automatisch ausgewählt',
+    'ai-analysis': 'KI-Analyse durchgeführt',
+    'phase-tool-selection': 'Phasen-Tools evaluiert',
+    'tool-evaluation': 'Tool-Bewertung erstellt',
+    'background-knowledge-selection': 'Hintergrundwissen ausgewählt',
+    'confidence-scoring': 'Vertrauenswertung berechnet',
+    'pipeline-end': 'Analyse abgeschlossen'
+  },
+
+  getActionDisplayName(action) {
+    return this.actionTranslations[action] || action;
+  },
+
+  formatDuration(ms) {
+    if (ms < 1000) return '< 1s';
+    if (ms < 60000) return `${Math.ceil(ms / 1000)}s`;
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.ceil((ms % 60000) / 1000);
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  },
+
+  getConfidenceColor(confidence) {
+    if (confidence >= 80) return 'var(--color-accent)';
+    if (confidence >= 60) return 'var(--color-warning)';
+    return 'var(--color-error)';
+  },
+
+  escapeHtml(text) {
+    if (typeof text !== 'string') return String(text);
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  },
+
+  truncateText(text, maxLength) {
+    if (!text || text.length <= maxLength) return text;
+    return text.slice(0, maxLength) + '...';
+  },
+
+  sanitizeText(text) {
+    if (typeof text !== 'string') return '';
+    
+    return text
+      .replace(/^#{1,6}\s+/gm, '')
+      .replace(/^\s*[-*+]\s+/gm, '')
+      .replace(/^\s*\d+\.\s+/gm, '')
+      .replace(/\*\*(.+?)\*\*/g, '$1')
+      .replace(/\*(.+?)\*/g, '$1')
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      .replace(/```[\s\S]*?```/g, '[CODE BLOCK]')
+      .replace(/`([^`]+)`/g, '$1')
+      .replace(/<[^>]+>/g, '')
+      .replace(/\n\s*\n\s*\n/g, '\n\n')
+      .trim();
+  },
+
+  summarizeData(data) {
+    if (data === null || data === undefined) return 'null';
+    if (typeof data === 'string') {
+      return data.length > 100 ? data.slice(0, 100) + '...' : data;
+    }
+    if (typeof data === 'number' || typeof data === 'boolean') {
+      return data.toString();
+    }
+    if (Array.isArray(data)) {
+      if (data.length === 0) return '[]';
+      if (data.length <= 3) return JSON.stringify(data);
+      return `[${data.slice(0, 3).map(i => typeof i === 'string' ? i : JSON.stringify(i)).join(', ')}, ...+${data.length - 3}]`;
+    }
+    if (typeof data === 'object') {
+      const keys = Object.keys(data);
+      if (keys.length === 0) return '{}';
+      if (keys.length <= 3) {
+        return '{' + keys.map(k => `${k}: ${typeof data[k] === 'string' ? data[k].slice(0, 20) + (data[k].length > 20 ? '...' : '') : JSON.stringify(data[k])}`).join(', ') + '}';
+      }
+      return `{${keys.slice(0, 3).join(', ')}, ...+${keys.length - 3} keys}`;
+    }
+    return String(data);
+  },
+
+  // DOM utilities
+  showElement(element) {
+    if (element) {
+      element.style.display = 'block';
+      element.classList.remove('hidden');
+    }
+  },
+
+  hideElement(element) {
+    if (element) {
+      element.style.display = 'none';
+      element.classList.add('hidden');
+    }
+  }
+};
+
+// ===================================================================
+// AUDIT TRAIL PROCESSOR
+// ===================================================================
+
+class AuditTrailProcessor {
+  static processAuditTrail(rawAuditTrail) {
+    if (!rawAuditTrail || !Array.isArray(rawAuditTrail) || rawAuditTrail.length === 0) {
+      console.log('[AUDIT] No audit trail data provided');
+      return null;
+    }
+
+    try {
+      console.log('[AUDIT] Processing', rawAuditTrail.length, 'audit entries');
+
+      const totalTime = rawAuditTrail.reduce((sum, entry) => sum + (entry.processingTimeMs || 0), 0);
+      const validConfidenceEntries = rawAuditTrail.filter(entry => typeof entry.confidence === 'number');
+      const avgConfidence = validConfidenceEntries.length > 0 
+        ? Math.round(validConfidenceEntries.reduce((sum, entry) => sum + entry.confidence, 0) / validConfidenceEntries.length)
+        : 0;
+      
+      const highConfidenceSteps = rawAuditTrail.filter(entry => (entry.confidence || 0) >= 80).length;
+      const lowConfidenceSteps = rawAuditTrail.filter(entry => (entry.confidence || 0) < 60).length;
+
+      // Group entries by phase
+      const groupedEntries = rawAuditTrail.reduce((groups, entry) => {
+        const phase = entry.phase || 'unknown';
+        if (!groups[phase]) groups[phase] = [];
+        groups[phase].push(entry);
+        return groups;
+      }, {});
+
+      // Process phases
+      const phases = Object.entries(groupedEntries).map(([phase, entries]) => {
+        const phaseConfig = Utils.phaseConfig[phase] || { icon: '📋', displayName: phase };
+        const validEntries = entries.filter(entry => entry && typeof entry === 'object');
+        
+        const phaseAvgConfidence = validEntries.length > 0 
+          ? Math.round(validEntries.reduce((sum, entry) => sum + (entry.confidence || 0), 0) / validEntries.length)
+          : 0;
+        
+        const phaseTotalTime = validEntries.reduce((sum, entry) => sum + (entry.processingTimeMs || 0), 0);
+
+        return {
+          name: phase,
+          icon: phaseConfig.icon,
+          displayName: phaseConfig.displayName,
+          avgConfidence: phaseAvgConfidence,
+          totalTime: phaseTotalTime,
+          entries: validEntries.map(e => this.compressEntry(e)).filter(e => e !== null)
+        };
+      }).filter(phase => phase.entries.length > 0);
+
+      return {
+        totalTime,
+        avgConfidence,
+        stepCount: rawAuditTrail.length,
+        highConfidenceSteps,
+        lowConfidenceSteps,
+        phases,
+        summary: this.generateSummary(rawAuditTrail, avgConfidence, lowConfidenceSteps)
+      };
+      
+    } catch (error) {
+      console.error('[AUDIT] Error processing audit trail:', error);
+      return null;
+    }
+  }
+
+  static compressEntry(entry) {
+    if (!entry || typeof entry !== 'object') {
+      console.warn('[AUDIT] Invalid audit entry:', entry);
+      return null;
+    }
+
+    try {
+      return {
+        timestamp: entry.timestamp || Date.now(),
+        phase: entry.phase || 'unknown',
+        action: entry.action || 'unknown',
+        inputSummary: Utils.summarizeData(entry.input),
+        outputSummary: Utils.summarizeData(entry.output),
+        confidence: entry.confidence || 0,
+        processingTimeMs: entry.processingTimeMs || 0,
+        metadata: entry.metadata || {}
+      };
+    } catch (error) {
+      console.error('[AUDIT] Error compressing entry:', error);
+      return null;
+    }
+  }
+
+  static generateSummary(entries, avgConfidence, lowConfidenceSteps) {
+    let analysisQuality;
+    if (avgConfidence >= 85 && lowConfidenceSteps === 0) {
+      analysisQuality = 'excellent';
+    } else if (avgConfidence >= 70 && lowConfidenceSteps <= 1) {
+      analysisQuality = 'good';
+    } else if (avgConfidence >= 60 && lowConfidenceSteps <= 3) {
+      analysisQuality = 'fair';
+    } else {
+      analysisQuality = 'poor';
+    }
+
+    const keyInsights = [];
+    const embeddingsUsed = entries.some(e => e.action === 'embeddings-search');
+    if (embeddingsUsed) {
+      keyInsights.push('Semantische Suche wurde erfolgreich eingesetzt');
+    }
+
+    const toolSelectionEntries = entries.filter(e => e.action === 'ai-tool-selection');
+    if (toolSelectionEntries.length > 0) {
+      const avgSelectionConfidence = toolSelectionEntries.reduce((sum, e) => sum + e.confidence, 0) / toolSelectionEntries.length;
+      if (avgSelectionConfidence >= 80) {
+        keyInsights.push('Hohe Konfidenz bei der Tool-Auswahl');
+      }
+    }
+
+    const potentialIssues = [];
+    if (lowConfidenceSteps > 2) {
+      potentialIssues.push(`${lowConfidenceSteps} Analyseschritte mit niedriger Konfidenz`);
+    }
+
+    const longSteps = entries.filter(e => e.processingTimeMs > 5000);
+    if (longSteps.length > 0) {
+      potentialIssues.push(`${longSteps.length} Schritte benötigten mehr als 5 Sekunden`);
+    }
+
+    return { analysisQuality, keyInsights, potentialIssues };
+  }
+}
+
+// ===================================================================
+// AUDIT TRAIL RENDERER
+// ===================================================================
+
+class AuditTrailRenderer {
+  constructor(containerId, options = {}) {
+    this.containerId = containerId;
+    this.options = {
+      title: options.title || 'KI-Entscheidungspfad',
+      collapsible: options.collapsible !== false,
+      defaultExpanded: options.defaultExpanded || false,
+      ...options
+    };
+    this.componentId = `audit-trail-${Date.now()}-${Math.random().toString(36).substr(2, 6)}`;
+  }
+
+  render(rawAuditTrail) {
+    const container = document.getElementById(this.containerId);
+    if (!container) {
+      console.error(`[AUDIT RENDERER] Container ${this.containerId} not found`);
+      return;
+    }
+
+    if (!rawAuditTrail || !Array.isArray(rawAuditTrail) || rawAuditTrail.length === 0) {
+      this.renderEmpty(container);
+      return;
+    }
+
+    try {
+      const processedAudit = AuditTrailProcessor.processAuditTrail(rawAuditTrail);
+      
+      if (processedAudit && processedAudit.phases && processedAudit.phases.length > 0) {
+        this.renderProcessed(container, processedAudit);
+        setTimeout(() => this.attachEventHandlers(), 0);
+      } else {
+        this.renderEmpty(container);
+      }
+    } catch (error) {
+      console.error('[AUDIT RENDERER] Failed to render audit trail:', error);
+      this.renderError(container, error);
+    }
+  }
+
+  renderProcessed(container, processedAudit) {
+    const detailsId = `${this.componentId}-details`;
+    
+    container.innerHTML = `
+      <div class="audit-trail-container">
+        <div class="audit-trail-header ${this.options.collapsible ? 'clickable' : ''}" 
+             ${this.options.collapsible ? `data-target="${detailsId}"` : ''}>
+          <div class="audit-trail-title">
+            <div class="audit-icon">
+              <div class="audit-icon-gradient">✓</div>
+              <h4>${this.options.title}</h4>
+            </div>
+            
+            <div class="audit-stats">
+              <div class="stat-item">
+                <div class="stat-dot stat-time"></div>
+                <span>${Utils.formatDuration(processedAudit.totalTime)}</span>
+              </div>
+              <div class="stat-item">
+                <div class="stat-dot" style="background-color: ${Utils.getConfidenceColor(processedAudit.avgConfidence)}"></div>
+                <span>${processedAudit.avgConfidence}% Vertrauen</span>
+              </div>
+              <div class="stat-item">
+                <span>${processedAudit.stepCount} Schritte</span>
+              </div>
+            </div>
+          </div>
+          
+          ${this.options.collapsible ? `
+            <div class="toggle-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </div>
+          ` : ''}
+        </div>
+        
+        <div id="${detailsId}" class="audit-trail-details ${this.options.collapsible && !this.options.defaultExpanded ? 'collapsed' : ''}">
+          ${this.renderSummary(processedAudit)}
+          ${this.renderProcessFlow(processedAudit)}
+          ${this.renderTechnicalDetails(processedAudit)}
+        </div>
+      </div>
+    `;
+  }
+
+  renderSummary(audit) {
+    return `
+      <div class="audit-summary">
+        <div class="summary-header">📊 Analyse-Qualität</div>
+        <div class="summary-grid">
+          <div class="summary-stat">
+            <div class="summary-value success">${audit.highConfidenceSteps}</div>
+            <div class="summary-label">Hohe Sicherheit</div>
+          </div>
+          <div class="summary-stat">
+            <div class="summary-value ${audit.lowConfidenceSteps > 0 ? 'warning' : 'success'}">
+              ${audit.lowConfidenceSteps}
+            </div>
+            <div class="summary-label">Unsichere Schritte</div>
+          </div>
+          <div class="summary-stat">
+            <div class="summary-value">${Utils.formatDuration(audit.totalTime)}</div>
+            <div class="summary-label">Verarbeitungszeit</div>
+          </div>
+        </div>
+        
+        ${audit.summary.keyInsights && audit.summary.keyInsights.length > 0 ? `
+          <div class="insights-section">
+            <div class="insights-header success">✓ Erkenntnisse:</div>
+            <ul class="insights-list">
+              ${audit.summary.keyInsights.map(insight => `<li>${Utils.escapeHtml(insight)}</li>`).join('')}
+            </ul>
+          </div>
+        ` : ''}
+        
+        ${audit.summary.potentialIssues && audit.summary.potentialIssues.length > 0 ? `
+          <div class="insights-section">
+            <div class="insights-header warning">⚠ Hinweise:</div>
+            <ul class="insights-list">
+              ${audit.summary.potentialIssues.map(issue => `<li>${Utils.escapeHtml(issue)}</li>`).join('')}
+            </ul>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  renderProcessFlow(audit) {
+    if (!audit.phases || audit.phases.length === 0) {
+      return '<div class="audit-process-flow"><p>Keine Phasen verfügbar</p></div>';
+    }
+
+    return `
+      <div class="audit-process-flow">
+        ${audit.phases.map((phase, index) => `
+          <div class="phase-group ${index === audit.phases.length - 1 ? 'last-phase' : ''}">
+            <div class="phase-header" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
+              <div class="phase-info" style="display: flex; align-items: center; gap: 0.75rem;">
+                <span class="phase-icon" style="font-size: 1rem;">${phase.icon || '📋'}</span>
+                <span class="phase-name" style="font-size: 0.875rem; font-weight: 500; color: var(--color-text);">${phase.displayName || phase.name}</span>
+              </div>
+              <div class="phase-divider" style="flex: 1; height: 1px; background-color: var(--color-border);"></div>
+              <div class="phase-stats" style="display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;">
+                <div class="confidence-bar" style="width: 48px; height: 8px; background-color: var(--color-bg-tertiary); border-radius: 4px; overflow: hidden;">
+                  <div class="confidence-fill" 
+                      style="height: 100%; width: ${phase.avgConfidence || 0}%; background-color: ${Utils.getConfidenceColor(phase.avgConfidence || 0)}; border-radius: 4px; transition: var(--transition-fast);">
+                  </div>
+                </div>
+                <span class="confidence-text" style="font-size: 0.75rem; color: var(--color-text-secondary); min-width: 28px;">${phase.avgConfidence || 0}%</span>
+              </div>
+            </div>
+            
+            <div class="phase-entries" style="margin-left: 1.5rem; display: grid; gap: 0.5rem;">
+              ${(phase.entries || []).map(entry => this.renderAuditEntry(entry)).join('')}
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  renderAuditEntry(entry) {
+    return `
+      <div class="audit-entry" style="background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0.375rem; padding: 0.75rem; transition: var(--transition-fast);" 
+           onmouseover="this.style.backgroundColor='var(--color-bg-secondary)'" 
+           onmouseout="this.style.backgroundColor='var(--color-bg)'">
+        <div class="entry-main" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
+          <span class="entry-action" style="font-size: 0.875rem; font-weight: 500; color: var(--color-text);">
+            ${Utils.getActionDisplayName(entry.action)}
+          </span>
+          <div class="entry-meta" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary);">
+            <div class="confidence-indicator" 
+                style="width: 8px; height: 8px; border-radius: 50%; background-color: ${Utils.getConfidenceColor(entry.confidence || 0)};">
+            </div>
+            <span class="confidence-value" style="min-width: 28px; text-align: right;">${entry.confidence || 0}%</span>
+            <span class="processing-time" style="min-width: 40px; text-align: right;">${entry.processingTimeMs || 0}ms</span>
+          </div>
+        </div>
+        
+        ${(entry.inputSummary && entry.inputSummary !== 'null') || (entry.outputSummary && entry.outputSummary !== 'null') ? `
+          <div class="entry-details" style="font-size: 0.75rem; color: var(--color-text-secondary); padding-top: 0.5rem; border-top: 1px solid var(--color-border);">
+            ${entry.inputSummary && entry.inputSummary !== 'null' ? `
+              <div class="detail-item" style="margin-bottom: 0.25rem; word-break: break-word;">
+                <strong>Input:</strong> ${Utils.escapeHtml(entry.inputSummary)}
+              </div>
+            ` : ''}
+            ${entry.outputSummary && entry.outputSummary !== 'null' ? `
+              <div class="detail-item" style="margin-bottom: 0.25rem; word-break: break-word;">
+                <strong>Output:</strong> ${Utils.escapeHtml(entry.outputSummary)}
+              </div>
+            ` : ''}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  renderTechnicalDetails(audit) {
+    const technicalId = `${this.componentId}-technical`;
+    
+    return `
+      <div class="technical-toggle">
+        <button class="technical-toggle-btn" data-target="${technicalId}">
+          🔧 Technische Details anzeigen
+        </button>
+        <div id="${technicalId}" class="technical-details collapsed">
+          ${(audit.phases || []).map(phase => 
+            (phase.entries || []).map(entry => `
+              <div class="technical-entry">
+                <div class="technical-header">
+                  <span class="technical-phase">${entry.phase}/${entry.action}</span>
+                  <span class="technical-time">
+                    ${new Date(entry.timestamp).toLocaleTimeString('de-DE', { 
+                      hour: '2-digit', 
+                      minute: '2-digit', 
+                      second: '2-digit' 
+                    })} • ${entry.processingTimeMs || 0}ms
+                  </span>
+                </div>
+                <div class="technical-content">
+                  <div class="technical-row">
+                    <strong>Confidence:</strong> ${entry.confidence || 0}%
+                  </div>
+                  ${entry.metadata && Object.keys(entry.metadata).length > 0 ? `
+                    <div class="technical-row">
+                      <strong>Metadata:</strong> ${Utils.escapeHtml(JSON.stringify(entry.metadata))}
+                    </div>
+                  ` : ''}
+                </div>
+              </div>
+            `).join('')
+          ).join('')}
+        </div>
+      </div>
+    `;
+  }
+
+  renderEmpty(container) {
+    container.innerHTML = `
+      <div class="audit-trail-container">
+        <div class="audit-trail-header">
+          <div class="audit-trail-title">
+            <div class="audit-icon">
+              <div class="audit-icon-gradient">ⓘ</div>
+              <h4>Kein Audit-Trail verfügbar</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  renderError(container, error) {
+    container.innerHTML = `
+      <div class="audit-trail-container">
+        <div class="audit-trail-header">
+          <div class="audit-trail-title">
+            <div class="audit-icon">
+              <div class="audit-icon-gradient" style="background: var(--color-error);">✗</div>
+              <h4>Audit-Trail Fehler</h4>
+            </div>
+          </div>
+        </div>
+        <div class="audit-summary">
+          <p style="color: var(--color-error);">
+            Fehler beim Laden der Audit-Informationen: ${Utils.escapeHtml(error.message)}
+          </p>
+        </div>
+      </div>
+    `;
+  }
+
+  attachEventHandlers() {
+    // Handle collapsible header
+    if (this.options.collapsible) {
+      const header = document.querySelector(`[data-target="${this.componentId}-details"]`);
+      const details = document.getElementById(`${this.componentId}-details`);
+      const toggleIcon = header?.querySelector('.toggle-icon svg');
+      
+      if (header && details && toggleIcon) {
+        header.addEventListener('click', () => {
+          const isCollapsed = details.classList.contains('collapsed');
+          details.classList.toggle('collapsed');
+          toggleIcon.style.transform = isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)';
+        });
+      }
+    }
+    
+    // Handle technical details toggle
+    const technicalBtn = document.querySelector(`[data-target="${this.componentId}-technical"]`);
+    const technicalDetails = document.getElementById(`${this.componentId}-technical`);
+    
+    if (technicalBtn && technicalDetails) {
+      technicalBtn.addEventListener('click', () => {
+        const isCollapsed = technicalDetails.classList.contains('collapsed');
+        technicalDetails.classList.toggle('collapsed');
+        technicalBtn.textContent = isCollapsed ? 
+          '🔧 Technische Details ausblenden' : 
+          '🔧 Technische Details anzeigen';
+      });
+    }
+  }
+}
+
+// ===================================================================
+// MAIN AI QUERY INTERFACE
+// ===================================================================
 
 class AIQueryInterface {
   constructor() {
     this.currentMode = 'workflow';
     this.currentRecommendation = null;
-    this.auditTrailRenderer = null;
     this.enhancementTimeout = null;
     this.enhancementAbortController = null;
     this.statusInterval = null;
@@ -273,11 +826,7 @@ class AIQueryInterface {
       microTaskCounter: document.getElementById('micro-task-counter')
     };
 
-    if (!this.elements.input || !this.elements.submitBtn || !this.elements.results) {
-      console.error('[AI Interface] Critical elements not found');
-      return false;
-    }
-    return true;
+    return Object.values(this.elements).some(el => el !== null);
   }
 
   setupEventListeners() {
@@ -294,7 +843,6 @@ class AIQueryInterface {
     });
 
     this.elements.submitBtn?.addEventListener('click', () => this.handleSubmit());
-
     this.elements.dismissSuggestions?.addEventListener('click', () => this.hideSmartPrompting());
   }
 
@@ -336,28 +884,24 @@ class AIQueryInterface {
     if (this.elements.submitBtnText) this.elements.submitBtnText.textContent = config.submitText;
     if (this.elements.loadingText) this.elements.loadingText.textContent = config.loadingText;
     
-    if (this.currentMode === 'workflow') {
-      if (this.elements.toggleSlider) this.elements.toggleSlider.style.transform = 'translateX(0)';
-      if (this.elements.toggleSwitch) this.elements.toggleSwitch.style.backgroundColor = 'var(--color-primary)';
-      if (this.elements.workflowLabel) {
-        this.elements.workflowLabel.style.color = 'var(--color-primary)';
-        this.elements.workflowLabel.classList.add('active');
-      }
-      if (this.elements.toolLabel) {
-        this.elements.toolLabel.style.color = 'var(--color-text-secondary)';
-        this.elements.toolLabel.classList.remove('active');
-      }
-    } else {
-      if (this.elements.toggleSlider) this.elements.toggleSlider.style.transform = 'translateX(26px)';
-      if (this.elements.toggleSwitch) this.elements.toggleSwitch.style.backgroundColor = 'var(--color-accent)';
-      if (this.elements.toolLabel) {
-        this.elements.toolLabel.style.color = 'var(--color-accent)';
-        this.elements.toolLabel.classList.add('active');
-      }
-      if (this.elements.workflowLabel) {
-        this.elements.workflowLabel.style.color = 'var(--color-text-secondary)';
-        this.elements.workflowLabel.classList.remove('active');
-      }
+    const isWorkflow = this.currentMode === 'workflow';
+    const primaryColor = isWorkflow ? 'var(--color-primary)' : 'var(--color-accent)';
+    const secondaryColor = 'var(--color-text-secondary)';
+    
+    if (this.elements.toggleSlider) {
+      this.elements.toggleSlider.style.transform = isWorkflow ? 'translateX(0)' : 'translateX(26px)';
+    }
+    if (this.elements.toggleSwitch) {
+      this.elements.toggleSwitch.style.backgroundColor = primaryColor;
+    }
+    
+    if (this.elements.workflowLabel) {
+      this.elements.workflowLabel.style.color = isWorkflow ? primaryColor : secondaryColor;
+      this.elements.workflowLabel.classList.toggle('active', isWorkflow);
+    }
+    if (this.elements.toolLabel) {
+      this.elements.toolLabel.style.color = isWorkflow ? secondaryColor : primaryColor;
+      this.elements.toolLabel.classList.toggle('active', !isWorkflow);
     }
   }
 
@@ -441,44 +985,65 @@ class AIQueryInterface {
     const statusText = this.elements.promptingStatus.querySelector('.status-text');
     if (!statusText) return;
     
-    switch (state) {
-      case 'analyzing':
-        this.showElement(this.elements.promptingContainer);
-        this.hideElement(this.elements.smartHint);
-        statusText.textContent = 'Analysiere Eingabe...';
-        this.showElement(this.elements.promptingSpinner);
-        this.hideElement(this.elements.suggestedQuestions);
-        break;
-      case 'suggestions':
-        statusText.textContent = 'Verbesserungsvorschläge verfügbar';
-        this.hideElement(this.elements.promptingSpinner);
-        this.showElement(this.elements.suggestedQuestions);
-        break;
-      case 'rate-limited':
-        statusText.textContent = 'Nach Hauptabfrage verfügbar';
-        this.hideElement(this.elements.promptingSpinner);
-        this.hideElement(this.elements.suggestedQuestions);
-        break;
-      case 'error':
-      case 'hidden':
-        this.hideSmartPrompting();
-        break;
-    }
+    const statusMap = {
+      analyzing: {
+        text: 'Analysiere Eingabe...',
+        showSpinner: true,
+        showSuggestions: false,
+        showContainer: true,
+        hideHint: true
+      },
+      suggestions: {
+        text: 'Verbesserungsvorschläge verfügbar',
+        showSpinner: false,
+        showSuggestions: true,
+        showContainer: true,
+        hideHint: true
+      },
+      'rate-limited': {
+        text: 'Nach Hauptabfrage verfügbar',
+        showSpinner: false,
+        showSuggestions: false,
+        showContainer: true,
+        hideHint: true
+      },
+      error: {
+        showContainer: false,
+        hideHint: false
+      }
+    };
+
+    const config = statusMap[state];
+    if (!config) return;
+
+    statusText.textContent = config.text || '';
+    
+    if (config.showContainer) Utils.showElement(this.elements.promptingContainer);
+    else Utils.hideElement(this.elements.promptingContainer);
+    
+    if (config.hideHint) Utils.hideElement(this.elements.smartHint);
+    else Utils.showElement(this.elements.smartHint);
+    
+    if (config.showSpinner) Utils.showElement(this.elements.promptingSpinner);
+    else Utils.hideElement(this.elements.promptingSpinner);
+    
+    if (config.showSuggestions) Utils.showElement(this.elements.suggestedQuestions);
+    else Utils.hideElement(this.elements.suggestedQuestions);
   }
 
   displaySuggestions(suggestions) {
     if (!this.elements.questionsList || !suggestions?.length) return;
     
     this.elements.questionsList.innerHTML = suggestions.map(question => 
-      `<div class="suggestion-item">${this.escapeHtml(question)}</div>`
+      `<div class="suggestion-item">${Utils.escapeHtml(question)}</div>`
     ).join('');
     
     this.showPromptingStatus('suggestions');
   }
 
   hideSmartPrompting() {
-    if (this.elements.promptingContainer) this.hideElement(this.elements.promptingContainer);
-    if (this.elements.smartHint) this.showElement(this.elements.smartHint);
+    if (this.elements.promptingContainer) Utils.hideElement(this.elements.promptingContainer);
+    if (this.elements.smartHint) Utils.showElement(this.elements.smartHint);
   }
 
   async handleSubmit() {
@@ -541,15 +1106,17 @@ class AIQueryInterface {
   }
 
   getErrorMessage(error) {
-    if (error.message.includes('429')) {
-      return 'Zu viele Anfragen. Bitte warten Sie einen Moment.';
-    } else if (error.message.includes('401')) {
-      return 'Authentifizierung erforderlich. Bitte melden Sie sich an.';
-    } else if (error.message.includes('503')) {
-      return 'KI-Service vorübergehend nicht verfügbar.';
-    } else {
-      return `Fehler: ${error.message}`;
+    const errorMap = {
+      '429': 'Zu viele Anfragen. Bitte warten Sie einen Moment.',
+      '401': 'Authentifizierung erforderlich. Bitte melden Sie sich an.',
+      '503': 'KI-Service vorübergehend nicht verfügbar.'
+    };
+    
+    for (const [code, message] of Object.entries(errorMap)) {
+      if (error.message.includes(code)) return message;
     }
+    
+    return `Fehler: ${error.message}`;
   }
 
   resetSubmitButton() {
@@ -561,10 +1128,7 @@ class AIQueryInterface {
   }
 
   startQueueMonitoring(taskId) {
-    if (this.elements.queueStatus) {
-      this.showElement(this.elements.queueStatus);
-    }
-    
+    if (this.elements.queueStatus) Utils.showElement(this.elements.queueStatus);
     if (this.elements.taskIdDisplay) {
       this.elements.taskIdDisplay.textContent = taskId.slice(-8);
     }
@@ -587,7 +1151,7 @@ class AIQueryInterface {
       if (this.elements.queueLength) this.elements.queueLength.textContent = data.queueLength || 0;
       if (this.elements.estimatedTime) {
         this.elements.estimatedTime.textContent = data.estimatedWaitTime > 0 ? 
-          this.formatDuration(data.estimatedWaitTime) : 'Verarbeitung läuft...';
+          Utils.formatDuration(data.estimatedWaitTime) : 'Verarbeitung läuft...';
       }
       
       if (this.elements.positionBadge) {
@@ -598,11 +1162,7 @@ class AIQueryInterface {
             this.elements.progressBar.style.width = `${progress}%`;
           }
         } else {
-          const stateIcons = {
-            processing: '⚡',
-            completed: '✅', 
-            failed: '❌'
-          };
+          const stateIcons = { processing: '⚡', completed: '✅', failed: '❌' };
           this.elements.positionBadge.textContent = stateIcons[data.taskStatus] || '?';
           if (this.elements.progressBar) {
             this.elements.progressBar.style.width = data.taskStatus === 'processing' ? '100%' : '0%';
@@ -626,14 +1186,14 @@ class AIQueryInterface {
       this.microTaskInterval = null;
     }
     
-    if (this.elements.queueStatus) this.hideElement(this.elements.queueStatus);
-    if (this.elements.microTaskProgress) this.hideElement(this.elements.microTaskProgress);
+    if (this.elements.queueStatus) Utils.hideElement(this.elements.queueStatus);
+    if (this.elements.microTaskProgress) Utils.hideElement(this.elements.microTaskProgress);
   }
 
   startMicroTaskProgress() {
     if (!this.elements.microTaskProgress) return;
     
-    this.showElement(this.elements.microTaskProgress);
+    Utils.showElement(this.elements.microTaskProgress);
     this.currentMicroTaskStep = 0;
     
     const steps = ['scenario', 'approach', 'considerations', 'tools', 'knowledge', 'final'];
@@ -681,8 +1241,7 @@ class AIQueryInterface {
   }
 
   async displayResults(recommendation, originalQuery) {
-    console.log('[AI DEBUG] Full recommendation object:', recommendation);
-    console.log('[AI DEBUG] Audit trail data:', recommendation.auditTrail);
+    console.log('[AI Interface] Displaying results for mode:', this.currentMode);
     
     if (this.currentMode === 'workflow') {
       await this.displayWorkflowResults(recommendation, originalQuery);
@@ -690,16 +1249,14 @@ class AIQueryInterface {
       await this.displayToolResults(recommendation, originalQuery);
     }
     
-    // Show results first, then render audit trail
     this.showResults();
     
     // Render audit trail after DOM is ready
-    setTimeout(async () => {
+    setTimeout(() => {
       try {
-        await this.renderAuditTrail(recommendation.auditTrail);
-        console.log('[AI DEBUG] Audit trail rendered successfully');
+        this.renderAuditTrail(recommendation.auditTrail);
       } catch (error) {
-        console.error('[AI DEBUG] Failed to render audit trail:', error);
+        console.error('[AI Interface] Failed to render audit trail:', error);
       }
     }, 100);
   }
@@ -716,12 +1273,7 @@ class AIQueryInterface {
       toolsByPhase[phase] = [];
     });
 
-    console.log('[AI Results] Recommendation structure:', recommendation);
-    console.log('[AI Results] Recommended tools:', recommendation.recommended_tools);
-
     recommendation.recommended_tools?.forEach(recTool => {
-      console.log('[AI Results] Tool confidence data:', recTool.name, recTool.confidence);
-      
       if (toolsByPhase[recTool.phase]) {
         const fullTool = tools.find(t => t.name === recTool.name);
         if (fullTool) {
@@ -730,8 +1282,7 @@ class AIQueryInterface {
             recommendation: recTool,
             confidence: recTool.confidence, 
             justification: recTool.justification,
-            priority: recTool.priority,
-            recommendationStrength: recTool.recommendationStrength
+            priority: recTool.priority
           });
         }
       }
@@ -745,12 +1296,10 @@ class AIQueryInterface {
         ${this.renderWorkflowPhases(toolsByPhase, phaseOrder, phaseNames)}
         ${this.renderWorkflowSuggestion(recommendation.workflow_suggestion)}
       </div>
-        
       <div id="audit-trail-container"></div>
     `;
     
     this.elements.results.innerHTML = html;
-    await this.renderAuditTrail(recommendation.auditTrail);
   }
 
   async displayToolResults(recommendation, originalQuery) {
@@ -766,266 +1315,41 @@ class AIQueryInterface {
     `;
     
     this.elements.results.innerHTML = html;
-    await this.renderAuditTrail(recommendation.auditTrail);
   }
 
-  renderConfidenceTooltip(confidence) {
-    if (!confidence || typeof confidence.overall !== 'number') {
-      return '';
-    }
-    
-    const confidenceColor = confidence.overall >= 80 ? 'var(--color-accent)' : 
-                          confidence.overall >= 60 ? 'var(--color-warning)' : 'var(--color-error)';
-    
-    const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
-    
-    return `
-      <span class="confidence-tooltip-trigger" 
-            style="display: inline-flex; align-items: center; gap: 0.125rem; cursor: help; margin-left: 0.25rem;"
-            onmouseenter="document.getElementById('${tooltipId}').style.display = 'block'"
-            onmouseleave="document.getElementById('${tooltipId}').style.display = 'none'"
-            onclick="event.stopPropagation();">
-        <div style="width: 6px; height: 6px; border-radius: 50%; background-color: ${confidenceColor}; flex-shrink: 0;"></div>
-        <span style="font-size: 0.625rem; color: white; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">${confidence.overall}%</span>
-        
-        <div id="${tooltipId}" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; min-width: 320px; max-width: 400px; box-shadow: var(--shadow-lg); font-size: 0.75rem; color: var(--color-text);">
-          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
-            <strong style="font-size: 0.875rem;">KI-Vertrauenswertung</strong>
-            <span class="badge badge-mini" style="background-color: ${confidenceColor}; color: white; font-weight: 600;">${confidence.overall}%</span>
-          </div>
-          
-          <div style="display: grid; grid-template-columns: 1fr; gap: 0.625rem; margin-bottom: 0.75rem;">
-            <div style="background: var(--color-bg-secondary); padding: 0.5rem; border-radius: 0.375rem; border-left: 3px solid var(--color-accent);">
-              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
-                <span style="font-weight: 600; font-size: 0.6875rem;">🔍 Semantische Relevanz</span>
-                <strong style="color: var(--color-accent);">${confidence.semanticRelevance}%</strong>
-              </div>
-              <div style="font-size: 0.625rem; color: var(--color-text-secondary); line-height: 1.3;">
-                Wie gut die Tool-Beschreibung semantisch zu Ihrer Anfrage passt (Vektor-Ähnlichkeit)
-              </div>
-            </div>
-            
-            <div style="background: var(--color-bg-secondary); padding: 0.5rem; border-radius: 0.375rem; border-left: 3px solid var(--color-primary);">
-              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
-                <span style="font-weight: 600; font-size: 0.6875rem;">🎯 Aufgaben-Eignung</span>
-                <strong style="color: var(--color-primary);">${confidence.taskSuitability}%</strong>
-              </div>
-              <div style="font-size: 0.625rem; color: var(--color-text-secondary); line-height: 1.3;">
-                KI-bewertete Eignung des Tools für Ihre spezifische forensische Aufgabenstellung
-              </div>
-            </div>
-          </div>
-          
-          ${confidence.strengthIndicators && confidence.strengthIndicators.length > 0 ? `
-            <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: var(--color-oss-bg); border-radius: 0.375rem; border-left: 3px solid var(--color-accent);">
-              <strong style="color: var(--color-accent); font-size: 0.6875rem; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem;">
-                <span>✓</span> Stärken dieser Empfehlung:
-              </strong>
-              <ul style="margin: 0; padding-left: 1rem; font-size: 0.625rem; line-height: 1.4;">
-                ${confidence.strengthIndicators.slice(0, 3).map(s => `<li style="margin-bottom: 0.25rem;">${this.sanitizeText(s)}</li>`).join('')}
-              </ul>
-            </div>
-          ` : ''}
-          
-          ${confidence.uncertaintyFactors && confidence.uncertaintyFactors.length > 0 ? `
-            <div style="padding: 0.5rem; background: var(--color-hosted-bg); border-radius: 0.375rem; border-left: 3px solid var(--color-warning);">
-              <strong style="color: var(--color-warning); font-size: 0.6875rem; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem;">
-                <span>⚠</span> Mögliche Einschränkungen:
-              </strong>
-              <ul style="margin: 0; padding-left: 1rem; font-size: 0.625rem; line-height: 1.4;">
-                ${confidence.uncertaintyFactors.slice(0, 3).map(f => `<li style="margin-bottom: 0.25rem;">${this.sanitizeText(f)}</li>`).join('')}
-              </ul>
-            </div>
-          ` : ''}
-          
-          <div style="margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); font-size: 0.625rem; color: var(--color-text-secondary); text-align: center;">
-            Forensisch fundierte KI-Analyse
-          </div>
-        </div>
-      </span>
-    `;
-  }
-
-  async renderAuditTrail(rawAuditTrail) {
-    console.log('[AI Interface] Starting audit trail render...', rawAuditTrail?.length || 0, 'entries');
-    
+  renderAuditTrail(rawAuditTrail) {
     const container = document.getElementById('audit-trail-container');
     if (!container) {
       console.error('[AI Interface] Audit container not found');
       return;
     }
 
-    // Clear previous content
     container.innerHTML = '';
 
-    // Check if we have audit data
     if (!rawAuditTrail || !Array.isArray(rawAuditTrail) || rawAuditTrail.length === 0) {
       console.log('[AI Interface] No audit trail data to render');
-      container.innerHTML = `
-        <div class="audit-trail-container">
-          <div class="audit-trail-header">
-            <div class="audit-icon">
-              <div class="audit-icon-gradient">ⓘ</div>
-              <h4>Kein Audit-Trail verfügbar</h4>
-            </div>
-          </div>
-        </div>
-      `;
       return;
     }
 
     try {
-      // Import and create renderer
-      //const { AuditTrailRenderer } = await import('../js/auditTrailRenderer.js');
-      
       const renderer = new AuditTrailRenderer('audit-trail-container', {
         title: 'KI-Entscheidungspfad',
         collapsible: true,
         defaultExpanded: false
       });
       
-      // Render synchronously (the method handles async internally)
       renderer.render(rawAuditTrail);
-      
-      console.log('[AI Interface] Audit trail render completed');
-      
     } catch (error) {
       console.error('[AI Interface] Failed to render audit trail:', error);
-      
-      container.innerHTML = `
-        <div class="audit-trail-container">
-          <div class="audit-trail-header">
-            <div class="audit-icon">
-              <div class="audit-icon-gradient" style="background: var(--color-error);">✗</div>
-              <h4>Audit-Trail Fehler</h4>
-            </div>
-          </div>
-          <div class="audit-summary">
-            <p style="color: var(--color-error);">
-              Fehler beim Laden der Audit-Informationen: ${error.message}
-            </p>
-          </div>
-        </div>
-      `;
     }
   }
 
-  renderAuditEntry(entry) {
-    const confidenceColor = entry.confidence >= 80 ? 'var(--color-accent)' : 
-                            entry.confidence >= 60 ? 'var(--color-warning)' : 'var(--color-error)';
-    
-    const formattedTime = new Date(entry.timestamp).toLocaleTimeString('de-DE', { 
-      hour: '2-digit', 
-      minute: '2-digit', 
-      second: '2-digit' 
-    });
-    
-    return `
-      <div class="border-l-2 pl-3 py-2 mb-2" style="border-left-color: ${confidenceColor};">
-        <div class="flex justify-between items-center mb-1">
-          <span class="text-xs font-medium">${entry.phase} → ${entry.action}</span>
-          <div class="flex items-center gap-2">
-            <span class="badge badge-mini" style="background-color: ${confidenceColor}; color: white;">
-              ${entry.confidence}% confidence
-            </span>
-            <span class="text-xs text-muted">${entry.processingTimeMs}ms</span>
-            <span class="text-xs text-muted">${formattedTime}</span>
-          </div>
-        </div>
-        <div class="text-xs text-muted grid-cols-2 gap-2" style="display: grid;">
-          <div><strong>Input:</strong> ${this.formatAuditData(entry.input)}</div>
-          <div><strong>Output:</strong> ${this.formatAuditData(entry.output)}</div>
-        </div>
-        ${entry.metadata && Object.keys(entry.metadata).length > 0 ? `
-          <div class="text-xs text-muted mt-1 pt-1 border-t border-dashed">
-            <strong>Metadata:</strong> ${this.formatAuditData(entry.metadata)}
-          </div>
-        ` : ''}
-      </div>
-    `;
-  }
-
-  renderWorkflowTool(tool) {
-    const hasValidProjectUrl = isToolHosted(tool);
-    const priorityColors = {
-      high: 'var(--color-error)',
-      medium: 'var(--color-warning)', 
-      low: 'var(--color-accent)'
-    };
-
-    return `
-      <div class="tool-recommendation ${this.getToolClass(tool, 'recommendation')}" onclick="window.showToolDetails('${tool.name}')" style="position: relative;">
-        <div class="tool-rec-header">
-          <h4 class="tool-rec-name">
-            ${tool.icon ? `<span style="margin-right: 0.5rem;">${tool.icon}</span>` : ''}
-            ${tool.name}
-          </h4>
-          <div class="flex items-center gap-2">
-            <span class="tool-rec-priority ${tool.recommendation ? tool.recommendation.priority : tool.priority}" 
-                  style="background-color: ${priorityColors[tool.recommendation ? tool.recommendation.priority : tool.priority]}; color: white; padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; position: relative;">
-              ${tool.recommendation ? tool.recommendation.priority : tool.priority}
-              ${tool.confidence ? this.renderConfidenceTooltip(tool.confidence, 'priority') : ''}
-            </span>
-          </div>
-        </div>
-        
-        <div class="tool-rec-justification" style="background-color: var(--color-bg-tertiary); padding: 0.75rem; border-radius: 0.375rem; border-left: 3px solid var(--color-primary); margin: 0.75rem 0; font-style: italic; white-space: pre-wrap; word-wrap: break-word;">
-          "${this.sanitizeText(tool.justification || (tool.recommendation && tool.recommendation.justification) || `Empfohlen für ${tool.phase}`)}"
-        </div>
-        
-        <div style="font-size: 0.75rem; color: var(--color-text-secondary);">
-          ${this.renderToolBadges(tool)}
-          <div style="margin-top: 0.5rem;">
-            ${tool.type === 'method' ? 'Methode' : tool.platforms.join(', ') + ' • ' + tool.license}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  renderDetailedTool(tool, recommendation, rank) {
-    const rankColors = { 1: 'var(--color-accent)', 2: 'var(--color-primary)', 3: 'var(--color-warning)' };
-    const suitabilityColors = { high: 'var(--color-accent)', medium: 'var(--color-warning)', low: 'var(--color-text-secondary)' };
-    
-    return `
-      <div class="card ${this.getToolClass(tool, 'card')}" style="cursor: pointer; position: relative;" onclick="window.showToolDetails('${tool.name}')">
-        <div style="position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; background-color: ${rankColors[rank]}; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.125rem;">
-          ${rank}
-        </div>
-
-        <div style="margin-bottom: 1rem;">
-          <h3 style="margin: 0 0 0.5rem 0;">${tool.name}</h3>
-          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem;">
-            <span class="badge" style="background-color: ${suitabilityColors[recommendation.suitability_score]}; color: white; position: relative;">
-              ${this.getSuitabilityText(recommendation.suitability_score, recommendation.confidence)}
-            </span>
-            ${this.renderToolBadges(tool)}
-          </div>
-        </div>
-
-        <div style="margin-bottom: 1.5rem;">
-          <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-accent);">Warum diese Methode?</h4>
-          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(recommendation.detailed_explanation)}</div>
-          
-          ${recommendation.implementation_approach ? `
-            <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-primary);">Anwendungsansatz</h4>
-            <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(recommendation.implementation_approach)}</div>
-          ` : ''}
-        </div>
-
-        ${this.renderProsAndCons(recommendation.pros, recommendation.cons)}
-        ${this.renderToolMetadata(tool)}
-        ${recommendation.alternatives ? this.renderAlternatives(recommendation.alternatives) : ''}
-      </div>
-    `;
-  }
-
   renderHeader(title, query) {
     return `
       <div style="text-align: center; margin-bottom: 2rem; padding: 1.5rem; background: linear-gradient(135deg, var(--color-primary) 0%, #525252 100%); color: white; border-radius: 0.75rem;">
         <h3 style="margin: 0 0 0.75rem 0; font-size: 1.5rem;">${title}</h3>
         <p style="margin: 0; opacity: 0.9; line-height: 1.5;">
-          Basierend auf Ihrer Anfrage: "<em>${this.truncateText(query, 100)}</em>"
+          Basierend auf Ihrer Anfrage: "<em>${Utils.truncateText(query, 100)}</em>"
         </p>
       </div>
     `;
@@ -1041,7 +1365,7 @@ class AIQueryInterface {
           <h4 style="margin: 0 0 1rem 0; color: var(--color-primary);">
             ${mode === 'workflow' ? 'Szenario-Analyse' : 'Problem-Analyse'}
           </h4>
-          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(analysisField)}</div>
+          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(analysisField)}</div>
         </div>
       `;
     }
@@ -1052,7 +1376,7 @@ class AIQueryInterface {
           <h4 style="margin: 0 0 1rem 0; color: var(--color-accent);">
             ${mode === 'workflow' ? 'Untersuchungsansatz' : 'Lösungsansatz'}
           </h4>
-          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(recommendation.investigation_approach)}</div>
+          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(recommendation.investigation_approach)}</div>
         </div>
       `;
     }
@@ -1063,7 +1387,7 @@ class AIQueryInterface {
           <h4 style="margin: 0 0 1rem 0; color: var(--color-warning);">
             ${mode === 'workflow' ? 'Kritische Überlegungen' : 'Wichtige Voraussetzungen'}
           </h4>
-          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(recommendation.critical_considerations)}</div>
+          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(recommendation.critical_considerations)}</div>
         </div>
       `;
     }
@@ -1084,7 +1408,7 @@ class AIQueryInterface {
           <span class="badge" style="background-color: var(--color-concept); color: white; font-size: 0.625rem;">Hintergrundwissen</span>
         </div>
         <div style="margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-secondary); white-space: pre-wrap; word-wrap: break-word;">
-          ${this.sanitizeText(concept.relevance)}
+          ${Utils.sanitizeText(concept.relevance)}
         </div>
       </div>
     `).join('');
@@ -1098,36 +1422,56 @@ class AIQueryInterface {
   }
 
   renderWorkflowPhases(toolsByPhase, phaseOrder, phaseNames) {
+    const phaseColors = [
+      'var(--color-primary)', 
+      'var(--color-accent)', 
+      'var(--color-warning)',
+      'var(--color-method)',
+      'var(--color-hosted)',
+      'var(--color-concept)'
+    ];
+
     return phaseOrder.map((phase, index) => {
       const phaseTools = toolsByPhase[phase];
       if (phaseTools.length === 0) return '';
 
-      console.log(`[AI DEBUG] Phase ${phase} tools:`, phaseTools.map(t => ({name: t.name, hasConfidence: !!t.confidence})));
+      const phaseColor = phaseColors[index % phaseColors.length];
 
       return `
-        <div class="workflow-phase">
-          <div class="phase-header">
-            <div class="phase-number">${index + 1}</div>
-            <div class="phase-info">
-              <h3 class="phase-title">${phaseNames[phase]}</h3>
-              <div class="phase-tools">
-                ${phaseTools.map(tool => {
-                  console.log(`[AI DEBUG] Rendering tool ${tool.name} with confidence:`, tool.confidence);
-                  return this.renderWorkflowTool(tool);
-                }).join('')}
+        <div class="workflow-phase" style="margin-bottom: 2rem;">
+          <div class="phase-header" style="display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background-color: var(--color-bg); border: 2px solid var(--color-border); border-radius: 0.75rem; transition: var(--transition-medium);" 
+               onmouseover="this.style.borderColor='${phaseColor}'; this.style.boxShadow='var(--shadow-md)';"
+               onmouseout="this.style.borderColor='var(--color-border)'; this.style.boxShadow='';">
+            
+            <div class="phase-number" style="width: 2rem; height: 2rem; background: ${phaseColor}; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; box-shadow: var(--shadow-sm);">
+              ${index + 1}
+            </div>
+            
+            <div class="phase-info" style="display: flex; flex-direction: column; gap: 0.75rem; flex: 1; min-width: 0;">
+              <h3 class="phase-title" style="font-weight: 600; margin: 0; color: var(--color-text); font-size: 1.25rem;">
+                ${phaseNames[phase]}
+              </h3>
+              
+              <div class="phase-tools" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;">
+                ${phaseTools.map(tool => this.renderWorkflowTool(tool)).join('')}
               </div>
             </div>
           </div>
-          ${index < phaseOrder.length - 1 ? '<div class="workflow-arrow">↓</div>' : ''}
+          
+          ${index < phaseOrder.length - 1 ? `
+            <div class="workflow-arrow" style="display: flex; justify-content: center; margin: 1rem 0; color: ${phaseColor};">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="12" y1="5" x2="12" y2="19"/>
+                <polyline points="19 12 12 19 5 12"/>
+              </svg>
+            </div>
+          ` : ''}
         </div>
       `;
     }).join('');
   }
 
   renderWorkflowTool(tool) {
-    console.log(`[AI DEBUG] renderWorkflowTool called for ${tool.name}, confidence:`, tool.confidence);
-    
-    const hasValidProjectUrl = isToolHosted(tool);
     const priorityColors = {
       high: 'var(--color-error)',
       medium: 'var(--color-warning)', 
@@ -1137,32 +1481,39 @@ class AIQueryInterface {
     const priority = tool.recommendation ? tool.recommendation.priority : tool.priority;
     const confidenceTooltip = tool.confidence ? this.renderConfidenceTooltip(tool.confidence) : '';
     
-    console.log(`[AI DEBUG] Priority: ${priority}, Confidence tooltip:`, confidenceTooltip ? 'generated' : 'empty');
-
+    const cardClass = this.getToolClass(tool, 'recommendation');
+    
     return `
-      <div class="tool-recommendation ${this.getToolClass(tool, 'recommendation')}" onclick="window.showToolDetails('${tool.name}')" style="position: relative;">
-        <div class="tool-rec-header">
-          <h4 class="tool-rec-name">
-            ${tool.icon ? `<span style="margin-right: 0.5rem;">${tool.icon}</span>` : ''}
+      <div class="tool-recommendation ${cardClass}" onclick="window.showToolDetails('${tool.name}')" 
+           style="position: relative; cursor: pointer; transition: var(--transition-fast);"
+           onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='var(--shadow-md)';"
+           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='';">
+        
+        <div class="tool-rec-header" style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
+          <h4 class="tool-rec-name" style="font-weight: 600; font-size: 1rem; margin: 0; color: var(--color-text); flex: 1; margin-right: 0.75rem;">
+            ${tool.icon ? `<span style="margin-right: 0.5rem; font-size: 1.125rem;">${tool.icon}</span>` : ''}
             ${tool.name}
           </h4>
-          <div class="flex items-center gap-2">
+          <div style="display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0;">
             <span class="tool-rec-priority ${priority}" 
-                  style="background-color: ${priorityColors[priority]}; color: white; padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; position: relative; display: flex; align-items: center; gap: 0.25rem;">
+                  style="background-color: ${priorityColors[priority]}; color: white; padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; position: relative; display: flex; align-items: center; gap: 0.25rem;">
               ${priority}
               ${confidenceTooltip}
             </span>
           </div>
         </div>
         
-        <div class="tool-rec-justification" style="background-color: var(--color-bg-tertiary); padding: 0.75rem; border-radius: 0.375rem; border-left: 3px solid var(--color-primary); margin: 0.75rem 0; font-style: italic; white-space: pre-wrap; word-wrap: break-word;">
-          "${this.sanitizeText(tool.justification || (tool.recommendation && tool.recommendation.justification) || `Empfohlen für ${tool.phase}`)}"
+        <div class="tool-rec-justification" style="background-color: var(--color-bg-tertiary); padding: 0.75rem; border-radius: 0.375rem; border-left: 3px solid var(--color-primary); margin: 0.75rem 0; font-style: italic; white-space: pre-wrap; word-wrap: break-word; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-secondary);">
+          "${Utils.sanitizeText(tool.justification || (tool.recommendation && tool.recommendation.justification) || `Empfohlen für ${tool.phase}`)}"
         </div>
         
-        <div style="font-size: 0.75rem; color: var(--color-text-secondary);">
-          ${this.renderToolBadges(tool)}
-          <div style="margin-top: 0.5rem;">
-            ${tool.type === 'method' ? 'Methode' : tool.platforms.join(', ') + ' • ' + tool.license}
+        <div style="font-size: 0.75rem; color: var(--color-text-secondary); margin-top: auto;">
+          <div style="display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem;">
+            ${this.renderToolBadges(tool)}
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span>${tool.type === 'method' ? 'Methode' : tool.platforms.slice(0, 2).join(', ')}</span>
+            <span>${tool.skillLevel}</span>
           </div>
         </div>
       </div>
@@ -1178,18 +1529,13 @@ class AIQueryInterface {
           const fullTool = tools.find(t => t.name === toolRec.name);
           if (!fullTool) return '';
           
-          return this.renderDetailedTool(fullTool, {
-            ...toolRec,
-            confidence: toolRec.confidence 
-          }, index + 1);
+          return this.renderDetailedTool(fullTool, toolRec, index + 1);
         }).join('')}
       </div>
     `;
   }
 
   renderDetailedTool(tool, recommendation, rank) {
-    console.log(`[AI DEBUG] renderDetailedTool called for ${tool.name}, recommendation confidence:`, recommendation.confidence);
-    
     const rankColors = { 1: 'var(--color-accent)', 2: 'var(--color-primary)', 3: 'var(--color-warning)' };
     const suitabilityColors = { high: 'var(--color-accent)', medium: 'var(--color-warning)', low: 'var(--color-text-secondary)' };
     
@@ -1214,11 +1560,11 @@ class AIQueryInterface {
 
         <div style="margin-bottom: 1.5rem;">
           <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-accent);">Warum diese Methode?</h4>
-          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(recommendation.detailed_explanation)}</div>
+          <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(recommendation.detailed_explanation)}</div>
           
           ${recommendation.implementation_approach ? `
             <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-primary);">Anwendungsansatz</h4>
-            <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(recommendation.implementation_approach)}</div>
+            <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(recommendation.implementation_approach)}</div>
           ` : ''}
         </div>
 
@@ -1229,6 +1575,102 @@ class AIQueryInterface {
     `;
   }
 
+  renderConfidenceTooltip(confidence) {
+    if (!confidence || typeof confidence.overall !== 'number') return '';
+    
+    const confidenceColor = Utils.getConfidenceColor(confidence.overall);
+    const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+    
+    return `
+      <span class="confidence-tooltip-trigger" 
+            style="display: inline-flex; align-items: center; gap: 0.125rem; cursor: help; margin-left: 0.25rem; position: relative;"
+            onmouseenter="this.querySelector('.confidence-tooltip').style.display = 'block'"
+            onmouseleave="this.querySelector('.confidence-tooltip').style.display = 'none'"
+            onclick="event.stopPropagation();">
+        <div style="width: 6px; height: 6px; border-radius: 50%; background-color: ${confidenceColor}; flex-shrink: 0;"></div>
+        <span style="font-size: 0.625rem; color: white; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">${confidence.overall}%</span>
+        
+        <div class="confidence-tooltip" 
+             style="display: none; position: absolute; top: 100%; right: 0; z-index: 1001; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; min-width: 320px; max-width: 400px; box-shadow: var(--shadow-lg); font-size: 0.75rem; color: var(--color-text); margin-top: 0.5rem;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
+            <strong style="font-size: 0.875rem; color: var(--color-primary);">KI-Vertrauenswertung</strong>
+            <span style="background-color: ${confidenceColor}; color: white; font-weight: 600; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem;">${confidence.overall}%</span>
+          </div>
+          
+          <div style="display: grid; grid-template-columns: 1fr; gap: 0.625rem; margin-bottom: 0.75rem;">
+            <div style="background: var(--color-bg-secondary); padding: 0.5rem; border-radius: 0.375rem; border-left: 3px solid var(--color-accent);">
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
+                <span style="font-weight: 600; font-size: 0.6875rem; color: var(--color-text);">🔍 Semantische Relevanz</span>
+                <strong style="color: var(--color-accent);">${confidence.semanticRelevance}%</strong>
+              </div>
+              <div style="font-size: 0.625rem; color: var(--color-text-secondary); line-height: 1.3;">
+                Wie gut die Tool-Beschreibung semantisch zu Ihrer Anfrage passt
+              </div>
+            </div>
+            
+            <div style="background: var(--color-bg-secondary); padding: 0.5rem; border-radius: 0.375rem; border-left: 3px solid var(--color-primary);">
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
+                <span style="font-weight: 600; font-size: 0.6875rem; color: var(--color-text);">🎯 Aufgaben-Eignung</span>
+                <strong style="color: var(--color-primary);">${confidence.taskSuitability}%</strong>
+              </div>
+              <div style="font-size: 0.625rem; color: var(--color-text-secondary); line-height: 1.3;">
+                KI-bewertete Eignung für Ihre spezifische Aufgabenstellung
+              </div>
+            </div>
+          </div>
+          
+          ${confidence.strengthIndicators && confidence.strengthIndicators.length > 0 ? `
+            <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: var(--color-oss-bg); border-radius: 0.375rem; border-left: 3px solid var(--color-accent);">
+              <strong style="color: var(--color-accent); font-size: 0.6875rem; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem;">
+                <span>✓</span> Stärken dieser Empfehlung:
+              </strong>
+              <ul style="margin: 0; padding-left: 1rem; font-size: 0.625rem; line-height: 1.4; color: var(--color-text);">
+                ${confidence.strengthIndicators.slice(0, 3).map(s => `<li style="margin-bottom: 0.25rem;">${Utils.sanitizeText(s)}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+          
+          ${confidence.uncertaintyFactors && confidence.uncertaintyFactors.length > 0 ? `
+            <div style="padding: 0.5rem; background: var(--color-hosted-bg); border-radius: 0.375rem; border-left: 3px solid var(--color-warning);">
+              <strong style="color: var(--color-warning); font-size: 0.6875rem; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem;">
+                <span>⚠</span> Mögliche Einschränkungen:
+              </strong>
+              <ul style="margin: 0; padding-left: 1rem; font-size: 0.625rem; line-height: 1.4; color: var(--color-text);">
+                ${confidence.uncertaintyFactors.slice(0, 3).map(f => `<li style="margin-bottom: 0.25rem;">${Utils.sanitizeText(f)}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+          
+          <div style="margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); font-size: 0.625rem; color: var(--color-text-secondary); text-align: center;">
+            Forensisch fundierte KI-Analyse
+          </div>
+        </div>
+      </span>
+    `;
+  }
+
+  renderWorkflowSuggestion(suggestion) {
+    if (!suggestion) return '';
+    
+    return `
+      <div class="card" style="margin-top: 2rem; border-left: 4px solid var(--color-accent);">
+        <h4 style="margin: 0 0 1rem 0; color: var(--color-accent);">Workflow-Empfehlung</h4>
+        <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(suggestion)}</div>
+      </div>
+    `;
+  }
+
+  renderAdditionalConsiderations(considerations) {
+    if (!considerations) return '';
+    
+    return `
+      <div class="card" style="margin-top: 2rem; background-color: var(--color-bg-secondary); border-left: 4px solid var(--color-text-secondary);">
+        <h4 style="margin: 0 0 1rem 0; color: var(--color-text-secondary);">Zusätzliche Überlegungen</h4>
+        <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(considerations)}</div>
+      </div>
+    `;
+  }
+
   renderProsAndCons(pros, cons) {
     if (!pros?.length && !cons?.length) return '';
     
@@ -1238,7 +1680,7 @@ class AIQueryInterface {
           <div style="background-color: var(--color-oss-bg); padding: 1rem; border-radius: 0.5rem; border-left: 3px solid var(--color-accent);">
             <h5 style="margin: 0 0 0.5rem 0; color: var(--color-accent); font-size: 0.875rem;">✓ Vorteile</h5>
             <ul style="margin: 0; padding-left: 1rem;">
-              ${pros.map(pro => `<li style="margin-bottom: 0.25rem;">${this.sanitizeText(pro)}</li>`).join('')}
+              ${pros.map(pro => `<li style="margin-bottom: 0.25rem;">${Utils.sanitizeText(pro)}</li>`).join('')}
             </ul>
           </div>
         ` : ''}
@@ -1246,7 +1688,7 @@ class AIQueryInterface {
           <div style="background-color: var(--color-hosted-bg); padding: 1rem; border-radius: 0.5rem; border-left: 3px solid var(--color-warning);">
             <h5 style="margin: 0 0 0.5rem 0; color: var(--color-warning); font-size: 0.875rem;">✗ Nachteile</h5>
             <ul style="margin: 0; padding-left: 1rem;">
-              ${cons.map(con => `<li style="margin-bottom: 0.25rem;">${this.sanitizeText(con)}</li>`).join('')}
+              ${cons.map(con => `<li style="margin-bottom: 0.25rem;">${Utils.sanitizeText(con)}</li>`).join('')}
             </ul>
           </div>
         ` : ''}
@@ -1258,7 +1700,7 @@ class AIQueryInterface {
     const isMethod = tool.type === 'method';
     
     return `
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 1rem;">
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 1rem; padding: 0.75rem; background-color: var(--color-bg-secondary); border-radius: 0.375rem;">
         ${!isMethod ? `<div><strong>Plattformen:</strong> ${tool.platforms.join(', ')}</div>` : ''}
         <div><strong>Skill Level:</strong> ${tool.skillLevel}</div>
         ${!isMethod ? `<div><strong>Lizenz:</strong> ${tool.license}</div>` : ''}
@@ -1271,29 +1713,7 @@ class AIQueryInterface {
     return `
       <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem;">
         <h5 style="margin: 0 0 0.5rem 0; color: var(--color-text-secondary); font-size: 0.875rem;">Alternative Ansätze</h5>
-        <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(alternatives)}</div>
-      </div>
-    `;
-  }
-
-  renderWorkflowSuggestion(suggestion) {
-    if (!suggestion) return '';
-    
-    return `
-      <div class="card" style="margin-top: 2rem; border-left: 4px solid var(--color-accent);">
-        <h4 style="margin: 0 0 1rem 0; color: var(--color-accent);">Workflow-Empfehlung</h4>
-        <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(suggestion)}</div>
-      </div>
-    `;
-  }
-
-  renderAdditionalConsiderations(considerations) {
-    if (!considerations) return '';
-    
-    return `
-      <div class="card" style="margin-top: 2rem; background-color: var(--color-bg-secondary); border-left: 4px solid var(--color-text-secondary);">
-        <h4 style="margin: 0 0 1rem 0; color: var(--color-text-secondary);">Zusätzliche Überlegungen</h4>
-        <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${this.sanitizeText(considerations)}</div>
+        <div style="margin: 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;">${Utils.sanitizeText(alternatives)}</div>
       </div>
     `;
   }
@@ -1318,32 +1738,6 @@ class AIQueryInterface {
     return badges;
   }
 
-  sanitizeText(text) {
-    if (typeof text !== 'string') return '';
-    
-    return text
-      // Remove markdown headers
-      .replace(/^#{1,6}\s+/gm, '')
-      // Remove markdown lists (bullet points and numbered)
-      .replace(/^\s*[-*+]\s+/gm, '')
-      .replace(/^\s*\d+\.\s+/gm, '')
-      // Remove markdown bold/italic
-      .replace(/\*\*(.+?)\*\*/g, '$1')
-      .replace(/\*(.+?)\*/g, '$1')
-      .replace(/__(.+?)__/g, '$1')
-      .replace(/_(.+?)_/g, '$1')
-      // Remove markdown links
-      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
-      // Remove code blocks
-      .replace(/```[\s\S]*?```/g, '[CODE BLOCK]')
-      .replace(/`([^`]+)`/g, '$1')
-      // Remove HTML tags
-      .replace(/<[^>]+>/g, '')
-      // Clean up excessive whitespace but preserve paragraphs
-      .replace(/\n\s*\n\s*\n/g, '\n\n')
-      .trim();
-  }
-
   getToolClass(tool, context = 'card') {
     const isMethod = tool.type === 'method';
     const hasValidProjectUrl = isToolHosted(tool);
@@ -1361,29 +1755,55 @@ class AIQueryInterface {
     }
   }
 
-  getSuitabilityText(score, confidence = null) {
+  getSuitabilityText(score) {
     const texts = {
       high: 'GUT GEEIGNET',
       medium: 'GEEIGNET', 
       low: 'VIELLEICHT GEEIGNET'
     };
-    const baseText = texts[score] || 'GEEIGNET';
-    
-    if (confidence) {
-      return `${baseText} ${this.renderConfidenceTooltip(confidence, 'suitability')}`;
-    }
-    return baseText;
+    return texts[score] || 'GEEIGNET';
   }
 
+  // Display state management
+  showLoading() {
+    Utils.showElement(this.elements.loading);
+  }
+
+  hideLoading() {
+    Utils.hideElement(this.elements.loading);
+  }
+
+  showResults() {
+    Utils.showElement(this.elements.results);
+  }
+
+  hideResults() {
+    Utils.hideElement(this.elements.results);
+    Utils.hideElement(this.elements.error);
+  }
+
+  showError(message) {
+    if (this.elements.errorMessage) this.elements.errorMessage.textContent = message;
+    Utils.showElement(this.elements.error);
+  }
+
+  hideError() {
+    Utils.hideElement(this.elements.error);
+  }
+
+  // Public method for restoring AI results after navigation
   restoreAIResults() {
     if (this.currentRecommendation && this.elements.results) {
       this.showResults();
       
-      // Re-render audit trail if it exists
       if (this.currentRecommendation.auditTrail) {
         setTimeout(() => {
-          this.renderAuditTrail(this.currentRecommendation.auditTrail);
-          console.log('[AI Interface] Audit trail restored successfully');
+          try {
+            this.renderAuditTrail(this.currentRecommendation.auditTrail);
+            console.log('[AI Interface] Audit trail restored successfully');
+          } catch (error) {
+            console.error('[AI Interface] Audit trail restore failed:', error);
+          }
         }, 100);
       }
       
@@ -1391,91 +1811,18 @@ class AIQueryInterface {
       this.hideError();
     }
   }
-
-  escapeHtml(text) {
-    if (typeof text !== 'string') return '';
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
-  truncateText(text, maxLength) {
-    if (text.length <= maxLength) return text;
-    return text.slice(0, maxLength) + '...';
-  }
-
-  formatDuration(ms) {
-    if (ms < 1000) return '< 1s';
-    if (ms < 60000) return `${Math.ceil(ms / 1000)}s`;
-    return `${Math.ceil(ms / 60000)}m`;
-  }
-
-  showElement(element) {
-    if (element) {
-      element.style.display = 'block';
-      element.classList.remove('hidden');
-    }
-  }
-
-  hideElement(element) {
-    if (element) {
-      element.style.display = 'none';
-      element.classList.add('hidden');
-    }
-  }
-
-  showLoading() {
-    this.showElement(this.elements.loading);
-  }
-
-  hideLoading() {
-    this.hideElement(this.elements.loading);
-  }
-
-  showResults() {
-    this.showElement(this.elements.results);
-  }
-
-  hideResults() {
-    this.hideElement(this.elements.results);
-    this.hideElement(this.elements.error);
-  }
-
-  showError(message) {
-    if (this.elements.errorMessage) this.elements.errorMessage.textContent = message;
-    this.showElement(this.elements.error);
-  }
-
-  hideError() {
-    this.hideElement(this.elements.error);
-  }
 }
 
+// ===================================================================
+// INITIALIZATION
+// ===================================================================
+
 document.addEventListener('DOMContentLoaded', () => {
   const aiInterface = new AIQueryInterface();
   
-  // FIXED: Global restoreAIResults function with proper error handling
-  window.restoreAIResults = () => {
-    if (aiInterface.currentRecommendation && aiInterface.elements.results) {
-      aiInterface.showResults();
-      
-      // Re-render audit trail if it exists
-      if (aiInterface.currentRecommendation.auditTrail) {
-        setTimeout(() => {
-          try {
-            aiInterface.renderAuditTrail(aiInterface.currentRecommendation.auditTrail);
-            console.log('[AI Interface] Global audit trail restored');
-          } catch (error) {
-            console.error('[AI Interface] Global audit trail restore failed:', error);
-          }
-        }, 100);
-      }
-      
-      aiInterface.hideLoading();
-      aiInterface.hideError();
-    }
-  };
-  
+  // Global functions for external access
+  window.restoreAIResults = () => aiInterface.restoreAIResults();
   window.isToolHosted = window.isToolHosted || isToolHosted;
-});
-</script>
\ No newline at end of file
+  
+  console.log('[AI Interface] Initialized successfully');
+});
\ No newline at end of file
diff --git a/src/utils/aiPipeline.ts b/src/utils/aiPipeline.ts
index 79d5a39..0d1ba3b 100644
--- a/src/utils/aiPipeline.ts
+++ b/src/utils/aiPipeline.ts
@@ -209,25 +209,6 @@ class ImprovedMicroTaskAIPipeline {
     
     console.log('[AUDIT] Merged temporary entries into context');
   }
-/**
-  private summarizeForAudit(data: any): any {
-    if (this.auditConfig.detailLevel === 'minimal') {
-      if (typeof data === 'string' && data.length > 100) {
-        return data.slice(0, 100) + '...[truncated]';
-      }
-      if (Array.isArray(data) && data.length > 3) {
-        return [...data.slice(0, 3), `...[${data.length - 3} more items]`];
-      }
-    } else if (this.auditConfig.detailLevel === 'standard') {
-      if (typeof data === 'string' && data.length > 500) {
-        return data.slice(0, 500) + '...[truncated]';
-      }
-      if (Array.isArray(data) && data.length > 10) {
-        return [...data.slice(0, 10), `...[${data.length - 10} more items]`];
-      }
-    }
-    return data;
-  }**/
 
   private calculateSelectionConfidence(result: any, candidateCount: number): number {
     if (!result || !result.selectedTools) return 30;