UI Layout improvements

src/pages/index.astro

@@ -21,6 +21,39 @@ const phases = data.phases;
       Systematische digitale Forensik nach bewährter NIST SP 800-86 Methodik.<br>
       Wählen Sie Ihren Ansatz für die Werkzeugauswahl:
     </p>
+        <div class="ai-hero-spotlight">
+          <div class="ai-spotlight-content">
+            <div class="ai-spotlight-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
+                <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
+                <circle cx="12" cy="12" r="2"/>
+              </svg>
+            </div>
+            <div class="ai-spotlight-text">
+              <h3>Forensic AI-Beratung</h3>
+              <p>Analyse des Untersuchungsszenarios mit Empfehlungen zum Vorgehen</p>
+            </div>
+          </div>
+          
+          <button id="ai-query-btn" class="btn btn-accent btn-lg ai-primary-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
+              <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
+            </svg>
+            KI-Beratung starten
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-2">
+              <line x1="7" y1="17" x2="17" y2="7"/>
+              <polyline points="7,7 17,7 17,17"/>
+            </svg>
+          </button>
+          
+          <div class="ai-features-mini">
+            <span class="badge badge-secondary">Workflow-Empfehlungen</span>
+            <span class="badge badge-secondary">Transparenz</span>
+            <span class="badge badge-secondary">Sofortige Analyse</span>
+          </div>
+        </div>
 
     <div class="approach-selector">
       <div class="approach-card methodology" onclick="selectApproach('methodology')">
@@ -74,14 +107,6 @@ const phases = data.phases;
           Infos, SSO & Zugang
         </a>
         
-        <button id="ai-query-btn" class="btn btn-accent">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
-            <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
-          </svg>
-          KI-Beratung
-        </button>
-        
         <a href="/contribute" class="btn" style="background-color: var(--color-warning); color: white; border-color: var(--color-warning);" data-contribute-button="new">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
@@ -182,7 +207,9 @@ const phases = data.phases;
     document.querySelectorAll('.approach-card').forEach(card => {
       card.classList.remove('selected');
     });
-    document.querySelector(`.approach-card.${approach}`).classList.add('selected');
+    
+    const selectedCard = document.querySelector(`.approach-card.${approach}`);
+    if (selectedCard) selectedCard.classList.add('selected');
     
     if (approach === 'methodology') {
       const methodologySection = document.getElementById('methodology-section');
@@ -238,60 +265,56 @@ const phases = data.phases;
       return;
     }
     
