From 68484fbe3f992df1275a271a27c00c86206e9779 Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Sun, 27 Jul 2025 21:56:08 +0200
Subject: [PATCH] style patches

---
 src/components/AIQueryInterface.astro    | 24 ++++-----
 src/components/ToolFilters.astro         |  4 +-
 src/components/ToolMatrix.astro          | 18 +++----
 src/layouts/BaseLayout.astro             |  2 +-
 src/pages/about.astro                    | 64 +++++++++++------------
 src/pages/auth/callback.astro            |  2 +-
 src/pages/contribute/index.astro         |  8 +--
 src/pages/contribute/knowledgebase.astro |  8 +--
 src/pages/contribute/tool.astro          |  6 +--
 src/pages/impressum.astro                |  6 +--
 src/pages/index.astro                    |  2 +-
 src/pages/knowledgebase.astro            |  4 +-
 src/styles/global.css                    | 65 ++++++++++++++++++++++++
 13 files changed, 139 insertions(+), 74 deletions(-)

diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro
index fb1a523..eeb613d 100644
--- a/src/components/AIQueryInterface.astro
+++ b/src/components/AIQueryInterface.astro
@@ -8,7 +8,7 @@ const phases = data.phases;
 const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
 ---
 
-<section id="ai-interface" class="ai-interface" style="display: none;">
+<section id="ai-interface" class="ai-interface hidden">
   <div class="ai-query-section">
     <div class="content-center-lg">
       <h2 style="margin-bottom: 1rem; color: var(--color-primary);">
@@ -27,7 +27,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
   <div class="ai-input-container" style="max-width: 1000px; margin: 0 auto;">
     <div class="ai-mode-toggle" style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border);">
       <span id="workflow-label" class="toggle-label active" style="font-weight: 500; color: var(--color-primary); cursor: pointer; transition: var(--transition-fast);">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
           <polyline points="9,11 12,14 22,4"/>
           <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
         </svg>
@@ -39,7 +39,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
       </div>
       
       <span id="tool-label" class="toggle-label" style="font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: var(--transition-fast);">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
           <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
         </svg>
         Spezifische Software oder Methode
@@ -78,19 +78,19 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
             </div>
           </div>
         </div>
-        <div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
+        <div id="smart-prompting-container" class="smart-prompting-container hidden">
           <div class="prompting-card">
             <div id="prompting-status" class="prompting-status">
               <div class="status-icon">💡</div>
               <span class="status-text">Analysiere Eingabe...</span>
-              <div id="prompting-spinner" class="prompting-spinner" style="display: none;">
+              <div id="prompting-spinner" class="prompting-spinner hidden">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
                   <path d="M21 12a9 9 0 11-6.219-8.56"/>
                 </svg>
               </div>
             </div>
             
-            <div id="suggested-questions" class="suggested-questions" style="display: none;">
+            <div id="suggested-questions" class="suggested-questions hidden">
               <div class="suggestions-header">
                 <span class="suggestions-label">Zur besseren Analyse:</span>
               </div>
@@ -139,9 +139,9 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
         <path d="M12 17h.01"/>
       </svg>
     </div>
-    <p id="loading-text" style="color: var(--color-text-secondary);">Analysiere Szenario und generiere Empfehlungen...</p>
+    <p id="loading-text" class="text-secondary">Analysiere Szenario und generiere Empfehlungen...</p>
     
-    <div id="queue-status" class="queue-status-card" style="display: none;">
+    <div id="queue-status" class="queue-status-card hidden">
       <div class="queue-header">
         <div class="queue-position-display">
           <div id="queue-position-badge" class="position-badge">1</div>
@@ -180,7 +180,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
     </div>
   </div>
 <br>
-  <div id="ai-results" class="ai-results" style="display: none;">
+  <div id="ai-results" class="ai-results hidden">
   </div>
 </section>
 
