From 989253c72f0541f1cfcf2f478175e3f4d12623e0 Mon Sep 17 00:00:00 2001
From: loepperts <admin@loepperts.com>
Date: Thu, 27 Nov 2025 11:44:23 +0100
Subject: [PATCH] first commit

---
 .dockerignore                                 |  10 +
 .eslintrc.json                                |   4 +
 .gitignore                                    |  35 +
 Dockerfile                                    |  44 +
 Dockerfile.dev                                |  17 +
 PROJEKTINFORMATIONEN.md                       | 508 ++++++++++++
 README.md                                     |  46 ++
 app/agb/page.tsx                              | 105 +++
 app/case-studies/page.tsx                     | 143 ++++
 app/datenschutz/page.tsx                      |  97 +++
 app/globals.css                               | 756 ++++++++++++++++++
 app/impressum/page.tsx                        |  85 ++
 app/kontakt/page.tsx                          | 132 +++
 app/layout.tsx                                |  39 +
 app/page.tsx                                  | 189 +++++
 app/quereinsteiger/kurse/[id]/page.tsx        | 317 ++++++++
 app/quereinsteiger/kurse/page.tsx             | 244 ++++++
 app/quereinsteiger/lernpfad-finder/page.tsx   | 235 ++++++
 app/quereinsteiger/page.tsx                   | 173 ++++
 app/testimonials/page.tsx                     | 125 +++
 app/ueber-uns/page.tsx                        | 220 +++++
 .../it-infrastrukturanalyse/page.tsx          | 236 ++++++
 app/unternehmen/page.tsx                      | 340 ++++++++
 app/unternehmen/schulungsthemen/page.tsx      | 142 ++++
 app/unternehmen/tools/it-checkliste/page.tsx  | 272 +++++++
 .../tools/schulungsbedarf/page.tsx            | 258 ++++++
 components/Footer.tsx                         |  53 ++
 components/Navigation.tsx                     |  81 ++
 docker-compose.yml                            |  15 +
 next.config.js                                |   8 +
 package.json                                  |  26 +
 tsconfig.json                                 |  28 +
 32 files changed, 4983 insertions(+)
 create mode 100755 .dockerignore
 create mode 100755 .eslintrc.json
 create mode 100755 .gitignore
 create mode 100755 Dockerfile
 create mode 100755 Dockerfile.dev
 create mode 100755 PROJEKTINFORMATIONEN.md
 create mode 100755 README.md
 create mode 100755 app/agb/page.tsx
 create mode 100755 app/case-studies/page.tsx
 create mode 100755 app/datenschutz/page.tsx
 create mode 100755 app/globals.css
 create mode 100755 app/impressum/page.tsx
 create mode 100755 app/kontakt/page.tsx
 create mode 100755 app/layout.tsx
 create mode 100755 app/page.tsx
 create mode 100755 app/quereinsteiger/kurse/[id]/page.tsx
 create mode 100755 app/quereinsteiger/kurse/page.tsx
 create mode 100755 app/quereinsteiger/lernpfad-finder/page.tsx
 create mode 100755 app/quereinsteiger/page.tsx
 create mode 100755 app/testimonials/page.tsx
 create mode 100755 app/ueber-uns/page.tsx
 create mode 100755 app/unternehmen/it-infrastrukturanalyse/page.tsx
 create mode 100755 app/unternehmen/page.tsx
 create mode 100755 app/unternehmen/schulungsthemen/page.tsx
 create mode 100755 app/unternehmen/tools/it-checkliste/page.tsx
 create mode 100755 app/unternehmen/tools/schulungsbedarf/page.tsx
 create mode 100755 components/Footer.tsx
 create mode 100755 components/Navigation.tsx
 create mode 100755 docker-compose.yml
 create mode 100755 next.config.js
 create mode 100755 package.json
 create mode 100755 tsconfig.json

