iteration 2

src/pages/index.astro

@@ -103,6 +103,61 @@ const tools = data.tools;
   </div>
 </section>
 
+<!-- NIST Methodology Section -->
+<section id="methodology-section" class="methodology-section">
+  <div class="methodology-header">
+    <h3>NIST SP 800-86 Forensische Methodik</h3>
+    <p class="methodology-subtitle">
+      Wählen Sie eine Phase aus dem bewährten Vier-Phasen-Modell
+    </p>
+  </div>
+
+  <div class="nist-workflow">
+    <div class="phase-card collection" onclick="selectPhase('data-collection')">
+      <div class="phase-number">1</div>
+      <div class="phase-title">Datensammlung</div>
+      <p class="phase-description">
+        Beweismittel identifizieren, sichern und für die Analyse vorbereiten
+      </p>
+      <span class="tool-count">{tools.filter(t => t.phases?.includes('data-collection')).length} Tools</span>
+    </div>
+
+    <div class="phase-card examination" onclick="selectPhase('examination')">
+      <div class="phase-number">2</div>
+      <div class="phase-title">Auswertung</div>
+      <p class="phase-description">
+        Daten extrahieren, strukturiert aufbereiten und zugänglich machen
+      </p>
+      <span class="tool-count">{tools.filter(t => t.phases?.includes('examination')).length} Tools</span>
+    </div>
+
+    <div class="phase-card analysis" onclick="selectPhase('analysis')">
+      <div class="phase-number">3</div>
+      <div class="phase-title">Analyse</div>
+      <p class="phase-description">
+        Beweise bewerten, Zusammenhänge erkennen und Hypothesen prüfen
+      </p>
+      <span class="tool-count">{tools.filter(t => t.phases?.includes('analysis')).length} Tools</span>
+    </div>
+
+    <div class="phase-card reporting" onclick="selectPhase('reporting')">
+      <div class="phase-number">4</div>
+      <div class="phase-title">Bericht</div>
+      <p class="phase-description">
+        Ergebnisse dokumentieren, visualisieren und präsentieren
+      </p>
+      <span class="tool-count">{tools.filter(t => t.phases?.includes('reporting')).length} Tools</span>
+    </div>
+  </div>
+
+  <div class="methodology-tip">
+    <p>
+      <strong>Tipp:</strong> Für komplexe Ermittlungen empfiehlt sich das sequenzielle Durchlaufen aller Phasen.
+      Jede Phase baut methodisch auf der vorherigen auf.
+    </p>
+  </div>
+</section>
+  
   <section id="filters-section" style="padding: 2rem 0;">
     <div style="text-align: center; margin-bottom: 2rem;">
       <h3 style="color: var(--color-text); margin-bottom: 0.5rem;">Alle verfügbaren Werkzeuge durchsuchen</h3>
@@ -132,6 +187,7 @@ const tools = data.tools;
 
 <script define:vars={{ toolsData: data.tools }}>
   window.toolsData = toolsData;
+  
   // Approach selection functionality
   window.selectApproach = function(approach) {
     console.log(`Selected approach: ${approach}`);
@@ -147,15 +203,11 @@ const tools = data.tools;
     document.querySelector(`.approach-card.${approach}`).classList.add('selected');
     
     if (approach === 'methodology') {
-      // Show NIST methodology section (implemented in Phase 2)
+      // Show NIST methodology section
       const methodologySection = document.getElementById('methodology-section');
       if (methodologySection) {
         methodologySection.classList.add('active');
         methodologySection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      } else {
-        // For now, show a placeholder message
-        alert('NIST-Methodologie wird in Phase 2 implementiert. Verwenden Sie vorerst die Standard-Werkzeugauswahl unten.');
-        document.getElementById('filters-section').scrollIntoView({ behavior: 'smooth' });
       }
     } else if (approach === 'targeted') {
       // Show targeted scenarios section (implemented in Phase 3)
@@ -170,6 +222,40 @@ const tools = data.tools;
       }
     }
   };