@@ -812,7 +812,7 @@ document.addEventListener('DOMContentLoaded', () => {
       <div class="tool-results-container">
         <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;">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
               <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
             </svg>
             Passende Empfehlungen
@@ -887,7 +887,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 </div>
                 <div class="tool-detailed-explanation" style="margin-bottom: 1.5rem;">
                   <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-accent); font-size: 1rem;">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
                       <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>
@@ -896,7 +896,7 @@ document.addEventListener('DOMContentLoaded', () => {
                   ${formatWorkflowSuggestion(toolRec.detailed_explanation)}                  
                   ${toolRec.implementation_approach ? `
                     <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-primary); font-size: 1rem;">
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
                         <polyline points="9,11 12,14 22,4"/>
                         <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                       </svg>
diff --git a/src/components/ToolFilters.astro b/src/components/ToolFilters.astro
index 014ecc7..90f9a0e 100644
--- a/src/components/ToolFilters.astro
+++ b/src/components/ToolFilters.astro
@@ -95,8 +95,8 @@ const sortedTags = Object.entries(tagFrequency)
   </div>
   
   <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center;">
-    <button class="btn btn-secondary view-toggle active" style="height:50px" data-view="grid">Kachelansicht</button>
-    <button class="btn btn-secondary view-toggle" style="height:50px" data-view="matrix">Matrix-Ansicht</button>
+    <button class="btn btn-secondary view-toggle active h-12" data-view="grid">Kachelansicht</button>
+    <button class="btn btn-secondary view-toggle h-12" data-view="matrix">Matrix-Ansicht</button>
     
     <button 
       id="ai-view-toggle" 
diff --git a/src/components/ToolMatrix.astro b/src/components/ToolMatrix.astro
index f371d52..c03761a 100644
--- a/src/components/ToolMatrix.astro
+++ b/src/components/ToolMatrix.astro
@@ -29,7 +29,7 @@ domains.forEach((domain: any) => {
 });
 ---
 
-<div id="matrix-container" class="matrix-wrapper" style="display: none;">
+<div id="matrix-container" class="matrix-wrapper hidden">
   {domainAgnosticTools.map((sectionData: any, index: number) => (
     <div id={`domain-agnostic-section-${sectionData.section.id}`} class="card collaboration-section-collapsed mb-6 border-l-4" style="border-left-color: var(--color-accent);">
       <div class="collaboration-header cursor-pointer flex items-center gap-3" onclick={`toggleDomainAgnosticSection('${sectionData.section.id}')`} style="margin-bottom: 0.1rem;">
@@ -39,7 +39,7 @@ domains.forEach((domain: any) => {
           <line x1="20" y1="8" x2="20" y2="14"/>
           <line x1="23" y1="11" x2="17" y2="11"/>
         </svg>
-        <h3 class="m-0 text-lg" style="color: var(--color-accent);">
+        <h3 class="m-0 text-lg text-accent">
           {sectionData.section.name}
           <span id={`count-${sectionData.section.id}`} class="badge text-xs" style="background-color: var(--color-text-secondary); color: var(--color-bg); margin-left: 0.5rem;">
             {sectionData.tools.length}
@@ -51,7 +51,7 @@ domains.forEach((domain: any) => {
           </svg>
         </div>
       </div>
-      <div class="collaboration-content" style="display: none;">
+      <div class="collaboration-content hidden">
         <div class="collaboration-tools-compact" id={`domain-agnostic-tools-${sectionData.section.id}`}>
           {sectionData.tools.map((tool: any) => {
             const hasValidProjectUrl = tool.projectUrl !== undefined &&
@@ -74,7 +74,7 @@ domains.forEach((domain: any) => {
                 <p class="text-muted">              
                   {tool.description}
                 </p>
-                <div class="flex gap-3 text-xs" style="color: var(--color-text-secondary);">
+                <div class="flex gap-3 text-xs text-secondary">
                   <span>{tool.platforms.join(', ')}</span>
                   <span>•</span>
                   <span>{tool.skillLevel}</span>
@@ -140,9 +140,9 @@ domains.forEach((domain: any) => {
   <div class="flex justify-between items-start mb-4">
     <h2 id="tool-name-primary" class="m-0">Tool Name</h2>
     <div class="flex items-center gap-2">
-      <div id="share-button-primary" style="display: none;">
+      <div id="share-button-primary" class="hidden">
       </div>
-      <div id="contribute-button-primary" style="display: none;">
+      <div id="contribute-button-primary" class="hidden">
       </div>
       <button class="btn-icon" onclick="window.hideToolDetails('primary')">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -168,9 +168,9 @@ domains.forEach((domain: any) => {
   <div class="flex justify-between items-start mb-4">
     <h2 id="tool-name-secondary" class="m-0">Tool Name</h2>
     <div class="flex items-center gap-2">
-      <div id="share-button-secondary" style="display: none;">
+      <div id="share-button-secondary" class="hidden">
       </div>
-      <div id="contribute-button-secondary" style="display: none;">
+      <div id="contribute-button-secondary" class="hidden">
       </div>
       <button class="btn-icon" onclick="window.hideToolDetails('secondary')">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -549,7 +549,7 @@ domains.forEach((domain: any) => {
               </button>
             ` : ''}
           </div>
-          <div ${collapseOnMobile ? 'style="display: none;"' : ''} class="flex flex-wrap gap-1">
+          <div ${collapseOnMobile ? 'class="hidden"' : ''} class="flex flex-wrap gap-1">
             ${conceptLinks}
           </div>
         </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index bc19b41..e050f65 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -237,7 +237,7 @@ const { title, description = 'ForensicPathways - A comprehensive directory of di
 </head>
 <body>
   <Navigation />
-  <main class="container" style="flex: 1; padding: 2rem 1rem;">
+  <main class="container flex-1 py-8 px-4">
     <slot />
   </main>
   <Footer />
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 90018c9..e11069e 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -3,36 +3,36 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
 <BaseLayout title="Über das Projekt" description="ForensicPathways - Ein Projekt für die Seminargruppe CC24-w1">
-  <section style="padding: 2rem 0; max-width: 900px; margin: 0 auto;">
-    <div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
-      <h1 style="margin-bottom: 1rem; font-size: 2.5rem; color: var(--color-primary);">ForensicPathways</h1>
-      <p style="font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 0.5rem;">
+  <section class="section container-narrow">
+    <div class="header-center header-gradient mb-8">
+      <h1 class="text-primary mb-4 text-2xl">ForensicPathways</h1>
+      <p class="text-xl text-secondary mb-2">
         Forensik im Dienst der Transparenz
       </p>
-      <p style="font-size: 1rem; color: var(--color-text-secondary);">
+      <p class="text-base text-secondary">
         Ein Studienprojekt
       </p>
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" 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>
-        <h2 style="margin: 0; color: var(--color-primary);">Das Ziel</h2>
+        <h2 class="m-0 text-primary">Das Ziel</h2>
       </div>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Diese Seite soll meinen Kommilitonen der Seminargruppe CC24-w1 und anderen interessierten Forensikbegeisterten eine <strong>einfache und übersichtliche Orientierung</strong> 
         bieten: Welches Werkzeug, welche Methode eignet sich für welchen Zweck in der digitalen Forensik?
       </p>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Ich stelle euch dafür <strong>Infrastruktur</strong> zur Verfügung, mit der ihr spezialisierte 
         Forensik-Software direkt einsetzen und erforschen könnt – sei es für <em>Bildungszwecke</em> oder im 
         <em>begrenzten Produktiveinsatz</em>.
       </p>
-      <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; margin-top: 1rem;">
-        <p style="margin: 0; font-size: 0.875rem; color: var(--color-text-secondary);">
+      <div class="bg-secondary p-4 rounded-lg mt-4">
+        <p class="m-0 text-sm text-secondary">
           <strong>💡 Zugang:</strong> Die meisten Dienste sind bequem über das SSO der CC24-Cloud zugänglich, 
           mit nur wenigen Ausnahmen. Der Zugang ist entsprechend vorbehaltlich Absprache auf diesen Personenkreis limitiert.
         </p>
@@ -40,42 +40,42 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
           <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
           <polyline points="9,22 9,12 15,12 15,22"/>
         </svg>
         <h2 style="margin: 0; color: var(--color-accent);">Wissenschaftliche Grundlage</h2>
       </div>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Bei der vorgestellten Software handelt es sich um eine <strong>kuratierte Auswahl</strong> von Anwendungen, 
         vor allem aus dem Bereich der Open-Source-Software.
       </p>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Das zugrunde liegende Modell folgt dem bewährten <strong>NIST-Framework</strong> nach Kent, Chevalier, Grance und Dang 
         (NIST SP 800-86), das ich wegen seiner <em>Einfachheit</em> und <em>praktischen Adaptierbarkeit</em> schätze:
       </p>
-      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1.5rem 0; text-align: center;">
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Datensammlung</strong>
+      <div class="grid-4 gap-2 my-6 text-center">
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Datensammlung</strong>
         </div>
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Auswertung</strong>
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Auswertung</strong>
         </div>
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Analyse</strong>
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Analyse</strong>
         </div>
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Bericht</strong>
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Bericht</strong>
         </div>
       </div>
-      <p style="margin: 0; font-size: 0.875rem; color: var(--color-text-secondary);">
+      <p class="m-0 text-sm text-secondary">
         Diese Prozessphasen werden in der <strong>Matrix-Ansicht</strong> auf der Startseite mit forensischen Wissensdomänen verknüpft.
       </p>
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-warning);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-warning)" stroke-width="2">
           <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
           <path d="M9 12l2 2 4-4"/>
@@ -83,9 +83,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         <h2 style="margin: 0; color: var(--color-warning);">Weshalb der Fokus auf Open Source?</h2>
       </div>
       
-      <div style="background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-accent) 100%); color: white; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 1.5rem;">
-        <h3 style="margin: 0 0 1rem 0; font-size: 1.125rem;">💡 Zentrale Hypothese</h3>
-        <p style="margin: 0; line-height: 1.6; font-style: italic;">
+      <div class="card-warning rounded-xl p-6 mb-6">
+        <h3 class="m-0 mb-4 text-lg">💡 Zentrale Hypothese</h3>
+        <p class="m-0 leading-normal italic">
           "Die IT-Forensik verlangt nach der Anwendung von wissenschaftlichen Methoden und Objektivität. 
           Die wissenschaftliche Methode verlangt einen transparenten Untersuchungsprozess, der in der Hauptverhandlung 
           bzw. dem Auftraggeber gegenüber stets nachvollziehbar und erklärbar sein muss. 
@@ -127,13 +127,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     </div>
 
     <div id= "support" class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
           <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
         </svg>
-        <h2 style="margin: 0; color: var(--color-primary);">Unterstützung und Kontakt</h2>
+        <h2 class="m-0 text-primary">Unterstützung und Kontakt</h2>
       </div>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Falls eine Anwendung nicht wie vorgesehen funktioniert, ihr Unterstützung braucht, der Speicherplatz ausgeht 
         oder sonstige Probleme auftreten: <strong>Schreibt mir einfach auf Signal</strong> oder an <a href="mailto:mstoeck3@hs-mittweida.de">mstoeck3@hs-mittweida.de</a>.
       </p>
@@ -172,7 +172,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
           <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
           <circle cx="8.5" cy="7" r="4"/>
diff --git a/src/pages/auth/callback.astro b/src/pages/auth/callback.astro
index c6634f3..29436b5 100644
--- a/src/pages/auth/callback.astro
+++ b/src/pages/auth/callback.astro
@@ -51,7 +51,7 @@
     <div class="spinner"></div>
     <h2>Processing authentication...</h2>
     <p>Please wait while we complete your login.</p>
-    <div id="error-message" style="display: none;" class="error"></div>
+    <div id="error-message" class="hidden error"></div>
   </div>
 
   <script>
diff --git a/src/pages/contribute/index.astro b/src/pages/contribute/index.astro
index c2eaffa..c24081b 100644
--- a/src/pages/contribute/index.astro
+++ b/src/pages/contribute/index.astro
@@ -15,7 +15,7 @@ const { authenticated, userEmail, userId } = authResult;
 
 <BaseLayout title="Contribute" description="Inhalte zum ForensicPathways beitragen">
   <section class="section-padding">
-    <div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem; border: 1px solid var(--color-border);">
+    <div class="header-center header-primary mb-8">
       <h1 style="margin-bottom: 1rem; font-size: 2.5rem;">
         <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
           <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
@@ -49,7 +49,7 @@ const { authenticated, userEmail, userId } = authResult;
 <div class="card" 
      style="padding: 2rem; border-left: 4px solid var(--color-primary); transition: var(--transition-fast);
             display:flex; flex-direction:column;">
-  <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+  <div class="flex items-center gap-4 mb-6">
     <div style="width: 48px; height: 48px; background-color: var(--color-primary); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
         <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
@@ -108,7 +108,7 @@ const { authenticated, userEmail, userId } = authResult;
        style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
               display:flex; flex-direction:column;" 
        onclick="window.location.href='/contribute/knowledgebase'">
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+    <div class="flex items-center gap-4 mb-6">
       <div style="width: 48px; height: 48px; background-color: var(--color-accent); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
           <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -142,7 +142,7 @@ const { authenticated, userEmail, userId } = authResult;
   <div class="card" 
        style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
               display:flex; flex-direction:column;">
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+    <div class="flex items-center gap-4 mb-6">
       <div style="width: 48px; height: 48px; background-color: var(--color-warning); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
           <circle cx="12" cy="12" r="10"/>
diff --git a/src/pages/contribute/knowledgebase.astro b/src/pages/contribute/knowledgebase.astro
index d74b6bb..5fbe533 100644
--- a/src/pages/contribute/knowledgebase.astro
+++ b/src/pages/contribute/knowledgebase.astro
@@ -114,7 +114,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
           <div class="form-group">
             <label class="form-label">Dokumente, Bilder, Videos (Optional)</label>
             <div class="upload-area" id="upload-area">
-              <input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.txt,.md,.zip,.png,.jpg,.jpeg,.gif,.mp4,.webm" style="display: none;">
+              <input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.txt,.md,.zip,.png,.jpg,.jpeg,.gif,.mp4,.webm" class="hidden">
               <div class="upload-placeholder">
                 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                   <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
@@ -125,7 +125,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
                 <small>Die Dateien landen in der CC24-Cloud. Keine Malware.</small>
               </div>
             </div>
-            <div id="file-list" class="file-list" style="display: none;">
+            <div id="file-list" class="file-list hidden">
               <h5>Ausgewählte Dateien</h5>
               <div id="files-container"></div>
             </div>
@@ -177,7 +177,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
           <a href="/" class="btn btn-secondary">Abbruch</a>
           <button type="submit" id="submit-btn" class="btn btn-accent">
             <span id="submit-text">Abschicken</span>
-            <span id="submit-spinner" style="display: none;">⏳</span>
+            <span id="submit-spinner" class="hidden">⏳</span>
           </button>
         </div>
       </form>
@@ -193,7 +193,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
           Your knowledge‑base article has been submitted as an issue for review by maintainers.
         </p>
         <div style="display:flex; gap:1rem; justify-content:center;">
-          <a id="issue-link" href="#" target="_blank" class="btn btn-primary" style="display:none;">View Issue</a>
+          <a id="issue-link" href="#" target="_blank" class="btn btn-primary hidden">View Issue</a>
           <a href="/" class="btn btn-secondary">Back to Home</a>
         </div>
       </div>
diff --git a/src/pages/contribute/tool.astro b/src/pages/contribute/tool.astro
index 35a2e72..162b95d 100644
--- a/src/pages/contribute/tool.astro
+++ b/src/pages/contribute/tool.astro
@@ -105,7 +105,7 @@ const isEdit = !!editTool;
         <div style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
           <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Kategorien</h3>
           
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+          <div class="grid-2 gap-8">
             <div>
               <label style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Forensische Domänen</label>
               <div style="display: grid; gap: 0.5rem;">
@@ -166,7 +166,7 @@ const isEdit = !!editTool;
             </div>
           </div>
 
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+          <div class="grid-2 gap-8">
             <div>
               <label for="accessType" style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Zugriff über:</label>
               <select id="accessType" name="accessType">
@@ -257,7 +257,7 @@ const isEdit = !!editTool;
         <h3 style="margin-bottom: 1rem;">Contribution Submitted!</h3>
         <p id="success-message" style="margin-bottom: 1.5rem;">Your contribution has been submitted successfully.</p>
         <div style="display: flex; gap: 1rem; justify-content: center;">
-          <a id="pr-link" href="#" target="_blank" class="btn btn-primary" style="display: none;">View Pull Request</a>
+          <a id="pr-link" href="#" target="_blank" class="btn btn-primary hidden">View Pull Request</a>
           <a href="/" class="btn btn-secondary">Back to Home</a>
         </div>
       </div>
diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro
index 0ac4fff..6fca824 100644
--- a/src/pages/impressum.astro
+++ b/src/pages/impressum.astro
@@ -3,8 +3,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
 <BaseLayout title="Impressum" description="ForensicPathways - Impressum">
-  <section style="padding: 2rem 0; max-width: 900px; margin: 0 auto;">
-    <div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
+  <section class="section container-narrow">
+    <div class="header-center header-gradient mb-8">
       <p>Bei dieser Webseite handelt es sich um ein privates Werk. Keine Bildungseinrichtung, kein Unternehmen sind finanziell oder moderierend Teil dieses Projekts.</p>
       <h1>Impressum</h1>
 <p>Angaben gemäß § 5 DDG</p>
@@ -16,7 +16,7 @@ Mario Stöckl<br>
 </p>
 <p><strong>Kontakt:</strong> <br>
 Telefon: 01522-7086296<br>
-E-Mail: <a href='mailto:mario.stoeckl@posteo.de'>mario.stoeckl@posteo.de</a>
+E-Mail: <a href='mailto:mstoeck3@hs-mittweida.de'>mstoeck3@hs-mittweida.de</a>
 </p>
 <p><strong>PGP-Schlüssel:</strong><br>
 Zur sicheren Kommunikation per E-Mail können Sie folgenden PGP-Schlüssel verwenden:<br><br>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1f53f83..9b6efcd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -143,7 +143,7 @@ const phases = data.phases;
 
 <TargetedScenarios />
 
-  <section id="filters-section" style="padding: 2rem 0;">
+  <section id="filters-section" class="section">
     <div class="content-center-lg">
       <h3 style="color: var(--color-text); margin-bottom: 0.5rem;">Alle verfügbaren Werkzeuge durchsuchen</h3>
       <p style="color: var(--color-text-secondary); margin: 0;">
diff --git a/src/pages/knowledgebase.astro b/src/pages/knowledgebase.astro
index 0de513a..6daf17c 100644
--- a/src/pages/knowledgebase.astro
+++ b/src/pages/knowledgebase.astro
@@ -209,13 +209,13 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
       )}
     </div>
 