+    // AI Button click handler
     if (aiQueryBtn) {
-      aiQueryBtn.addEventListener('click', async () => {
+      aiQueryBtn.addEventListener('click', () => {
-        if (typeof window.requireClientAuth === 'function') {
+        // Visual feedback
-          await window.requireClientAuth(() => switchToView('ai'), `${window.location.pathname}?view=ai`, 'ai');
+        aiQueryBtn.classList.add('activated');
-        } else {
+        setTimeout(() => aiQueryBtn.classList.remove('activated'), 400);
-          console.warn('[AUTH] requireClientAuth not available');
+        
+        // Switch to AI view
         switchToView('ai');
+        
+        // Trigger existing view change system
+        window.dispatchEvent(new CustomEvent('viewChanged', { detail: 'ai' }));
+        
+        // Scroll to AI interface
+        if (window.scrollToElementById) {
+          window.scrollToElementById('ai-interface');
+        } else {
+          aiInterface.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
       });
     }
 
   function switchToView(view) {
-      toolsGrid.style.display = 'none';
+    const toolsGrid = document.getElementById('tools-grid');
-      matrixContainer.style.display = 'none';
+    const matrixContainer = document.getElementById('matrix-container');
-      aiInterface.style.display = 'none';
+    const aiInterface = document.getElementById('ai-interface');
-      filtersSection.style.display = 'none';
+    const filtersSection = document.getElementById('filters-section');
+    const noResults = document.getElementById('no-results');
     
-      const viewToggles = document.querySelectorAll('.view-toggle');
+    // Hide all views first
-      viewToggles.forEach(btn => {
+    if (toolsGrid) toolsGrid.style.display = 'none';
-        btn.classList.toggle('active', btn.getAttribute('data-view') === view);
+    if (matrixContainer) matrixContainer.style.display = 'none';
-      });
+    if (aiInterface) aiInterface.style.display = 'none';
+    if (filtersSection) filtersSection.style.display = 'none';
+    if (noResults) noResults.style.display = 'none';
     
+    // Show selected view
     switch (view) {
-        case 'ai':
+      case 'grid':
-          aiInterface.style.display = 'block';
+        if (toolsGrid) toolsGrid.style.display = 'block';
-          filtersSection.style.display = 'block';
+        if (filtersSection) filtersSection.style.display = 'block';
-          hideFilterControls();
-          if (window.restoreAIResults) {
-            window.restoreAIResults();
-          }
-          const aiInput = document.getElementById('ai-query-input');
-          if (aiInput) {
-            setTimeout(() => aiInput.focus(), 100);
-          }
         break;
       case 'matrix':
-          matrixContainer.style.display = 'block';
+        if (matrixContainer) matrixContainer.style.display = 'block';
-          filtersSection.style.display = 'block';
+        if (filtersSection) filtersSection.style.display = 'block';
-          showFilterControls();
         break;
-        default: 
+      case 'ai':
-          toolsGrid.style.display = 'block';
+        if (aiInterface) aiInterface.style.display = 'block';
-          filtersSection.style.display = 'block';
-          showFilterControls();
         break;
     }
-
-      setTimeout(() => {
-        window.scrollToElementById('filters-section');
-      }, 150);
-
-      if (window.location.search) {
-        window.history.replaceState({}, '', window.location.pathname);
-      }
   }
 
     function hideFilterControls() {

src/styles/global.css

@@ -1750,7 +1750,93 @@ input[type="checkbox"] {
   border-color: var(--color-accent) !important;
 }
 
+.ai-hero-spotlight {
+  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
+  border: 2px solid var(--color-accent);
+  border-radius: 1rem;
+  padding: 2rem;
+  margin: 1.5rem auto;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  max-width: 600px;
+  width: 100%;
+}
 
+.ai-hero-spotlight::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
+}
+
+.ai-spotlight-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.ai-spotlight-icon {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  box-shadow: var(--shadow-md);
+  flex-shrink: 0;
+}
+
+.ai-spotlight-text h3 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1.25rem;
+  color: var(--color-text);
+}
+
+.ai-spotlight-text p {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.ai-primary-btn {
+  padding: 0.875rem 2rem;
+  margin: 0 0 1rem 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.ai-primary-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg), 0 8px 20px rgba(5, 150, 105, 0.3);
+}
+
+.ai-primary-btn svg:last-child {
+  transition: var(--transition-fast);
+}
+
+.ai-primary-btn:hover svg:last-child {
+  transform: translate(2px, -2px);
+}
+
+/* Mini features display */
+.ai-features-mini {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.ai-features-mini .badge {
+  font-size: 0.75rem;
+}
 
 /* ===================================================================
    16. AI INTERFACE (CONSOLIDATED)
@@ -1985,21 +2071,7 @@ input[type="checkbox"] {
   }
 }
 
-/* Animation for micro-task progress */
-@keyframes micro-task-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
 
-.micro-step.active {
-  animation: micro-task-pulse 2s ease-in-out infinite;
-}
-
-@keyframes micro-task-complete {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.1); }
-  100% { transform: scale(1); }
-}
 
 .micro-step.completed {
   animation: micro-task-complete 0.6s ease-out;
@@ -2566,6 +2638,32 @@ footer {
   }
 }
 
+/* Animation for micro-task progress */
+@keyframes micro-task-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.micro-step.active {
+  animation: micro-task-pulse 2s ease-in-out infinite;
+}
+
+@keyframes micro-task-complete {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+@keyframes ai-spotlight-pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+  100% { transform: scale(1); }
+}
+
+.ai-primary-btn.activated {
+  animation: ai-spotlight-pulse 0.4s ease-out;
+}
+
 /* ===================================================================
    21. SMART PROMPTING INTERFACE (MISSING STYLES ADDED BACK)
    ================================================================= */
@@ -3354,6 +3452,30 @@ footer {
     min-height: 100px;
   }
 
+  .ai-spotlight-content {
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+  
+  .ai-spotlight-icon {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .ai-spotlight-text h3 {
+    font-size: 1.125rem;
+  }
+  
+  .ai-primary-btn {
+    width: 100%;
+    max-width: 280px;
+  }
+  
+  .ai-features-mini {
+    gap: 0.375rem;
+  }
+  
   .approach-hero { 
     padding: 2rem 1rem; 
     margin: 1rem 0;
@@ -3625,6 +3747,14 @@ footer {
     flex: 1 1 100%;
     justify-content: flex-end;
   }
+  .ai-hero-spotlight {
+    padding: 1.5rem 1rem;
+  }
+  
+  .ai-features-mini {
+    flex-direction: column;
+    align-items: center;
+  }
 }