+
+  // Phase selection function (integrates with existing ToolFilters)
+  window.selectPhase = function(phase) {
+    console.log(`Selected NIST phase: ${phase}`);
+    
+    // Remove active class from all phase cards
+    document.querySelectorAll('.phase-card').forEach(card => {
+      card.classList.remove('active');
+    });
+    
+    // Add active class to selected phase
+    document.querySelector(`.phase-card.${phase.replace('data-', '')}`).classList.add('active');
+    
+    // Use existing phase filter functionality
+    const existingPhaseButton = document.querySelector(`[data-phase="${phase}"]`);
+    if (existingPhaseButton && !existingPhaseButton.classList.contains('active')) {
+      existingPhaseButton.click();
+    }
+    
+    // Switch to grid view to show results
+    const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
+    if (gridToggle && !gridToggle.classList.contains('active')) {
+      gridToggle.click();
+    }
+    
+    // Scroll to results after a short delay
+    setTimeout(() => {
+      const toolsGrid = document.getElementById('tools-grid');
+      if (toolsGrid) {
+        toolsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }, 300);
+  };
+
   document.addEventListener('DOMContentLoaded', () => {
     const toolsContainer = document.getElementById('tools-container');
     const toolsGrid = document.getElementById('tools-grid');

src/styles/global.css

@@ -954,6 +954,15 @@ input[type="checkbox"] {
   margin-bottom: 0.5rem;
 }
 
+.tool-count {
+  background: var(--color-bg-tertiary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
 /* AI Interface - Consolidated */
 .ai-interface {
   padding: 2rem 0;
@@ -1071,26 +1080,31 @@ input[type="checkbox"] {
 }
 
 .phase-number {
-  background-color: var(--color-primary);
+  width: 2rem;
+  height: 2rem;
+  background: var(--phase-color);
   color: white;
-  width: 2.5rem;
-  height: 2.5rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
-  font-size: 1.125rem;
+  margin: 0 auto 0.75rem;
-  flex-shrink: 0;
 }
 
 .phase-info { flex: 1; min-width: 0; }
 
 .phase-title {
-  margin: 0 0 1rem;
-  color: var(--color-text);
-  font-size: 1.25rem;
   font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--color-text);
+}
+
+.phase-description {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
 }
 
 .phase-tools {
@@ -1099,6 +1113,43 @@ input[type="checkbox"] {
   gap: 1rem;
 }
 
+.phase-card {
+  background: var(--color-bg-secondary);
+  border: 2px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-align: center;
+  position: relative;
+}
+
+.phase-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--phase-color);
+}
+
+.phase-card.collection { --phase-color: #3b82f6; }
+.phase-card.examination { --phase-color: #8b5cf6; }
+.phase-card.analysis { --phase-color: #f59e0b; }
+.phase-card.reporting { --phase-color: #ef4444; }
+
+.phase-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--phase-color);
+  box-shadow: var(--shadow-md);
+}
+
+.phase-card.active {
+  border-color: var(--phase-color);
+  background: linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--phase-color) 8%, transparent) 100%);
+}
+
 .workflow-arrow {
   display: flex;
   justify-content: center;
@@ -1878,6 +1929,10 @@ footer {
     padding: 0.625rem 1.25rem;
     font-size: 0.8125rem;
   }
+  .nist-workflow { 
+    grid-template-columns: 1fr 1fr; 
+    gap: 0.75rem;
+  }
 }
 
 @media (width <= 640px) {
@@ -2056,6 +2111,9 @@ footer {
     width: 100%;
     max-width: 280px;
   }
+  .nist-workflow { 
+  grid-template-columns: 1fr; 
+  }
 }
 
 /* Smart Prompting Styles - Simplified */
@@ -2632,3 +2690,53 @@ footer {
   padding: 0.75rem 1.5rem;
   font-size: 0.875rem;
 }
+
+.methodology-section {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  margin: 2rem 0;
+  display: none;
+}
+
+.methodology-section.active { 
+  display: block; 
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.methodology-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.methodology-header h3 {
+  color: var(--color-primary);
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.methodology-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.methodology-tip {
+  text-align: center;
+  padding: 1.5rem;
+  background: var(--color-bg-secondary);
+  border-radius: 0.5rem;
+}
+
+.methodology-tip p {
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.nist-workflow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin-bottom: 2rem;
+}