fix(andreknie.de): restore hero portrait quality

Reviewed and corrected. Verification: 47 tests passed; production build and source lint passed; all 15 routes have one title, description, canonical, main and h1; OG assets return HTTP 200.

privat/CV/andreknie.de/.gitea/workflows/deploy.yml

@@ -18,6 +18,10 @@ jobs:
         run: |
           npm ci
           npm run build
+          node scripts/check-bundle.mjs
+          test -s dist/index.html
+          test -d dist/assets
+          test -n "$(find dist/assets -type f -print -quit)"
 
       - name: Copy project files to VM
         uses: appleboy/scp-action@v0.1.7
@@ -25,7 +29,7 @@ jobs:
           host: ${{ secrets.DEPLOY_SSH_HOST }}
           username: ${{ secrets.DEPLOY_SSH_USER }}
           key: ${{ secrets.DEPLOY_SSH_KEY }}
-          source: "Caddyfile,*,dist/**,dist/.*"
+          source: "Caddyfile,docker-compose.yml,Dockerfile,server/**,package.json,package-lock.json,dist/**,dist/.*"
           target: "/opt/orchestrator/privat/CV/andreknie.de"
 
       - name: Execute Deployment on VM
@@ -35,6 +39,7 @@ jobs:
           username: ${{ secrets.DEPLOY_SSH_USER }}
           key: ${{ secrets.DEPLOY_SSH_KEY }}
           script: |
+            set -Eeuo pipefail
             cd /opt/orchestrator/privat/CV/andreknie.de
             
             # 1. Sichere .env aus den Gitea Secrets generieren
@@ -55,15 +60,37 @@ jobs:
             HASH_SALT=${{ secrets.UMAMI_HASH_SALT }}
             EOF
             
