added quartz wiki

2025-11-29 03:01:04 +01:00
parent 989253c72f
commit 1063619fef
25 changed files with 1351 additions and 149 deletions
--- a/DEBUG-WIKI.md
+++ b/DEBUG-WIKI.md
@@ -0,0 +1,87 @@
+# Debug-Anleitung für Wiki-Setup
+
+## Problem behoben: Node.js Version
+
+**Problem**: Quartz 4.5.2 benötigt Node.js >= 22, wir hatten Node 20.
+
+**Lösung**: Dockerfile wurde aktualisiert auf `node:22-alpine`
+
+## Build-Anweisungen
+
+### 1. Wiki-Service neu bauen (nach Node.js Update)
+```powershell
+docker-compose build --no-cache wiki
+```
+
+### 2. Alle Services bauen
+```powershell
+docker-compose build
+```
+
+### 3. Services starten
+```powershell
+docker-compose up -d
+```
+
+### 4. Logs prüfen
+```powershell
+# Alle Logs
+docker-compose logs
+
+# Nur Wiki-Logs
+docker-compose logs wiki
+
+# Live-Logs folgen
+docker-compose logs -f wiki
+```
+
+### 5. Container-Status prüfen
+```powershell
+docker-compose ps
+```
+
+## Erwartete Ausgabe beim Build
+
+Beim erfolgreichen Build sollten Sie sehen:
+- ✅ Git wird installiert
+- ✅ npm wird aktualisiert
+- ✅ Quartz Repository wird geklont
+- ✅ npm install läuft durch (kann einige Minuten dauern)
+- ✅ serve wird installiert
+
+## Wenn der Build immer noch fehlschlägt
+
+### Option 1: Container-Status prüfen
+```powershell
+docker ps -a
+docker-compose logs wiki --tail=100
+```
+
+### Option 2: In Container einsteigen und manuell testen
+```powershell
+# Container starten (auch wenn Build fehlschlägt)
+docker-compose run --rm wiki sh
+
+# Dann im Container:
+cd /app/quartz-repo
+npm install
+```
+
+### Option 3: Cache leeren und neu bauen
+```powershell
+docker-compose down
+docker system prune -f
+docker-compose build --no-cache wiki
+```
+
+## Erwartete Ports
+
+- **Web (Next.js)**: http://localhost:3001
+- **Wiki (Quartz)**: http://localhost:8080
+
+## Nächste Schritte nach erfolgreichem Build
+
+1. Services starten: `docker-compose up -d`
+2. Wiki aufrufen: http://localhost:8080
+3. Wiki-Seite testen: http://localhost:3001/wiki
+
--- a/WIKI-PROXY-SETUP.md
+++ b/WIKI-PROXY-SETUP.md
@@ -0,0 +1,119 @@
+# Wiki Proxy Setup - Dokumentation
+
+## Übersicht
+
+Das Wiki ist jetzt so konfiguriert, dass es über die Domain `doing-it.de/wiki` erreichbar ist, ohne dass Port 8080 nach außen exponiert werden muss. Dies wird durch einen Next.js API-Route-Proxy erreicht.
+
+## Architektur
+
+```
+Browser → doing-it.de/wiki → Next.js (/wiki page) → iframe → /api/wiki/* → Wiki-Service (intern)
+```
+
+1. **Browser** greift auf `doing-it.de/wiki` zu
+2. **Next.js Wiki-Seite** (`app/wiki/page.tsx`) zeigt das Wiki als iframe
+3. **iframe** lädt `/api/wiki/*` (Next.js API-Route)
+4. **API-Route** (`app/api/wiki/[...path]/route.ts`) leitet Requests an den internen Wiki-Service weiter
+5. **Wiki-Service** läuft nur im Docker-Netzwerk, Port 8080 ist nicht nach außen exponiert
+
+## Änderungen
+
+### 1. Docker Compose (`docker-compose.yml`)
+- Wiki-Service verwendet jetzt `expose` statt `ports`
+- Port 8080 ist nur im Docker-Netzwerk erreichbar, nicht von außen
+- Kommunikation zwischen Services erfolgt über Service-Namen (`wiki:8080`)
+
+### 2. Next.js API-Route (`app/api/wiki/[...path]/route.ts`)
+- Proxied alle Requests an den Wiki-Service
+- Unterstützt alle HTTP-Methoden (GET, POST, PUT, DELETE)
+- Weiterleitung von Headers und Query-Parametern
+
+### 3. Wiki-Seite (`app/wiki/page.tsx`)
+- Zeigt das Wiki als iframe
+- Lädt über `/api/wiki` (API-Route)
+- Enthält Navigation zurück zur Website
+
+### 4. Navigation
+- Link zu `/wiki` wurde bereits hinzugefügt
+- Führt direkt zur Wiki-Seite mit eingebettetem Wiki
+
+## Vorteile
+
+✅ **Sicherheit**: Port 8080 ist nicht nach außen exponiert
+✅ **Einheitliche Domain**: Alles über `doing-it.de`
+✅ **Einfache Integration**: Wiki ist nahtlos in die Website eingebettet
+✅ **Proxy-Funktionalität**: Alle Wiki-Ressourcen (CSS, JS, Bilder) werden korrekt weitergeleitet
+
+## Konfiguration
+
+### Environment Variables
+
+Die API-Route verwendet die Umgebungsvariable `WIKI_SERVICE_URL`:
+- **Standard**: `http://wiki:8080` (Docker-Service-Name)
+- **Anpassung**: Kann in `docker-compose.yml` gesetzt werden
+
+### Docker Compose
+
+```yaml
+wiki:
+  expose:
+    - "8080"  # Nur intern, nicht nach außen
+```
+
+Die Services kommunizieren automatisch über das Docker-Netzwerk.
+
+## Testing
+
+### Lokales Testen
+
+1. Services starten:
+```powershell
+docker-compose up -d
+```
+
+2. Wiki-Seite öffnen:
+```
+http://localhost:3001/wiki
+```
+
+3. API-Route direkt testen:
+```
+http://localhost:3001/api/wiki
+```
+
+### Produktion
+
+Nach dem Deployment hinter einem Reverse Proxy (z.B. Nginx):
+- Wiki ist erreichbar über `https://doing-it.de/wiki`
+- Kein direkter Zugriff auf Port 8080 erforderlich
+- Alle Requests gehen über die Next.js-Anwendung
+
+## Troubleshooting
+
+### Problem: Wiki lädt nicht im iframe
+
+**Lösung**: 
+- Prüfen Sie die Browser-Konsole auf Fehler
+- Überprüfen Sie, ob der Wiki-Service läuft: `docker-compose ps`
+- Prüfen Sie die API-Route-Logs: `docker-compose logs web`
+
+### Problem: CORS-Fehler
+
+**Lösung**: 
+- Die API-Route setzt bereits `Access-Control-Allow-Origin: *`
+- Falls weitere CORS-Header benötigt werden, in `route.ts` hinzufügen
+
+### Problem: Wiki-Service nicht erreichbar
+
+**Lösung**:
+- Überprüfen Sie, ob beide Services im gleichen Docker-Netzwerk sind
+- Prüfen Sie die Service-Namen in `docker-compose.yml`
+- Testen Sie die interne Kommunikation: `docker-compose exec web ping wiki`
+
+## Nächste Schritte
+
+1. ✅ Wiki über Proxy erreichbar
+2. ✅ Port 8080 nicht mehr exponiert
+3. ✅ Einheitliche Domain (`doing-it.de/wiki`)
+4. Optional: Reverse Proxy (Nginx/Traefik) für HTTPS und Domain-Routing konfigurieren
+
--- a/WIKI-SETUP.md
+++ b/WIKI-SETUP.md
@@ -0,0 +1,147 @@
+# Wiki Setup mit Obsidian Quartz
+
+## Übersicht
+
+Das Wiki wurde erfolgreich in die doing-it.de Website integriert. Es verwendet Obsidian Quartz als statischen Site-Generator und läuft als Docker-Container.
+
+## Struktur
+
+```
+doing-it.de/
+├── wiki-vault/              # Obsidian Vault mit Markdown-Dateien
+│   ├── Home.md
+│   ├── IT-Grundlagen.md
+│   ├── Schulungsmethoden.md
+│   └── Ressourcen.md
+├── quartz-setup/            # Quartz Docker Setup
+│   ├── Dockerfile
+│   ├── entrypoint.sh
+│   ├── package.json
+│   └── quartz.config.ts
+├── app/wiki/                # Next.js Wiki-Seite
+│   └── page.tsx
+└── docker-compose.yml       # Erweitert um Wiki-Service
+```
+
+## Was wurde implementiert
+
+### 1. Obsidian Vault (`wiki-vault/`)
+- Enthält Beispiel-Markdown-Dateien
+- Kann durch eigene Obsidian-Vault-Dateien ersetzt werden
+
+### 2. Quartz Docker Setup (`quartz-setup/`)
+- Dockerfile: Klont Quartz Repository und richtet es ein
+- entrypoint.sh: Baut die Quartz-Site und startet den Server
+- Fallback: Erstellt einfache statische Site, falls Quartz-Build fehlschlägt
+
+### 3. Docker Compose Service
+- Service `wiki` läuft auf Port 8080
+- Bindet `wiki-vault` als Volume ein
+- Build-Output in `quartz-setup/public`
+
+### 4. Next.js Integration
+- Neue Seite unter `/wiki`
+- Wiki-Link in Navigation (Desktop & Mobile)
+- Link zur Quartz-Instanz auf Port 8080
+
+## Testing & Debugging in PowerShell
+
+### 1. Docker Compose Validierung
+```powershell
+docker-compose config
+```
+
+### 2. Wiki-Service bauen
+```powershell
+docker-compose build wiki
+```
+
+### 3. Alle Services starten
+```powershell
+docker-compose up -d
+```
+
+### 4. Logs prüfen
+```powershell
+# Alle Logs
+docker-compose logs
+
+# Nur Wiki-Logs
+docker-compose logs wiki
+
+# Follow Logs (Live)
+docker-compose logs -f wiki
+```
+
+### 5. Container-Status prüfen
+```powershell
+docker-compose ps
+docker ps -a
+```
+
+### 6. In Container einsteigen (falls nötig)
+```powershell
+docker-compose exec wiki sh
+```
+
+### 7. Services stoppen
+```powershell
+docker-compose down
+```
+
+### 8. Alles neu bauen
+```powershell
+docker-compose down
+docker-compose build --no-cache
+docker-compose up -d
+```
+
+## Erwartete Ports
+
+- **Next.js Web**: http://localhost:3001
+- **Wiki (Quartz)**: http://localhost:8080
+
+## Häufige Probleme
+
+### Problem: Quartz Build schlägt fehl
+**Lösung**: Der Entrypoint-Script erstellt automatisch einen Fallback mit einfacher HTML-Seite. Die Markdown-Dateien werden trotzdem angezeigt.
+
+### Problem: Port 8080 bereits belegt
+**Lösung**: Port in `docker-compose.yml` ändern:
+```yaml
+ports:
+  - "8081:8080"  # Ändere 8081 zu gewünschtem Port
+```
+
+### Problem: Container startet nicht
+**Lösung**: 
+1. Logs prüfen: `docker-compose logs wiki`
+2. Container neu bauen: `docker-compose build --no-cache wiki`
+3. Container-Status: `docker ps -a`
+
+### Problem: Keine Inhalte im Wiki
+**Lösung**: 
+1. Prüfen ob `wiki-vault` Dateien enthält
+2. Volume-Mount prüfen: `docker-compose exec wiki ls -la /app/content`
+3. Container neu starten: `docker-compose restart wiki`
+
+## Wiki-Inhalte aktualisieren
+
+1. Markdown-Dateien in `wiki-vault/` bearbeiten oder hinzufügen
+2. Container neu starten: `docker-compose restart wiki`
+3. Oder für kompletten Rebuild: `docker-compose up -d --build wiki`
+
+## Navigation
+
+Der Wiki-Link wurde zur Navigation hinzugefügt:
+- Desktop: Zwischen "Über uns" und "Kontakt"
+- Mobile: Im Hamburger-Menü
+
+Die Wiki-Seite (`/wiki`) zeigt einen Link zur Quartz-Instanz, der in einem neuen Tab geöffnet wird.
+
+## Nächste Schritte
+
+1. Eigene Obsidian-Vault-Dateien in `wiki-vault/` kopieren
+2. Quartz-Konfiguration in `quartz-setup/quartz.config.ts` anpassen
+3. Wiki-Styling an Website-Design anpassen (falls gewünscht)
+
--- a/app/api/wiki/[...path]/route.ts
+++ b/app/api/wiki/[...path]/route.ts
@@ -0,0 +1,65 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const WIKI_SERVICE_URL = process.env.WIKI_SERVICE_URL || 'http://wiki:8080'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { path: string[] } }
+) {
+  try {
+    const path = params.path || []
+    const searchParams = request.nextUrl.searchParams.toString()
+    const queryString = searchParams ? `?${searchParams}` : ''
+    const wikiPath = path.length > 0 ? `/${path.join('/')}` : '/'
+    
+    const wikiUrl = `${WIKI_SERVICE_URL}${wikiPath}${queryString}`
+    
+    const response = await fetch(wikiUrl, {
+      headers: {
+        'User-Agent': request.headers.get('user-agent') || 'Next.js',
+      },
+    })
+
+    if (!response.ok) {
+      return new NextResponse('Wiki not found', { status: response.status })
+    }
+
+    const contentType = response.headers.get('content-type') || 'text/html'
+    const content = await response.text()
+
+    // Pass through headers
+    const headers = new Headers()
+    headers.set('Content-Type', contentType)
+    
+    // Handle CORS if needed
+    headers.set('Access-Control-Allow-Origin', '*')
+    
+    // Preserve cache headers
+    const cacheControl = response.headers.get('cache-control')
+    if (cacheControl) {
+      headers.set('Cache-Control', cacheControl)
+    }
+
+    return new NextResponse(content, {
+      status: response.status,
+      headers,
+    })
+  } catch (error) {
+    console.error('Wiki proxy error:', error)
+    return new NextResponse('Error loading wiki', { status: 500 })
+  }
+}
+
+// Handle other HTTP methods
+export async function POST(request: NextRequest, { params }: { params: { path: string[] } }) {
+  return GET(request, { params })
+}
+
+export async function PUT(request: NextRequest, { params }: { params: { path: string[] } }) {
+  return GET(request, { params })
+}
+
+export async function DELETE(request: NextRequest, { params }: { params: { path: string[] } }) {
+  return GET(request, { params })
+}
+
--- a/app/wiki/page.tsx
+++ b/app/wiki/page.tsx
@@ -0,0 +1,156 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+import { useState } from 'react'
+
+export default function Wiki() {
+  const [showFullPage, setShowFullPage] = useState(true)
+  
+  // Wiki URL über den Next.js API Proxy
+  const wikiUrl = '/api/wiki'
+
+  if (showFullPage) {
+    // Vollständige Wiki-Seite als iframe
+    return (
+      <>
+        <Navigation />
+        <main style={{ paddingTop: '52px', height: 'calc(100vh - 52px)', display: 'flex', flexDirection: 'column' }}>
+          <div style={{ 
+            position: 'fixed', 
+            top: '52px', 
+            left: 0, 
+            right: 0, 
+            background: 'rgba(0, 0, 0, 0.9)', 
+            padding: '10px 20px', 
+            display: 'flex', 
+            justifyContent: 'space-between', 
+            alignItems: 'center',
+            zIndex: 999,
+            borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+          }}>
+            <h2 style={{ fontSize: '18px', fontWeight: '600', margin: 0 }}>doing-it Wiki</h2>
+            <button
+              onClick={() => setShowFullPage(false)}
+              className="btn btn-secondary"
+              style={{ padding: '8px 20px', fontSize: '14px' }}
+            >
+              Zur Übersicht
+            </button>
+          </div>
+          <iframe
+            src={wikiUrl}
+            style={{
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              marginTop: '50px',
+              background: '#fff'
+            }}
+            title="doing-it Wiki"
+          />
+        </main>
+      </>
+    )
+  }
+
+  // Übersichtsseite mit Option zum Öffnen des Wikis
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="hero-content"
+          >
+            <h1 className="hero-title">Wiki</h1>
+            <p className="hero-subtitle">
+              Unser Wissensbereich mit nützlichen Informationen<br />
+              rund um IT-Weiterbildung und Schulungen
+            </p>
+            <div className="hero-buttons" style={{ marginTop: '40px' }}>
+              <button 
+                onClick={() => setShowFullPage(true)}
+                className="btn btn-primary"
+                style={{ cursor: 'pointer' }}
+              >
+                Wiki öffnen
+              </button>
+              <a 
+                href={wikiUrl} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="btn btn-secondary"
+              >
+                In neuem Tab öffnen
+              </a>
+            </div>
+          </motion.div>
+        </section>
+
+        <section className="features" style={{ paddingTop: '80px' }}>
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
+              <h2 style={{ fontSize: '48px', fontWeight: '600', marginBottom: '40px', textAlign: 'center' }}>
+                Was finden Sie im Wiki?
+              </h2>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '30px', marginTop: '60px' }}>
+                <div className="feature-card">
+                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
+                    IT-Grundlagen
+                  </h3>
+                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
+                    Umfassende Informationen zu grundlegenden IT-Konzepten, Technologien und Best Practices.
+                  </p>
+                </div>
+                <div className="feature-card">
+                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
+                    Schulungsmethoden
+                  </h3>
+                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
+                    Moderne Ansätze und bewährte Methoden für effektive IT-Schulungen und Weiterbildungen.
+                  </p>
+                </div>
+                <div className="feature-card">
+                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
+                    Ressourcen
+                  </h3>
+                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
+                    Sammlung von nützlichen Tools, Materialien und weiterführenden Ressourcen.
+                  </p>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+
+        <section className="features" style={{ paddingTop: '80px', paddingBottom: '120px' }}>
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+              style={{ textAlign: 'center' }}
+            >
+              <h3 style={{ fontSize: '32px', fontWeight: '600', marginBottom: '20px' }}>
+                Bereit loszulegen?
+              </h3>
+              <p style={{ color: 'var(--color-text-secondary)', fontSize: '20px', marginBottom: '40px' }}>
+                Klicken Sie auf den Button oben, um direkt zum Wiki zu gelangen.
+              </p>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,53 +1,53 @@
-import Link from 'next/link'
-
-export default function Footer() {
-  return (
-    <footer className="footer">
-      <div className="container">
-        <div className="footer-content">
-          <div className="footer-section">
-            <h3>doing-it</h3>
-            <p>IT Weiterbildung und Schulungen</p>
-          </div>
-
-          <div className="footer-section">
-            <h4>Kontakt</h4>
-            <a href="mailto:info@doing-it.de">info@doing-it.de</a>
-          </div>
-
-          <div className="footer-section">
-            <h4>Social Media</h4>
-            <div className="footer-social">
-              <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
-                LinkedIn
-              </a>
-              <a href="https://www.xing.com/companies/doing-it" target="_blank" rel="noopener noreferrer" aria-label="Xing">
-                Xing
-              </a>
-            </div>
-          </div>
-
-          <div className="footer-section">
-            <h4>Navigation</h4>
-            <Link href="/">Home</Link>
-            <Link href="/unternehmen">Für Unternehmen</Link>
-            <Link href="/quereinsteiger">Für Quereinsteiger</Link>
-            <Link href="/ueber-uns">Über uns</Link>
-            <Link href="/kontakt">Kontakt</Link>
-          </div>
-          <div className="footer-section">
-            <h4>Rechtliches</h4>
-            <Link href="/impressum">Impressum</Link>
-            <Link href="/datenschutz">Datenschutzerklärung</Link>
-            <Link href="/agb">AGB</Link>
-          </div>
-        </div>
-
-        <div className="footer-bottom">
-          <p>&copy; {new Date().getFullYear()} doing-it. Alle Rechte vorbehalten.</p>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
+import Link from 'next/link'
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="container">
+        <div className="footer-content">
+          <div className="footer-section">
+            <h3>doing-it</h3>
+            <p>IT Weiterbildung und Schulungen</p>
+          </div>
+
+          <div className="footer-section">
+            <h4>Kontakt</h4>
+            <a href="mailto:info@doing-it.de">info@doing-it.de</a>
+          </div>
+
+          <div className="footer-section">
+            <h4>Social Media</h4>
+            <div className="footer-social">
+              <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+                LinkedIn
+              </a>
+              <a href="https://www.xing.com/companies/doing-it" target="_blank" rel="noopener noreferrer" aria-label="Xing">
+                Xing
+              </a>
+            </div>
+          </div>
+
+          <div className="footer-section">
+            <h4>Navigation</h4>
+            <Link href="/">Home</Link>
+            <Link href="/unternehmen">Für Unternehmen</Link>
+            <Link href="/quereinsteiger">Für Quereinsteiger</Link>
+            <Link href="/ueber-uns">Über uns</Link>
+            <Link href="/kontakt">Kontakt</Link>
+          </div>
+          <div className="footer-section">
+            <h4>Rechtliches</h4>
+            <Link href="/impressum">Impressum</Link>
+            <Link href="/datenschutz">Datenschutzerklärung</Link>
+            <Link href="/agb">AGB</Link>
+          </div>
+        </div>
+
+        <div className="footer-bottom">
+          <p>&copy; {new Date().getFullYear()} doing-it. Alle Rechte vorbehalten.</p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -1,81 +1,87 @@
-'use client'
-
-import { useState } from 'react'
-import Link from 'next/link'
-import { motion, AnimatePresence } from 'framer-motion'
-
-export default function Navigation() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <nav className="nav">
-      <div className="nav-container">
-        <Link href="/" className="nav-logo">
-          doing-it
-        </Link>
-        
-        {/* Desktop Menu */}
-        <div className="nav-menu">
-          <Link href="/" className="nav-link">
-            Home
-          </Link>
-          <Link href="/unternehmen" className="nav-link">
-            Für Unternehmen
-          </Link>
-          <Link href="/quereinsteiger" className="nav-link">
-            Für Quereinsteiger
-          </Link>
-          <Link href="/ueber-uns" className="nav-link">
-            Über uns
-          </Link>
-          <Link href="/kontakt" className="nav-link">
-            Kontakt
-          </Link>
-          <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
-            <span aria-label="LinkedIn">🔗</span>
-          </a>
-        </div>
-
-        {/* Mobile Menu Button */}
-        <button
-          className="nav-toggle"
-          onClick={() => setIsOpen(!isOpen)}
-          aria-label="Menu"
-        >
-          <span className={isOpen ? 'open' : ''}></span>
-          <span className={isOpen ? 'open' : ''}></span>
-          <span className={isOpen ? 'open' : ''}></span>
-        </button>
-      </div>
-
-      {/* Mobile Menu */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            className="nav-mobile"
-          >
-            <Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
-              Home
-            </Link>
-            <Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
-              Für Unternehmen
-            </Link>
-            <Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
-              Für Quereinsteiger
-            </Link>
-            <Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
-              Über uns
-            </Link>
-            <Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
-              Kontakt
-            </Link>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </nav>
-  )
-}
-
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { motion, AnimatePresence } from 'framer-motion'
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <nav className="nav">
+      <div className="nav-container">
+        <Link href="/" className="nav-logo">
+          doing-it
+        </Link>
+        
+        {/* Desktop Menu */}
+        <div className="nav-menu">
+          <Link href="/" className="nav-link">
+            Home
+          </Link>
+          <Link href="/unternehmen" className="nav-link">
+            Für Unternehmen
+          </Link>
+          <Link href="/quereinsteiger" className="nav-link">
+            Für Quereinsteiger
+          </Link>
+          <Link href="/ueber-uns" className="nav-link">
+            Über uns
+          </Link>
+          <Link href="/wiki" className="nav-link">
+            Wiki
+          </Link>
+          <Link href="/kontakt" className="nav-link">
+            Kontakt
+          </Link>
+          <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
+            <span aria-label="LinkedIn">🔗</span>
+          </a>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          className="nav-toggle"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label="Menu"
+        >
+          <span className={isOpen ? 'open' : ''}></span>
+          <span className={isOpen ? 'open' : ''}></span>
+          <span className={isOpen ? 'open' : ''}></span>
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="nav-mobile"
+          >
+            <Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Home
+            </Link>
+            <Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Für Unternehmen
+            </Link>
+            <Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Für Quereinsteiger
+            </Link>
+            <Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Über uns
+            </Link>
+            <Link href="/wiki" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Wiki
+            </Link>
+            <Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
+              Kontakt
+            </Link>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  )
+}
+
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,15 +1,29 @@
-services:
-  web:
-    build:
-      context: .
-      dockerfile: Dockerfile.dev
-    ports:
-      - "3001:3000"
-    environment:
-      - NODE_ENV=development
-    volumes:
-      - .:/app
-      - /app/node_modules
-      - /app/.next
-    restart: unless-stopped
-
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "3001:3000"
+    environment:
+      - NODE_ENV=development
+    volumes:
+      - .:/app
+      - /app/node_modules
+      - /app/.next
+    restart: unless-stopped
+
+  wiki:
+    build:
+      context: ./quartz-setup
+      dockerfile: Dockerfile
+    # Port nicht nach außen exponiert - nur intern über Docker-Netzwerk erreichbar
+    expose:
+      - "8080"
+    volumes:
+      - ./wiki-vault:/app/content
+      - ./quartz-setup/public:/app/public
+    restart: unless-stopped
+    environment:
+      - QUARTZ_BASE_URL=/wiki
+
--- a/quartz-setup/.dockerignore
+++ b/quartz-setup/.dockerignore
@@ -0,0 +1,4 @@
+node_modules
+.next
+.git
+
--- a/quartz-setup/Dockerfile
+++ b/quartz-setup/Dockerfile
@@ -0,0 +1,36 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+# Install git (needed for cloning Quartz)
+RUN apk add --no-cache git
+
+# Update npm to latest version
+RUN npm install -g npm@latest
+
+# Clone Quartz repository
+RUN git clone https://github.com/jackyzha0/quartz.git quartz-repo
+
+# Move into Quartz directory
+WORKDIR /app/quartz-repo
+
+# Install Quartz dependencies
+RUN npm install
+
+# Install serve for static file serving
+RUN npm install -g serve
+
+# Create directories for content and output
+RUN mkdir -p /app/content /app/public
+
+# Copy entrypoint script
+COPY entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
+# Expose port
+EXPOSE 8080
+
+# Set working directory back to app root
+WORKDIR /app
+
+CMD ["/app/entrypoint.sh"]
--- a/quartz-setup/entrypoint.sh
+++ b/quartz-setup/entrypoint.sh
@@ -0,0 +1,145 @@
+#!/bin/sh
+
+echo "Starting Quartz Wiki..."
+
+# Check if content directory has files
+if [ -z "$(ls -A /app/content 2>/dev/null)" ]; then
+    echo "Warning: Content directory is empty!"
+    # Create a default index page
+    mkdir -p /app/content
+    echo "# Wiki Home
+
+Willkommen im doing-it Wiki!
+
+Dieses Wiki wird mit Obsidian Quartz betrieben.
+" > /app/content/index.md
+fi
+
+# Copy content to Quartz content directory
+echo "Copying vault content to Quartz..."
+mkdir -p /app/quartz-repo/content
+cp -r /app/content/* /app/quartz-repo/content/ 2>/dev/null || true
+
+# Build Quartz
+echo "Building Quartz site..."
+cd /app/quartz-repo
+
+# Build the site with default Quartz setup
+npx quartz build 2>&1 || {
+    echo "Default Quartz build failed, trying alternative method..."
+    # Try building with explicit paths
+    npx quartz build --contentDir ./content --outputDir /app/public 2>&1 || {
+        echo "Default build also failed, creating fallback static site..."
+        
+        # Create fallback static site
+        mkdir -p /app/public
+        cd /app/content
+        
+        # Create index.html
+        cat > /app/public/index.html << 'EOFHTML'
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>doing-it Wiki</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+            background: #161618;
+            color: #ebebec;
+            line-height: 1.6;
+            padding: 40px 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+        }
+        h1 {
+            font-size: 48px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: #ebebec;
+        }
+        h2 {
+            font-size: 32px;
+            font-weight: 600;
+            margin: 40px 0 20px;
+            color: #ebebec;
+        }
+        ul {
+            list-style: none;
+            padding: 0;
+        }
+        li {
+            margin: 15px 0;
+        }
+        a {
+            color: #ff3b30;
+            text-decoration: none;
+            font-size: 18px;
+            transition: color 0.3s;
+            display: inline-block;
+        }
+        a:hover {
+            color: #ff453a;
+        }
+        .intro {
+            font-size: 20px;
+            color: #d4d4d4;
+            margin-bottom: 40px;
+        }
+        .content-preview {
+            background: #1c1c1e;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>doing-it Wiki</h1>
+        <p class="intro">Willkommen im doing-it Wiki! Hier finden Sie nützliche Informationen rund um IT-Weiterbildung und Schulungen.</p>
+        <h2>Inhalte</h2>
+        <ul id="content-list">
+EOFHTML
+
+        # Find all markdown files and create links
+        find /app/content -name "*.md" -type f | while read file; do
+            title=$(basename "$file" .md)
+            relative_path=$(echo "$file" | sed "s|/app/content/||")
+            echo "            <li><a href=\"/$relative_path\">$title</a></li>" >> /app/public/index.html
+        done
+        
+        echo "        </ul>" >> /app/public/index.html
+        echo "    </div>" >> /app/public/index.html
+        echo "</body>" >> /app/public/index.html
+        echo "</html>" >> /app/public/index.html
+        
+        # Copy markdown files to public
+        cp -r /app/content/* /app/public/ 2>/dev/null || true
+    }
+}
+
+# If Quartz build succeeded, check if public directory exists
+if [ -d "/app/quartz-repo/public" ] && [ -n "$(ls -A /app/quartz-repo/public 2>/dev/null)" ]; then
+    echo "Copying Quartz output to public directory..."
+    cp -r /app/quartz-repo/public/* /app/public/ 2>/dev/null || true
+fi
+
+# Ensure public directory exists
+if [ ! -d "/app/public" ] || [ -z "$(ls -A /app/public 2>/dev/null)" ]; then
+    echo "Error: Public directory is empty, creating minimal site..."
+    mkdir -p /app/public
+    echo "<!DOCTYPE html><html><head><meta charset='UTF-8'><title>doing-it Wiki</title></head><body><h1>doing-it Wiki</h1><p>Wiki wird geladen...</p></body></html>" > /app/public/index.html
+fi
+
+echo "Build complete. Starting server on port 8080..."
+cd /app
+serve -s public -l 8080
--- a/quartz-setup/init-quartz.sh
+++ b/quartz-setup/init-quartz.sh
@@ -0,0 +1,18 @@
+#!/bin/sh
+
+# Initialize Quartz
+echo "Initializing Quartz..."
+npx @jackyzha0/quartz create --help
+
+# Copy vault content to content directory
+if [ -d "/vault" ]; then
+    echo "Copying vault content..."
+    cp -r /vault/* ./content/ 2>/dev/null || true
+fi
+
+# Build Quartz
+echo "Building Quartz site..."
+npx quartz build
+
+echo "Quartz build complete!"
+
--- a/quartz-setup/nginx.conf
+++ b/quartz-setup/nginx.conf
@@ -0,0 +1,21 @@
+server {
+    listen 8080;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ $uri.html /index.html;
+    }
+
+    # Enable gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
+
--- a/quartz-setup/package.json
+++ b/quartz-setup/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "quartz-wiki",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "quartz build",
+    "watch": "quartz watch",
+    "sync": "quartz sync"
+  },
+  "dependencies": {
+    "@jackyzha0/quartz": "^4.4.3"
+  },
+  "devDependencies": {
+    "serve": "^14.2.1"
+  }
+}
--- a/quartz-setup/public/Home.md
+++ b/quartz-setup/public/Home.md
@@ -0,0 +1,12 @@
+# Wiki Home
+
+Willkommen im doing-it Wiki!
+
+Dieses Wiki enthält nützliche Informationen rund um IT-Weiterbildung, Schulungen und mehr.
+
+## Übersicht
+
+- [[IT-Grundlagen]]
+- [[Schulungsmethoden]]
+- [[Ressourcen]]
+
--- a/quartz-setup/public/IT-Grundlagen.md
+++ b/quartz-setup/public/IT-Grundlagen.md
@@ -0,0 +1,23 @@
+# IT-Grundlagen
+
+## Einführung
+
+Hier finden Sie grundlegende Informationen zu IT-Konzepten und Technologien.
+
+## Themenbereiche
+
+### Netzwerke
+- Grundlagen der Netzwerkarchitektur
+- TCP/IP Protokolle
+- Firewall-Konfiguration
+
+### Betriebssysteme
+- Linux
+- Windows Server
+- Virtualisierung
+
+## Weiterführende Links
+
+- [[Home]]
+- [[Ressourcen]]
+
--- a/quartz-setup/public/Ressourcen.md
+++ b/quartz-setup/public/Ressourcen.md
@@ -0,0 +1,24 @@
+# Ressourcen
+
+## Lernmaterialien
+
+### Bücher
+- Empfohlene Fachliteratur
+- Online-Ressourcen
+
+### Tools
+- Software für IT-Schulungen
+- Virtualisierungstools
+- Entwicklungsumgebungen
+
+### Community
+- Foren und Diskussionsgruppen
+- Online-Kurse
+- Zertifizierungen
+
+## Siehe auch
+
+- [[IT-Grundlagen]]
+- [[Schulungsmethoden]]
+- [[Home]]
+
--- a/quartz-setup/public/Schulungsmethoden.md
+++ b/quartz-setup/public/Schulungsmethoden.md
@@ -0,0 +1,22 @@
+# Schulungsmethoden
+
+## Moderne Ansätze der IT-Schulung
+
+### Praxisorientierte Schulungen
+- Hands-on Workshops
+- Real-world Szenarien
+- Projektbasierter Unterricht
+
+### Blended Learning
+- Online-Materialien
+- Präsenzveranstaltungen
+- Selbstlernphasen
+
+## Vorteile
+
+1. Bessere Wissensretention
+2. Praktische Anwendbarkeit
+3. Flexibilität für Teilnehmer
+
+[[Home]]
+
--- a/quartz-setup/public/index.html
+++ b/quartz-setup/public/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>doing-it Wiki</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+            background: #161618;
+            color: #ebebec;
+            line-height: 1.6;
+            padding: 40px 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+        }
+        h1 {
+            font-size: 48px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: #ebebec;
+        }
+        h2 {
+            font-size: 32px;
+            font-weight: 600;
+            margin: 40px 0 20px;
+            color: #ebebec;
+        }
+        ul {
+            list-style: none;
+            padding: 0;
+        }
+        li {
+            margin: 15px 0;
+        }
+        a {
+            color: #ff3b30;
+            text-decoration: none;
+            font-size: 18px;
+            transition: color 0.3s;
+            display: inline-block;
+        }
+        a:hover {
+            color: #ff453a;
+        }
+        .intro {
+            font-size: 20px;
+            color: #d4d4d4;
+            margin-bottom: 40px;
+        }
+        .content-preview {
+            background: #1c1c1e;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>doing-it Wiki</h1>
+        <p class="intro">Willkommen im doing-it Wiki! Hier finden Sie nützliche Informationen rund um IT-Weiterbildung und Schulungen.</p>
+        <h2>Inhalte</h2>
+        <ul id="content-list">
+            <li><a href="/Home.md">Home</a></li>
+            <li><a href="/IT-Grundlagen.md">IT-Grundlagen</a></li>
+            <li><a href="/Ressourcen.md">Ressourcen</a></li>
+            <li><a href="/Schulungsmethoden.md">Schulungsmethoden</a></li>
+        </ul>
+    </div>
+</body>
+</html>
--- a/quartz-setup/quartz.config.ts
+++ b/quartz-setup/quartz.config.ts
@@ -0,0 +1,89 @@
+import { QuartzConfig } from "./quartz/cfg"
+import * as Plugin from "./quartz/plugins"
+
+/**
+ * Quartz 4.0 Configuration
+ *
+ * See https://quartz.jzhao.xyz/configuration for more information.
+ */
+const config: QuartzConfig = {
+  configuration: {
+    pageTitle: "doing-it Wiki",
+    enableSPA: true,
+    enablePopovers: true,
+    analytics: null,
+    locale: "de-DE",
+    baseUrl: "wiki",
+    ignorePatterns: ["private", "templates", ".obsidian"],
+    defaultDateType: "created",
+    theme: {
+      fontOrigin: "googleFonts",
+      cdnCaching: true,
+      typography: {
+        header: "Schibsted Grotesk",
+        body: "Source Sans Pro",
+        code: "IBM Plex Mono",
+      },
+      colors: {
+        lightMode: {
+          light: "#faf8f8",
+          lightgray: "#e5e5e5",
+          gray: "#b8b8b8",
+          darkgray: "#4e4e4e",
+          dark: "#2b2b2b",
+          secondary: "#284b63",
+          tertiary: "#84a59d",
+          highlight: "rgba(143, 159, 169, 0.15)",
+        },
+        darkMode: {
+          light: "#161618",
+          lightgray: "#393639",
+          gray: "#646464",
+          darkgray: "#d4d4d4",
+          dark: "#ebebec",
+          secondary: "#7b97aa",
+          tertiary: "#84a59d",
+          highlight: "rgba(143, 159, 169, 0.15)",
+        },
+      },
+    },
+  },
+  plugins: {
+    transformers: [
+      Plugin.FrontMatter({ delimiters: "---" }),
+      Plugin.CreatedModifiedDate({
+        priority: ["frontmatter", "filesystem"],
+      }),
+      Plugin.SyntaxHighlighting({
+        theme: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        keepBackground: false,
+      }),
+      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
+      Plugin.GitHubFlavoredMarkdown(),
+      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
+      Plugin.Latex({ renderEngine: "katex" }),
+      Plugin.Description(),
+    ],
+    filters: [Plugin.RemoveDrafts()],
+    emitters: [
+      Plugin.AliasRedirects(),
+      Plugin.ComponentResources(),
+      Plugin.ContentPage(),
+      Plugin.FolderPage(),
+      Plugin.TagPage(),
+      Plugin.ContentIndex({
+        enableSiteMap: true,
+        enableRSS: true,
+      }),
+      Plugin.Assets(),
+      Plugin.Static(),
+      Plugin.NotFoundPage(),
+    ],
+  },
+}
+
+export default config
+
--- a/test-wiki-build.ps1
+++ b/test-wiki-build.ps1
@@ -0,0 +1,38 @@
+# PowerShell script to test and debug the Wiki Docker setup
+
+Write-Host "=== Testing Wiki Docker Setup ===" -ForegroundColor Green
+Write-Host ""
+
+Write-Host "1. Checking Docker installation..." -ForegroundColor Yellow
+docker --version
+docker-compose --version
+Write-Host ""
+
+Write-Host "2. Validating docker-compose configuration..." -ForegroundColor Yellow
+docker-compose config
+Write-Host ""
+
+Write-Host "3. Building Wiki service..." -ForegroundColor Yellow
+docker-compose build wiki 2>&1
+Write-Host ""
+
+Write-Host "4. Checking for existing containers..." -ForegroundColor Yellow
+docker ps -a | Select-String "wiki"
+Write-Host ""
+
+Write-Host "5. Starting services..." -ForegroundColor Yellow
+docker-compose up -d
+Write-Host ""
+
+Write-Host "6. Checking service status..." -ForegroundColor Yellow
+Start-Sleep -Seconds 3
+docker-compose ps
+Write-Host ""
+
+Write-Host "7. Showing Wiki service logs..." -ForegroundColor Yellow
+docker-compose logs wiki --tail=50
+Write-Host ""
+
+Write-Host "=== Test Complete ===" -ForegroundColor Green
+Write-Host "Check the logs above for any errors." -ForegroundColor Cyan
+
--- a/wiki-vault/Home.md
+++ b/wiki-vault/Home.md
@@ -0,0 +1,12 @@
+# Wiki Home
+
+Willkommen im doing-it Wiki!
+
+Dieses Wiki enthält nützliche Informationen rund um IT-Weiterbildung, Schulungen und mehr.
+
+## Übersicht
+
+- [[IT-Grundlagen]]
+- [[Schulungsmethoden]]
+- [[Ressourcen]]
+
--- a/wiki-vault/IT-Grundlagen.md
+++ b/wiki-vault/IT-Grundlagen.md
@@ -0,0 +1,23 @@
+# IT-Grundlagen
+
+## Einführung
+
+Hier finden Sie grundlegende Informationen zu IT-Konzepten und Technologien.
+
+## Themenbereiche
+
+### Netzwerke
+- Grundlagen der Netzwerkarchitektur
+- TCP/IP Protokolle
+- Firewall-Konfiguration
+
+### Betriebssysteme
+- Linux
+- Windows Server
+- Virtualisierung
+
+## Weiterführende Links
+
+- [[Home]]
+- [[Ressourcen]]
+
--- a/wiki-vault/Ressourcen.md
+++ b/wiki-vault/Ressourcen.md
@@ -0,0 +1,24 @@
+# Ressourcen
+
+## Lernmaterialien
+
+### Bücher
+- Empfohlene Fachliteratur
+- Online-Ressourcen
+
+### Tools
+- Software für IT-Schulungen
+- Virtualisierungstools
+- Entwicklungsumgebungen
+
+### Community
+- Foren und Diskussionsgruppen
+- Online-Kurse
+- Zertifizierungen
+
+## Siehe auch
+
+- [[IT-Grundlagen]]
+- [[Schulungsmethoden]]
+- [[Home]]
+
--- a/wiki-vault/Schulungsmethoden.md
+++ b/wiki-vault/Schulungsmethoden.md
@@ -0,0 +1,22 @@
+# Schulungsmethoden
+
+## Moderne Ansätze der IT-Schulung
+
+### Praxisorientierte Schulungen
+- Hands-on Workshops
+- Real-world Szenarien
+- Projektbasierter Unterricht
+
+### Blended Learning
+- Online-Materialien
+- Präsenzveranstaltungen
+- Selbstlernphasen
+
+## Vorteile
+
+1. Bessere Wissensretention
+2. Praktische Anwendbarkeit
+3. Flexibilität für Teilnehmer
+
+[[Home]]
+