diff --git a/.dockerignore b/.dockerignore
new file mode 100755
index 0000000..34c1bf7
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+node_modules
+.next
+.git
+.gitignore
+README.md
+.env*.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100755
index 0000000..95bbc15
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "extends": "next/core-web-vitals"
+}
+
diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000..d4dcaad
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,35 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
diff --git a/Dockerfile b/Dockerfile
new file mode 100755
index 0000000..ed55c7e
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,44 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Build Next.js
+RUN npm run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Copy standalone build files
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]
+
diff --git a/Dockerfile.dev b/Dockerfile.dev
new file mode 100755
index 0000000..369d713
--- /dev/null
+++ b/Dockerfile.dev
@@ -0,0 +1,17 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+
+# Install dependencies
+RUN npm install
+
+# Copy app files
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm", "run", "dev"]
+
diff --git a/PROJEKTINFORMATIONEN.md b/PROJEKTINFORMATIONEN.md
new file mode 100755
index 0000000..500961a
--- /dev/null
+++ b/PROJEKTINFORMATIONEN.md
@@ -0,0 +1,508 @@
+# doing-it.de - Projektinformationen
+
+## Überblick
+
+**doing-it.de** ist eine Plattform für IT-Weiterbildung und Schulungen, die sich an zwei Hauptzielgruppen richtet:
+1. **Quereinsteiger** - Personen ohne IT-Vorkenntnisse, die in die IT-Branche einsteigen möchten
+2. **Unternehmen** - Firmen, die ihre Mitarbeiter in IT-Themen schulen und interne IT-Kompetenzen aufbauen möchten
+
+Die Plattform ist ein gemeinsames Projekt von **hoerter-tech.de** und **matzefixit.de**.
+
+---
+
+## Unternehmensidentität
+
+### Mission
+doing-it.de wurde mit dem Ziel gegründet, IT-Weiterbildung für jeden zugänglich zu machen. Das Unternehmen glaubt daran, dass jeder – unabhängig von Vorkenntnissen – die Möglichkeit haben sollte, sich in der IT weiterzubilden und neue Karrierewege einzuschlagen.
+
+### Ansatz
+- **Individuell**: Maßgeschneiderte Schulungen auf spezifische Bedürfnisse zugeschnitten
+- **Praxisnah**: Lernen direkt an der realen IT-Infrastruktur
+- **Ergebnisorientiert**: Wissen wird sofort anwendbar und nachhaltig verankert
+- **Niveaubasiert**: Stufenweise Freischaltung von Inhalten für optimalen Lernerfolg
+
+### Kernwerte
+- Individuelle Betreuung
+- Praxisnähe durch Lernen an echter IT-Infrastruktur
+- Experten-Support durch erfahrene IT-Profis
+- Anerkannte Zertifizierungen
+- Niveaubasierte Lernsysteme
+
+---
+
+## Angebote für Quereinsteiger
+
+### Hauptmerkmale
+- **Keine Vorkenntnisse nötig**: Speziell für komplette Neulinge entwickelt
+- **Stufenweise Freischaltung**: Niveaubasierte Freischaltung von Inhalten
+- **Zertifizierungen**: Anerkannte Zertifizierungen nach erfolgreichem Abschluss
+- **Livetrainings**: Interaktive Sessions mit IT-Experten
+- **Chat-Support**: Schnelle Antworten von Experten bei Fragen
+
+### Verfügbare Kurse
+
+#### 1. IT-Grundlagen für Einsteiger
+- **Dauer**: 4-6 Wochen
+- **Niveau**: Anfänger
+- **Voraussetzungen**: Keine Vorkenntnisse nötig
+- **Zertifizierung**: IT-Grundlagen Zertifikat
+- **Module**:
+  - Computer-Grundlagen
+  - Betriebssysteme
+  - Netzwerke
+  - IT-Sicherheit
+
+#### 2. Python für Anfänger
+- **Dauer**: 6-8 Wochen
+- **Niveau**: Anfänger
+- **Voraussetzungen**: IT-Grundlagen empfohlen
+- **Zertifizierung**: Python Basics Zertifikat
+- **Module**:
+  - Python-Grundlagen
+  - Datenstrukturen
+  - Funktionen & Module
+  - Praxisprojekte
+
+#### 3. IT-Security Grundlagen
+- **Dauer**: 4-6 Wochen
+- **Niveau**: Anfänger
+- **Voraussetzungen**: IT-Grundlagen empfohlen
+- **Zertifizierung**: IT-Security Basics Zertifikat
+- **Module**:
+  - Sicherheitsgrundlagen
+  - Bedrohungen erkennen
+  - Schutzmaßnahmen
+  - Incident Response
+
+#### 4. Webentwicklung für Einsteiger
+- **Dauer**: 8-10 Wochen
+- **Niveau**: Anfänger bis Fortgeschritten
+- **Voraussetzungen**: IT-Grundlagen empfohlen
+- **Zertifizierung**: Web Development Basics Zertifikat
+- **Module**:
+  - HTML & CSS
+  - JavaScript Grundlagen
+  - Responsive Design
+  - Projektarbeit
+
+#### 5. Linux für Anfänger
+- **Dauer**: 6-8 Wochen
+- **Niveau**: Anfänger bis Fortgeschritten
+- **Voraussetzungen**: IT-Grundlagen empfohlen
+- **Zertifizierung**: Linux Basics Zertifikat
+- **Module**:
+  - Linux Installation
+  - Command Line
+  - Systemadministration
+  - Netzwerk-Konfiguration
+
+#### 6. Datenbanken Grundlagen
+- **Dauer**: 5-7 Wochen
+- **Niveau**: Anfänger bis Fortgeschritten
+- **Voraussetzungen**: IT-Grundlagen empfohlen
+- **Zertifizierung**: Database Basics Zertifikat
+- **Module**:
+  - Datenbank-Konzepte
+  - SQL Grundlagen
+  - Datenbankdesign
+  - Praxisprojekte
+
+#### 7. KI & Machine Learning Grundlagen
+- **Dauer**: 8-10 Wochen
+- **Niveau**: Anfänger bis Fortgeschritten
+- **Voraussetzungen**: Python-Grundlagen empfohlen
+- **Zertifizierung**: AI & ML Basics Zertifikat
+- **Module**:
+  - KI-Grundlagen
+  - Machine Learning Basics
+  - Neuronale Netze
+  - Praktische Anwendungen
+
+### Tools für Quereinsteiger
+
+#### Lernpfad-Finder
+Interaktives Tool, das Quereinsteigern hilft, den passenden Kurs zu finden. Beantwortet Fragen zu:
+- Hauptziel (Karrierewechsel, aktuelle Job-Anforderungen, persönliches Interesse, Gründung)
+- Interessensbereich (Programmierung, IT-Sicherheit, Systemadministration, Webentwicklung)
+- Verfügbare Zeit pro Woche
+- Vorkenntnisse
+
+---
+
+## Angebote für Unternehmen
+
+### Drei-Schritte-Prozess
+
+#### 1. Analyse der IT-Infrastruktur
+- **Infrastruktur-Erfassung**: Vollständige Dokumentation der IT-Landschaft (Server, Netzwerke, Software, Cloud-Services, Endgeräte)
+- **Sicherheitsanalyse**: Identifikation von Sicherheitslücken, veralteten Systemen und Compliance-Problemen
+- **Schulungsbedarfs-Analyse**: Ermittlung des konkreten Schulungsbedarfs der Mitarbeiter
+
+**Methoden**:
+- Vor-Ort-Begehungen
+- Interviews mit Mitarbeitern
+- Technische Scans
+- Dokumentenanalyse
+
+**Ergebnisse**:
+- IST-Dokumentation der IT-Infrastruktur
+- Schwachstellenbericht mit Prioritäten und Handlungsempfehlungen
+- Konkrete Handlungsempfehlungen für technische Maßnahmen und Schulungsbedarfe
+
+#### 2. Maßgeschneiderte Schulungskonzepte
+- Individuelle Schulungskonzepte basierend auf der Analyse
+- Zugeschnitten auf IT-Infrastruktur, Branche und Ziele
+- Lernen direkt an der eigenen IT-Infrastruktur
+
+#### 3. Aufbau interner Experten
+- Entwicklung eigener IT-Experten im Haus
+- Reduzierung langfristiger externer Kosten
+- Erhöhte IT-Sicherheit
+- Schnellere Reaktionszeiten bei Problemen
+
+### Schulungsthemen für Unternehmen
+
+#### 1. IT-Security für Mitarbeiter
+- **Dauer**: 1-2 Tage
+- **Niveau**: Grundlagen
+- **Inhalte**: Grundlagen der IT-Sicherheit, Erkennung von Phishing-Angriffen, sicheres Passwort-Management, Umgang mit sensiblen Daten
+
+#### 2. Effizienter Umgang mit Office-Software
+- **Dauer**: 1 Tag
+- **Niveau**: Grundlagen bis Fortgeschritten
+- **Inhalte**: Optimierung der täglichen Arbeit mit Microsoft Office, Google Workspace oder anderen Office-Suites, Tipps und Tricks für mehr Produktivität
+
+#### 3. Datenschutz DSGVO
+- **Dauer**: 2-3 Tage
+- **Niveau**: Grundlagen bis Experte
+- **Inhalte**: Umfassende Schulung zu Datenschutzbestimmungen, DSGVO-Compliance, korrekter Umgang mit personenbezogenen Daten
+
+#### 4. Cloud-Computing Grundlagen
+- **Dauer**: 3-5 Tage
+- **Niveau**: Grundlagen bis Fortgeschritten
+- **Inhalte**: Einführung in Cloud-Technologien, Nutzung von AWS, Azure oder Google Cloud, Migration und Verwaltung von Cloud-Ressourcen
+
+#### 5. Systemadministration
+- **Dauer**: 5-7 Tage
+- **Niveau**: Fortgeschritten
+- **Inhalte**: Grundlagen der Systemadministration für Windows- und Linux-Server, Verwaltung von Benutzern, Berechtigungen und Systemen
+
+#### 6. Netzwerktechnik
+- **Dauer**: 3-5 Tage
+- **Niveau**: Fortgeschritten
+- **Inhalte**: Grundlagen der Netzwerktechnik, TCP/IP, Routing, Switching, Netzwerk-Troubleshooting
+
+### Vorteile für Unternehmen
+
+#### Hauptvorteile
+- **Kosteneinsparung**: Reduzierung langfristiger externer IT-Kosten durch qualifizierte interne Mitarbeiter
+- **Schnellere Reaktionszeiten**: Interne Experten können Probleme schneller lösen
+- **Erhöhte IT-Sicherheit**: Geschulte Mitarbeiter erkennen Sicherheitsrisiken früher
+- **Innovation fördern**: Gut geschulte Teams sind innovativer und adaptieren neue Technologien schneller
+- **Maßgeschneiderte Programme**: Jedes Schulungsprogramm wird individuell auf Unternehmen, Branche und Ziele zugeschnitten
+- **Fortschritts-Tracking**: Verfolgung des Lernfortschritts und Messung des ROI
+
+### Tools für Unternehmen
+
+#### IT-Infrastruktur-Checkliste
+Interaktives Tool zur ersten Einschätzung der IT-Sicherheit. Prüft:
+- Backup-Strategien
+- Software-Updates und Sicherheitspatches
+- IT-Sicherheitsmaßnahmen
+- Mitarbeiterschulungen in IT-Sicherheit
+- Dokumentation der IT-Infrastruktur
+
+Ergebnis: Gesamtrisiko-Bewertung und empfohlene Maßnahmen
+
+#### Schulungsbedarfs-Rechner
+Tool zur Schätzung des Schulungsumfangs basierend auf:
+- Anzahl der Mitarbeiter
+- Anzahl der Abteilungen
+- Gewählte Schulungsthemen
+
+Ergebnis: Geschätzter Umfang in Tagen, Wochen und Monaten
+
+---
+
+## Erfolgsgeschichten (Case Studies)
+
+### 1. IT-Sicherheit für mittelständisches Unternehmen
+- **Branche**: Produktion
+- **Herausforderung**: Wiederkehrende IT-Sicherheitsvorfälle, starke Abhängigkeit von externen IT-Dienstleistern, wenig IT-Wissen bei Mitarbeitern
+- **Lösung**: Umfassende IT-Infrastrukturanalyse, maßgeschneidertes Schulungskonzept in IT-Sicherheitsgrundlagen, Systemadministration und Notfallmaßnahmen
+- **Ergebnisse**:
+  - 40% Reduzierung externer IT-Kosten
+  - 60% weniger IT-Sicherheitsvorfälle
+  - 3 interne IT-Experten aufgebaut
+  - Reaktionszeit von 4 Stunden auf 30 Minuten reduziert
+
+### 2. Cloud-Migration und Schulung
+- **Branche**: IT-Dienstleistungen
+- **Herausforderung**: Migration von lokalen Servern auf Cloud-Lösungen ohne interne Cloud-Experten
+- **Lösung**: Analyse der bestehenden Infrastruktur, Migrationsstrategie, Schulungen parallel zur Migration
+- **Ergebnisse**:
+  - Erfolgreiche Migration ohne Ausfallzeiten
+  - 5 Mitarbeiter zu Cloud-Experten zertifiziert
+  - 30% Kosteneinsparung durch optimierte Cloud-Nutzung
+  - 100% der Mitarbeiter können neue Systeme selbstständig nutzen
+
+### 3. DSGVO-Compliance Schulung
+- **Branche**: Dienstleistungen
+- **Herausforderung**: DSGVO-konform werden ohne Datenschutz-Expertise
+- **Lösung**: Datenschutzanalyse, umfassendes Schulungsprogramm zu DSGVO-Grundlagen
+- **Ergebnisse**:
+  - Vollständige DSGVO-Compliance erreicht
+  - 2 Datenschutzbeauftragte intern ausgebildet
+  - Keine Datenschutzverstöße mehr
+  - Zertifizierung nach ISO 27001 vorbereitet
+
+---
+
+## Technische Details
+
+### Technologie-Stack
+- **Framework**: Next.js 14
+- **Sprache**: TypeScript
+- **Animationen**: Framer Motion
+- **Deployment**: Docker & Docker Compose
+- **Design**: Apple-inspiriertes Design
+- **Responsive**: Vollständig responsive für Mobile und Desktop
+
+### Kontaktinformationen
+- **E-Mail**: info@doing-it.de
+- **LinkedIn**: https://www.linkedin.com/company/doing-it
+- **Xing**: https://www.xing.com/companies/doing-it
+
+### Partner
+- **hoerter-tech.de**: https://hoerter-tech.de
+- **matzefixit.de**: https://matzefixit.de
+
+---
+
+## Rechtliche Seiten
+- Impressum
+- Datenschutzerklärung
+- AGB
+
+---
+
+# Empfehlungen für Medieninhalte
+
+## Bilder
+
+### Homepage (app/page.tsx)
+1. **Hero-Bereich**: 
+   - Modernes, professionelles Bild von Menschen, die an Computern arbeiten (diverse Gruppe)
+   - Alternativ: Abstraktes IT-Technologie-Bild mit Netzwerk-Visualisierung
+   - **Warum**: Visueller Einstieg, zeigt Zielgruppe und IT-Fokus
+
+2. **Features-Sektion**:
+   - Icons oder Illustrationen für die vier Hauptfeatures (Individuell, Stufenweise, Zertifiziert, Experten-Support)
+   - **Warum**: Unterstützt die visuelle Kommunikation der Kernwerte
+
+3. **Partners-Sektion**:
+   - Logos der Partner (hoerter-tech.de, matzefixit.de)
+   - **Warum**: Zeigt Vertrauenswürdigkeit und Partnerschaften
+
+### Quereinsteiger-Seite (app/quereinsteiger/page.tsx)
+1. **Hero-Bereich**:
+   - Bild von Quereinsteigern in verschiedenen Lebenssituationen (Karrierewechsel, Lernen)
+   - **Warum**: Identifikation der Zielgruppe mit der Zielgruppe
+
+2. **Lernpfad-Finder**:
+   - Illustration oder Infografik zum Lernpfad-Konzept
+   - **Warum**: Visualisiert den individuellen Lernweg
+
+3. **Kurskatalog** (app/quereinsteiger/kurse/page.tsx):
+   - Thumbnail-Bilder für jeden Kurs (z.B. Python-Logo, Linux-Pinguin, Webentwicklung-Illustration)
+   - **Warum**: Schnelle visuelle Orientierung im Kurskatalog
+
+### Unternehmen-Seite (app/unternehmen/page.tsx)
+1. **Hero-Bereich**:
+   - Professionelles Bild von Team-Schulungen oder Büro-Umgebung
+   - **Warum**: Zeigt Business-Fokus und Team-Dynamik
+
+2. **Prozess-Visualisierung**:
+   - Infografik oder Diagramm des 3-Schritte-Prozesses (Analyse → Schulung → Experten)
+   - **Warum**: Erklärt den Prozess visuell und einprägsam
+
+3. **Schulungsthemen** (app/unternehmen/schulungsthemen/page.tsx):
+   - Icons oder Illustrationen für jedes Schulungsthema
+   - **Warum**: Schnelle visuelle Zuordnung der Themen
+
+### IT-Infrastrukturanalyse (app/unternehmen/it-infrastrukturanalyse/page.tsx)
+1. **Analyse-Methoden**:
+   - Fotos oder Illustrationen der verschiedenen Analysemethoden (Vor-Ort, Interviews, Scans)
+   - **Warum**: Zeigt Professionalität und Methodik
+
+2. **Ergebnis-Visualisierung**:
+   - Beispiel-Diagramme oder Infografiken zu IST-Dokumentation, Schwachstellenbericht
+   - **Warum**: Zeigt konkrete Ergebnisse und Mehrwert
+
+### Über uns (app/ueber-uns/page.tsx)
+1. **Mission-Bereich**:
+   - Inspirierendes Bild, das IT-Weiterbildung für alle symbolisiert
+   - **Warum**: Unterstützt die Mission-Vision
+
+2. **Team-Bereich** (ohne Personen):
+   - Abstrakte Illustrationen oder Icons für verschiedene Expertisen (Sicherheit, Cloud, Administration, Pädagogik)
+   - **Warum**: Zeigt Expertise-Bereiche ohne Personen zu zeigen
+
+### Testimonials (app/testimonials/page.tsx)
+1. **Kundenstimmen**:
+   - Firmenlogos der zitierten Unternehmen (mit Genehmigung)
+   - **Warum**: Erhöht Glaubwürdigkeit und zeigt Referenzen
+
+### Case Studies (app/case-studies/page.tsx)
+1. **Erfolgsgeschichten**:
+   - Infografiken mit den wichtigsten Zahlen/Ergebnissen (z.B. "40% Kosteneinsparung")
+   - **Warum**: Visualisiert messbare Erfolge
+
+---
+
+## Videos
+
+### Homepage
+1. **Hero-Video** (optional):
+   - Kurzes (30-60 Sekunden) Einführungsvideo über doing-it.de
+   - Zeigt: Lernszenarien, Schulungen, Erfolgsmomente
+   - **Warum**: Starker visueller Einstieg, erhöht Engagement
+
+### Quereinsteiger-Bereich
+1. **Einführungsvideo**:
+   - "Wie funktioniert IT-Weiterbildung für Quereinsteiger?"
+   - Erklärt das niveaubasierte System und den Lernprozess
+   - **Warum**: Reduziert Barrieren für Neulinge
+
+2. **Kurs-Trailer**:
+   - Kurze Videos (1-2 Minuten) für jeden Kurs
+   - Zeigt: Kursinhalte, Lernziele, Praxisbeispiele
+   - **Warum**: Hilft bei der Kursauswahl, zeigt Praxisnähe
+
+3. **Erfolgsgeschichten**:
+   - Video-Interviews mit erfolgreichen Quereinsteigern (ohne Gesichter, nur Stimme + Animationen)
+   - **Warum**: Zeigt reale Erfolge und motiviert
+
+### Unternehmen-Bereich
+1. **Prozess-Erklärung**:
+   - Video, das den 3-Schritte-Prozess erklärt
+   - Zeigt: Analyse, Schulung, Ergebnisse
+   - **Warum**: Erklärt komplexen Prozess verständlich
+
+2. **Schulungsbeispiele**:
+   - Kurze Clips aus Schulungen (anonymisiert)
+   - Zeigt: Praxisnähe, Interaktion, Lernen an echter Infrastruktur
+   - **Warum**: Zeigt Qualität und Methodik
+
+3. **Kundenreferenzen**:
+   - Video-Statements von Unternehmen (ohne Personen, nur Stimme + Firmenlogo)
+   - **Warum**: Erhöht Vertrauen und zeigt Business-Erfolg
+
+### Tools-Bereich
+1. **Tool-Tutorials**:
+   - Kurze Erklärvideos für IT-Checkliste und Schulungsbedarfs-Rechner
+   - **Warum**: Erhöht Nutzung der Tools
+
+---
+
+## Downloadbare Dateien
+
+### Homepage
+1. **Kostenloser Leitfaden**: "IT-Weiterbildung für Quereinsteiger - Der komplette Guide"
+   - PDF mit Tipps, Kursübersicht, ersten Schritten
+   - **Warum**: Lead-Generierung, zeigt Expertise, hilft bei Entscheidung
+
+### Quereinsteiger-Bereich
+1. **Kursübersicht-PDF**:
+   - Übersicht aller Kurse mit Details, Dauer, Zertifizierungen
+   - **Warum**: Einfache Weitergabe, Offline-Referenz
+
+2. **Lernpfad-Guide**:
+   - PDF mit detaillierten Lernpfaden für verschiedene Karriereziele
+   - **Warum**: Hilft bei der Orientierung und Planung
+
+3. **Checkliste "Bereit für IT-Weiterbildung?"**:
+   - PDF-Checkliste zur Selbsteinschätzung
+   - **Warum**: Hilft bei der Entscheidung, zeigt Engagement
+
+### Unternehmen-Bereich
+1. **Whitepaper "IT-Schulungen für Unternehmen"**:
+   - Umfassendes PDF mit Best Practices, ROI-Berechnung, Fallstudien
+   - **Warum**: B2B-Lead-Generierung, zeigt Expertise, unterstützt Entscheidungsprozess
+
+2. **IT-Sicherheits-Checkliste (PDF)**:
+   - Erweiterte Version der Online-Checkliste als PDF
+   - **Warum**: Offline-Nutzung, Weitergabe im Unternehmen
+
+3. **Schulungsbedarfs-Analyse-Vorlage**:
+   - Excel- oder PDF-Vorlage zur internen Bedarfsanalyse
+   - **Warum**: Hilft Unternehmen bei der Vorbereitung, zeigt Professionalität
+
+4. **ROI-Rechner (Excel)**:
+   - Tool zur Berechnung des ROI von IT-Schulungen
+   - **Warum**: Unterstützt Business-Case, zeigt messbaren Wert
+
+### IT-Infrastrukturanalyse
+1. **Beispiel-IST-Dokumentation (anonymisiert)**:
+   - PDF-Beispiel einer IST-Dokumentation
+   - **Warum**: Zeigt Qualität und Umfang der Analyse
+
+2. **Beispiel-Schwachstellenbericht (anonymisiert)**:
+   - PDF-Beispiel eines Schwachstellenberichts
+   - **Warum**: Zeigt Professionalität und konkrete Ergebnisse
+
+### Kontakt-Seite
+1. **Kontakt-Formular-PDF**:
+   - Downloadbares Formular für detaillierte Anfragen
+   - **Warum**: Alternative zum Online-Formular, für komplexe Anfragen
+
+### Allgemein
+1. **Zertifikat-Beispiele**:
+   - PDF-Beispiele der angebotenen Zertifikate (ohne Namen)
+   - **Warum**: Zeigt Wert und Anerkennung der Zertifizierungen
+
+2. **FAQ-Dokument**:
+   - PDF mit häufig gestellten Fragen und Antworten
+   - **Warum**: Reduziert Support-Aufwand, hilft bei Entscheidung
+
+---
+
+## Zusätzliche Empfehlungen
+
+### Infografiken
+- **Lernpfad-Infografik**: Visuelle Darstellung verschiedener Karrierewege in der IT
+- **Prozess-Infografik**: 3-Schritte-Prozess für Unternehmen
+- **Statistik-Infografiken**: IT-Fachkräftemangel, Gehaltsentwicklung, Karrierechancen
+
+### Interaktive Elemente
+- **360°-Schulungsraum-Tour**: Virtuelle Tour durch einen Schulungsraum
+- **Interaktive IT-Infrastruktur-Karte**: Beispiel-Visualisierung einer IT-Infrastruktur
+
+### Social Media Assets
+- **Shareable Graphics**: Für LinkedIn, Xing, Facebook
+- **Kurs-Trailer für Social Media**: Kurze, prägnante Videos für Social-Media-Kanäle
+
+---
+
+## Priorisierung
+
+### Hoch (sofort umsetzbar)
+1. Hero-Bilder für alle Hauptseiten
+2. Kurs-Thumbnails für Kurskatalog
+3. Whitepaper "IT-Schulungen für Unternehmen" (PDF)
+4. Kostenloser Leitfaden für Quereinsteiger (PDF)
+5. Prozess-Infografik für Unternehmen
+
+### Mittel (nächste Phase)
+1. Kurs-Trailer-Videos
+2. Tool-Tutorial-Videos
+3. ROI-Rechner (Excel)
+4. Beispiel-Dokumentationen (anonymisiert)
+5. Infografiken zu Lernpfaden
+
+### Niedrig (langfristig)
+1. 360°-Schulungsraum-Tour
+2. Interaktive IT-Infrastruktur-Karte
+3. Video-Interviews mit Kunden
+4. Erweiterte Social-Media-Assets
+
diff --git a/README.md b/README.md
new file mode 100755
index 0000000..beef115
--- /dev/null
+++ b/README.md
@@ -0,0 +1,46 @@
+# doing-it - IT Weiterbildung & Schulungen
+
+Eine moderne Website für IT-Weiterbildung und Schulungen für Quereinsteiger und Unternehmen, gebaut im Apple-Design-Stil.
+
+## Features
+
+- 🎨 Apple-inspiriertes Design
+- 📱 Vollständig responsive für Mobile und Desktop
+- ⚡ Smooth Animationen mit Framer Motion
+- 🐳 Docker Compose Setup
+- 🚀 Next.js 14 mit TypeScript
+
+## Installation
+
+### Mit Docker Compose (Empfohlen)
+
+```bash
+docker-compose up --build
+```
+
+Die Website ist dann unter `http://localhost:3000` erreichbar.
+
+### Lokale Entwicklung
+
+```bash
+npm install
+npm run dev
+```
+
+## Seiten
+
+- **Homepage** (`/`) - Hauptseite mit Übersicht
+- **Quereinsteiger** (`/quereinsteiger`) - Informationen für IT-Neulinge
+- **Unternehmen** (`/unternehmen`) - Schulungsangebote für Unternehmen
+
+## Technologie-Stack
+
+- Next.js 14
+- TypeScript
+- Framer Motion
+- Docker & Docker Compose
+
+## Kontakt
+
+info@doing-it.de
+
diff --git a/app/agb/page.tsx b/app/agb/page.tsx
new file mode 100755
index 0000000..111cd43
--- /dev/null
+++ b/app/agb/page.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function AGB() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Allgemeine Geschäftsbedingungen</h1>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="legal-content"
+            >
+              <h2>1. Geltungsbereich</h2>
+              <p>
+                Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für alle Leistungen der doing-it.de 
+                im Bereich der IT-Weiterbildung und Schulungen. Abweichende, entgegenstehende oder 
+                ergänzende AGB des Kunden werden nicht Vertragsbestandteil, es sei denn, ihrer Geltung 
+                wird ausdrücklich schriftlich zugestimmt.
+              </p>
+
+              <h2>2. Vertragsgegenstand</h2>
+              <p>
+                doing-it.de bietet IT-Weiterbildungs- und Schulungsleistungen für Unternehmen und 
+                Quereinsteiger an. Der genaue Umfang der Leistungen ergibt sich aus der jeweiligen 
+                Vereinbarung oder dem gebuchten Kurs.
+              </p>
+
+              <h2>3. Vertragsabschluss</h2>
+              <p>
+                Der Vertrag kommt durch die schriftliche Bestätigung von doing-it.de oder durch die 
+                Durchführung der Leistung zustande. Mündliche Nebenabreden bedürfen der schriftlichen 
+                Bestätigung.
+              </p>
+
+              <h2>4. Preise und Zahlungsbedingungen</h2>
+              <p>
+                Alle Preise verstehen sich in Euro zuzüglich der gesetzlichen Mehrwertsteuer. Die 
+                Zahlung erfolgt nach Rechnungsstellung innerhalb der auf der Rechnung angegebenen Frist. 
+                Bei Verzug werden Verzugszinsen in Höhe von 9 Prozentpunkten über dem Basiszinssatz 
+                berechnet.
+              </p>
+
+              <h2>5. Leistungserbringung</h2>
+              <p>
+                doing-it.de erbringt die vereinbarten Leistungen mit der gebotenen Sorgfalt. Termine 
+                und Fristen sind nur dann verbindlich, wenn sie von doing-it.de schriftlich bestätigt 
+                wurden. Änderungen und Ergänzungen der Leistungen bedürfen der schriftlichen 
+                Vereinbarung.
+              </p>
+
+              <h2>6. Rücktritt und Kündigung</h2>
+              <p>
+                Der Kunde kann bis 14 Tage vor Beginn der Schulung kostenfrei zurücktreten. Bei 
+                späterem Rücktritt werden 50% der vereinbarten Vergütung fällig. Bei Rücktritt weniger 
+                als 7 Tage vor Beginn werden 100% der Vergütung fällig.
+              </p>
+
+              <h2>7. Haftung</h2>
+              <p>
+                doing-it.de haftet unbeschränkt für Vorsatz und grobe Fahrlässigkeit. Bei leichter 
+                Fahrlässigkeit haftet doing-it.de nur bei Verletzung einer wesentlichen 
+                Vertragspflicht, deren Erfüllung die ordnungsgemäße Durchführung des Vertrages 
+                überhaupt erst ermöglicht.
+              </p>
+
+              <h2>8. Datenschutz</h2>
+              <p>
+                doing-it.de verarbeitet personenbezogene Daten im Rahmen der gesetzlichen Bestimmungen. 
+                Nähere Informationen finden Sie in unserer Datenschutzerklärung.
+              </p>
+
+              <h2>9. Schlussbestimmungen</h2>
+              <p>
+                Es gilt deutsches Recht. Gerichtsstand ist der Sitz von doing-it.de, sofern der Kunde 
+                Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches 
+                Sondervermögen ist.
+              </p>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/case-studies/page.tsx b/app/case-studies/page.tsx
new file mode 100755
index 0000000..c19a675
--- /dev/null
+++ b/app/case-studies/page.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function CaseStudies() {
+  const caseStudies = [
+    {
+      title: 'IT-Sicherheit für mittelständisches Unternehmen',
+      company: 'Musterfirma GmbH',
+      industry: 'Produktion',
+      challenge: 'Das Unternehmen hatte wiederkehrende IT-Sicherheitsvorfälle und war stark von externen IT-Dienstleistern abhängig. Die Mitarbeiter hatten wenig IT-Wissen und konnten einfache Probleme nicht selbst lösen.',
+      solution: 'Wir führten eine umfassende IT-Infrastrukturanalyse durch, identifizierten kritische Schwachstellen und entwickelten ein maßgeschneidertes Schulungskonzept. Die Mitarbeiter wurden in IT-Sicherheitsgrundlagen, Systemadministration und Notfallmaßnahmen geschult.',
+      results: [
+        '40% Reduzierung externer IT-Kosten',
+        '60% weniger IT-Sicherheitsvorfälle',
+        '3 interne IT-Experten aufgebaut',
+        'Durchschnittliche Reaktionszeit bei Problemen von 4 Stunden auf 30 Minuten reduziert',
+      ],
+    },
+    {
+      title: 'Cloud-Migration und Schulung',
+      company: 'TechSolutions AG',
+      industry: 'IT-Dienstleistungen',
+      challenge: 'Das Unternehmen wollte von lokalen Servern auf Cloud-Lösungen migrieren, hatte aber keine internen Experten für Cloud-Technologien. Die Mitarbeiter waren mit den neuen Systemen überfordert.',
+      solution: 'Wir analysierten die bestehende Infrastruktur, entwickelten eine Migrationsstrategie und schulten das gesamte Team in Cloud-Technologien. Die Schulungen erfolgten parallel zur Migration, sodass die Mitarbeiter direkt an den neuen Systemen lernen konnten.',
+      results: [
+        'Erfolgreiche Migration ohne Ausfallzeiten',
+        '5 Mitarbeiter zu Cloud-Experten zertifiziert',
+        '30% Kosteneinsparung durch optimierte Cloud-Nutzung',
+        '100% der Mitarbeiter können die neuen Systeme selbstständig nutzen',
+      ],
+    },
+    {
+      title: 'DSGVO-Compliance Schulung',
+      company: 'Service GmbH',
+      industry: 'Dienstleistungen',
+      challenge: 'Das Unternehmen musste DSGVO-konform werden, hatte aber keine Expertise im Datenschutz. Die Mitarbeiter wussten nicht, wie sie mit personenbezogenen Daten umgehen sollten.',
+      solution: 'Wir führten eine Datenschutzanalyse durch, identifizierten Compliance-Lücken und entwickelten ein umfassendes Schulungsprogramm zu DSGVO-Grundlagen, Datenschutzbestimmungen und korrektem Umgang mit personenbezogenen Daten.',
+      results: [
+        'Vollständige DSGVO-Compliance erreicht',
+        '2 Datenschutzbeauftragte intern ausgebildet',
+        'Keine Datenschutzverstöße mehr',
+        'Zertifizierung nach ISO 27001 vorbereitet',
+      ],
+    },
+  ]
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Fallstudien</h1>
+            <p className="page-hero-subtitle">
+              Erfolgreiche Projekte im Detail
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Von der Herausforderung zum Erfolg</h2>
+              <p>
+                Erfahren Sie, wie wir Unternehmen dabei geholfen haben, ihre IT-Kompetenzen 
+                zu stärken und messbare Ergebnisse zu erzielen.
+              </p>
+            </motion.div>
+
+            <div style={{ marginTop: '80px' }}>
+              {caseStudies.map((study, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.2 }}
+                  className="feature-card-large"
+                  style={{ marginBottom: '60px', textAlign: 'left' }}
+                >
+                  <h2 style={{ fontSize: '32px', marginBottom: '10px' }}>{study.title}</h2>
+                  <p style={{ color: 'var(--color-text-secondary)', marginBottom: '30px' }}>
+                    {study.company} • {study.industry}
+                  </p>
+
+                  <h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Ausgangssituation</h3>
+                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '30px' }}>
+                    {study.challenge}
+                  </p>
+
+                  <h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Unsere Lösung</h3>
+                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '30px' }}>
+                    {study.solution}
+                  </p>
+
+                  <h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Erzielte Ergebnisse</h3>
+                  <ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px' }}>
+                    {study.results.map((result, i) => (
+                      <li key={i} style={{ marginBottom: '10px', color: 'var(--color-text-secondary)' }}>
+                        {result}
+                      </li>
+                    ))}
+                  </ul>
+                </motion.div>
+              ))}
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Ihr Erfolg könnte der nächste sein</h2>
+              <p>Lassen Sie uns gemeinsam Ihre IT-Herausforderungen lösen</p>
+              <Link href="/kontakt" className="btn btn-primary">
+                Jetzt Beratung anfragen
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/datenschutz/page.tsx b/app/datenschutz/page.tsx
new file mode 100755
index 0000000..4d93265
--- /dev/null
+++ b/app/datenschutz/page.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Datenschutz() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Datenschutzerklärung</h1>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="legal-content"
+            >
+              <h2>1. Datenschutz auf einen Blick</h2>
+              
+              <h3>Allgemeine Hinweise</h3>
+              <p>
+                Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren 
+                personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene 
+                Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
+              </p>
+
+              <h3>Datenerfassung auf dieser Website</h3>
+              <p>
+                Wer ist verantwortlich für die Datenerfassung auf dieser Website?<br />
+                Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen 
+                Kontaktdaten können Sie dem Abschnitt &ldquo;Hinweis zur Verantwortlichen Stelle&rdquo; in dieser 
+                Datenschutzerklärung entnehmen.
+              </p>
+
+              <h2>2. Hosting</h2>
+              <p>
+                Diese Website wird bei einem externen Dienstleister gehostet (Hoster). Die 
+                personenbezogenen Daten, die auf dieser Website erfasst werden, werden auf den 
+                Servern des Hosters gespeichert.
+              </p>
+
+              <h2>3. Allgemeine Hinweise und Pflichtinformationen</h2>
+              
+              <h3>Datenschutz</h3>
+              <p>
+                Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. 
+                Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen 
+                Datenschutzbestimmungen sowie dieser Datenschutzerklärung.
+              </p>
+
+              <h3>Hinweis zur verantwortlichen Stelle</h3>
+              <p>
+                Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:<br />
+                doing-it.de<br />
+                [Adresse]<br />
+                [PLZ Ort]<br />
+                E-Mail: info@doing-it.de
+              </p>
+
+              <h2>4. Kontaktformular</h2>
+              <p>
+                Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem 
+                Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung 
+                der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben 
+                wir nicht ohne Ihre Einwilligung weiter.
+              </p>
+
+              <h2>5. Ihre Rechte</h2>
+              <p>
+                Sie haben jederzeit das Recht, Auskunft über Ihre bei uns gespeicherten personenbezogenen 
+                Daten, deren Herkunft und Empfänger und den Zweck der Datenverarbeitung zu erhalten. 
+                Außerdem haben Sie ein Recht, die Berichtigung, Sperrung oder Löschung dieser Daten zu 
+                verlangen.
+              </p>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/globals.css b/app/globals.css
new file mode 100755
index 0000000..4f52e22
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,756 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --color-bg: #000000;
+  --color-text: #ffffff;
+  --color-text-secondary: #a1a1a6;
+  --color-accent: #ff3b30;
+  --color-accent-hover: #ff453a;
+  --color-accent-light: #ff6b6b;
+  --color-card: #1c1c1e;
+  --color-border: #38383a;
+  --color-red: #ff3b30;
+  --color-red-dark: #d70015;
+  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-primary);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+a {
+  color: var(--color-red);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: 0 40px;
+  }
+}
+
+/* Smooth scroll animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+}
+
+/* Navigation */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+}
+
+@media (min-width: 768px) {
+  .nav-container {
+    padding: 0 40px;
+    height: 52px;
+  }
+}
+
+.nav-logo {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text);
+  letter-spacing: -0.5px;
+}
+
+.nav-menu {
+  display: none;
+  gap: 30px;
+}
+
+@media (min-width: 768px) {
+  .nav-menu {
+    display: flex;
+  }
+}
+
+.nav-link {
+  color: var(--color-text);
+  font-size: 14px;
+  transition: opacity 0.3s ease;
+}
+
+.nav-link:hover {
+  opacity: 0.7;
+  color: var(--color-text);
+}
+
+.nav-link[href*="linkedin"]:hover {
+  opacity: 1;
+  color: var(--color-red);
+}
+
+.nav-toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+}
+
+@media (min-width: 768px) {
+  .nav-toggle {
+    display: none;
+  }
+}
+
+.nav-toggle span {
+  width: 22px;
+  height: 2px;
+  background: var(--color-text);
+  transition: all 0.3s ease;
+  display: block;
+}
+
+.nav-toggle span.open:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.nav-toggle span.open:nth-child(2) {
+  opacity: 0;
+}
+
+.nav-toggle span.open:nth-child(3) {
+  transform: rotate(-45deg) translate(7px, -6px);
+}
+
+.nav-mobile {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.95);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@media (min-width: 768px) {
+  .nav-mobile {
+    display: none;
+  }
+}
+
+.nav-mobile-link {
+  padding: 15px 0;
+  color: var(--color-text);
+  font-size: 17px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.nav-mobile-link:last-child {
+  border-bottom: none;
+}
+
+/* Hero Section */
+.hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 100px 20px 60px;
+  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
+}
+
+.hero-content {
+  max-width: 800px;
+}
+
+.hero-title {
+  font-size: 56px;
+  font-weight: 600;
+  letter-spacing: -1.5px;
+  margin-bottom: 20px;
+  background: linear-gradient(180deg, #ffffff 0%, #a0a0a0 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@media (min-width: 768px) {
+  .hero-title {
+    font-size: 80px;
+  }
+}
+
+.hero-subtitle {
+  font-size: 21px;
+  color: var(--color-text-secondary);
+  margin-bottom: 40px;
+  line-height: 1.5;
+}
+
+@media (min-width: 768px) {
+  .hero-subtitle {
+    font-size: 28px;
+  }
+}
+
+.hero-buttons {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Buttons */
+.btn {
+  display: inline-block;
+  padding: 12px 24px;
+  border-radius: 22px;
+  font-size: 17px;
+  font-weight: 400;
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: none;
+}
+
+.btn-primary {
+  background: var(--color-red);
+  color: white;
+  border: none;
+}
+
+.btn-primary:hover {
+  background: var(--color-accent-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(255, 59, 48, 0.4);
+  color: white;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--color-red);
+  border: 1px solid var(--color-red);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 59, 48, 0.1);
+  color: var(--color-red);
+  border-color: var(--color-accent-hover);
+  transform: translateY(-2px);
+}
+
+/* Features Section */
+.features {
+  padding: 100px 0;
+  background: var(--color-bg);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 80px;
+}
+
+.section-header h2 {
+  font-size: 48px;
+  font-weight: 600;
+  letter-spacing: -1.2px;
+  margin-bottom: 20px;
+  color: var(--color-text);
+}
+
+@media (min-width: 768px) {
+  .section-header h2 {
+    font-size: 64px;
+    letter-spacing: -1.5px;
+  }
+}
+
+.section-header p {
+  font-size: 21px;
+  color: var(--color-text-secondary);
+  letter-spacing: -0.3px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 30px;
+}
+
+@media (min-width: 768px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .features-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.feature-card {
+  background: var(--color-card);
+  border-radius: 20px;
+  padding: 45px 35px;
+  text-align: center;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.feature-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 24px 48px rgba(255, 59, 48, 0.15);
+  border-color: rgba(255, 59, 48, 0.2);
+  background: #1f1f21;
+}
+
+.feature-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.feature-card h3 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  letter-spacing: -0.5px;
+  color: var(--color-text);
+}
+
+.feature-card p {
+  font-size: 17px;
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+  letter-spacing: -0.1px;
+}
+
+.feature-card-large {
+  background: var(--color-card);
+  border-radius: 20px;
+  padding: 60px 50px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-bottom: 40px;
+}
+
+.feature-card-large:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 24px 48px rgba(255, 59, 48, 0.15);
+  border-color: rgba(255, 59, 48, 0.2);
+  background: #1f1f21;
+}
+
+.feature-card-large h3 {
+  font-size: 32px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  letter-spacing: -0.8px;
+  color: var(--color-text);
+}
+
+.feature-card-large p {
+  font-size: 19px;
+  color: var(--color-text-secondary);
+  line-height: 1.8;
+  letter-spacing: -0.2px;
+}
+
+.feature-number {
+  font-size: 72px;
+  font-weight: 700;
+  color: var(--color-red);
+  opacity: 0.15;
+  margin-bottom: 30px;
+  line-height: 1;
+  letter-spacing: -2px;
+  transition: opacity 0.3s ease;
+}
+
+.feature-card-large:hover .feature-number {
+  opacity: 0.25;
+}
+
+/* Page Hero */
+.page-hero {
+  padding: 140px 20px 80px;
+  text-align: center;
+  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
+}
+
+.page-hero h1 {
+  font-size: 48px;
+  font-weight: 600;
+  letter-spacing: -1px;
+  margin-bottom: 20px;
+}
+
+@media (min-width: 768px) {
+  .page-hero h1 {
+    font-size: 64px;
+  }
+}
+
+.page-hero-subtitle {
+  font-size: 21px;
+  color: var(--color-text-secondary);
+}
+
+@media (min-width: 768px) {
+  .page-hero-subtitle {
+    font-size: 28px;
+  }
+}
+
+/* Page Content */
+.page-content {
+  padding: 80px 0;
+}
+
+.content-block {
+  margin-bottom: 60px;
+  text-align: center;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.content-block h2 {
+  font-size: 40px;
+  font-weight: 600;
+  letter-spacing: -1px;
+  margin-bottom: 25px;
+}
+
+@media (min-width: 768px) {
+  .content-block h2 {
+    font-size: 56px;
+  }
+}
+
+.content-block p {
+  font-size: 19px;
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+}
+
+.cta-section {
+  text-align: center;
+  padding: 80px 20px;
+  margin-top: 80px;
+  background: var(--color-card);
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.cta-section h2 {
+  font-size: 40px;
+  font-weight: 600;
+  letter-spacing: -1px;
+  margin-bottom: 15px;
+}
+
+@media (min-width: 768px) {
+  .cta-section h2 {
+    font-size: 56px;
+  }
+}
+
+.cta-section p {
+  font-size: 21px;
+  color: var(--color-text-secondary);
+  margin-bottom: 40px;
+}
+
+/* Footer */
+.footer {
+  background: var(--color-card);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 60px 0 30px;
+  margin-top: 100px;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 40px;
+  margin-bottom: 40px;
+}
+
+@media (min-width: 768px) {
+  .footer-content {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .footer-content {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.footer-section h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  letter-spacing: -0.5px;
+}
+
+.footer-section h4 {
+  font-size: 17px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  color: var(--color-text-secondary);
+}
+
+.footer-section p {
+  font-size: 17px;
+  color: var(--color-text-secondary);
+  margin-bottom: 10px;
+}
+
+.footer-section a {
+  display: block;
+  font-size: 17px;
+  color: var(--color-text-secondary);
+  margin-bottom: 10px;
+  transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+  color: var(--color-accent);
+}
+
+.footer-social {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-bottom p {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+/* CTA Hero Section */
+.cta-hero {
+  padding: 100px 0;
+  background: var(--color-card);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Partners Section */
+.partners-section {
+  padding: 80px 0;
+  background: var(--color-bg);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: center;
+}
+
+.partners-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.cta-hero-content {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.cta-hero-content h2 {
+  font-size: 48px;
+  font-weight: 600;
+  letter-spacing: -1px;
+  margin-bottom: 20px;
+}
+
+@media (min-width: 768px) {
+  .cta-hero-content h2 {
+    font-size: 64px;
+  }
+}
+
+.cta-hero-content p {
+  font-size: 21px;
+  color: var(--color-text-secondary);
+  margin-bottom: 40px;
+}
+
+/* Contact Form */
+.contact-form {
+  max-width: 600px;
+  margin: 0 auto;
+  background: var(--color-card);
+  padding: 40px;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.form-group {
+  margin-bottom: 25px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 17px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: var(--color-text);
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 17px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  color: var(--color-text);
+  font-family: var(--font-primary);
+  transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.form-group textarea {
+  min-height: 150px;
+  resize: vertical;
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.contact-info {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 30px;
+  margin-top: 60px;
+}
+
+@media (min-width: 768px) {
+  .contact-info {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.contact-info-item {
+  text-align: center;
+  padding: 30px;
+  background: var(--color-card);
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.contact-info-item h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.contact-info-item p,
+.contact-info-item a {
+  font-size: 17px;
+  color: var(--color-text-secondary);
+}
+
+/* Legal Pages */
+.legal-content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  background: var(--color-card);
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.legal-content h2 {
+  font-size: 32px;
+  font-weight: 600;
+  margin-top: 40px;
+  margin-bottom: 20px;
+  letter-spacing: -0.5px;
+}
+
+.legal-content h2:first-child {
+  margin-top: 0;
+}
+
+.legal-content h3 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 30px;
+  margin-bottom: 15px;
+}
+
+.legal-content p {
+  font-size: 17px;
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+  margin-bottom: 15px;
+}
+
+.legal-content ul {
+  margin-left: 20px;
+  margin-bottom: 15px;
+}
+
+.legal-content li {
+  font-size: 17px;
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+  margin-bottom: 10px;
+}
+
diff --git a/app/impressum/page.tsx b/app/impressum/page.tsx
new file mode 100755
index 0000000..088ee37
--- /dev/null
+++ b/app/impressum/page.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Impressum() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Impressum</h1>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="legal-content"
+            >
+              <h2>Angaben gemäß § 5 TMG</h2>
+              <p>
+                doing-it.de<br />
+                [Ihre Firmenadresse]<br />
+                [PLZ Ort]
+              </p>
+
+              <h2>Kontakt</h2>
+              <p>
+                Telefon: [Telefonnummer]<br />
+                E-Mail: info@doing-it.de
+              </p>
+
+              <h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
+              <p>
+                [Name des Verantwortlichen]<br />
+                [Adresse]<br />
+                [PLZ Ort]
+              </p>
+
+              <h2>Haftungsausschluss</h2>
+              
+              <h3>Haftung für Inhalte</h3>
+              <p>
+                Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, 
+                Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. 
+                Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten 
+                nach den allgemeinen Gesetzen verantwortlich.
+              </p>
+
+              <h3>Haftung für Links</h3>
+              <p>
+                Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen 
+                Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. 
+                Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber 
+                der Seiten verantwortlich.
+              </p>
+
+              <h3>Urheberrecht</h3>
+              <p>
+                Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen 
+                dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art 
+                der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen 
+                Zustimmung des jeweiligen Autors bzw. Erstellers.
+              </p>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/kontakt/page.tsx b/app/kontakt/page.tsx
new file mode 100755
index 0000000..4f29d66
--- /dev/null
+++ b/app/kontakt/page.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Kontakt() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    subject: '',
+    message: '',
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // In production, this would send the form data to a backend
+    window.location.href = `mailto:info@doing-it.de?subject=${encodeURIComponent(formData.subject)}&body=${encodeURIComponent(`Name: ${formData.name}\nE-Mail: ${formData.email}\n\nNachricht:\n${formData.message}`)}`
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    })
+  }
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        {/* Hero Section */}
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Kontakt</h1>
+            <p className="page-hero-subtitle">
+              Wir freuen uns auf Ihre Nachricht
+            </p>
+          </motion.div>
+        </section>
+
+        {/* Contact Section */}
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <form className="contact-form" onSubmit={handleSubmit}>
+                <div className="form-group">
+                  <label htmlFor="name">Name *</label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    required
+                    value={formData.name}
+                    onChange={handleChange}
+                    placeholder="Ihr Name"
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="email">E-Mail *</label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    required
+                    value={formData.email}
+                    onChange={handleChange}
+                    placeholder="ihre.email@beispiel.de"
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="subject">Betreff *</label>
+                  <input
+                    type="text"
+                    id="subject"
+                    name="subject"
+                    required
+                    value={formData.subject}
+                    onChange={handleChange}
+                    placeholder="Betreff Ihrer Nachricht"
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="message">Nachricht *</label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    required
+                    value={formData.message}
+                    onChange={handleChange}
+                    placeholder="Ihre Nachricht an uns..."
+                  />
+                </div>
+
+                <button type="submit" className="btn btn-primary" style={{ width: '100%' }}>
+                  Nachricht senden
+                </button>
+              </form>
+
+              <div className="contact-info">
+                <div className="contact-info-item">
+                  <h3>E-Mail</h3>
+                  <a href="mailto:info@doing-it.de">info@doing-it.de</a>
+                </div>
+                <div className="contact-info-item">
+                  <h3>Kontakt</h3>
+                  <p>Wir melden uns schnellstmöglich bei Ihnen zurück.</p>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100755
index 0000000..752b879
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,39 @@
+import type { Metadata } from 'next'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'doing-it - IT Weiterbildung & Schulungen',
+  description: 'IT Weiterbildung und Schulungen für Quereinsteiger und Unternehmen',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="de">
+      <body>
+        {children}
+        {/* Live Chat Integration - Platzhalter für Tawk.to, Crisp oder Intercom */}
+        {/* 
+        <script dangerouslySetInnerHTML={{
+          __html: `
+            // Beispiel für Tawk.to Integration:
+            // var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
+            // (function(){
+            //   var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
+            //   s1.async=true;
+            //   s1.src='https://embed.tawk.to/YOUR_PROPERTY_ID/YOUR_WIDGET_ID';
+            //   s1.charset='UTF-8';
+            //   s1.setAttribute('crossorigin','*');
+            //   s0.parentNode.insertBefore(s1,s0);
+            // })();
+          `
+        }} />
+        */}
+      </body>
+    </html>
+  )
+}
+
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100755
index 0000000..5106819
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,189 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Home() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        {/* Hero Section */}
+        <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">doing-it</h1>
+            <p className="hero-subtitle">
+              IT Weiterbildung und Schulungen<br />
+              für Quereinsteiger und Unternehmen
+            </p>
+            <div className="hero-buttons">
+              <Link href="/quereinsteiger" className="btn btn-primary">
+                Jetzt durchstarten
+              </Link>
+              <Link href="/unternehmen" className="btn btn-secondary">
+                IT-Analyse anfordern
+              </Link>
+            </div>
+          </motion.div>
+        </section>
+
+        {/* Features Section */}
+        <section className="features">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="section-header"
+            >
+              <h2>Warum doing-it?</h2>
+              <p>Individuell, niveaubasiert, zertifiziert – mit Experten-Support</p>
+            </motion.div>
+
+            <div className="features-grid">
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">🎯</div>
+                <h3>Individuell</h3>
+                <p>Maßgeschneiderte Schulungen auf Ihre Bedürfnisse zugeschnitten</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">📚</div>
+                <h3>Stufenweise</h3>
+                <p>Niveaubasierte Freischaltung von Inhalten für optimalen Lernerfolg</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">💼</div>
+                <h3>Zertifiziert</h3>
+                <p>Anerkannte Zertifizierungen für Ihre Karriere</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">👥</div>
+                <h3>Experten-Support</h3>
+                <p>Livetrainings und Chats mit IT-Experten bei Fragen</p>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="cta-hero">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-hero-content"
+            >
+              <h2>Bereit für den nächsten Schritt?</h2>
+              <p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p>
+              <div className="hero-buttons">
+                <Link href="/kontakt" className="btn btn-primary">
+                  Jetzt Kontakt aufnehmen
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Partners Section */}
+        <section className="partners-section">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="partners-content"
+            >
+              <p style={{ fontSize: '15px', color: 'var(--color-text-secondary)', marginBottom: '20px', textTransform: 'uppercase', letterSpacing: '1px' }}>
+                Partner-Projekt
+              </p>
+              <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)', marginBottom: '30px', maxWidth: '600px', margin: '0 auto 30px' }}>
+                doing-it.de ist ein gemeinsames Projekt von{' '}
+                <a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
+                  hoerter-tech.de
+                </a>
+                {' '}und{' '}
+                <a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
+                  matzefixit.de
+                </a>
+                .
+              </p>
+              <div style={{ display: 'flex', gap: '40px', justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}>
+                <a 
+                  href="https://hoerter-tech.de" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  style={{ 
+                    color: 'var(--color-text-secondary)', 
+                    fontSize: '17px',
+                    transition: 'color 0.3s ease',
+                    textDecoration: 'none'
+                  }}
+                  onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
+                  onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
+                >
+                  hoerter-tech.de
+                </a>
+                <span style={{ color: 'var(--color-text-secondary)', fontSize: '20px' }}>×</span>
+                <a 
+                  href="https://matzefixit.de" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  style={{ 
+                    color: 'var(--color-text-secondary)', 
+                    fontSize: '17px',
+                    transition: 'color 0.3s ease',
+                    textDecoration: 'none'
+                  }}
+                  onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
+                  onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
+                >
+                  matzefixit.de
+                </a>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/quereinsteiger/kurse/[id]/page.tsx b/app/quereinsteiger/kurse/[id]/page.tsx
new file mode 100755
index 0000000..0b23cb5
--- /dev/null
+++ b/app/quereinsteiger/kurse/[id]/page.tsx
@@ -0,0 +1,317 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function KursDetail() {
+  const params = useParams()
+  const courseId = parseInt(params.id as string)
+
+  const courses = [
+    {
+      id: 1,
+      title: 'IT-Grundlagen für Einsteiger',
+      description: 'Der perfekte Einstieg in die IT-Welt. Lernen Sie die Grundlagen von Computern, Betriebssystemen, Netzwerken und IT-Sicherheit.',
+      longDescription: 'Dieser Kurs ist speziell für absolute Anfänger konzipiert, die noch keine Erfahrung mit IT haben. Sie lernen Schritt für Schritt die Grundlagen kennen und werden nicht überfordert. Unser niveaubasiertes System führt Sie sicher durch alle Module.',
+      duration: '4-6 Wochen',
+      level: 'Anfänger',
+      prerequisites: 'Keine Vorkenntnisse nötig',
+      certification: 'IT-Grundlagen Zertifikat',
+      modules: [
+        { name: 'Computer-Grundlagen', description: 'Verstehen Sie, wie Computer funktionieren, Hardware-Komponenten und deren Zusammenwirken.' },
+        { name: 'Betriebssysteme', description: 'Lernen Sie Windows, macOS und Linux kennen und verstehen Sie deren Unterschiede.' },
+        { name: 'Netzwerke', description: 'Grundlagen der Netzwerktechnik, Internet, LAN, WLAN und Netzwerk-Sicherheit.' },
+        { name: 'IT-Sicherheit', description: 'Grundlagen der IT-Sicherheit, Passwörter, Virenschutz und sichere Nutzung des Internets.' },
+      ],
+      learningGoals: [
+        'Verständnis der grundlegenden IT-Konzepte',
+        'Sicherer Umgang mit Betriebssystemen',
+        'Grundkenntnisse in Netzwerktechnik',
+        'Bewusstsein für IT-Sicherheit',
+      ],
+    },
+    {
+      id: 2,
+      title: 'Python für Anfänger',
+      description: 'Lernen Sie Programmieren mit Python – einer der beliebtesten und zugänglichsten Programmiersprachen. Perfekt für Einsteiger.',
+      longDescription: 'Python ist die ideale Programmiersprache für Einsteiger. In diesem Kurs lernen Sie von Grund auf, wie man programmiert. Sie schreiben Ihre ersten Programme, arbeiten mit Daten und erstellen praktische Anwendungen.',
+      duration: '6-8 Wochen',
+      level: 'Anfänger',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Python Basics Zertifikat',
+      modules: [
+        { name: 'Python-Grundlagen', description: 'Syntax, Variablen, Datentypen und erste Programme schreiben.' },
+        { name: 'Datenstrukturen', description: 'Listen, Dictionaries, Tupel und Sets verstehen und anwenden.' },
+        { name: 'Funktionen & Module', description: 'Eigene Funktionen erstellen, Module nutzen und Code organisieren.' },
+        { name: 'Praxisprojekte', description: 'Anwendung des Gelernten in realen Projekten wie einem Taschenrechner oder einem einfachen Spiel.' },
+      ],
+      learningGoals: [
+        'Grundlegende Python-Programmierung beherrschen',
+        'Eigene Programme entwickeln können',
+        'Code lesen und verstehen',
+        'Probleme algorithmisch lösen',
+      ],
+    },
+    {
+      id: 3,
+      title: 'IT-Security Grundlagen',
+      description: 'Verstehen Sie die Grundlagen der IT-Sicherheit. Lernen Sie, wie Sie sich und andere vor Cyber-Bedrohungen schützen.',
+      longDescription: 'IT-Sicherheit wird immer wichtiger. In diesem Kurs lernen Sie die Grundlagen der Cybersecurity kennen, erkennen Bedrohungen und wissen, wie Sie sich schützen können.',
+      duration: '4-6 Wochen',
+      level: 'Anfänger',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'IT-Security Basics Zertifikat',
+      modules: [
+        { name: 'Sicherheitsgrundlagen', description: 'Grundlegende Konzepte der IT-Sicherheit, Bedrohungsmodelle und Sicherheitsprinzipien.' },
+        { name: 'Bedrohungen erkennen', description: 'Phishing, Malware, Social Engineering und andere Bedrohungen erkennen und verstehen.' },
+        { name: 'Schutzmaßnahmen', description: 'Firewalls, Antivirus, Verschlüsselung und andere Schutzmechanismen.' },
+        { name: 'Incident Response', description: 'Was tun bei einem Sicherheitsvorfall? Grundlagen des Incident Managements.' },
+      ],
+      learningGoals: [
+        'IT-Sicherheitsbedrohungen erkennen',
+        'Schutzmaßnahmen verstehen und anwenden',
+        'Sicherheitsbewusstsein entwickeln',
+        'Grundlagen des Incident Response',
+      ],
+    },
+    {
+      id: 4,
+      title: 'Webentwicklung für Einsteiger',
+      description: 'Erstellen Sie Ihre ersten Webseiten mit HTML, CSS und JavaScript. Lernen Sie die Grundlagen der modernen Webentwicklung.',
+      longDescription: 'Webentwicklung ist einer der zugänglichsten Einstiege in die IT. In diesem Kurs erstellen Sie Ihre ersten Webseiten und lernen die drei Grundpfeiler der Webentwicklung kennen.',
+      duration: '8-10 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Web Development Basics Zertifikat',
+      modules: [
+        { name: 'HTML & CSS', description: 'Struktur und Styling von Webseiten, Layouts erstellen und responsive Design.' },
+        { name: 'JavaScript Grundlagen', description: 'Programmierung im Browser, DOM-Manipulation und erste interaktive Elemente.' },
+        { name: 'Responsive Design', description: 'Webseiten für alle Geräte optimieren, Mobile-First-Ansatz.' },
+        { name: 'Projektarbeit', description: 'Erstellen Sie Ihre eigene Webseite als Abschlussprojekt.' },
+      ],
+      learningGoals: [
+        'HTML, CSS und JavaScript beherrschen',
+        'Responsive Webseiten erstellen',
+        'Moderne Webentwicklung verstehen',
+        'Eigene Webprojekte umsetzen',
+      ],
+    },
+    {
+      id: 5,
+      title: 'Linux für Anfänger',
+      description: 'Lernen Sie Linux von Grund auf. Von der Installation bis zur Systemadministration – alles, was Sie wissen müssen.',
+      longDescription: 'Linux ist das Rückgrat vieler IT-Systeme. In diesem Kurs lernen Sie Linux von Grund auf kennen und werden fit für die Systemadministration.',
+      duration: '6-8 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Linux Basics Zertifikat',
+      modules: [
+        { name: 'Linux Installation', description: 'Linux installieren, verschiedene Distributionen kennenlernen und erste Schritte.' },
+        { name: 'Command Line', description: 'Terminal beherrschen, wichtige Befehle und Shell-Scripting Grundlagen.' },
+        { name: 'Systemadministration', description: 'Benutzerverwaltung, Berechtigungen, Prozesse und Dienste verwalten.' },
+        { name: 'Netzwerk-Konfiguration', description: 'Netzwerke konfigurieren, Firewall einrichten und Netzwerk-Troubleshooting.' },
+      ],
+      learningGoals: [
+        'Linux-Systeme verstehen und bedienen',
+        'Command Line sicher nutzen',
+        'Grundlagen der Systemadministration',
+        'Linux-Netzwerke konfigurieren',
+      ],
+    },
+    {
+      id: 6,
+      title: 'Datenbanken Grundlagen',
+      description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
+      longDescription: 'Datenbanken sind das Herzstück vieler Anwendungen. In diesem Kurs lernen Sie, wie Datenbanken funktionieren und wie Sie mit SQL arbeiten.',
+      duration: '5-7 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Database Basics Zertifikat',
+      modules: [
+        { name: 'Datenbank-Konzepte', description: 'Relationale Datenbanken, Tabellen, Beziehungen und Normalisierung verstehen.' },
+        { name: 'SQL Grundlagen', description: 'SELECT, INSERT, UPDATE, DELETE und weitere wichtige SQL-Befehle.' },
+        { name: 'Datenbankdesign', description: 'Eigene Datenbanken entwerfen, ER-Modelle erstellen und optimieren.' },
+        { name: 'Praxisprojekte', description: 'Anwendung des Gelernten in praktischen Projekten mit echten Datenbanken.' },
+      ],
+      learningGoals: [
+        'Datenbanken verstehen und nutzen',
+        'SQL sicher beherrschen',
+        'Datenbanken entwerfen können',
+        'Praktische Datenbankprojekte umsetzen',
+      ],
+    },
+    {
+      id: 7,
+      title: 'KI & Machine Learning Grundlagen',
+      description: 'Lernen Sie die Grundlagen der Künstlichen Intelligenz und des Machine Learning. Verstehen Sie, wie moderne KI-Systeme funktionieren.',
+      longDescription: 'Künstliche Intelligenz und Machine Learning sind die Zukunft der Technologie. In diesem Kurs lernen Sie die Grundlagen kennen und verstehen, wie moderne KI-Systeme funktionieren. Sie arbeiten mit praktischen Beispielen und erstellen Ihre ersten Machine-Learning-Modelle.',
+      duration: '8-10 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'Python-Grundlagen empfohlen',
+      certification: 'AI & ML Basics Zertifikat',
+      modules: [
+        { name: 'KI-Grundlagen', description: 'Was ist Künstliche Intelligenz? Geschichte, Konzepte und aktuelle Anwendungen der KI.' },
+        { name: 'Machine Learning Basics', description: 'Supervised Learning, Unsupervised Learning, Regression und Klassifikation verstehen.' },
+        { name: 'Neuronale Netze', description: 'Einführung in neuronale Netze, Deep Learning und moderne KI-Architekturen.' },
+        { name: 'Praktische Anwendungen', description: 'Eigene Machine-Learning-Modelle erstellen, trainieren und evaluieren mit Python und TensorFlow.' },
+      ],
+      learningGoals: [
+        'Grundlagen der KI und des Machine Learning verstehen',
+        'Machine-Learning-Modelle entwickeln können',
+        'Neuronale Netze und Deep Learning kennenlernen',
+        'Praktische KI-Anwendungen umsetzen',
+      ],
+    },
+  ]
+
+  const course = courses.find(c => c.id === courseId)
+
+  if (!course) {
+    return (
+      <>
+        <Navigation />
+        <main>
+          <section className="page-hero">
+            <div className="container">
+              <h1>Kurs nicht gefunden</h1>
+              <p className="page-hero-subtitle">Der angeforderte Kurs existiert nicht.</p>
+            </div>
+          </section>
+          <section className="page-content">
+            <div className="container">
+              <Link href="/quereinsteiger/kurse" className="btn btn-primary">
+                Zurück zum Kurskatalog
+              </Link>
+            </div>
+          </section>
+        </main>
+        <Footer />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>{course.title}</h1>
+            <p className="page-hero-subtitle">
+              {course.description}
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+              style={{ textAlign: 'left', maxWidth: '100%' }}
+            >
+              <h2>Kursbeschreibung</h2>
+              <p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '40px' }}>
+                {course.longDescription}
+              </p>
+
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginBottom: '40px' }}>
+                <div className="feature-card" style={{ textAlign: 'left' }}>
+                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Dauer</h3>
+                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.duration}</p>
+                </div>
+                <div className="feature-card" style={{ textAlign: 'left' }}>
+                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Niveau</h3>
+                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.level}</p>
+                </div>
+                <div className="feature-card" style={{ textAlign: 'left' }}>
+                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Voraussetzungen</h3>
+                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.prerequisites}</p>
+                </div>
+                <div className="feature-card" style={{ textAlign: 'left' }}>
+                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Zertifizierung</h3>
+                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.certification}</p>
+                </div>
+              </div>
+
+              <h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Lernziele</h2>
+              <ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px', marginBottom: '40px', color: 'var(--color-text-secondary)' }}>
+                {course.learningGoals.map((goal, i) => (
+                  <li key={i} style={{ marginBottom: '10px' }}>{goal}</li>
+                ))}
+              </ul>
+
+              <h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Modulplan</h2>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginBottom: '40px' }}>
+                {course.modules.map((module, i) => (
+                  <motion.div
+                    key={i}
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.6, delay: i * 0.1 }}
+                    className="feature-card"
+                    style={{ textAlign: 'left' }}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '10px' }}>
+                      <div style={{
+                        width: '40px',
+                        height: '40px',
+                        borderRadius: '50%',
+                        background: 'var(--color-accent)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: 'white',
+                        fontWeight: '600',
+                        fontSize: '18px',
+                      }}>
+                        {i + 1}
+                      </div>
+                      <h3 style={{ fontSize: '24px', margin: 0 }}>{module.name}</h3>
+                    </div>
+                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)', marginLeft: '55px' }}>
+                      {module.description}
+                    </p>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Bereit für diesen Kurs?</h2>
+              <p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
+              <div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
+                <Link href="/kontakt" className="btn btn-primary">
+                  Jetzt anmelden
+                </Link>
+                <Link href="/quereinsteiger/kurse" className="btn btn-secondary">
+                  Zurück zum Kurskatalog
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/quereinsteiger/kurse/page.tsx b/app/quereinsteiger/kurse/page.tsx
new file mode 100755
index 0000000..d3145c0
--- /dev/null
+++ b/app/quereinsteiger/kurse/page.tsx
@@ -0,0 +1,244 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Kurse() {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedLevel, setSelectedLevel] = useState<string>('all')
+
+  const courses = [
+    {
+      id: 1,
+      title: 'IT-Grundlagen für Einsteiger',
+      description: 'Der perfekte Einstieg in die IT-Welt. Lernen Sie die Grundlagen von Computern, Betriebssystemen, Netzwerken und IT-Sicherheit.',
+      duration: '4-6 Wochen',
+      level: 'Anfänger',
+      prerequisites: 'Keine Vorkenntnisse nötig',
+      certification: 'IT-Grundlagen Zertifikat',
+      modules: ['Computer-Grundlagen', 'Betriebssysteme', 'Netzwerke', 'IT-Sicherheit'],
+    },
+    {
+      id: 2,
+      title: 'Python für Anfänger',
+      description: 'Lernen Sie Programmieren mit Python – einer der beliebtesten und zugänglichsten Programmiersprachen. Perfekt für Einsteiger.',
+      duration: '6-8 Wochen',
+      level: 'Anfänger',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Python Basics Zertifikat',
+      modules: ['Python-Grundlagen', 'Datenstrukturen', 'Funktionen & Module', 'Praxisprojekte'],
+    },
+    {
+      id: 3,
+      title: 'IT-Security Grundlagen',
+      description: 'Verstehen Sie die Grundlagen der IT-Sicherheit. Lernen Sie, wie Sie sich und andere vor Cyber-Bedrohungen schützen.',
+      duration: '4-6 Wochen',
+      level: 'Anfänger',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'IT-Security Basics Zertifikat',
+      modules: ['Sicherheitsgrundlagen', 'Bedrohungen erkennen', 'Schutzmaßnahmen', 'Incident Response'],
+    },
+    {
+      id: 4,
+      title: 'Webentwicklung für Einsteiger',
+      description: 'Erstellen Sie Ihre ersten Webseiten mit HTML, CSS und JavaScript. Lernen Sie die Grundlagen der modernen Webentwicklung.',
+      duration: '8-10 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Web Development Basics Zertifikat',
+      modules: ['HTML & CSS', 'JavaScript Grundlagen', 'Responsive Design', 'Projektarbeit'],
+    },
+    {
+      id: 5,
+      title: 'Linux für Anfänger',
+      description: 'Lernen Sie Linux von Grund auf. Von der Installation bis zur Systemadministration – alles, was Sie wissen müssen.',
+      duration: '6-8 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Linux Basics Zertifikat',
+      modules: ['Linux Installation', 'Command Line', 'Systemadministration', 'Netzwerk-Konfiguration'],
+    },
+    {
+      id: 6,
+      title: 'Datenbanken Grundlagen',
+      description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
+      duration: '5-7 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'IT-Grundlagen empfohlen',
+      certification: 'Database Basics Zertifikat',
+      modules: ['Datenbank-Konzepte', 'SQL Grundlagen', 'Datenbankdesign', 'Praxisprojekte'],
+    },
+    {
+      id: 7,
+      title: 'KI & Machine Learning Grundlagen',
+      description: 'Lernen Sie die Grundlagen der Künstlichen Intelligenz und des Machine Learning. Verstehen Sie, wie moderne KI-Systeme funktionieren.',
+      duration: '8-10 Wochen',
+      level: 'Anfänger bis Fortgeschritten',
+      prerequisites: 'Python-Grundlagen empfohlen',
+      certification: 'AI & ML Basics Zertifikat',
+      modules: ['KI-Grundlagen', 'Machine Learning Basics', 'Neuronale Netze', 'Praktische Anwendungen'],
+    },
+  ]
+
+  const filteredCourses = courses.filter(course => {
+    const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      course.description.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesLevel = selectedLevel === 'all' || course.level.toLowerCase().includes(selectedLevel.toLowerCase())
+    return matchesSearch && matchesLevel
+  })
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Kurskatalog</h1>
+            <p className="page-hero-subtitle">
+              Finden Sie den passenden Kurs für Ihren Einstieg in die IT
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            {/* Search and Filter */}
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              style={{ marginBottom: '60px' }}
+            >
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px', margin: '0 auto' }}>
+                <input
+                  type="text"
+                  placeholder="Kurse durchsuchen..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  style={{
+                    padding: '12px 16px',
+                    fontSize: '17px',
+                    background: 'rgba(255, 255, 255, 0.05)',
+                    border: '1px solid rgba(255, 255, 255, 0.1)',
+                    borderRadius: '10px',
+                    color: 'var(--color-text)',
+                    fontFamily: 'var(--font-primary)',
+                  }}
+                />
+                <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+                  <button
+                    onClick={() => setSelectedLevel('all')}
+                    className={selectedLevel === 'all' ? 'btn btn-primary' : 'btn btn-secondary'}
+                    style={{ fontSize: '14px', padding: '8px 16px' }}
+                  >
+                    Alle
+                  </button>
+                  <button
+                    onClick={() => setSelectedLevel('anfänger')}
+                    className={selectedLevel === 'anfänger' ? 'btn btn-primary' : 'btn btn-secondary'}
+                    style={{ fontSize: '14px', padding: '8px 16px' }}
+                  >
+                    Anfänger
+                  </button>
+                  <button
+                    onClick={() => setSelectedLevel('fortgeschritten')}
+                    className={selectedLevel === 'fortgeschritten' ? 'btn btn-primary' : 'btn btn-secondary'}
+                    style={{ fontSize: '14px', padding: '8px 16px' }}
+                  >
+                    Fortgeschritten
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Course List */}
+            <div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px' }}>
+              {filteredCourses.map((course, index) => (
+                <motion.div
+                  key={course.id}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  className="feature-card-large"
+                  style={{ textAlign: 'left' }}
+                >
+                  <h2 style={{ fontSize: '32px', marginBottom: '15px' }}>{course.title}</h2>
+                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '25px', color: 'var(--color-text-secondary)' }}>
+                    {course.description}
+                  </p>
+
+                  <div style={{ marginBottom: '25px' }}>
+                    <h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Kursdetails</h3>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px', fontSize: '15px', color: 'var(--color-text-secondary)' }}>
+                      <div>
+                        <strong>Dauer:</strong> {course.duration}
+                      </div>
+                      <div>
+                        <strong>Niveau:</strong> {course.level}
+                      </div>
+                      <div>
+                        <strong>Voraussetzungen:</strong> {course.prerequisites}
+                      </div>
+                      <div>
+                        <strong>Zertifizierung:</strong> {course.certification}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div style={{ marginBottom: '25px' }}>
+                    <h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Modulplan</h3>
+                    <ul style={{ fontSize: '15px', lineHeight: '1.7', paddingLeft: '20px', color: 'var(--color-text-secondary)' }}>
+                      {course.modules.map((module, i) => (
+                        <li key={i} style={{ marginBottom: '8px' }}>{module}</li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  <Link href={`/quereinsteiger/kurse/${course.id}`} className="btn btn-primary" style={{ display: 'inline-block' }}>
+                    Mehr erfahren
+                  </Link>
+                </motion.div>
+              ))}
+            </div>
+
+            {filteredCourses.length === 0 && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="content-block"
+              >
+                <p>Keine Kurse gefunden. Bitte passen Sie Ihre Suchkriterien an.</p>
+              </motion.div>
+            )}
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Nicht den passenden Kurs gefunden?</h2>
+              <p>Kontaktieren Sie uns und wir finden gemeinsam den richtigen Weg für Sie</p>
+              <Link href="/kontakt" className="btn btn-primary">
+                Jetzt Kontakt aufnehmen
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/quereinsteiger/lernpfad-finder/page.tsx b/app/quereinsteiger/lernpfad-finder/page.tsx
new file mode 100755
index 0000000..f3ef18c
--- /dev/null
+++ b/app/quereinsteiger/lernpfad-finder/page.tsx
@@ -0,0 +1,235 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function LernpfadFinder() {
+  const [currentStep, setCurrentStep] = useState(0)
+  const [answers, setAnswers] = useState<Record<number, string>>({})
+  const [recommendation, setRecommendation] = useState<string | null>(null)
+
+  const questions = [
+    {
+      question: 'Was ist Ihr Hauptziel?',
+      options: [
+        { text: 'Karrierewechsel in die IT', value: 'career' },
+        { text: 'IT-Kenntnisse für meinen aktuellen Job', value: 'current' },
+        { text: 'Persönliches Interesse an IT', value: 'interest' },
+        { text: 'Gründung eines IT-Unternehmens', value: 'startup' },
+      ],
+    },
+    {
+      question: 'Welcher Bereich interessiert Sie am meisten?',
+      options: [
+        { text: 'Programmierung & Softwareentwicklung', value: 'programming' },
+        { text: 'IT-Sicherheit & Cybersecurity', value: 'security' },
+        { text: 'Systemadministration & Netzwerke', value: 'admin' },
+        { text: 'Webentwicklung', value: 'web' },
+        { text: 'Noch unsicher', value: 'unsure' },
+      ],
+    },
+    {
+      question: 'Wie viel Zeit können Sie pro Woche investieren?',
+      options: [
+        { text: 'Weniger als 5 Stunden', value: 'low' },
+        { text: '5-10 Stunden', value: 'medium' },
+        { text: '10-20 Stunden', value: 'high' },
+        { text: 'Mehr als 20 Stunden', value: 'very-high' },
+      ],
+    },
+    {
+      question: 'Haben Sie bereits IT-Vorkenntnisse?',
+      options: [
+        { text: 'Keine Vorkenntnisse', value: 'none' },
+        { text: 'Grundkenntnisse (Computer, Internet)', value: 'basic' },
+        { text: 'Einige Erfahrung mit IT', value: 'some' },
+        { text: 'Fortgeschrittene Kenntnisse', value: 'advanced' },
+      ],
+    },
+  ]
+
+  const handleAnswer = (value: string) => {
+    setAnswers({ ...answers, [currentStep]: value })
+    if (currentStep < questions.length - 1) {
+      setCurrentStep(currentStep + 1)
+    } else {
+      calculateRecommendation()
+    }
+  }
+
+  const calculateRecommendation = () => {
+    const goal = answers[0]
+    const interest = answers[1]
+    const time = answers[2]
+    const experience = answers[3]
+
+    let recommendedCourse = 'IT-Grundlagen für Einsteiger'
+
+    if (experience === 'none' || experience === 'basic') {
+      recommendedCourse = 'IT-Grundlagen für Einsteiger'
+    } else if (interest === 'programming') {
+      recommendedCourse = 'Python für Anfänger'
+    } else if (interest === 'web') {
+      recommendedCourse = 'Webentwicklung für Einsteiger'
+    } else if (interest === 'security') {
+      recommendedCourse = 'IT-Security Grundlagen'
+    } else if (interest === 'admin') {
+      recommendedCourse = 'Linux für Anfänger'
+    }
+
+    setRecommendation(recommendedCourse)
+  }
+
+  const resetQuiz = () => {
+    setCurrentStep(0)
+    setAnswers({})
+    setRecommendation(null)
+  }
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Lernpfad-Finder</h1>
+            <p className="page-hero-subtitle">
+              Finden Sie den passenden Kurs für Ihren Einstieg
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Ihr persönlicher Lernpfad</h2>
+              <p>
+                Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs 
+                für Ihren Einstieg in die IT.
+              </p>
+            </motion.div>
+
+            <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
+              {!recommendation ? (
+                <>
+                  {/* Progress Bar */}
+                  <div style={{ marginBottom: '40px' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', fontSize: '14px', color: 'var(--color-text-secondary)' }}>
+                      <span>Frage {currentStep + 1} von {questions.length}</span>
+                      <span>{Math.round(((currentStep + 1) / questions.length) * 100)}%</span>
+                    </div>
+                    <div style={{ width: '100%', height: '4px', background: 'rgba(255, 255, 255, 0.1)', borderRadius: '2px', overflow: 'hidden' }}>
+                      <motion.div
+                        initial={{ width: 0 }}
+                        animate={{ width: `${((currentStep + 1) / questions.length) * 100}%` }}
+                        transition={{ duration: 0.3 }}
+                        style={{ height: '100%', background: 'var(--color-accent)', borderRadius: '2px' }}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Current Question */}
+                  <motion.div
+                    key={currentStep}
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -20 }}
+                    className="feature-card-large"
+                    style={{ textAlign: 'left' }}
+                  >
+                    <h2 style={{ marginBottom: '30px', fontSize: '28px' }}>
+                      {questions[currentStep].question}
+                    </h2>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+                      {questions[currentStep].options.map((option) => (
+                        <button
+                          key={option.value}
+                          onClick={() => handleAnswer(option.value)}
+                          className="btn btn-secondary"
+                          style={{
+                            textAlign: 'left',
+                            justifyContent: 'flex-start',
+                            padding: '15px 20px',
+                            fontSize: '17px',
+                          }}
+                        >
+                          {option.text}
+                        </button>
+                      ))}
+                    </div>
+
+                    {currentStep > 0 && (
+                      <button
+                        onClick={() => setCurrentStep(currentStep - 1)}
+                        className="btn btn-secondary"
+                        style={{ marginTop: '20px', width: '100%' }}
+                      >
+                        Zurück
+                      </button>
+                    )}
+                  </motion.div>
+                </>
+              ) : (
+                <motion.div
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="feature-card-large"
+                  style={{ textAlign: 'left' }}
+                >
+                  <h2 style={{ marginBottom: '30px' }}>Ihre Empfehlung</h2>
+                  
+                  <div style={{ marginBottom: '30px' }}>
+                    <h3 style={{ fontSize: '24px', marginBottom: '15px', color: 'var(--color-accent)' }}>
+                      {recommendation}
+                    </h3>
+                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
+                      Basierend auf Ihren Antworten empfehlen wir Ihnen diesen Kurs als Einstieg. 
+                      Dieser Kurs ist speziell für Quereinsteiger konzipiert und führt Sie Schritt 
+                      für Schritt in die IT-Welt ein.
+                    </p>
+                  </div>
+
+                  <div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}>
+                    <p style={{ marginBottom: '20px', fontSize: '17px' }}>
+                      Möchten Sie mehr über diesen Kurs erfahren oder haben Sie Fragen? Kontaktieren Sie uns!
+                    </p>
+                    <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+                      <Link href="/quereinsteiger/kurse" className="btn btn-primary">
+                        Zum Kurskatalog
+                      </Link>
+                      <Link href="/kontakt" className="btn btn-secondary">
+                        Kontakt aufnehmen
+                      </Link>
+                      <button
+                        onClick={resetQuiz}
+                        className="btn btn-secondary"
+                      >
+                        Quiz erneut starten
+                      </button>
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/quereinsteiger/page.tsx b/app/quereinsteiger/page.tsx
new file mode 100755
index 0000000..09fa08e
--- /dev/null
+++ b/app/quereinsteiger/page.tsx
@@ -0,0 +1,173 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Quereinsteiger() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        {/* Hero Section */}
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>IT-Weiterbildung für Quereinsteiger</h1>
+            <p className="page-hero-subtitle">
+              Starten Sie Ihre Karriere in der IT – auch ohne Vorkenntnisse
+            </p>
+          </motion.div>
+        </section>
+
+        {/* Main Content */}
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Keine Vorkenntnisse nötig – Starten Sie jetzt!</h2>
+              <p>
+                Sie haben noch keine Ahnung von IT? Kein Problem! Unsere Schulungsplattform 
+                ist speziell für komplette Neulinge entwickelt. Wir begleiten Sie Schritt 
+                für Schritt auf Ihrem Weg in die IT-Welt. Stück für Stück zum Ziel – mit 
+                unserem niveaubasierten Lernsystem.
+              </p>
+            </motion.div>
+
+            <div className="features-grid">
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card-large"
+              >
+                <div className="feature-number">01</div>
+                <h3>Stufenweise Freischaltung</h3>
+                <p>
+                  Alle Inhalte werden niveaubasiert freigeschaltet. Sie lernen in Ihrem 
+                  eigenen Tempo und werden nicht überfordert. Jeder Schritt baut auf dem 
+                  vorherigen auf. Unser System passt sich Ihrem Lernfortschritt an und 
+                  führt Sie sicher zum Ziel.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card-large"
+              >
+                <div className="feature-number">02</div>
+                <h3>Anschließende Zertifizierung</h3>
+                <p>
+                  Nach erfolgreichem Abschluss erhalten Sie eine anerkannte Zertifizierung, 
+                  die Ihre neuen Fähigkeiten dokumentiert und Ihre Karrierechancen erhöht. 
+                  Diese Zertifizierungen sind Ihr Karriere-Boost und öffnen Türen in der IT-Branche.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card-large"
+              >
+                <div className="feature-number">03</div>
+                <h3>Livetrainings mit Experten</h3>
+                <p>
+                  Bei Fragen stehen Ihnen unsere IT-Experten in Livetrainings zur Verfügung. 
+                  Lernen Sie nicht nur aus Materialien, sondern auch durch direkten Austausch 
+                  mit Profis. Diese interaktiven Sessions machen den Unterschied und helfen 
+                  Ihnen, komplexe Themen zu verstehen.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="feature-card-large"
+              >
+                <div className="feature-number">04</div>
+                <h3>Chat-Support</h3>
+                <p>
+                  Haben Sie eine Frage? Nutzen Sie unseren Chat-Support und erhalten Sie 
+                  schnell Antworten von unseren Experten. Lernen Sie nie allein. Unser 
+                  umfassender Support durch Livetrainings und Experten-Chats begleitet Sie 
+                  auf jedem Schritt Ihrer Lernreise.
+                </p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+              style={{ marginTop: '80px' }}
+            >
+              <h2>Finden Sie Ihren Weg</h2>
+              <p>
+                Nutzen Sie unseren interaktiven Lernpfad-Finder, um den passenden Kurs für Ihren Einstieg zu finden.
+              </p>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="feature-card-large"
+              style={{ maxWidth: '600px', margin: '40px auto', textAlign: 'center' }}
+            >
+              <div className="feature-icon" style={{ fontSize: '64px' }}>🎯</div>
+              <h3>Lernpfad-Finder</h3>
+              <p style={{ marginBottom: '30px' }}>
+                Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs für Ihren Einstieg in die IT.
+              </p>
+              <Link href="/quereinsteiger/lernpfad-finder" className="btn btn-primary">
+                Lernpfad finden
+              </Link>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Bereit für den Start?</h2>
+              <p>Kontaktieren Sie uns und beginnen Sie Ihre IT-Karriere noch heute</p>
+              <div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
+                <a href="/kontakt" className="btn btn-primary">
+                  Jetzt durchstarten
+                </a>
+                <Link href="/quereinsteiger/kurse" className="btn btn-secondary">
+                  Kurskatalog ansehen
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/testimonials/page.tsx b/app/testimonials/page.tsx
new file mode 100755
index 0000000..bcc7a64
--- /dev/null
+++ b/app/testimonials/page.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Testimonials() {
+  const testimonials = [
+    {
+      type: 'unternehmen',
+      quote: 'Die IT-Analyse von doing-it.de hat uns geholfen, Schwachstellen zu identifizieren, die wir vorher nicht gesehen haben. Die Schulungen waren praxisnah und unsere Mitarbeiter konnten das Gelernte sofort anwenden.',
+      author: 'Max Mustermann',
+      position: 'IT-Leiter',
+      company: 'Musterfirma GmbH',
+      image: '👨‍💼',
+    },
+    {
+      type: 'unternehmen',
+      quote: 'Durch die maßgeschneiderten Schulungen haben wir interne Experten aufgebaut und konnten unsere externen IT-Kosten um 40% reduzieren. Eine lohnende Investition!',
+      author: 'Anna Schmidt',
+      position: 'Geschäftsführerin',
+      company: 'TechSolutions AG',
+      image: '👩‍💼',
+    },
+    {
+      type: 'quereinsteiger',
+      quote: 'Ohne Vorkenntnisse habe ich mit doing-it.de meinen Einstieg in die IT geschafft. Das niveaubasierte System hat mich nicht überfordert und die Experten waren immer da, wenn ich Fragen hatte.',
+      author: 'Thomas Weber',
+      position: 'Junior IT-Support',
+      company: 'Digital Solutions',
+      image: '👨‍💻',
+    },
+    {
+      type: 'quereinsteiger',
+      quote: 'Die Zertifizierung hat mir den Karriere-Boost gegeben, den ich brauchte. Heute arbeite ich als IT-Sicherheitsspezialist – etwas, das vor einem Jahr noch unvorstellbar war.',
+      author: 'Lisa Müller',
+      position: 'IT-Sicherheitsspezialistin',
+      company: 'SecureIT GmbH',
+      image: '👩‍💻',
+    },
+  ]
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Kundenstimmen</h1>
+            <p className="page-hero-subtitle">
+              Was unsere Kunden über uns sagen
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Erfolgreiche Projekte, zufriedene Kunden</h2>
+              <p>
+                Unsere Kunden sind unser größter Erfolg. Lesen Sie, was Unternehmen und 
+                Quereinsteiger über ihre Erfahrungen mit doing-it.de berichten.
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px', marginTop: '60px' }}>
+              {testimonials.map((testimonial, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  className="feature-card-large"
+                  style={{ textAlign: 'left' }}
+                >
+                  <div style={{ fontSize: '48px', marginBottom: '20px' }}>
+                    {testimonial.image}
+                  </div>
+                  <p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '30px', fontStyle: 'italic' }}>
+                    &ldquo;{testimonial.quote}&rdquo;
+                  </p>
+                  <div>
+                    <h3 style={{ marginBottom: '5px' }}>{testimonial.author}</h3>
+                    <p style={{ color: 'var(--color-text-secondary)', fontSize: '17px' }}>
+                      {testimonial.position} bei {testimonial.company}
+                    </p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Werden Sie Teil unserer Erfolgsgeschichte</h2>
+              <p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
+              <Link href="/kontakt" className="btn btn-primary">
+                Jetzt Kontakt aufnehmen
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/ueber-uns/page.tsx b/app/ueber-uns/page.tsx
new file mode 100755
index 0000000..4e99ecc
--- /dev/null
+++ b/app/ueber-uns/page.tsx
@@ -0,0 +1,220 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function UeberUns() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        {/* Hero Section */}
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Über uns</h1>
+            <p className="page-hero-subtitle">
+              Ihre Experten für IT-Weiterbildung
+            </p>
+          </motion.div>
+        </section>
+
+        {/* Main Content */}
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Unsere Mission</h2>
+              <p>
+                doing-it.de wurde mit dem Ziel gegründet, IT-Weiterbildung für jeden zugänglich zu machen. 
+                Wir glauben daran, dass jeder – unabhängig von Vorkenntnissen – die Möglichkeit haben sollte, 
+                sich in der IT weiterzubilden und neue Karrierewege einzuschlagen.
+              </p>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Was uns auszeichnet</h2>
+              <p>
+                Unser Ansatz ist individuell, praxisnah und ergebnisorientiert. Wir schulen nicht nur 
+                theoretisch, sondern direkt an der realen IT-Infrastruktur. So wird Wissen sofort 
+                anwendbar und nachhaltig verankert.
+              </p>
+            </motion.div>
+
+            <div className="features-grid">
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">🎯</div>
+                <h3>Individuell</h3>
+                <p>Jede Schulung wird auf Ihre spezifischen Bedürfnisse zugeschnitten</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">💼</div>
+                <h3>Praxisnah</h3>
+                <p>Lernen direkt an Ihrer eigenen IT-Infrastruktur</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">👥</div>
+                <h3>Experten-Team</h3>
+                <p>Erfahrene IT-Profis mit jahrelanger Branchenerfahrung</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">📚</div>
+                <h3>Niveaubasiert</h3>
+                <p>Stufenweise Freischaltung für optimalen Lernerfolg</p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+              style={{ marginTop: '80px' }}
+            >
+              <h2>Unser Team</h2>
+              <p>
+                Unsere Dozenten, Trainer und Experten bringen jahrelange Erfahrung in der IT-Branche mit. 
+                Lernen Sie die Menschen kennen, die Sie auf Ihrem Weg begleiten.
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ marginTop: '60px' }}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card"
+              >
+                <div className="feature-icon" style={{ fontSize: '64px' }}>👨‍💼</div>
+                <h3>Dr. Michael Schneider</h3>
+                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
+                  IT-Sicherheitsexperte
+                </p>
+                <p>
+                  15+ Jahre Erfahrung in IT-Sicherheit und Compliance. Zertifizierter CISSP und 
+                  Experte für DSGVO-Implementierung.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card"
+              >
+                <div className="feature-icon" style={{ fontSize: '64px' }}>👩‍💻</div>
+                <h3>Sarah Müller</h3>
+                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
+                  Cloud-Architektin
+                </p>
+                <p>
+                  Spezialistin für Cloud-Migration und moderne IT-Infrastrukturen. AWS und Azure 
+                  zertifiziert mit 10+ Jahren Projekterfahrung.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card"
+              >
+                <div className="feature-icon" style={{ fontSize: '64px' }}>👨‍💻</div>
+                <h3>Thomas Weber</h3>
+                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
+                  Systemadministrator & Trainer
+                </p>
+                <p>
+                  Experte für Linux, Windows-Server und Netzwerktechnik. Bringt komplexe Themen 
+                  verständlich und praxisnah rüber.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="feature-card"
+              >
+                <div className="feature-icon" style={{ fontSize: '64px' }}>👩‍🏫</div>
+                <h3>Lisa Schmidt</h3>
+                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
+                  Pädagogin & IT-Trainerin
+                </p>
+                <p>
+                  Spezialisiert auf die Schulung von Quereinsteigern. Entwickelt Lernkonzepte, die 
+                  auch ohne Vorkenntnisse zum Erfolg führen.
+                </p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Lernen Sie uns kennen</h2>
+              <p>Kontaktieren Sie uns und erfahren Sie mehr über unsere Angebote</p>
+              <Link href="/kontakt" className="btn btn-primary">
+                Jetzt Kontakt aufnehmen
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/unternehmen/it-infrastrukturanalyse/page.tsx b/app/unternehmen/it-infrastrukturanalyse/page.tsx
new file mode 100755
index 0000000..c7bc097
--- /dev/null
+++ b/app/unternehmen/it-infrastrukturanalyse/page.tsx
@@ -0,0 +1,236 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function ITInfrastrukturanalyse() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>IT-Infrastrukturanalyse</h1>
+            <p className="page-hero-subtitle">
+              Der erste Schritt zu mehr IT-Kompetenz
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Was wird untersucht?</h2>
+              <p>
+                Unsere umfassende IT-Infrastrukturanalyse gibt Ihnen Klarheit über den aktuellen 
+                Zustand Ihrer IT und zeigt konkrete Handlungsfelder auf.
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ marginTop: '60px' }}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card-large"
+              >
+                <div className="feature-icon">🔍</div>
+                <h3>Infrastruktur-Erfassung</h3>
+                <p>
+                  Wir dokumentieren Ihre gesamte IT-Landschaft: Server, Netzwerke, 
+                  Software-Landschaft, Cloud-Services und Endgeräte. Dabei erstellen wir eine 
+                  vollständige IST-Dokumentation Ihrer IT-Infrastruktur.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card-large"
+              >
+                <div className="feature-icon">🛡️</div>
+                <h3>Sicherheitsanalyse</h3>
+                <p>
+                  Wir identifizieren Sicherheitslücken, veraltete Systeme und 
+                  Compliance-Probleme. Unser Schwachstellenbericht zeigt Ihnen genau, wo 
+                  Handlungsbedarf besteht.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card-large"
+              >
+                <div className="feature-icon">📊</div>
+                <h3>Schulungsbedarfs-Analyse</h3>
+                <p>
+                  Wir ermitteln den konkreten Schulungsbedarf Ihrer Mitarbeiter. Welche 
+                  Kompetenzen fehlen? Wo gibt es Wissenslücken? Diese Analyse bildet die Basis 
+                  für maßgeschneiderte Schulungskonzepte.
+                </p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+              style={{ marginTop: '80px' }}
+            >
+              <h2>Welche Methoden werden eingesetzt?</h2>
+              <p>
+                Wir nutzen bewährte Methoden und Tools für eine gründliche Analyse:
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ marginTop: '40px' }}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card"
+              >
+                <h3>Vor-Ort-Begehungen</h3>
+                <p>Persönliche Inspektion Ihrer IT-Infrastruktur</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card"
+              >
+                <h3>Interviews mit Mitarbeitern</h3>
+                <p>Gespräche zur Ermittlung des Wissensstands</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card"
+              >
+                <h3>Technische Scans</h3>
+                <p>Automatisierte Analyse von Systemen und Netzwerken</p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="feature-card"
+              >
+                <h3>Dokumentenanalyse</h3>
+                <p>Auswertung bestehender Dokumentationen</p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+              style={{ marginTop: '80px' }}
+            >
+              <h2>Konkrete Ergebnisse</h2>
+              <p>
+                Nach der Analyse erhalten Sie:
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ marginTop: '40px', gridTemplateColumns: '1fr' }}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+                className="feature-card-large"
+                style={{ textAlign: 'left' }}
+              >
+                <h3 style={{ marginBottom: '20px' }}>IST-Dokumentation</h3>
+                <p style={{ fontSize: '17px', lineHeight: '1.7' }}>
+                  Eine vollständige Dokumentation Ihrer aktuellen IT-Infrastruktur mit allen 
+                  Systemen, Komponenten und Abhängigkeiten. Diese Dokumentation dient als Basis 
+                  für alle weiteren Schritte.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+                className="feature-card-large"
+                style={{ textAlign: 'left' }}
+              >
+                <h3 style={{ marginBottom: '20px' }}>Schwachstellenbericht</h3>
+                <p style={{ fontSize: '17px', lineHeight: '1.7' }}>
+                  Ein detaillierter Bericht über identifizierte Sicherheitslücken, veraltete 
+                  Systeme und Risiken. Jede Schwachstelle wird mit Priorität und Handlungsempfehlung 
+                  versehen.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+                className="feature-card-large"
+                style={{ textAlign: 'left' }}
+              >
+                <h3 style={{ marginBottom: '20px' }}>Handlungsempfehlungen</h3>
+                <p style={{ fontSize: '17px', lineHeight: '1.7' }}>
+                  Konkrete, priorisierte Empfehlungen für die nächsten Schritte. Diese umfassen 
+                  sowohl technische Maßnahmen als auch Schulungsbedarfe für Ihre Mitarbeiter.
+                </p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Starten Sie mit der Analyse</h2>
+              <p>Kontaktieren Sie uns für eine unverbindliche Beratung</p>
+              <Link href="/kontakt" className="btn btn-primary">
+                IT-Analyse anfordern
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/unternehmen/page.tsx b/app/unternehmen/page.tsx
new file mode 100755
index 0000000..d35bcc0
--- /dev/null
+++ b/app/unternehmen/page.tsx
@@ -0,0 +1,340 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Unternehmen() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        {/* Hero Section */}
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>IT-Schulungen für Unternehmen</h1>
+            <p className="page-hero-subtitle">
+              Stärken Sie Ihr Team mit maßgeschneiderten IT-Schulungen
+            </p>
+          </motion.div>
+        </section>
+
+        {/* Main Content */}
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Unser Prozess: Von der Analyse bis zum internen Experten</h2>
+              <p>
+                Wir begleiten Sie in drei klaren Schritten zu mehr IT-Kompetenz in Ihrem Unternehmen.
+              </p>
+            </motion.div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '40px', marginBottom: '100px' }}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card-large"
+              >
+                <div className="feature-number">1</div>
+                <h3>Analyse Ihrer IT</h3>
+                <p>
+                  Wir analysieren Ihre bestehende IT-Infrastruktur umfassend. Dabei identifizieren wir 
+                  Schwachstellen, Optimierungspotenziale und den konkreten Schulungsbedarf Ihrer 
+                  Mitarbeiter. Sie erhalten eine detaillierte IST-Dokumentation, einen 
+                  Schwachstellenbericht und konkrete Handlungsempfehlungen.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card-large"
+              >
+                <div className="feature-number">2</div>
+                <h3>Maßgeschneiderte Schulungskonzepte</h3>
+                <p>
+                  Basierend auf der Analyse entwickeln wir individuelle Schulungskonzepte, die genau 
+                  auf Ihre IT-Infrastruktur, Ihre Branche und Ihre Ziele zugeschnitten sind. Ihre 
+                  Mitarbeiter lernen direkt an Ihrer eigenen IT – praxisnah und sofort anwendbar.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card-large"
+              >
+                <div className="feature-number">3</div>
+                <h3>Aufbau interner Experten</h3>
+                <p>
+                  Durch unsere Schulungen entwickeln Sie eigene IT-Experten im Haus. Das reduziert 
+                  langfristig externe Kosten, erhöht die IT-Sicherheit und ermöglicht schnellere 
+                  Reaktionszeiten bei Problemen. Sie werden unabhängiger und stärker.
+                </p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Ihre Vorteile</h2>
+              <p>
+                Mit unseren maßgeschneiderten IT-Schulungen erreichen Sie mehr Sicherheit, Effizienz 
+                und Kostensenkung in Ihrem Unternehmen.
+              </p>
+            </motion.div>
+
+            <div className="features-grid">
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card-large"
+              >
+                <div className="feature-icon">🔍</div>
+                <h3>IT-Analyse</h3>
+                <p>
+                  Wir analysieren Ihre bestehende IT-Infrastruktur und identifizieren 
+                  Schulungsbedarfe. So wissen wir genau, wo wir ansetzen müssen.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card-large"
+              >
+                <div className="feature-icon">🏢</div>
+                <h3>Schulung auf Ihrer Infrastruktur</h3>
+                <p>
+                  Ihre Mitarbeiter lernen direkt auf Ihrer eigenen IT-Infrastruktur. 
+                  Keine abstrakten Beispiele – praxisnah und sofort anwendbar.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card-large"
+              >
+                <div className="feature-icon">👨‍💼</div>
+                <h3>Interne Experten aufbauen</h3>
+                <p>
+                  Entwickeln Sie Ihre eigenen IT-Experten im Haus. Reduzieren Sie 
+                  Abhängigkeiten und stärken Sie Ihr Team nachhaltig.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="feature-card-large"
+              >
+                <div className="feature-icon">🎓</div>
+                <h3>IT-Sensibilisierung</h3>
+                <p>
+                  Wir schulen Ihre Mitarbeiter in generellen IT-Themen als Sensibilisierung 
+                  für verschiedenste Bereiche. Von Sicherheit bis Cloud-Computing.
+                </p>
+              </motion.div>
+            </div>
+
+            {/* Additional Company Benefits */}
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Weitere Vorteile für Ihr Unternehmen</h2>
+            </motion.div>
+
+            <div className="features-grid">
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">💰</div>
+                <h3>Kosteneinsparung</h3>
+                <p>
+                  Reduzieren Sie langfristig externe IT-Kosten durch qualifizierte 
+                  interne Mitarbeiter.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">⚡</div>
+                <h3>Schnellere Reaktionszeiten</h3>
+                <p>
+                  Interne Experten können Probleme schneller lösen, ohne auf externe 
+                  Unterstützung warten zu müssen.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">🔒</div>
+                <h3>Erhöhte IT-Sicherheit</h3>
+                <p>
+                  Geschulte Mitarbeiter erkennen Sicherheitsrisiken früher und handeln 
+                  entsprechend.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">📈</div>
+                <h3>Innovation fördern</h3>
+                <p>
+                  Gut geschulte Teams sind innovativer und können neue Technologien 
+                  schneller adaptieren.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.5 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">🤝</div>
+                <h3>Maßgeschneiderte Programme</h3>
+                <p>
+                  Jedes Schulungsprogramm wird individuell auf Ihr Unternehmen, Ihre 
+                  Branche und Ihre Ziele zugeschnitten.
+                </p>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.6 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">📊</div>
+                <h3>Fortschritts-Tracking</h3>
+                <p>
+                  Verfolgen Sie den Lernfortschritt Ihrer Mitarbeiter und messen Sie 
+                  den ROI Ihrer Investition in Weiterbildung.
+                </p>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+              style={{ marginTop: '80px' }}
+            >
+              <h2>Interaktive Tools</h2>
+              <p>
+                Nutzen Sie unsere interaktiven Tools, um eine erste Einschätzung zu erhalten:
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ marginTop: '40px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">📋</div>
+                <h3>IT-Checkliste</h3>
+                <p>Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit</p>
+                <Link href="/unternehmen/tools/it-checkliste" className="btn btn-secondary" style={{ marginTop: '20px', display: 'inline-block' }}>
+                  Tool öffnen
+                </Link>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card"
+              >
+                <div className="feature-icon">📊</div>
+                <h3>Schulungsbedarfs-Rechner</h3>
+                <p>Schätzen Sie den Umfang Ihrer IT-Schulung</p>
+                <Link href="/unternehmen/tools/schulungsbedarf" className="btn btn-secondary" style={{ marginTop: '20px', display: 'inline-block' }}>
+                  Tool öffnen
+                </Link>
+              </motion.div>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Bereit für die IT-Analyse?</h2>
+              <p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p>
+              <a href="/kontakt" className="btn btn-primary">
+                IT-Analyse anfordern
+              </a>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/unternehmen/schulungsthemen/page.tsx b/app/unternehmen/schulungsthemen/page.tsx
new file mode 100755
index 0000000..c55df26
--- /dev/null
+++ b/app/unternehmen/schulungsthemen/page.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Schulungsthemen() {
+  const topics = [
+    {
+      title: 'IT-Security für Mitarbeiter',
+      description: 'Grundlagen der IT-Sicherheit, Erkennung von Phishing-Angriffen, sicheres Passwort-Management und Umgang mit sensiblen Daten.',
+      duration: '1-2 Tage',
+      level: 'Grundlagen',
+    },
+    {
+      title: 'Effizienter Umgang mit Office-Software',
+      description: 'Optimierung der täglichen Arbeit mit Microsoft Office, Google Workspace oder anderen Office-Suites. Tipps und Tricks für mehr Produktivität.',
+      duration: '1 Tag',
+      level: 'Grundlagen bis Fortgeschritten',
+    },
+    {
+      title: 'Datenschutz DSGVO',
+      description: 'Umfassende Schulung zu Datenschutzbestimmungen, DSGVO-Compliance und korrektem Umgang mit personenbezogenen Daten.',
+      duration: '2-3 Tage',
+      level: 'Grundlagen bis Experte',
+    },
+    {
+      title: 'Cloud-Computing Grundlagen',
+      description: 'Einführung in Cloud-Technologien, Nutzung von AWS, Azure oder Google Cloud. Migration und Verwaltung von Cloud-Ressourcen.',
+      duration: '3-5 Tage',
+      level: 'Grundlagen bis Fortgeschritten',
+    },
+    {
+      title: 'Systemadministration',
+      description: 'Grundlagen der Systemadministration für Windows- und Linux-Server. Verwaltung von Benutzern, Berechtigungen und Systemen.',
+      duration: '5-7 Tage',
+      level: 'Fortgeschritten',
+    },
+    {
+      title: 'Netzwerktechnik',
+      description: 'Grundlagen der Netzwerktechnik, TCP/IP, Routing, Switching und Netzwerk-Troubleshooting.',
+      duration: '3-5 Tage',
+      level: 'Fortgeschritten',
+    },
+  ]
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Schulungsthemen</h1>
+            <p className="page-hero-subtitle">
+              Übersicht über mögliche Schulungsmodule
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Maßgeschneiderte Schulungsmodule</h2>
+              <p>
+                Wir bieten eine breite Palette an Schulungsthemen, die wir individuell auf Ihre 
+                Bedürfnisse zuschneiden. Alle Schulungen erfolgen direkt an Ihrer IT-Infrastruktur 
+                für maximale Praxisnähe.
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ marginTop: '60px', gridTemplateColumns: '1fr' }}>
+              {topics.map((topic, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  className="feature-card-large"
+                  style={{ textAlign: 'left' }}
+                >
+                  <h3 style={{ fontSize: '28px', marginBottom: '15px' }}>{topic.title}</h3>
+                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '20px', color: 'var(--color-text-secondary)' }}>
+                    {topic.description}
+                  </p>
+                  <div style={{ display: 'flex', gap: '20px', fontSize: '15px', color: 'var(--color-text-secondary)' }}>
+                    <span><strong>Dauer:</strong> {topic.duration}</span>
+                    <span><strong>Niveau:</strong> {topic.level}</span>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+              style={{ marginTop: '80px' }}
+            >
+              <h2>Individuelle Anpassung</h2>
+              <p>
+                Diese Themen sind nur Beispiele. Wir entwickeln gerne individuelle Schulungskonzepte, 
+                die genau auf Ihre IT-Infrastruktur, Ihre Branche und Ihre Ziele zugeschnitten sind. 
+                Kontaktieren Sie uns für eine maßgeschneiderte Lösung.
+              </p>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="cta-section"
+            >
+              <h2>Interesse an einer Schulung?</h2>
+              <p>Lassen Sie uns gemeinsam das passende Schulungskonzept entwickeln</p>
+              <Link href="/kontakt" className="btn btn-primary">
+                Jetzt Beratung anfragen
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/unternehmen/tools/it-checkliste/page.tsx b/app/unternehmen/tools/it-checkliste/page.tsx
new file mode 100755
index 0000000..d7326bd
--- /dev/null
+++ b/app/unternehmen/tools/it-checkliste/page.tsx
@@ -0,0 +1,272 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function ITCheckliste() {
+  const [answers, setAnswers] = useState<Record<string, string>>({})
+  const [showResults, setShowResults] = useState(false)
+
+  const questions = [
+    {
+      id: 'backup',
+      question: 'Wie häufig werden Backups Ihrer IT-Systeme durchgeführt?',
+      options: ['Täglich automatisch', 'Wöchentlich', 'Manuell bei Bedarf', 'Keine regelmäßigen Backups'],
+      risks: {
+        'Keine regelmäßigen Backups': 'hoch',
+        'Manuell bei Bedarf': 'mittel',
+        'Wöchentlich': 'niedrig',
+        'Täglich automatisch': 'sehr niedrig',
+      },
+    },
+    {
+      id: 'updates',
+      question: 'Wie werden Software-Updates und Sicherheitspatches verwaltet?',
+      options: ['Automatisch installiert', 'Regelmäßig manuell', 'Nur bei Problemen', 'Keine systematische Verwaltung'],
+      risks: {
+        'Keine systematische Verwaltung': 'hoch',
+        'Nur bei Problemen': 'hoch',
+        'Regelmäßig manuell': 'mittel',
+        'Automatisch installiert': 'niedrig',
+      },
+    },
+    {
+      id: 'security',
+      question: 'Welche IT-Sicherheitsmaßnahmen sind implementiert?',
+      options: ['Firewall, Antivirus, regelmäßige Audits', 'Firewall und Antivirus', 'Nur Antivirus', 'Keine speziellen Maßnahmen'],
+      risks: {
+        'Keine speziellen Maßnahmen': 'hoch',
+        'Nur Antivirus': 'hoch',
+        'Firewall und Antivirus': 'mittel',
+        'Firewall, Antivirus, regelmäßige Audits': 'niedrig',
+      },
+    },
+    {
+      id: 'training',
+      question: 'Wie häufig werden Mitarbeiter in IT-Sicherheit geschult?',
+      options: ['Regelmäßig (mind. jährlich)', 'Bei Bedarf', 'Nur bei Einstellung', 'Keine Schulungen'],
+      risks: {
+        'Keine Schulungen': 'hoch',
+        'Nur bei Einstellung': 'mittel',
+        'Bei Bedarf': 'mittel',
+        'Regelmäßig (mind. jährlich)': 'niedrig',
+      },
+    },
+    {
+      id: 'documentation',
+      question: 'Wie ist die Dokumentation Ihrer IT-Infrastruktur?',
+      options: ['Vollständig und aktuell', 'Teilweise dokumentiert', 'Veraltete Dokumentation', 'Keine Dokumentation'],
+      risks: {
+        'Keine Dokumentation': 'hoch',
+        'Veraltete Dokumentation': 'mittel',
+        'Teilweise dokumentiert': 'mittel',
+        'Vollständig und aktuell': 'niedrig',
+      },
+    },
+  ]
+
+  const handleAnswer = (questionId: string, answer: string) => {
+    setAnswers({ ...answers, [questionId]: answer })
+  }
+
+  const calculateResults = () => {
+    const riskCounts = { hoch: 0, mittel: 0, niedrig: 0, 'sehr niedrig': 0 }
+    
+    questions.forEach(q => {
+      const answer = answers[q.id]
+      if (answer) {
+        const risk = q.risks[answer as keyof typeof q.risks]
+        if (risk) riskCounts[risk as keyof typeof riskCounts]++
+      }
+    })
+
+    const totalAnswered = Object.keys(answers).length
+    const highRiskCount = riskCounts.hoch
+    const mediumRiskCount = riskCounts.mittel
+
+    let overallRisk = 'niedrig'
+    let recommendations: string[] = []
+
+    if (highRiskCount > 2 || (highRiskCount > 0 && mediumRiskCount > 2)) {
+      overallRisk = 'hoch'
+      recommendations = [
+        'Dringende IT-Sicherheitsanalyse empfohlen',
+        'Implementierung eines Backup-Systems',
+        'Regelmäßige Sicherheitsschulungen für Mitarbeiter',
+        'Aktualisierung der IT-Dokumentation',
+      ]
+    } else if (highRiskCount > 0 || mediumRiskCount > 2) {
+      overallRisk = 'mittel'
+      recommendations = [
+        'IT-Infrastrukturanalyse zur Identifikation von Optimierungspotenzialen',
+        'Verbesserung der Backup-Strategie',
+        'Regelmäßige IT-Sicherheitsschulungen',
+      ]
+    } else {
+      recommendations = [
+        'Regelmäßige Überprüfung der IT-Infrastruktur',
+        'Fortlaufende Weiterbildung der Mitarbeiter',
+      ]
+    }
+
+    return { overallRisk, recommendations, riskCounts }
+  }
+
+  const handleSubmit = () => {
+    if (Object.keys(answers).length === questions.length) {
+      setShowResults(true)
+    } else {
+      alert('Bitte beantworten Sie alle Fragen.')
+    }
+  }
+
+  const results = showResults ? calculateResults() : null
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>IT-Infrastruktur-Checkliste</h1>
+            <p className="page-hero-subtitle">
+              Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            {!showResults ? (
+              <>
+                <motion.div
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6 }}
+                  className="content-block"
+                >
+                  <h2>Beantworten Sie die folgenden Fragen</h2>
+                  <p>
+                    Diese Checkliste gibt Ihnen eine erste Einschätzung potenzieller Schwachstellen 
+                    und Optimierungspotenziale in Ihrer IT-Infrastruktur.
+                  </p>
+                </motion.div>
+
+                <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
+                  {questions.map((q, index) => (
+                    <motion.div
+                      key={q.id}
+                      initial={{ opacity: 0, y: 30 }}
+                      whileInView={{ opacity: 1, y: 0 }}
+                      viewport={{ once: true }}
+                      transition={{ duration: 0.6, delay: index * 0.1 }}
+                      className="feature-card"
+                      style={{ marginBottom: '30px', textAlign: 'left' }}
+                    >
+                      <h3 style={{ marginBottom: '20px', fontSize: '20px' }}>{q.question}</h3>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                        {q.options.map((option) => (
+                          <label
+                            key={option}
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              padding: '12px',
+                              background: answers[q.id] === option ? 'rgba(0, 113, 227, 0.1)' : 'rgba(255, 255, 255, 0.05)',
+                              border: `1px solid ${answers[q.id] === option ? 'var(--color-accent)' : 'rgba(255, 255, 255, 0.1)'}`,
+                              borderRadius: '8px',
+                              cursor: 'pointer',
+                              transition: 'all 0.3s ease',
+                            }}
+                          >
+                            <input
+                              type="radio"
+                              name={q.id}
+                              value={option}
+                              checked={answers[q.id] === option}
+                              onChange={() => handleAnswer(q.id, option)}
+                              style={{ marginRight: '10px' }}
+                            />
+                            {option}
+                          </label>
+                        ))}
+                      </div>
+                    </motion.div>
+                  ))}
+
+                  <motion.div
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.6 }}
+                  >
+                    <button onClick={handleSubmit} className="btn btn-primary" style={{ width: '100%', marginTop: '20px' }}>
+                      Auswertung anzeigen
+                    </button>
+                  </motion.div>
+                </div>
+              </>
+            ) : (
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="feature-card-large"
+                style={{ maxWidth: '800px', margin: '0 auto', textAlign: 'left' }}
+              >
+                <h2 style={{ marginBottom: '30px' }}>Ihre IT-Einschätzung</h2>
+                
+                <div style={{ marginBottom: '30px' }}>
+                  <h3 style={{ marginBottom: '15px' }}>Gesamtrisiko: {results?.overallRisk}</h3>
+                  <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
+                    Basierend auf Ihren Antworten haben wir eine erste Einschätzung erstellt. 
+                    Für eine detaillierte Analyse empfehlen wir eine umfassende IT-Infrastrukturanalyse.
+                  </p>
+                </div>
+
+                <div style={{ marginBottom: '30px' }}>
+                  <h3 style={{ marginBottom: '15px' }}>Empfohlene Maßnahmen</h3>
+                  <ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px', color: 'var(--color-text-secondary)' }}>
+                    {results?.recommendations.map((rec, i) => (
+                      <li key={i} style={{ marginBottom: '10px' }}>{rec}</li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}>
+                  <p style={{ marginBottom: '20px', fontSize: '17px' }}>
+                    Möchten Sie eine detaillierte IT-Infrastrukturanalyse? Kontaktieren Sie uns für eine unverbindliche Beratung.
+                  </p>
+                  <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+                    <Link href="/kontakt" className="btn btn-primary">
+                      Jetzt Kontakt aufnehmen
+                    </Link>
+                    <button
+                      onClick={() => {
+                        setShowResults(false)
+                        setAnswers({})
+                      }}
+                      className="btn btn-secondary"
+                    >
+                      Erneut starten
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/app/unternehmen/tools/schulungsbedarf/page.tsx b/app/unternehmen/tools/schulungsbedarf/page.tsx
new file mode 100755
index 0000000..3135cc1
--- /dev/null
+++ b/app/unternehmen/tools/schulungsbedarf/page.tsx
@@ -0,0 +1,258 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import Link from 'next/link'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Schulungsbedarf() {
+  const [employees, setEmployees] = useState('')
+  const [departments, setDepartments] = useState('')
+  const [selectedTopics, setSelectedTopics] = useState<string[]>([])
+
+  const topics = [
+    'IT-Security für Mitarbeiter',
+    'Office-Software Optimierung',
+    'Datenschutz DSGVO',
+    'Cloud-Computing Grundlagen',
+    'Systemadministration',
+    'Netzwerktechnik',
+  ]
+
+  const toggleTopic = (topic: string) => {
+    if (selectedTopics.includes(topic)) {
+      setSelectedTopics(selectedTopics.filter(t => t !== topic))
+    } else {
+      setSelectedTopics([...selectedTopics, topic])
+    }
+  }
+
+  const calculateEstimate = () => {
+    const empCount = parseInt(employees) || 0
+    const deptCount = parseInt(departments) || 1
+    const topicCount = selectedTopics.length || 1
+
+    // Basis-Schätzung: 1 Tag pro Thema, 0.5 Tage pro 10 Mitarbeiter
+    const baseDays = topicCount * 1
+    const employeeDays = Math.ceil(empCount / 10) * 0.5
+    const departmentFactor = Math.max(1, deptCount * 0.2)
+
+    const totalDays = Math.ceil((baseDays + employeeDays) * departmentFactor)
+    const estimatedWeeks = Math.ceil(totalDays / 5)
+    const estimatedMonths = Math.ceil(totalDays / 20)
+
+    return {
+      totalDays,
+      estimatedWeeks,
+      estimatedMonths,
+      empCount,
+      topicCount,
+    }
+  }
+
+  const [showResults, setShowResults] = useState(false)
+  const estimate = calculateEstimate()
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Schulungsbedarfs-Rechner</h1>
+            <p className="page-hero-subtitle">
+              Schätzen Sie den Umfang Ihrer IT-Schulung
+            </p>
+          </motion.div>
+        </section>
+
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="content-block"
+            >
+              <h2>Ermitteln Sie Ihren Schulungsbedarf</h2>
+              <p>
+                Geben Sie einige Informationen zu Ihrem Unternehmen ein und erhalten Sie eine 
+                erste Schätzung des potenziellen Schulungsumfangs.
+              </p>
+            </motion.div>
+
+            <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+                className="feature-card"
+                style={{ marginBottom: '30px', textAlign: 'left' }}
+              >
+                <h3 style={{ marginBottom: '20px' }}>Anzahl der Mitarbeiter</h3>
+                <input
+                  type="number"
+                  value={employees}
+                  onChange={(e) => setEmployees(e.target.value)}
+                  placeholder="z.B. 50"
+                  style={{
+                    width: '100%',
+                    padding: '12px 16px',
+                    fontSize: '17px',
+                    background: 'rgba(255, 255, 255, 0.05)',
+                    border: '1px solid rgba(255, 255, 255, 0.1)',
+                    borderRadius: '10px',
+                    color: 'var(--color-text)',
+                    fontFamily: 'var(--font-primary)',
+                  }}
+                />
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="feature-card"
+                style={{ marginBottom: '30px', textAlign: 'left' }}
+              >
+                <h3 style={{ marginBottom: '20px' }}>Anzahl der Abteilungen</h3>
+                <input
+                  type="number"
+                  value={departments}
+                  onChange={(e) => setDepartments(e.target.value)}
+                  placeholder="z.B. 5"
+                  style={{
+                    width: '100%',
+                    padding: '12px 16px',
+                    fontSize: '17px',
+                    background: 'rgba(255, 255, 255, 0.05)',
+                    border: '1px solid rgba(255, 255, 255, 0.1)',
+                    borderRadius: '10px',
+                    color: 'var(--color-text)',
+                    fontFamily: 'var(--font-primary)',
+                  }}
+                />
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+                className="feature-card"
+                style={{ marginBottom: '30px', textAlign: 'left' }}
+              >
+                <h3 style={{ marginBottom: '20px' }}>Gewünschte Schulungsthemen</h3>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                  {topics.map((topic) => (
+                    <label
+                      key={topic}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: '12px',
+                        background: selectedTopics.includes(topic) ? 'rgba(0, 113, 227, 0.1)' : 'rgba(255, 255, 255, 0.05)',
+                        border: `1px solid ${selectedTopics.includes(topic) ? 'var(--color-accent)' : 'rgba(255, 255, 255, 0.1)'}`,
+                        borderRadius: '8px',
+                        cursor: 'pointer',
+                        transition: 'all 0.3s ease',
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedTopics.includes(topic)}
+                        onChange={() => toggleTopic(topic)}
+                        style={{ marginRight: '10px' }}
+                      />
+                      {topic}
+                    </label>
+                  ))}
+                </div>
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+              >
+                <button
+                  onClick={() => setShowResults(true)}
+                  className="btn btn-primary"
+                  style={{ width: '100%' }}
+                  disabled={!employees || selectedTopics.length === 0}
+                >
+                  Schulungsbedarf berechnen
+                </button>
+              </motion.div>
+
+              {showResults && (
+                <motion.div
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="feature-card-large"
+                  style={{ marginTop: '40px', textAlign: 'left' }}
+                >
+                  <h2 style={{ marginBottom: '30px' }}>Geschätzter Schulungsbedarf</h2>
+
+                  <div style={{ marginBottom: '30px' }}>
+                    <h3 style={{ marginBottom: '15px' }}>Ihre Angaben</h3>
+                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
+                      <strong>Mitarbeiter:</strong> {estimate.empCount}<br />
+                      <strong>Abteilungen:</strong> {departments || 'Nicht angegeben'}<br />
+                      <strong>Gewählte Themen:</strong> {estimate.topicCount}
+                    </p>
+                  </div>
+
+                  <div style={{ marginBottom: '30px' }}>
+                    <h3 style={{ marginBottom: '15px' }}>Geschätzter Umfang</h3>
+                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
+                      Basierend auf Ihren Angaben schätzen wir einen Schulungsbedarf von ca. <strong>{estimate.totalDays} Tagen</strong> 
+                      ({estimate.estimatedWeeks} Wochen / {estimate.estimatedMonths} Monate).
+                    </p>
+                    <p style={{ fontSize: '15px', lineHeight: '1.7', color: 'var(--color-text-secondary)', marginTop: '15px', fontStyle: 'italic' }}>
+                      * Dies ist eine erste Schätzung. Der tatsächliche Umfang kann je nach spezifischen Anforderungen variieren.
+                    </p>
+                  </div>
+
+                  <div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}>
+                    <p style={{ marginBottom: '20px', fontSize: '17px' }}>
+                      Möchten Sie ein individuelles Schulungskonzept entwickeln? Kontaktieren Sie uns für eine detaillierte Beratung.
+                    </p>
+                    <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+                      <Link href="/kontakt" className="btn btn-primary">
+                        Jetzt Beratung anfragen
+                      </Link>
+                      <button
+                        onClick={() => {
+                          setShowResults(false)
+                          setEmployees('')
+                          setDepartments('')
+                          setSelectedTopics([])
+                        }}
+                        className="btn btn-secondary"
+                      >
+                        Erneut berechnen
+                      </button>
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100755
index 0000000..6f0bc0f
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +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>
+  )
+}
+
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
new file mode 100755
index 0000000..6f77d1b
--- /dev/null
+++ b/components/Navigation.tsx
@@ -0,0 +1,81 @@
+'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>
+  )
+}
+
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100755
index 0000000..5c23dc4
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,15 @@
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "3001:3000"
+    environment:
+      - NODE_ENV=development
+    volumes:
+      - .:/app
+      - /app/node_modules
+      - /app/.next
+    restart: unless-stopped
+
diff --git a/next.config.js b/next.config.js
new file mode 100755
index 0000000..8f701a5
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
+
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..11c1e2b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "doing-it",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "framer-motion": "^10.16.16"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.0.4"
+  }
+}
+
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100755
index 0000000..e4775d1
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+