-            # 2. Frontend-Build in den Caddy-Ordner verschieben
-            mkdir -p site
-            # Wenn dist existiert, kopiere den Inhalt
-            if [ -d "dist" ]; then
-              cp -r dist/* site/ || true
-              cp -r dist/.* site/ 2>/dev/null || true
-            else
-              echo "FEHLER: dist Ordner existiert nicht!"
+            # 2. Vollständiges Frontend als begrenztes Release vorbereiten.
+            #    Die Release-ID stammt aus dem Commit und bleibt rückverfolgbar.
+            test -s dist/index.html
+            test -d dist/assets
+            release_id="${{ github.sha }}"
+            test -n "$release_id"
+            case "$release_id" in
+              (*[!A-Za-z0-9._-]*) echo "Ungültige Release-ID"; exit 1 ;;
+            esac
+            release_dir="releases/release-${release_id}"
+            previous_dir="releases/previous"
+            mkdir -p releases
+            if [ -e "$release_dir" ]; then rm -rf -- "$release_dir"; fi
+            mkdir -p "$release_dir"
+            cp -a dist/. "$release_dir/"
+            test -s "$release_dir/index.html"
+            test -n "$(find "$release_dir/assets" -type f -print -quit)"
+
+            rollback() {
+              if [ -d "$previous_dir" ]; then
+                rm -rf -- site
+                mv -- "$previous_dir" site
+                echo "Rollback auf das vorherige Release ausgeführt."
               fi
+            }
+            trap rollback ERR
+            if [ -e site ]; then
+              rm -rf -- "$previous_dir"
+              mv -- site "$previous_dir"
+            fi
+            mv -- "$release_dir" site
             
             # Debugging: Zeige an, ob die Dateien wirklich da sind
             echo "INHALT VON SITE:"
@@ -77,3 +104,8 @@ jobs:
             docker compose exec -T caddy grep -n "Content-Security-Policy" /etc/caddy/Caddyfile
             docker compose exec -T caddy caddy reload --config /etc/caddy/Caddyfile || true
             docker compose up -d --force-recreate caddy
+            trap - ERR
+
+            # Abgebrochene temporäre Releases entfernen. Neben site bleibt
+            # höchstens ein klar benannter Rollback-Stand erhalten.
+            find releases -mindepth 1 -maxdepth 1 -type d -name 'release-*' -exec rm -rf -- {} +

privat/CV/andreknie.de/index.html

@@ -4,8 +4,19 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/logos/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dr. André Knie — KI, Transformation & Leadership</title>
-    <meta name="description" content="Nüchterne KI-Expertise für Mittelstand, Verwaltung und Hochschulen. Souverän, praktisch, evidenzbasiert." />
+    <title data-seo-fallback>Dr. André Knie – Digitale Souveränität und KI</title>
+    <meta data-seo-fallback name="description" content="Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren." />
+    <link data-seo-fallback rel="canonical" href="https://andreknie.de/" />
+    <meta data-seo-fallback property="og:type" content="website" />
+    <meta data-seo-fallback property="og:url" content="https://andreknie.de/" />
+    <meta data-seo-fallback property="og:title" content="Dr. André Knie – Digitale Souveränität und KI" />
+    <meta data-seo-fallback property="og:description" content="Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren." />
+    <meta data-seo-fallback property="og:image" content="https://andreknie.de/images/andre-knie.webp" />
+    <meta data-seo-fallback name="twitter:card" content="summary_large_image" />
+    <meta data-seo-fallback name="twitter:url" content="https://andreknie.de/" />
+    <meta data-seo-fallback name="twitter:title" content="Dr. André Knie – Digitale Souveränität und KI" />
+    <meta data-seo-fallback name="twitter:description" content="Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren." />
+    <meta data-seo-fallback name="twitter:image" content="https://andreknie.de/images/andre-knie.webp" />
     <!-- Umami Analytics -->
     <script
       defer

privat/CV/andreknie.de/plugins/vite-plugin-content.js

@@ -7,8 +7,13 @@ import * as yaml from 'js-yaml'
 const CONTENT_DIR = resolve(process.cwd(), 'content')
 const VIRTUAL_MODULE_ID = 'virtual:content'
 const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID
+const DETAIL_LOADERS_MODULE_ID = 'virtual:content-detail-loaders'
+const RESOLVED_DETAIL_LOADERS_MODULE_ID = '\0' + DETAIL_LOADERS_MODULE_ID
+const DETAIL_MODULE_PREFIX = 'virtual:content-detail/'
+const RESOLVED_DETAIL_MODULE_PREFIX = '\0' + DETAIL_MODULE_PREFIX
+const DETAIL_TYPES = ['posts', 'kniepunkt']
 
-function readContentDir(subdir) {
+function readContentDir(subdir, includeBodies = false) {
   const dir = join(CONTENT_DIR, subdir)
   if (!existsSync(dir)) return []
   
@@ -22,10 +27,12 @@ function readContentDir(subdir) {
       if (ext === '.md') {
         const raw = readFileSync(filepath, 'utf-8')
         const { data, content } = matter(raw)
+        const body = renderMarkdownContent(content)
+        const searchText = body.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 320)
         return {
           ...data,
           slug,
-          body: marked(content),
+          ...(includeBodies ? { body } : { searchText }),
           _source: `${subdir}/${filename}`
         }
       }
@@ -41,6 +48,18 @@ function readContentDir(subdir) {
     .filter(Boolean)
 }
 
+export function renderMarkdownContent(content) {
+  const tokens = marked.lexer(content)
+  const firstContentToken = tokens.findIndex(token => token.type !== 'space')
+  const firstToken = tokens[firstContentToken]
+
+  if (firstToken?.type === 'heading' && firstToken.depth === 1) {
+    tokens.splice(firstContentToken, 1)
+  }
+
+  return marked.parser(tokens)
+}
+
 function readMetaFile(filename) {
   const filepath = join(CONTENT_DIR, 'meta', filename)
   if (!existsSync(filepath)) return null
@@ -48,15 +67,15 @@ function readMetaFile(filename) {
   return yaml.load(raw)
 }
 
-function loadAllContent() {
+function loadAllContent(includeBodies = false) {
   return {
-    posts: readContentDir('posts'),
-    kniepunkt: readContentDir('kniepunkt'),
-    podcast: readContentDir('podcast'),
-    talks: readContentDir('talks'),
-    consulting: readContentDir('consulting'),
-    resources: readContentDir('resources'),
-    events: readContentDir('events'),
+    posts: readContentDir('posts', includeBodies),
+    kniepunkt: readContentDir('kniepunkt', includeBodies),
+    podcast: readContentDir('podcast', includeBodies),
+    talks: readContentDir('talks', includeBodies),
+    consulting: readContentDir('consulting', includeBodies),
+    resources: readContentDir('resources', includeBodies),
+    events: readContentDir('events', includeBodies),
     meta: {
       profile: readMetaFile('profile.yaml'),
       stats: readMetaFile('stats.yaml'),
@@ -70,25 +89,57 @@ function loadAllContent() {
   }
 }
 
+function createDetailLoadersModule() {
+  const typeEntries = DETAIL_TYPES.map(type => {
+    const loaders = readContentDir(type)
+      .map(item => `${JSON.stringify(item.slug)}: () => import(${JSON.stringify(`${DETAIL_MODULE_PREFIX}${type}/${item.slug}`)})`)
+      .join(',\n')
+    return `${JSON.stringify(type)}: {\n${loaders}\n}`
+  })
+
+  return `export default {\n${typeEntries.join(',\n')}\n}`
+}
+
+function loadDetailModule(id) {
+  const relativeId = id.slice(RESOLVED_DETAIL_MODULE_PREFIX.length)
+  const separator = relativeId.indexOf('/')
+  if (separator < 1) return null
+
+  const type = relativeId.slice(0, separator)
+  const slug = relativeId.slice(separator + 1)
+  if (!DETAIL_TYPES.includes(type)) return null
+
+  const item = readContentDir(type, true).find(candidate => candidate.slug === slug)
+  return item ? `export default ${JSON.stringify(item)}` : null
+}
+
 export default function contentPlugin() {
   return {
     name: 'vite-plugin-content',
     resolveId(id) {
       if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID
+      if (id === DETAIL_LOADERS_MODULE_ID) return RESOLVED_DETAIL_LOADERS_MODULE_ID
+      if (id.startsWith(DETAIL_MODULE_PREFIX)) return `\0${id}`
     },
     load(id) {
       if (id === RESOLVED_VIRTUAL_MODULE_ID) {
         const content = loadAllContent()
         return `export default ${JSON.stringify(content)}`
       }
+      if (id === RESOLVED_DETAIL_LOADERS_MODULE_ID) return createDetailLoadersModule()
+      if (id.startsWith(RESOLVED_DETAIL_MODULE_PREFIX)) return loadDetailModule(id)
     },
     handleHotUpdate({ file, server }) {
       if (file.includes('content')) {
-        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID)
-        if (mod) {
-          server.moduleGraph.invalidateModule(mod)
-          return [mod]
-        }
+        const modules = [
+          server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID),
+          server.moduleGraph.getModuleById(RESOLVED_DETAIL_LOADERS_MODULE_ID),
+          ...Array.from(server.moduleGraph.idToModuleMap.entries())
+            .filter(([id]) => id.startsWith(RESOLVED_DETAIL_MODULE_PREFIX))
+            .map(([, module]) => module),
+        ].filter(Boolean)
+        modules.forEach(module => server.moduleGraph.invalidateModule(module))
+        return modules
       }
     }
   }

privat/CV/andreknie.de/plugins/vite-plugin-content.test.js

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { renderMarkdownContent } from './vite-plugin-content.js'
+
+describe('markdown content rendering', () => {
+  it('removes only an initial level-one heading', () => {
+    const html = renderMarkdownContent('# Duplicate title\n\nIntro\n\n## Section')
+
+    expect(html).not.toContain('<h1>Duplicate title</h1>')
+    expect(html).toContain('<p>Intro</p>')
+    expect(html).toContain('<h2>Section</h2>')
+  })
+
+  it('keeps content when no initial level-one heading exists', () => {
+    const html = renderMarkdownContent('Intro\n\n# Deliberate heading')
+
+    expect(html).toContain('<p>Intro</p>')
+    expect(html).toContain('<h1>Deliberate heading</h1>')
+  })
+})

privat/CV/andreknie.de/scripts/check-bundle.mjs

@@ -0,0 +1,27 @@
+import { readdirSync, statSync } from 'node:fs'
+import { basename, join } from 'node:path'
+
+const assetsDir = join(process.cwd(), 'dist', 'assets')
+const files = readdirSync(assetsDir)
+const entry = files.find(file => /^index-[^/]+\.js$/.test(file))
+const detailSlugs = ['posts', 'kniepunkt'].flatMap(type =>
+  readdirSync(join(process.cwd(), 'content', type))
+    .filter(file => file.endsWith('.md'))
+    .map(file => basename(file, '.md')),
+)
+const missingDetailChunks = detailSlugs.filter(
+  slug => !files.some(file => file.startsWith(`${slug}-`) && file.endsWith('.js')),
+)
+const maxInitialBytes = 400 * 1024
+
+if (!entry) throw new Error('Kein initialer JavaScript-Entry-Chunk gefunden.')
+if (missingDetailChunks.length > 0) {
+  throw new Error(`Fehlende Content-Detail-Chunks: ${missingDetailChunks.join(', ')}`)
+}
+
+const entryBytes = statSync(join(assetsDir, entry)).size
+if (entryBytes > maxInitialBytes) {
+  throw new Error(`Initialer JS-Chunk ist zu groß: ${entryBytes} Bytes (Limit ${maxInitialBytes}).`)
+}
+
+console.log(`Bundle-Prüfung: ${entry}=${entryBytes} Bytes, Detail-Chunks=${detailSlugs.length}`)

privat/CV/andreknie.de/src/App.jsx

@@ -1,25 +1,30 @@
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import Navigation from './components/Navigation'
 import Footer from './components/Footer'
 import BackgroundPattern from './components/BackgroundPattern'
 import BottomDock from './components/BottomDock'
 import ScrollToTop from './components/ScrollToTop'
-import Home from './pages/Home'
-import Articles from './pages/Articles'
-import ArticleSingle from './pages/ArticleSingle'
-import Kniepunkt from './pages/Kniepunkt'
-import KniepunktIssue from './pages/KniepunktIssue'
-import Podcast from './pages/Podcast'
-import Speaking from './pages/Speaking'
-import Consulting from './pages/Consulting'
-import Resources from './pages/Resources'
-import Contact from './pages/Contact'
-import Impressum from './pages/Impressum'
-import Datenschutz from './pages/Datenschutz'
-import About from './pages/About'
-import NotFound from './pages/NotFound'
-import Confirmation from './pages/Confirmation'
+
+const Home = lazy(() => import('./pages/Home'))
+const Articles = lazy(() => import('./pages/Articles'))
+const ArticleSingle = lazy(() => import('./pages/ArticleSingle'))
+const Kniepunkt = lazy(() => import('./pages/Kniepunkt'))
+const KniepunktIssue = lazy(() => import('./pages/KniepunktIssue'))
+const Podcast = lazy(() => import('./pages/Podcast'))
+const Speaking = lazy(() => import('./pages/Speaking'))
+const Consulting = lazy(() => import('./pages/Consulting'))
+const Resources = lazy(() => import('./pages/Resources'))
+const Contact = lazy(() => import('./pages/Contact'))
+const Impressum = lazy(() => import('./pages/Impressum'))
+const Datenschutz = lazy(() => import('./pages/Datenschutz'))
+const About = lazy(() => import('./pages/About'))
+const NotFound = lazy(() => import('./pages/NotFound'))
+const Confirmation = lazy(() => import('./pages/Confirmation'))
+
+function PageFallback() {
+  return <div className="page-loading" role="status" aria-live="polite">Inhalt wird geladen …</div>
+}
 
 export default function App() {
   return (
@@ -28,6 +33,7 @@ export default function App() {
       <div className="app-root">
         <BackgroundPattern />
         <Navigation />
+        <Suspense fallback={<PageFallback />}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/artikel" element={<Articles />} />
@@ -45,6 +51,7 @@ export default function App() {
             <Route path="/bestaetigung" element={<Confirmation />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
+        </Suspense>
         <Footer />
         <BottomDock />
       </div>

privat/CV/andreknie.de/src/components/AnimationLifecycle.test.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import BackgroundPattern from './BackgroundPattern'
+import DotCloudIcon from './DotCloudIcon'
+
+const context = {
+  arc: vi.fn(),
+  beginPath: vi.fn(),
+  clearRect: vi.fn(),
+  closePath: vi.fn(),
+  drawImage: vi.fn(),
+  ellipse: vi.fn(),
+  fill: vi.fn(),
+  getImageData: vi.fn(() => ({ data: new Uint8ClampedArray(140 * 140 * 4) })),
+  lineTo: vi.fn(),
+  moveTo: vi.fn(),
+  quadraticCurveTo: vi.fn(),
+  scale: vi.fn(),
+  setTransform: vi.fn(),
+}
+
+function setReducedMotion(matches) {
+  vi.stubGlobal('matchMedia', vi.fn(() => ({
+    matches,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  })))
+}
+
+describe('canvas animation lifecycle', () => {
+  beforeEach(() => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context)
+    Object.defineProperty(document, 'hidden', { configurable: true, value: false })
+    vi.stubGlobal('requestAnimationFrame', vi.fn(() => 17))
+    vi.stubGlobal('cancelAnimationFrame', vi.fn())
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+  })
+
+  it('does not schedule background animation with reduced motion', () => {
+    setReducedMotion(true)
+    render(<BackgroundPattern />)
+    expect(requestAnimationFrame).not.toHaveBeenCalled()
+  })
+
+  it('cancels a scheduled background frame on unmount', () => {
+    setReducedMotion(false)
+    const { unmount } = render(<BackgroundPattern />)
+    expect(requestAnimationFrame).toHaveBeenCalled()
+
+    unmount()
+    expect(cancelAnimationFrame).toHaveBeenCalledWith(17)
+  })
+
+  it('does not schedule dot animation with reduced motion', async () => {
+    setReducedMotion(true)
+    render(<DotCloudIcon shape="shield" />)
+    await act(async () => Promise.resolve())
+    expect(requestAnimationFrame).not.toHaveBeenCalled()
+  })
+})

privat/CV/andreknie.de/src/components/BackgroundPattern.jsx

@@ -15,12 +15,14 @@ export default function BackgroundPattern() {
     const canvas = canvasRef.current
     if (!canvas) return
     const ctx = canvas.getContext('2d')
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent-color').trim() || '#4a9eff'
 
     function resize() {
       const dpr = window.devicePixelRatio || 1
       canvas.width = window.innerWidth * dpr
       canvas.height = window.innerHeight * dpr
-      ctx.scale(dpr, dpr)
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
       canvas.style.width = window.innerWidth + 'px'
       canvas.style.height = window.innerHeight + 'px'
       initParticles()
@@ -61,8 +63,6 @@ export default function BackgroundPattern() {
       const h = window.innerHeight
       ctx.clearRect(0, 0, w, h)
 
-      const style = getComputedStyle(document.documentElement)
-      const accentColor = style.getPropertyValue('--accent-color').trim() || '#4a9eff'
       const mouse = mouseRef.current
       const repelRadius = 80
 
@@ -99,14 +99,21 @@ export default function BackgroundPattern() {
         ctx.globalAlpha = 1
       })
 
-      animRef.current = requestAnimationFrame(animate)
+      if (!reducedMotion && !document.hidden) animRef.current = requestAnimationFrame(animate)
+    }
+
+    function handleVisibilityChange() {
+      if (document.hidden) cancelAnimationFrame(animRef.current)
+      else if (!reducedMotion) animate()
     }
 
     animate()
+    document.addEventListener('visibilitychange', handleVisibilityChange)
     return () => {
       cancelAnimationFrame(animRef.current)
       window.removeEventListener('resize', resize)
       window.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
     }
   }, [])
 

privat/CV/andreknie.de/src/components/BottomDock.css

@@ -76,6 +76,11 @@
   transform: translateY(-8px) scale(1.15);
 }
 
+.dock-item:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 3px;
+}
+
 .dock-item.active {
   color: var(--accent-color);
   background: rgba(var(--accent-color-rgb), 0.1);

privat/CV/andreknie.de/src/components/BottomDock.jsx

@@ -21,7 +21,9 @@ export default function BottomDock() {
     <div className="dock-container">
       <nav className="dock" aria-label="Schnellnavigation">
         {items.map((item) => {
-          const isActive = location.pathname === item.path
+          const isActive = item.path === '/'
+            ? location.pathname === '/'
+            : location.pathname === item.path || location.pathname.startsWith(`${item.path}/`)
           return (
             <div className={`dock-item-wrapper${item.secondary ? ' dock-item-wrapper-secondary' : ''}`} key={item.path}>
               <span className="dock-tooltip">{item.label}</span>

privat/CV/andreknie.de/src/components/DotCloudIcon.jsx

@@ -20,6 +20,9 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
     const canvas = canvasRef.current
     if (!canvas) return
     const ctx = canvas.getContext('2d')
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    const color = getComputedStyle(document.documentElement).getPropertyValue('--accent-color').trim() || '#4a9eff'
+    let active = true
     const dpr = window.devicePixelRatio || 1
     canvas.width = size * dpr
     canvas.height = size * dpr
@@ -27,6 +30,7 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
 
     async function init() {
       const points = await getShapePoints(shape, size)
+      if (!active) return
       particlesRef.current = points.map(p => ({
         x: p.x, y: p.y,
         baseX: p.x, baseY: p.y,
@@ -34,6 +38,7 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
         vx: 0, vy: 0,
       }))
       initializedRef.current = true
+      animate()
     }
 
     function handleMouseMove(e) {
@@ -48,16 +53,15 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
 
     canvas.addEventListener('mousemove', handleMouseMove)
     canvas.addEventListener('mouseleave', handleMouseLeave)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
 
     function animate() {
       ctx.clearRect(0, 0, size, size)
       if (!initializedRef.current) {
-        animRef.current = requestAnimationFrame(animate)
+        if (!reducedMotion) animRef.current = requestAnimationFrame(animate)
         return
       }
 
-      const style = getComputedStyle(document.documentElement)
-      const color = style.getPropertyValue('--accent-color').trim() || '#4a9eff'
       const mouse = mouseRef.current
       const repelRadius = 25
 
@@ -98,16 +102,22 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
         ctx.fill()
       })
       ctx.globalAlpha = 1
-      animRef.current = requestAnimationFrame(animate)
+      if (!reducedMotion && !document.hidden) animRef.current = requestAnimationFrame(animate)
+    }
+
+    function handleVisibilityChange() {
+      if (document.hidden) cancelAnimationFrame(animRef.current)
+      else if (!reducedMotion) animate()
     }
 
     init()
-    animate()
 
     return () => {
+      active = false
       cancelAnimationFrame(animRef.current)
       canvas.removeEventListener('mousemove', handleMouseMove)
       canvas.removeEventListener('mouseleave', handleMouseLeave)
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
     }
   }, [shape, size])
 
@@ -177,10 +187,9 @@ function sampleGermany(size) {
         }
       }
       
-      console.log('[DotCloudIcon] Germany points:', points.length)
       resolve(points)
     }
-    img.onerror = () => { console.error('[DotCloudIcon] Failed to load germany image'); resolve([]) }
+    img.onerror = () => resolve([])
     img.src = '/images/germany-outline.png'
   })
 }

privat/CV/andreknie.de/src/components/LogoMarquee.css

@@ -26,6 +26,11 @@
   -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 }
 
+.marquee-track:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+}
+
 .marquee-inner {
   display: flex;
   gap: 60px;
@@ -34,6 +39,11 @@
   width: max-content;
 }
 
+.marquee-section:hover .marquee-inner,
+.marquee-section:focus-within .marquee-inner {
+  animation-play-state: paused;
+}
+
 .marquee-item {
   flex-shrink: 0;
   display: flex;

privat/CV/andreknie.de/src/components/LogoMarquee.jsx

@@ -18,10 +18,10 @@ export default function LogoMarquee({ logos = [], title = '', titleAccent = '',
           {title} {titleAccent && <span className="text-gradient">{titleAccent}</span>}
         </h2>
       )}
-      <div className="marquee-track">
+      <div className="marquee-track" role="region" aria-label="Kunden- und Partnerlogos" tabIndex="0">
         <div className="marquee-inner">
           {allLogos.map((logo, i) => (
-            <div className="marquee-item" key={i}>
+            <div className="marquee-item" key={i} aria-hidden={i >= logos.length}>
               {logo.src ? (
                 <img src={logo.src} alt={logo.name} />
               ) : (

privat/CV/andreknie.de/src/components/LogoMarquee.test.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import LogoMarquee from './LogoMarquee'
+
+describe('LogoMarquee accessibility', () => {
+  it('hides loop copies from assistive technology', () => {
+    const { container } = render(<LogoMarquee logos={[{ name: 'Logo A' }, { name: 'Logo B' }]} />)
+    expect(container.querySelectorAll('.marquee-item:not([aria-hidden="true"])')).toHaveLength(2)
+    expect(container.querySelectorAll('.marquee-item[aria-hidden="true"]')).toHaveLength(4)
+    expect(container.querySelector('.marquee-track').tabIndex).toBe(0)
+  })
+})

privat/CV/andreknie.de/src/components/Navigation.css

@@ -75,6 +75,14 @@
   padding: 8px;
 }
 
+.hamburger:focus-visible,
+.nav-link:focus-visible,
+.nav-mobile-link:focus-visible,
+.logo:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 4px;
+}
+
 .hamburger span {
   display: block;
   width: 24px;

privat/CV/andreknie.de/src/components/Navigation.jsx

@@ -13,7 +13,15 @@ export default function Navigation() {
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
-  // Close the mobile menu whenever navigation occurs.
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.key === 'Escape') setMobileOpen(false)
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
   function closeMenu() {
     setMobileOpen(false)
   }
@@ -28,8 +36,10 @@ export default function Navigation() {
     { to: '/kontakt', label: 'Kontakt' },
   ]
 
+  const isActive = (path) => location.pathname === path || location.pathname.startsWith(`${path}/`)
+
   return (
-    <nav className={`navigation ${scrolled ? 'scrolled' : ''}`}>
+    <nav className={`navigation ${scrolled ? 'scrolled' : ''}`} aria-label="Hauptnavigation">
       <div className="nav-container app-container">
         <Link to="/" className="logo" onClick={closeMenu}>
           <span className="logo-text">Dr. André Knie</span>
@@ -40,18 +50,21 @@ export default function Navigation() {
             <Link
               key={link.to}
               to={link.to}
-              className={`nav-link ${location.pathname === link.to ? 'active' : ''}`}
+              className={`nav-link ${isActive(link.to) ? 'active' : ''}`}
+              aria-current={isActive(link.to) ? 'page' : undefined}
             >
               {link.label}
             </Link>
           ))}
         </div>
 
-        {/* Mobile hamburger (only visible on small screens) */}
         <button
           className={`hamburger ${mobileOpen ? 'active' : ''}`}