-    <div id="no-kb-results" class="card text-center p-8" style="display: none;">
+    <div id="no-kb-results" class="card text-center p-8 hidden">
       <h3 class="text-secondary mb-2">Keine Ergebnisse gefunden</h3>
       <p class="text-secondary">Versuchen Sie es mit anderen Suchbegriffen.</p>
     </div>
   </section>
   
-  <div id="fab-container" class="fixed bottom-8 right-8 z-50" style="display: none;">
+  <div id="fab-container" class="fixed bottom-8 right-8 z-50 hidden">
     <ContributionButton 
       type="write" 
       variant="primary" 
diff --git a/src/styles/global.css b/src/styles/global.css
index e64a374..ddad7cf 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -227,14 +227,17 @@ a:hover {
 }
 
 .grid-2 {
+  display: grid;
   grid-template-columns: 1fr 1fr;
 }
 
 .grid-3 {
+  display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }
 
 .grid-4 {
+  display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 
@@ -414,6 +417,12 @@ a:hover {
   gap: 1.5rem;
 }
 
+/* Add to global.css */
+.pros-cons-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.tool-metadata { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
+.grid-cols-2 { grid-template-columns: 1fr 1fr; }
+.flex-shrink-1 { flex-shrink: 1; }
+
 /* ===================================================================
    7. TEXT AND DISPLAY UTILITIES
    ================================================================= */
@@ -2999,6 +3008,62 @@ footer {
   }
 }
 
+
+/* ===================================================================
+   MIGRATION UTILITIES - Additional classes for inline style migration
+   ================================================================= */
+
+/* Height utilities */
+.h-12 { height: 3rem; }
+
+/* Alignment utilities */
+.align-middle { vertical-align: middle; }
+
+/* Font style utilities */
+.italic { font-style: italic; }
+
+/* Border width utilities */
+.border-2 { border-width: 2px; }
+
+/* Border color utilities */
+.border-accent { border-color: var(--color-accent); }
+
+/* Card variants for complex backgrounds */
+.card-warning {
+  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-accent) 100%);
+  color: white;
+}
+
+/* Header variants for complex gradient combinations */
+.header-primary {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  color: white;
+}
+
+/* Enhanced card info variants (if not already present) */
+.card-info-xl { 
+  background-color: var(--color-bg-secondary); 
+  padding: 2.5rem; 
+  border-radius: 1.25rem; 
+  border: 1px solid var(--color-border); 
+}
+
+/* Ensure we have all text size variants */
+.text-2xl { font-size: 1.5rem; }
+.text-3xl { font-size: 1.875rem; }
+
+/* Additional spacing utilities that might be missing */
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
+
+/* Flex utilities that might be missing */
+.flex-1 { flex: 1; }
+
+/* Additional rounded variants */
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-2xl { border-radius: 1rem; }
+
 /* ===================================================================
    23. MARKDOWN CONTENT
    ================================================================= */