fix visual inconsistency

src/components/AIQueryInterface.astro

@@ -458,7 +458,7 @@ document.addEventListener('DOMContentLoaded', () => {
                       };
 
                       return `
-                        <div class="tool-recommendation ${hasValidProjectUrl ? 'hosted' : (tool.license !== 'Proprietary' ? 'oss' : '')}" 
+                        <div class="tool-recommendation ${tool.type === 'method' ? 'method' : hasValidProjectUrl ? 'hosted' : (tool.license !== 'Proprietary' ? 'oss' : '')}"
                              onclick="window.showToolDetails('${tool.name}')">
                           <div class="tool-rec-header">
                             <h4 class="tool-rec-name">${tool.name}</h4>
@@ -474,12 +474,13 @@ document.addEventListener('DOMContentLoaded', () => {
                           
                           <div class="tool-rec-metadata">
                             <div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem;">
-                              ${hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
-                              ${tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
+                              ${tool.type === 'method' ? '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>' : ''}
+                              ${tool.type !== 'method' && hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
+                              ${tool.type !== 'method' && tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
                               <span class="badge" style="background-color: var(--color-bg-tertiary); color: var(--color-text);">${tool.skillLevel}</span>
                             </div>
                             <div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
-                              ${tool.platforms.join(', ')} • ${tool.license}
+                              ${tool.type === 'method' ? 'Methode' : tool.platforms.join(', ') + ' • ' + tool.license}
                             </div>
                           </div>
                         </div>
@@ -603,7 +604,7 @@ document.addEventListener('DOMContentLoaded', () => {
                                       fullTool.projectUrl !== null && 
                                       fullTool.projectUrl !== "" && 
                                       fullTool.projectUrl.trim() !== "";
-            
+            const isMethod = fullTool.type === 'method';
             const suitabilityColors = {
               high: 'var(--color-accent)',
               medium: 'var(--color-warning)',
@@ -617,7 +618,7 @@ document.addEventListener('DOMContentLoaded', () => {
             };
 
             return `
-              <div class="tool-detailed-recommendation card ${hasValidProjectUrl ? 'card-hosted' : (fullTool.license !== 'Proprietary' ? 'card-oss' : '')}" 
+              <div class="tool-detailed-recommendation card ${isMethod ? 'card-method' : hasValidProjectUrl ? 'card-hosted' : (fullTool.license !== 'Proprietary' ? 'card-oss' : '')}" 
                    style="cursor: pointer; position: relative;" 
                    onclick="window.showToolDetails('${fullTool.name}')">
                 
@@ -631,8 +632,9 @@ document.addEventListener('DOMContentLoaded', () => {
                     <span class="badge" style="background-color: ${suitabilityColors[toolRec.suitability_score]}; color: white; font-size: 0.8125rem;">
                       ${getSuitabilityText(toolRec.suitability_score)}
                     </span>
-                    ${hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
-                    ${fullTool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
+                    ${isMethod ? '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>' : ''}
+                    ${!isMethod && hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
+                    ${!isMethod && fullTool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
                     ${fullTool.knowledgebase === true ? '<span class="badge badge-error">📖</span>' : ''}
                   </div>
                 </div>
@@ -706,10 +708,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 ` : ''}
 
                 <div class="tool-metadata" 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><strong>Plattformen:</strong> ${fullTool.platforms.join(', ')}</div>
+                  ${!isMethod ? '<div><strong>Plattformen:</strong> ' + fullTool.platforms.join(', ') + '</div>' : ''}
                   <div><strong>Skill Level:</strong> ${fullTool.skillLevel}</div>
-                  <div><strong>Lizenz:</strong> ${fullTool.license}</div>
-                  <div><strong>Typ:</strong> ${fullTool.accessType}</div>
+                  ${!isMethod ? '<div><strong>Lizenz:</strong> ' + fullTool.license + '</div>' : ''}
+                  <div><strong>Typ:</strong> ${isMethod ? 'Methode' : fullTool.accessType}</div>
                 </div>
 
                 ${toolRec.alternatives ? `

src/components/ToolCard.astro

@@ -44,7 +44,7 @@ const cardClass = isMethod ? 'card card-method tool-card' :
     <h3>{tool.name}</h3>
       <div class="tool-card-badges">
         {isMethod && <span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>}
-        {!isMethod && hasValidProjectUrl && <span class="badge badge-primary">Self-Hosted</span>}
+        {!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
         {!isMethod && tool.license !== 'Proprietary' && <span class="badge badge-success">OSS</span>}
         {hasKnowledgebase && <span class="badge badge-error">📖</span>}
       </div>

src/components/ToolMatrix.astro

@@ -246,6 +246,8 @@ domains.forEach((domain: any) => {
     const tool = toolsData.find(t => t.name === toolName);
     if (!tool) return;
     
+    const isMethod = tool.type === 'method';
+    
     // Update modal content
     document.getElementById('tool-name').textContent = tool.name;
     document.getElementById('tool-description').textContent = tool.description;
@@ -258,11 +260,15 @@ domains.forEach((domain: any) => {
                               tool.projectUrl.trim() !== "";
     
     badgesContainer.innerHTML = '';
-    if (hasValidProjectUrl) {
-      badgesContainer.innerHTML += '<span class="badge badge-primary">CC24-Server</span>';
-    }
-    if (tool.license !== 'Proprietary') {
-      badgesContainer.innerHTML += '<span class="badge badge-success">Open Source</span>';
+    if (isMethod) {
+      badgesContainer.innerHTML += '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>';
+    } else {
+      if (hasValidProjectUrl) {
+        badgesContainer.innerHTML += '<span class="badge badge-primary">CC24-Server</span>';
+      }
+      if (tool.license !== 'Proprietary') {
+        badgesContainer.innerHTML += '<span class="badge badge-success">Open Source</span>';
+      }
     }
     if (tool.knowledgebase === true) {
       badgesContainer.innerHTML += '<span class="badge badge-error">Infos 📖</span>';
@@ -296,10 +302,17 @@ domains.forEach((domain: any) => {
     
     // Links
     const linksContainer = document.getElementById('tool-links');
-    
+
     let linksHTML = '';
-    
-    if (hasValidProjectUrl) {
+
+    if (isMethod) {
+      // For methods, show link to the method description/documentation
+      linksHTML += `
+        <a href="${tool.projectUrl || tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%; background-color: var(--color-method); border-color: var(--color-method);">
+          Zur Methode
+        </a>
+      `;
+    } else if (hasValidProjectUrl) {
       linksHTML += `
         <div style="display: flex; gap: 0.5rem;">
           <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">

src/data/tools.yaml

@@ -905,7 +905,7 @@ tools:
       integrierter Hash-Verifizierung für die Beweiskette. Die kostenlose
       Version reicht für die meisten Aufgaben, unterstützt alle gängigen
       Image-Formate. Etwas angestaubt in der Oberfläche, aber bewährt in
-      tausenden Gerichtsverfahren.
+      tausenden Gerichtsverfahren. Freeware, aber nicht open source.
     domains:
       - law-enforcement
       - incident-response
@@ -918,7 +918,7 @@ tools:
     accessType: download
     url: https://www.exterro.com/digital-forensics-software/ftk-imager
     projectUrl: ''
-    license: Freeware
+    license: Proprietary
     knowledgebase: false
     tags:
       - gui
@@ -1276,7 +1276,7 @@ tools:
       Analyse. Unterstützt alle gängigen Formate von RAW über E01 bis zu
       VM-Images. Der schreibgeschützte Modus garantiert forensische Integrität
       der Beweise. Besonders praktisch für schnelle Triage ohne vollständige
-      Forensik-Suite.
+      Forensik-Suite. Freeware, aber nicht open source.
     domains:
       - incident-response
       - law-enforcement
@@ -1289,7 +1289,7 @@ tools:
     accessType: download
     url: https://www.osforensics.com/tools/mount-disk-images.html
     projectUrl: ''
-    license: Freeware
+    license: Proprietary
     knowledgebase: false
     tags:
       - gui
@@ -1298,6 +1298,7 @@ tools:
       - read-only
       - virtual-drive
       - format-support
+      - freeware
   - name: Thumbcache Viewer
     type: software
     description: >-

src/pages/index.astro

@@ -358,7 +358,7 @@ function createToolCard(tool) {
       <h3>${tool.name}</h3>
       <div class="tool-card-badges">
         ${isMethod ? '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>' : ''}
-        ${!isMethod && hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
+        ${!isMethod && hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
         ${!isMethod && tool.license !== 'Proprietary' ? '<span class="badge badge-success">OSS</span>' : ''}
         ${hasKnowledgebase ? '<span class="badge badge-error">📖</span>' : ''}
       </div>

src/styles/global.css

@@ -1034,6 +1034,21 @@ Collaboration Section Collapse */
   border-color: var(--color-oss);
 }
 
+.tool-recommendation.method {
+  background-color: var(--color-method-bg);
+  border-color: var(--color-method);
+}
+
+.tool-detailed-recommendation.card-method {
+  background-color: var(--color-method-bg);
+  border-color: var(--color-method);
+}
+
+.tool-detailed-recommendation.card-method:hover {
+  border-color: var(--color-method);
+  box-shadow: 0 0 0 1px var(--color-method), var(--shadow-lg);
+}
+
 .tool-rec-header {
   display: flex;
   justify-content: space-between;

src/utils/dataService.ts

@@ -5,6 +5,7 @@ import { z } from 'zod';
 
 const ToolSchema = z.object({
   name: z.string(),
+  icon: z.string().optional(), 
   type: z.string(),
   description: z.string(),
   domains: z.array(z.string()).optional().nullable().default([]),