-          onClick={() => setMobileOpen(!mobileOpen)}
-          aria-label="Menü öffnen"
+          onClick={() => setMobileOpen(open => !open)}
+          aria-label={mobileOpen ? 'Menü schließen' : 'Menü öffnen'}
+          aria-expanded={mobileOpen}
+          aria-controls="mobile-navigation"
+          type="button"
         >
           <span></span>
           <span></span>
@@ -59,14 +72,14 @@ export default function Navigation() {
         </button>
       </div>
 
-      {/* Mobile dropdown */}
-      <div className={`nav-mobile ${mobileOpen ? 'open' : ''}`}>
+      <div id="mobile-navigation" className={`nav-mobile ${mobileOpen ? 'open' : ''}`} hidden={!mobileOpen}>
         {navLinks.map(link => (
           <Link
             key={link.to}
             to={link.to}
-            className={`nav-mobile-link ${location.pathname === link.to ? 'active' : ''}`}
+            className={`nav-mobile-link ${isActive(link.to) ? 'active' : ''}`}
             onClick={closeMenu}
+            aria-current={isActive(link.to) ? 'page' : undefined}
           >
             {link.label}
           </Link>

privat/CV/andreknie.de/src/components/Navigation.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import Navigation from './Navigation'
+
+describe('Navigation accessibility', () => {
+  it('exposes menu state and closes it with Escape', () => {
+    render(<MemoryRouter><Navigation /></MemoryRouter>)
+    const toggle = screen.getByRole('button', { name: 'Menü öffnen' })
+    const mobileNavigation = document.getElementById('mobile-navigation')
+
+    expect(mobileNavigation.hidden).toBe(true)
+    fireEvent.click(toggle)
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(toggle.getAttribute('aria-controls')).toBe('mobile-navigation')
+    expect(mobileNavigation.hidden).toBe(false)
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    expect(toggle.getAttribute('aria-label')).toBe('Menü öffnen')
+    expect(mobileNavigation.hidden).toBe(true)
+  })
+
+  it('marks detail navigation routes as current', () => {
+    render(<MemoryRouter initialEntries={['/artikel/beispiel']}><Navigation /></MemoryRouter>)
+    expect(screen.getAllByRole('link', { name: 'Artikel' }).every(link => link.getAttribute('aria-current') === 'page')).toBe(true)
+  })
+})

privat/CV/andreknie.de/src/components/NewsletterSignup.jsx

@@ -40,7 +40,7 @@ export default function NewsletterSignup({ newsletter }) {
         {newsletter.email_signup && (
           <form className="newsletter-email" onSubmit={handleSubmit}>
             {/* Honeypot */}
-            <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden' }}>
+            <div hidden>
               <label>
                 Firmen-Website (bitte leer lassen)
                 <input name="company_website" tabIndex={-1} autoComplete="off" value={form.company_website} onChange={(e) => setForm(p => ({ ...p, company_website: e.target.value }))} />
@@ -48,7 +48,7 @@ export default function NewsletterSignup({ newsletter }) {
             </div>
 
             {success ? (
-              <p className="newsletter-success">Fast geschafft! Bitte bestätige die Anmeldung in der E-Mail, die wir dir gerade geschickt haben.</p>
+              <p className="newsletter-success" role="status" aria-live="polite">Fast geschafft! Bitte bestätige die Anmeldung in der E-Mail, die wir dir gerade geschickt haben.</p>
             ) : (
               <>
                 <div className="newsletter-input-row">
@@ -60,13 +60,15 @@ export default function NewsletterSignup({ newsletter }) {
                     value={form.email}
                     onChange={(e) => setForm(p => ({ ...p, email: e.target.value }))}
                     aria-label="E-Mail-Adresse"
+                    aria-invalid={Boolean(errors.email)}
+                    aria-describedby={errors.email ? 'newsletter-email-error' : undefined}
                   />
                   <button type="submit" className="secondary-button" disabled={loading}>
                     {loading ? '...' : 'Abonnieren'}
                   </button>
                 </div>
-                {errors.email && <p className="newsletter-error">{errors.email}</p>}
-                {serverError && <p className="newsletter-error">{serverError}</p>}
+                {errors.email && <p id="newsletter-email-error" className="newsletter-error" role="alert">{errors.email}</p>}
+                {serverError && <p className="newsletter-error" role="alert" aria-live="assertive">{serverError}</p>}
               </>
             )}
           </form>

privat/CV/andreknie.de/src/components/SEOHead.jsx

@@ -1,33 +1,36 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { absoluteUrl, BRAND_SUFFIX, DEFAULT_DESCRIPTION, DEFAULT_IMAGE, DEFAULT_TITLE, normalizeTitle } from './seo.js'
 
-export default function SEOHead({ title, description, url, image, type = 'website' }) {
-  const defaultTitle = "Dr. André Knie - Experte für Digitale Souveränität"
-  const defaultDescription = "Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren."
+export default function SEOHead({ title, description, url, image, type = 'website', noindex = false }) {
+  const pageTitle = normalizeTitle(title)
+  const siteTitle = pageTitle === DEFAULT_TITLE ? pageTitle : `${pageTitle}${BRAND_SUFFIX}`
+  const siteDescription = description || DEFAULT_DESCRIPTION
+  const canonicalUrl = absoluteUrl(url || '/', '/')
+  const imageUrl = absoluteUrl(image, DEFAULT_IMAGE)
 
-  const siteTitle = title ? `${title} | Dr. André Knie` : defaultTitle
-  const siteDesc = description || defaultDescription
-  const siteUrl = url ? `https://andreknie.de${url}` : "https://andreknie.de"
-  const siteImage = image || "https://andreknie.de/images/og-image.webp"
+  useEffect(() => {
+    document.head.querySelectorAll('[data-seo-fallback]').forEach(node => node.remove())
+  }, [])
 
   return (
     <Helmet>
       <title>{siteTitle}</title>
-      <meta name="description" content={siteDesc} />
+      <meta name="description" content={siteDescription} />
+      <link rel="canonical" href={canonicalUrl} />
+      {noindex && <meta name="robots" content="noindex,follow" />}
 
-      {/* Open Graph / Facebook */}
       <meta property="og:type" content={type} />
-      <meta property="og:url" content={siteUrl} />
+      <meta property="og:url" content={canonicalUrl} />
       <meta property="og:title" content={siteTitle} />
-      <meta property="og:description" content={siteDesc} />
-      <meta property="og:image" content={siteImage} />
+      <meta property="og:description" content={siteDescription} />
+      <meta property="og:image" content={imageUrl} />
 
-      {/* Twitter */}
-      <meta property="twitter:card" content="summary_large_image" />
-      <meta property="twitter:url" content={siteUrl} />
-      <meta property="twitter:title" content={siteTitle} />
-      <meta property="twitter:description" content={siteDesc} />
-      <meta property="twitter:image" content={siteImage} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:url" content={canonicalUrl} />
+      <meta name="twitter:title" content={siteTitle} />
+      <meta name="twitter:description" content={siteDescription} />
+      <meta name="twitter:image" content={imageUrl} />
     </Helmet>
   )
 }

privat/CV/andreknie.de/src/components/SEOHead.test.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { render, cleanup } from '@testing-library/react'
+import { HelmetProvider } from 'react-helmet-async'
+import SEOHead from './SEOHead'
+import { BRAND_SUFFIX } from './seo.js'
+
+afterEach(() => {
+  cleanup()
+  document.head.querySelectorAll('[data-rh="true"]').forEach(node => node.remove())
+})
+
+describe('SEOHead', () => {
+  it('renders one branded title, description, and canonical link', () => {
+    render(
+      <HelmetProvider>
+        <SEOHead title={`Artikel${BRAND_SUFFIX}`} description="Synthetic description" url="/artikel" />
+      </HelmetProvider>,
+    )
+
+    expect(document.head.querySelectorAll('title')).toHaveLength(1)
+    expect(document.title).toBe(`Artikel${BRAND_SUFFIX}`)
+    expect(document.title.match(/Dr\. André Knie/g)).toHaveLength(1)
+    expect(document.head.querySelectorAll('meta[name="description"]')).toHaveLength(1)
+    expect(document.head.querySelector('link[rel="canonical"]')?.getAttribute('href')).toBe('https://andreknie.de/artikel')
+  })
+
+  it('replaces static fallback metadata instead of duplicating it', () => {
+    document.head.insertAdjacentHTML('beforeend', `
+      <title data-seo-fallback>Fallback</title>
+      <meta data-seo-fallback name="description" content="Fallback description">
+      <link data-seo-fallback rel="canonical" href="https://andreknie.de/">
+    `)
+
+    render(
+      <HelmetProvider>
+        <SEOHead title="Artikel" description="Article description" url="/artikel" />
+      </HelmetProvider>,
+    )
+
+    expect(document.head.querySelectorAll('[data-seo-fallback]')).toHaveLength(0)
+    expect(document.head.querySelectorAll('title')).toHaveLength(1)
+    expect(document.head.querySelectorAll('meta[name="description"]')).toHaveLength(1)
+    expect(document.head.querySelectorAll('link[rel="canonical"]')).toHaveLength(1)
+  })
+
+  it('normalizes relative and absolute image URLs', () => {
+    const { rerender } = render(
+      <HelmetProvider>
+        <SEOHead title="Test" image="/images/andre-knie.webp" />
+      </HelmetProvider>,
+    )
+
+    expect(document.head.querySelector('meta[property="og:image"]')?.getAttribute('content')).toBe('https://andreknie.de/images/andre-knie.webp')
+    rerender(
+      <HelmetProvider>
+        <SEOHead title="Test" image="https://cdn.example.invalid/image.webp" />
+      </HelmetProvider>,
+    )
+    expect(document.head.querySelector('meta[property="og:image"]')?.getAttribute('content')).toBe('https://cdn.example.invalid/image.webp')
+  })
+})

privat/CV/andreknie.de/src/components/SpeakerCvRequest.jsx

@@ -43,7 +43,7 @@ export default function SpeakerCvRequest() {
   return (
     <div className="glass-panel" style={{ padding: '32px', marginTop: '8px', width: '100%' }}>
       {success ? (
-        <p style={{ margin: 0, color: 'var(--text-primary)' }}>
+        <p role="status" aria-live="polite" style={{ margin: 0, color: 'var(--text-primary)' }}>
           Danke! Der Speaker CV ist auf dem Weg in dein Postfach.
         </p>
       ) : (
@@ -53,7 +53,7 @@ export default function SpeakerCvRequest() {
           </p>
 
           {/* Honeypot */}
-          <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden' }}>
+          <div hidden>
             <label>
               Firmen-Website (bitte leer lassen)
               <input name="company_website" tabIndex={-1} autoComplete="off" value={form.company_website} onChange={handleChange} />
@@ -61,24 +61,24 @@ export default function SpeakerCvRequest() {
           </div>
 
           <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Name</label>
-            <input name="name" value={form.name} onChange={handleChange} style={inputStyle(errors.name)} />
-            {errors.name && <p style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.name}</p>}
+            <label htmlFor="speaker-name" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Name</label>
+            <input id="speaker-name" name="name" value={form.name} onChange={handleChange} aria-invalid={Boolean(errors.name)} aria-describedby={errors.name ? 'speaker-name-error' : undefined} style={inputStyle(errors.name)} />
+            {errors.name && <p id="speaker-name-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.name}</p>}
           </div>
 
           <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>E-Mail</label>
-            <input name="email" type="email" value={form.email} onChange={handleChange} style={inputStyle(errors.email)} />
-            {errors.email && <p style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.email}</p>}
+            <label htmlFor="speaker-email" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>E-Mail</label>
+            <input id="speaker-email" name="email" type="email" value={form.email} onChange={handleChange} aria-invalid={Boolean(errors.email)} aria-describedby={errors.email ? 'speaker-email-error' : undefined} style={inputStyle(errors.email)} />
+            {errors.email && <p id="speaker-email-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.email}</p>}
           </div>
 
           <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Wer bist Du & warum?</label>
-            <textarea name="message" value={form.message} onChange={handleChange} rows={4} maxLength={2000} style={{ ...inputStyle(errors.message), resize: 'vertical' }} />
-            {errors.message && <p style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.message}</p>}
+            <label htmlFor="speaker-message" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Wer bist Du & warum?</label>
+            <textarea id="speaker-message" name="message" value={form.message} onChange={handleChange} rows={4} maxLength={2000} aria-invalid={Boolean(errors.message)} aria-describedby={errors.message ? 'speaker-message-error' : undefined} style={{ ...inputStyle(errors.message), resize: 'vertical' }} />
+            {errors.message && <p id="speaker-message-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.message}</p>}
           </div>
 
-          {serverError && <p style={{ color: '#ff4444', marginBottom: '16px' }}>{serverError}</p>}
+          {serverError && <p role="alert" aria-live="assertive" style={{ color: '#ff4444', marginBottom: '16px' }}>{serverError}</p>}
 
           <div style={{ display: 'flex', gap: '12px' }}>
             <button type="submit" className="primary-button" disabled={loading}>

privat/CV/andreknie.de/src/components/StatsCube.css

@@ -43,6 +43,13 @@
   100% { transform: rotateY(-360deg); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .cube-container {
+    animation: none;
+    transform: rotateY(0deg);
+  }
+}
+
 .cube-stat-value {
   font-size: 3.5rem;
   font-weight: var(--font-weight-bold);

privat/CV/andreknie.de/src/components/TestimonialSlider.css

@@ -45,6 +45,12 @@
   -ms-overflow-style: none; /* IE/Edge */
 }
 
+.testimonial-scroll-container:focus-visible,
+.testimonial-nav-button:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 4px;
+}
+
 .testimonial-scroll-container.dragging {
   cursor: grabbing;
   scroll-snap-type: none;

privat/CV/andreknie.de/src/components/TestimonialSlider.jsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import './TestimonialSlider.css'
 
@@ -12,7 +12,9 @@ const MIDDLE_SET = Math.floor(LOOP_SETS / 2)
 export default function TestimonialSlider({ testimonials = [] }) {
   const scrollerRef = useRef(null)
   const dragStateRef = useRef({ isDragging: false, startX: 0, scrollLeft: 0 })
+  const recenterTimerRef = useRef(null)
   const [isDragging, setIsDragging] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
   const canLoop = testimonials.length > 1
   const visibleTestimonials = canLoop
     ? Array.from({ length: LOOP_SETS }, () => testimonials).flat()
@@ -46,10 +48,12 @@ export default function TestimonialSlider({ testimonials = [] }) {
   const centerCard = (cardIndex, behavior = 'auto') => {
     const scroller = scrollerRef.current
     if (!scroller) return
+    const normalizedIndex = ((cardIndex % testimonials.length) + testimonials.length) % testimonials.length
+    setActiveIndex(normalizedIndex)
 
     scroller.scrollTo({
       left: getCenteredScrollLeft(cardIndex),
-      behavior,
+      behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : behavior,
     })
   }
 
@@ -67,6 +71,8 @@ export default function TestimonialSlider({ testimonials = [] }) {
     return () => window.cancelAnimationFrame(frameId)
   }, [canLoop, testimonials.length])
 
+  useEffect(() => () => window.clearTimeout(recenterTimerRef.current), [])
+
   const scrollByCard = (direction) => {
     const scroller = scrollerRef.current
     if (!scroller) return
@@ -74,7 +80,8 @@ export default function TestimonialSlider({ testimonials = [] }) {
     const targetIndex = getClosestCardIndex() + direction
     centerCard(targetIndex, 'smooth')
 
-    window.setTimeout(recenterIfNeeded, 450)
+    window.clearTimeout(recenterTimerRef.current)
+    recenterTimerRef.current = window.setTimeout(recenterIfNeeded, 450)
   }
 
   const recenterIfNeeded = () => {
@@ -82,11 +89,12 @@ export default function TestimonialSlider({ testimonials = [] }) {
     if (!canLoop || !scroller) return
 
     const currentIndex = getClosestCardIndex()
+    const normalizedIndex = ((currentIndex % testimonials.length) + testimonials.length) % testimonials.length
+    setActiveIndex(normalizedIndex)
     const lowBoundary = testimonials.length
     const highBoundary = testimonials.length * (LOOP_SETS - 1)
     if (currentIndex >= lowBoundary && currentIndex < highBoundary) return
 
-    const normalizedIndex = ((currentIndex % testimonials.length) + testimonials.length) % testimonials.length
     centerCard(testimonials.length * MIDDLE_SET + normalizedIndex)
   }
 
@@ -123,10 +131,21 @@ export default function TestimonialSlider({ testimonials = [] }) {
     }
   }
 
+  const handleKeyDown = (event) => {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      scrollByCard(-1)
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      scrollByCard(1)
+    }
+  }
+
   if (testimonials.length === 0) return null
 
   return (
-    <section className="testimonials-section app-container">
+    <section className="testimonials-section app-container" aria-labelledby="testimonials-heading">
+      <h2 id="testimonials-heading" className="sr-only">Testimonials</h2>
       <div className="testimonial-slider-controls" aria-label="Testimonials wechseln">
         <button type="button" className="testimonial-nav-button" onClick={() => scrollByCard(-1)} aria-label="Vorheriges Testimonial">
           <ChevronLeft size={22} aria-hidden="true" />
@@ -135,9 +154,17 @@ export default function TestimonialSlider({ testimonials = [] }) {
           <ChevronRight size={22} aria-hidden="true" />
         </button>
       </div>
+      <p className="sr-only" role="status" aria-live="polite">
+        Testimonial {activeIndex + 1} von {testimonials.length}
+      </p>
       <div
         className={`testimonial-scroll-container${isDragging ? ' dragging' : ''}`}
         ref={scrollerRef}
+        role="region"
+        aria-label={`Testimonial ${testimonials.length > 1 ? 'Karussell' : ''}`}
+        aria-roledescription="Karussell"
+        tabIndex="0"
+        onKeyDown={handleKeyDown}
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={stopDragging}
@@ -147,7 +174,7 @@ export default function TestimonialSlider({ testimonials = [] }) {
         }}
       >
         {visibleTestimonials.map((current, i) => (
-          <div className="testimonial-card glass-panel" key={`${current.name}-${i}`}>
+          <div className="testimonial-card glass-panel" key={`${current.name}-${i}`} aria-hidden={canLoop && Math.floor(i / testimonials.length) !== MIDDLE_SET}>
             <div className="testimonial-quote">
               <span className="quote-mark">"</span>
               <p>{current.quote}</p>

privat/CV/andreknie.de/src/components/TestimonialSlider.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import TestimonialSlider from './TestimonialSlider'
+
+describe('TestimonialSlider accessibility', () => {
+  it('exposes only one logical testimonial set', () => {
+    const testimonials = [
+      { name: 'Person A', quote: 'Zitat A', role: 'Rolle A' },
+      { name: 'Person B', quote: 'Zitat B', role: 'Rolle B' },
+      { name: 'Person C', quote: 'Zitat C', role: 'Rolle C' },
+    ]
+    const { container } = render(<TestimonialSlider testimonials={testimonials} />)
+    expect(container.querySelectorAll('.testimonial-card:not([aria-hidden="true"])')).toHaveLength(3)
+    expect(screen.getByRole('status').textContent).toContain('Testimonial 1 von 3')
+  })
+})

privat/CV/andreknie.de/src/components/seo.js

@@ -0,0 +1,16 @@
+export const SITE_URL = 'https://andreknie.de'
+export const BRAND_SUFFIX = ' | Dr. André Knie'
+export const DEFAULT_TITLE = 'Dr. André Knie – Digitale Souveränität und KI'
+export const DEFAULT_DESCRIPTION = 'Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren.'
+export const DEFAULT_IMAGE = '/images/andre-knie.webp'
+
+export function absoluteUrl(value, fallback) {
+  const candidate = value || fallback
+  if (/^https?:\/\//i.test(candidate)) return candidate
+  return new URL(candidate.startsWith('/') ? candidate : `/${candidate}`, SITE_URL).href
+}
+
+export function normalizeTitle(title) {
+  if (!title) return DEFAULT_TITLE
+  return title.endsWith(BRAND_SUFFIX) ? title.slice(0, -BRAND_SUFFIX.length) : title
+}

privat/CV/andreknie.de/src/hooks/useContent.js

@@ -1,4 +1,8 @@
+import { useEffect, useState } from 'react'
 import content from 'virtual:content'
+import detailLoaders from 'virtual:content-detail-loaders'
+
+const detailCache = new Map()
 
 /**
  * Get all content of a given type, sorted by date descending.
@@ -50,8 +54,36 @@ export function useContent(type, options = {}) {
  * Get a single content item by slug.
  */
 export function useContentItem(type, slug) {
-  const items = content[type] || []
-  return items.find(item => item.slug === slug) || null
+  const metadata = (content[type] || []).find(item => item.slug === slug) || null
+  const cacheKey = `${type}:${slug}`
+  const [detailState, setDetailState] = useState(() => ({
+    key: cacheKey,
+    item: detailCache.get(cacheKey) || metadata,
+  }))
+
+  useEffect(() => {
+    let active = true
+    if (!metadata || detailCache.has(cacheKey)) return () => { active = false }
+
+    const loadDetail = detailLoaders[type]?.[slug]
+    const detailPromise = loadDetail
+      ? loadDetail()
+      : Promise.reject(new Error(`No detail loader for ${cacheKey}`))
+
+    detailPromise
+      .then(module => {
+        const detail = module.default
+        detailCache.set(cacheKey, detail)
+        if (active) setDetailState({ key: cacheKey, item: detail })
+      })
+      .catch(() => {
+        if (active) setDetailState({ key: cacheKey, item: { ...metadata, detailError: true } })
+      })
+
+    return () => { active = false }
+  }, [cacheKey, metadata, slug, type])
+
+  return detailState.key === cacheKey ? detailState.item : metadata
 }
 
 /**

privat/CV/andreknie.de/src/index.css

@@ -163,6 +163,34 @@ img {
   color: var(--accent-color);
 }
 
+.page-loading {
+  min-height: 50vh;
+  display: grid;
+  place-items: center;
+  padding: 120px 24px 80px;
+  color: var(--text-secondary);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 3px;
+}
+
 /* Section layout */
 .section-header {
   text-align: center;
@@ -204,3 +232,13 @@ img {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.001ms !important;
+  }
+}

privat/CV/andreknie.de/src/pages/About.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useMeta } from '../hooks/useContent'
 import { ExternalLink, Globe } from 'lucide-react'
 import SpeakerCvRequest from '../components/SpeakerCvRequest'
+import SEOHead from '../components/SEOHead'
 
 export default function About() {
   const { profile, about } = useMeta()
@@ -12,6 +13,7 @@ export default function About() {
 
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Über mich" description="Über Dr. André Knie, seine Arbeit, Stationen und Perspektive auf KI und digitale Souveränität." url="/ueber-mich" />
       <div className="app-container" style={{ maxWidth: '800px' }}>
         <div className="section-header">
           <h1 className="section-title">Über <span className="text-gradient">mich</span></h1>

privat/CV/andreknie.de/src/pages/ArticleSingle.jsx

@@ -1,20 +1,37 @@
 import React from 'react'
 import { useParams, Link } from 'react-router-dom'
-import { useContent } from '../hooks/useContent'
+import { useContentItem } from '../hooks/useContent'
 import SEOHead from '../components/SEOHead'
 import { decodeHtml } from '../utils/decodeHtml'
 
 export default function ArticleSingle() {
   const { slug } = useParams()
-  const { items: posts } = useContent('posts', { pageSize: 1000 })
-  const post = posts.find((p) => p.slug === slug)
+  const post = useContentItem('posts', slug)
 
   if (!post) {
     return (
-      <div className="page-container app-container" style={{ textAlign: 'center', paddingTop: '150px' }}>
-        <h2>Artikel nicht gefunden</h2>
+      <main className="page-container app-container" style={{ textAlign: 'center', paddingTop: '150px' }}>
+        <SEOHead
+          title="Artikel nicht gefunden"
+          description="Der angeforderte Artikel wurde nicht gefunden."
+          url={`/artikel/${slug}`}
+          noindex
+        />
+        <h1>Artikel nicht gefunden</h1>
         <Link to="/artikel" className="primary-button" style={{ marginTop: '20px' }}>Zurück zur Übersicht</Link>
-      </div>
+      </main>
+    )
+  }
+
+  if (!post.body) {
+    const loadFailed = post.detailError
+    return (
+      <main className="page-container app-container" style={{ textAlign: 'center', paddingTop: '150px' }}>
+        <SEOHead title={post.title} description={post.excerpt || post.title} url={`/artikel/${post.slug}`} type="article" />
+        <p role={loadFailed ? 'alert' : 'status'} aria-live={loadFailed ? 'assertive' : 'polite'}>
+          {loadFailed ? 'Der Artikel konnte nicht geladen werden.' : 'Artikel wird geladen …'}
+        </p>
+      </main>
     )
   }
 
@@ -23,9 +40,11 @@ export default function ArticleSingle() {
     : ''
 
   return (
-    <div className="page-container article-single-page">
+    <main className="page-container article-single-page">
       <SEOHead
-        title={`${post.title} | Dr. André Knie`} 
+        url={`/artikel/${post.slug}`}
+        type="article"
+        title={post.title}
         description={post.excerpt || post.title}
       />
       <div className="app-container" style={{ maxWidth: '800px', margin: '0 auto', paddingTop: '120px' }}>
@@ -48,6 +67,6 @@ export default function ArticleSingle() {
           />
         </article>
       </div>
-    </div>
+    </main>
   )
 }

privat/CV/andreknie.de/src/pages/Articles.jsx

@@ -15,14 +15,15 @@ export default function Articles() {
     return (
       (post.title && post.title.toLowerCase().includes(query)) ||
       (post.excerpt && post.excerpt.toLowerCase().includes(query)) ||
-      (post.body && post.body.toLowerCase().includes(query))
+      (post.searchText && post.searchText.toLowerCase().includes(query))
     )
   })
 
   return (
-    <div className="page-container articles-page">
+    <main className="page-container articles-page">
       <SEOHead
-        title="Artikel & Beiträge | Dr. André Knie" 
+        url="/artikel"
+        title="Artikel & Beiträge"
         description="Aktuelle Artikel und LinkedIn-Beiträge zu den Themen Softwareentwicklung, Leadership und Technologie."
       />
       <header className="page-header">
@@ -44,6 +45,7 @@ export default function Articles() {
           <input 
             type="text" 
             placeholder="Artikel durchsuchen..." 
+            aria-label="Artikel durchsuchen"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             style={{ 
@@ -83,7 +85,7 @@ export default function Articles() {
               )}
               <h2 className="article-title">{decodeHtml(post.title)}</h2>
               <p className="article-excerpt">
-                {decodeHtml(post.excerpt || (post.body ? post.body.replace(/<[^>]+>/g, '').substring(0, 150) + '...' : ''))}
+                {decodeHtml(post.excerpt || (post.searchText ? post.searchText.substring(0, 150) + '...' : ''))}
               </p>
               <div style={{ display: 'flex', gap: '16px' }}>
                 <a href={`/artikel/${post.slug}`} className="article-link">
@@ -102,6 +104,6 @@ export default function Articles() {
           <p className="no-articles">Keine Artikel für diese Suche gefunden.</p>
         )}
       </section>
-    </div>
+    </main>
   )
 }

privat/CV/andreknie.de/src/pages/Confirmation.jsx

@@ -13,6 +13,8 @@ export default function Confirmation() {
       <SEOHead 
         title={isSuccess ? "Vielen Dank" : "Ein Fehler ist aufgetreten"} 
         description={isSuccess ? "Ihre Nachricht wurde erfolgreich gesendet." : "Es gab ein Problem beim Senden Ihrer Nachricht."}
+        url="/bestaetigung"
+        noindex
       />
       <main style={{ paddingTop: '120px', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <div className="app-container" style={{ textAlign: 'center', maxWidth: '600px' }}>

privat/CV/andreknie.de/src/pages/Consulting.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useContent, useMeta } from '../hooks/useContent'
 import ServiceAccordion from '../components/ServiceAccordion'
+import SEOHead from '../components/SEOHead'
 
 export default function Consulting() {
   const { items } = useContent('consulting', { pageSize: 10 })
@@ -8,6 +9,7 @@ export default function Consulting() {
 
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Beratung" description="Beratung zu KI-Strategie, digitaler Souveränität und praktischer Transformation." url="/consulting" />
       <div className="app-container">
         <div className="section-header">
           <h1 className="section-title"><span className="text-gradient">Leistungen</span></h1>

privat/CV/andreknie.de/src/pages/Contact.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useFormSubmit } from '../hooks/useFormSubmit'
 import { validateContact } from '../utils/validation'
+import SEOHead from '../components/SEOHead'
 
 export default function Contact() {
   const [form, setForm] = useState({ name: '', email: '', message: '', company_website: '' })
@@ -18,8 +19,11 @@ export default function Contact() {
   if (success) {
     return (
       <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+        <SEOHead title="Kontakt" description="Nimm Kontakt zu Dr. André Knie auf." url="/kontakt" />
         <div className="app-container" style={{ textAlign: 'center', maxWidth: '600px' }}>
+          <div role="status" aria-live="polite">
             <h1 style={{ marginBottom: '16px' }}>Nachricht gesendet</h1>
+          </div>
           <p style={{ color: 'var(--text-secondary)' }}>Du erhältst eine Bestätigungs-E-Mail. Bitte klicke den Link darin, damit deine Nachricht weitergeleitet wird.</p>
         </div>
       </main>
@@ -28,6 +32,7 @@ export default function Contact() {
 
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Kontakt" description="Nimm Kontakt zu Dr. André Knie auf." url="/kontakt" />
       <div className="app-container" style={{ maxWidth: '600px' }}>
         <div className="section-header">
           <h1 className="section-title"><span className="text-gradient">Kontakt</span></h1>
@@ -36,7 +41,7 @@ export default function Contact() {
 
         <form onSubmit={handleSubmit} className="glass-panel" style={{ padding: '40px' }}>
           {/* Honeypot — hidden from real users, only bots fill this. */}
-          <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden' }}>
+          <div hidden>
             <label>
               Firmen-Website (bitte leer lassen)
               <input name="company_website" tabIndex={-1} autoComplete="off" value={form.company_website} onChange={handleChange} />
@@ -44,25 +49,25 @@ export default function Contact() {
           </div>
 
           <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Name</label>
-            <input name="name" value={form.name} onChange={handleChange} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.name ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem' }} />
-            {errors.name && <p style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.name}</p>}
+            <label htmlFor="contact-name" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Name</label>
+            <input id="contact-name" name="name" value={form.name} onChange={handleChange} aria-invalid={Boolean(errors.name)} aria-describedby={errors.name ? 'contact-name-error' : undefined} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.name ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem' }} />
+            {errors.name && <p id="contact-name-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.name}</p>}
           </div>
 
           <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>E-Mail</label>
-            <input name="email" type="email" value={form.email} onChange={handleChange} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.email ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem' }} />
-            {errors.email && <p style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.email}</p>}
+            <label htmlFor="contact-email" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>E-Mail</label>
+            <input id="contact-email" name="email" type="email" value={form.email} onChange={handleChange} aria-invalid={Boolean(errors.email)} aria-describedby={errors.email ? 'contact-email-error' : undefined} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.email ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem' }} />
+            {errors.email && <p id="contact-email-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.email}</p>}
           </div>
 
           <div style={{ marginBottom: '24px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Nachricht</label>
-            <textarea name="message" value={form.message} onChange={handleChange} rows={6} maxLength={2000} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.message ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem', resize: 'vertical' }} />
-            {errors.message && <p style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.message}</p>}
+            <label htmlFor="contact-message" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Nachricht</label>
+            <textarea id="contact-message" name="message" value={form.message} onChange={handleChange} rows={6} maxLength={2000} aria-invalid={Boolean(errors.message)} aria-describedby={errors.message ? 'contact-message-error' : undefined} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.message ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem', resize: 'vertical' }} />
+            {errors.message && <p id="contact-message-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.message}</p>}
             <p style={{ color: 'var(--text-secondary)', fontSize: '0.8rem', margin: '4px 0 0' }}>{form.message.length}/2000</p>
           </div>
 
-          {serverError && <p style={{ color: '#ff4444', marginBottom: '16px' }}>{serverError}</p>}
+          {serverError && <p role="alert" aria-live="assertive" style={{ color: '#ff4444', marginBottom: '16px' }}>{serverError}</p>}
 
           <button type="submit" className="primary-button" disabled={loading} style={{ width: '100%' }}>
             {loading ? 'Wird gesendet...' : 'Nachricht senden'}

privat/CV/andreknie.de/src/pages/Datenschutz.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import SEOHead from '../components/SEOHead'
 
 export default function Datenschutz() {
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Datenschutz" description="Datenschutzerklärung von andreknie.de." url="/datenschutz" />
       <div className="app-container" style={{ maxWidth: '700px' }}>
         <h1 style={{ marginBottom: '32px' }}>Datenschutzerklärung</h1>
         <div style={{ color: 'var(--text-secondary)', lineHeight: 1.8 }}>

privat/CV/andreknie.de/src/pages/Home.jsx

@@ -6,6 +6,7 @@ import UpcomingEvents from '../components/UpcomingEvents'
 import StatsCube from '../components/StatsCube'
 import DotCloudIcon from '../components/DotCloudIcon'
 import PhotoBand from '../components/PhotoBand'
+import SEOHead from '../components/SEOHead'
 import './Home.css'
 
 const PHOTO_BAND_IMAGES = [
@@ -21,10 +22,19 @@ export default function Home() {
 
   return (
     <main>
+      <SEOHead url="/" />
       {/* Hero */}
       <section className="hero">
         <div className="app-container hero-content">
-          <img src="/images/andre-knie.webp" alt="Dr. André Knie" className="hero-photo" />
+          <img
+            src="/images/andre-knie.webp?v=2"
+            alt="Dr. André Knie"
+            className="hero-photo"
+            width="280"
+            height="280"
+            decoding="async"
+            fetchPriority="high"
+          />
           <h1>
             {profile?.name || 'Dr. André Knie'}
           </h1>

privat/CV/andreknie.de/src/pages/Impressum.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import SEOHead from '../components/SEOHead'
 
 export default function Impressum() {
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Impressum" description="Impressum von andreknie.de." url="/impressum" />
       <div className="app-container" style={{ maxWidth: '700px' }}>
         <h1 style={{ marginBottom: '32px' }}>Impressum</h1>
         <div style={{ color: 'var(--text-secondary)', lineHeight: 1.8 }}>

privat/CV/andreknie.de/src/pages/Kniepunkt.jsx

@@ -4,6 +4,7 @@ import { Search } from 'lucide-react'
 import { useContent } from '../hooks/useContent'
 import { formatDate } from '../utils/formatDate'
 import { decodeHtml } from '../utils/decodeHtml'
+import SEOHead from '../components/SEOHead'
 
 export default function Kniepunkt() {
   const [searchQuery, setSearchQuery] = useState('')
@@ -15,12 +16,13 @@ export default function Kniepunkt() {
     return (
       (item.title && item.title.toLowerCase().includes(query)) ||
       (item.summary && item.summary.toLowerCase().includes(query)) ||
-      (item.body && item.body.toLowerCase().includes(query))
+      (item.searchText && item.searchText.toLowerCase().includes(query))
     )
   })
 
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Kniepunkt" description="Die Kniepunkt-Kolumne von Dr. André Knie über KI, Technologie und die Absurditäten des digitalen Wandels." url="/kniepunkt" />
       <div className="app-container">
         <div className="section-header">
           <h1 className="section-title"><span className="text-gradient">Kniepunkt</span></h1>
@@ -34,6 +36,7 @@ export default function Kniepunkt() {
           <input 
             type="text" 
             placeholder="Kniepunkte durchsuchen..." 
+            aria-label="Kniepunkte durchsuchen"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             style={{ 

privat/CV/andreknie.de/src/pages/KniepunktIssue.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useParams, Link } from 'react-router-dom'
 import { useContentItem } from '../hooks/useContent'
 import { formatDate } from '../utils/formatDate'
+import SEOHead from '../components/SEOHead'
 
 export default function KniepunktIssue() {
   const { slug } = useParams()
@@ -10,6 +11,7 @@ export default function KniepunktIssue() {
   if (!issue) {
     return (
       <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+        <SEOHead title="Kniepunkt-Ausgabe nicht gefunden" description="Die angeforderte Kniepunkt-Ausgabe wurde nicht gefunden." noindex url={`/kniepunkt/${slug}`} />
         <div className="app-container" style={{ textAlign: 'center' }}>
           <h1>Ausgabe nicht gefunden</h1>
           <p style={{ color: 'var(--text-secondary)' }}>Diese Kniepunkt-Ausgabe existiert nicht.</p>
@@ -19,8 +21,23 @@ export default function KniepunktIssue() {
     )
   }
 
+  if (!issue.body) {
+    const loadFailed = issue.detailError
     return (
       <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+        <SEOHead title={issue.title} description={issue.summary || issue.title} url={`/kniepunkt/${issue.slug}`} type="article" image={issue.image} />
+        <div className="app-container" style={{ textAlign: 'center' }}>
+          <p role={loadFailed ? 'alert' : 'status'} aria-live={loadFailed ? 'assertive' : 'polite'}>
+            {loadFailed ? 'Die Kniepunkt-Ausgabe konnte nicht geladen werden.' : 'Kniepunkt-Ausgabe wird geladen …'}
+          </p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title={issue.title} description={issue.summary || issue.title} url={`/kniepunkt/${issue.slug}`} type="article" image={issue.image} />
       <div className="app-container" style={{ maxWidth: '700px' }}>
         <Link to="/kniepunkt" style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginBottom: '24px', display: 'inline-block' }}>&larr; Alle Ausgaben</Link>
         <h1 style={{ marginBottom: '12px' }}>{issue.title}</h1>

privat/CV/andreknie.de/src/pages/NotFound.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import SEOHead from '../components/SEOHead'
 
 export default function NotFound() {
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <SEOHead title="Seite nicht gefunden" description="Die angeforderte Seite wurde nicht gefunden." noindex url="/404" />
       <div className="app-container" style={{ textAlign: 'center' }}>
         <h1 style={{ fontSize: '6rem', marginBottom: '16px' }}><span className="text-gradient">404</span></h1>
         <p style={{ color: 'var(--text-secondary)', fontSize: '1.2rem', marginBottom: '32px' }}>Diese Seite existiert nicht.</p>

privat/CV/andreknie.de/src/pages/Podcast.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useContent } from '../hooks/useContent'
 import { formatDate } from '../utils/formatDate'
 import { ExternalLink } from 'lucide-react'
+import SEOHead from '../components/SEOHead'
 
 export default function Podcast() {
   const { items: allEpisodes } = useContent('podcast', { visibility: 'all', pageSize: 100 })
@@ -13,6 +14,7 @@ export default function Podcast() {
 
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Podcast" description="Podcasts, Gastauftritte und Gespräche von und mit Dr. André Knie über KI, Transformation und Leadership." url="/podcast" />
       <div className="app-container" style={{ maxWidth: '800px', margin: '0 auto' }}>
         <div className="section-header">
           <h1 className="section-title"><span className="text-gradient">Podcast</span></h1>

privat/CV/andreknie.de/src/pages/Resources.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useContent } from '../hooks/useContent'
 import { useFormSubmit } from '../hooks/useFormSubmit'
 import { validateResourceDownload } from '../utils/validation'
+import SEOHead from '../components/SEOHead'
 
 const inputStyle = {
   width: '100%',
@@ -30,7 +31,7 @@ function ResourceRequestForm({ resource, onCancel }) {
   return (
     <div className="glass-panel" style={{ padding: '24px', marginTop: '24px' }}>
       {success ? (
-        <p style={{ margin: 0, color: 'var(--text-primary)' }}>
+        <p role="status" aria-live="polite" style={{ margin: 0, color: 'var(--text-primary)' }}>
           Danke! Wir prüfen die Anfrage und melden uns bei dir.
         </p>
       ) : (
@@ -40,7 +41,7 @@ function ResourceRequestForm({ resource, onCancel }) {
             Wir prüfen die Anfrage. Bei positiver Prüfung verschickt André ein aktuelles Profil persönlich.
           </p>
 
-          <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden' }}>
+          <div hidden>
             <label htmlFor="resource-company-website">Firmen-Website (bitte leer lassen)</label>
             <input id="resource-company-website" name="company_website" tabIndex={-1} autoComplete="off" value={form.company_website} onChange={updateField} />
           </div>
@@ -48,18 +49,18 @@ function ResourceRequestForm({ resource, onCancel }) {
           <input type="hidden" name="resource_id" value={resourceId} />
 
           <label htmlFor="resource-name">Name</label>
-          <input id="resource-name" name="name" value={form.name} onChange={updateField} style={inputStyle} autoComplete="name" aria-invalid={Boolean(errors.name)} />
-          {errors.name && <p role="alert" style={{ color: '#ff4444', margin: '4px 0 12px' }}>{errors.name}</p>}
+          <input id="resource-name" name="name" value={form.name} onChange={updateField} style={inputStyle} autoComplete="name" aria-invalid={Boolean(errors.name)} aria-describedby={errors.name ? 'resource-name-error' : undefined} />
+          {errors.name && <p id="resource-name-error" role="alert" style={{ color: '#ff4444', margin: '4px 0 12px' }}>{errors.name}</p>}
 
           <label htmlFor="resource-email">E-Mail</label>
-          <input id="resource-email" name="email" type="email" value={form.email} onChange={updateField} style={inputStyle} autoComplete="email" aria-invalid={Boolean(errors.email)} />
-          {errors.email && <p role="alert" style={{ color: '#ff4444', margin: '4px 0 12px' }}>{errors.email}</p>}
+          <input id="resource-email" name="email" type="email" value={form.email} onChange={updateField} style={inputStyle} autoComplete="email" aria-invalid={Boolean(errors.email)} aria-describedby={errors.email ? 'resource-email-error' : undefined} />
+          {errors.email && <p id="resource-email-error" role="alert" style={{ color: '#ff4444', margin: '4px 0 12px' }}>{errors.email}</p>}
 
           <label htmlFor="resource-company">Unternehmen</label>
-          <input id="resource-company" name="company" value={form.company} onChange={updateField} style={inputStyle} autoComplete="organization" aria-invalid={Boolean(errors.company)} />
-          {errors.company && <p role="alert" style={{ color: '#ff4444', margin: '4px 0 12px' }}>{errors.company}</p>}
+          <input id="resource-company" name="company" value={form.company} onChange={updateField} style={inputStyle} autoComplete="organization" aria-invalid={Boolean(errors.company)} aria-describedby={errors.company ? 'resource-company-error' : undefined} />
+          {errors.company && <p id="resource-company-error" role="alert" style={{ color: '#ff4444', margin: '4px 0 12px' }}>{errors.company}</p>}
 
-          {serverError && <p role="alert" style={{ color: '#ff4444' }}>{serverError}</p>}
+          {serverError && <p role="alert" aria-live="assertive" style={{ color: '#ff4444' }}>{serverError}</p>}
           {errors.resource_id && <p role="alert" style={{ color: '#ff4444' }}>{errors.resource_id}</p>}
 
           <div style={{ display: 'flex', gap: '12px', marginTop: '20px', flexWrap: 'wrap' }}>
@@ -80,6 +81,7 @@ export default function Resources() {
 
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Ressourcen" description="Ausgewählte Materialien und Profile von Dr. André Knie auf Anfrage." url="/resources" />
       <div className="app-container">
         <div className="section-header">
           <h1 className="section-title"><span className="text-gradient">Ressourcen</span></h1>

privat/CV/andreknie.de/src/pages/Speaking.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useContent, useMeta } from '../hooks/useContent'
 import SpeakingAccordion from '../components/SpeakingAccordion'
+import SEOHead from '../components/SEOHead'
 
 export default function Speaking() {
   const { items: allTalks } = useContent('talks', { visibility: 'all', pageSize: 100 })
@@ -9,6 +10,7 @@ export default function Speaking() {
 
   return (
     <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <SEOHead title="Speaking" description="Keynotes, Workshops und Panels von Dr. André Knie zu KI, Transformation und Leadership." url="/speaking" />
       <div className="app-container">
         <div className="section-header">
           <h1 className="section-title"><span className="text-gradient">Speaking</span></h1>