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
@@ -55,15 +59,36 @@ 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:-manual-$(date -u +%Y%m%d%H%M%S)}"
+            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-${release_id}"
+            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 +102,15 @@ 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
+
+            # Höchstens die fünf neuesten begrenzten Release-Verzeichnisse
+            # behalten; site und der aktuelle vorherige Stand bleiben getrennt.
+            old_releases=$(find releases -mindepth 1 -maxdepth 1 -type d -name 'release-*' | sort -r | tail -n +6)
+            if [ -n "$old_releases" ]; then
+              while IFS= read -r old_release; do
+                [ -z "$old_release" ] || rm -rf -- "$old_release"
+              done <<EOF
+$old_releases
+EOF
+            fi

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

@@ -7,8 +7,10 @@ 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 DETAILS_VIRTUAL_MODULE_ID = 'virtual:content-details'
+const RESOLVED_DETAILS_VIRTUAL_MODULE_ID = '\0' + DETAILS_VIRTUAL_MODULE_ID
 
-function readContentDir(subdir) {
+function readContentDir(subdir, includeBodies = false) {
   const dir = join(CONTENT_DIR, subdir)
   if (!existsSync(dir)) return []
   
@@ -22,10 +24,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()
         return {
           ...data,
           slug,
-          body: renderMarkdownContent(content),
+          ...(includeBodies ? { body } : { searchText }),
           _source: `${subdir}/${filename}`
         }
       }
@@ -60,15 +64,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'),
@@ -87,12 +91,17 @@ export default function contentPlugin() {
     name: 'vite-plugin-content',
     resolveId(id) {
       if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID
+      if (id === DETAILS_VIRTUAL_MODULE_ID) return RESOLVED_DETAILS_VIRTUAL_MODULE_ID
     },
     load(id) {
       if (id === RESOLVED_VIRTUAL_MODULE_ID) {
         const content = loadAllContent()
         return `export default ${JSON.stringify(content)}`
       }
+      if (id === RESOLVED_DETAILS_VIRTUAL_MODULE_ID) {
+        const content = loadAllContent(true)
+        return `export default ${JSON.stringify(content)}`
+      }
     },
     handleHotUpdate({ file, server }) {
       if (file.includes('content')) {

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

@@ -0,0 +1,18 @@
+import { readdirSync, statSync } from 'node:fs'
+import { 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 detailChunk = files.find(file => /^_virtual_content-details-[^/]+\.js$/.test(file))
+const maxInitialBytes = 700 * 1024
+
+if (!entry) throw new Error('Kein initialer JavaScript-Entry-Chunk gefunden.')
+if (!detailChunk) throw new Error('Kein separater Content-Detail-Chunk gefunden.')
+
+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-Chunk=${detailChunk}`)

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/BackgroundPattern.jsx

@@ -15,6 +15,8 @@ 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
@@ -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,8 @@ 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'
     const dpr = window.devicePixelRatio || 1
     canvas.width = size * dpr
     canvas.height = size * dpr
@@ -34,6 +36,7 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
         vx: 0, vy: 0,
       }))
       initializedRef.current = true
+      if (reducedMotion) animate()
     }
 
     function handleMouseMove(e) {
@@ -48,6 +51,7 @@ 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)
@@ -56,8 +60,6 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
         return
       }
 
-      const style = getComputedStyle(document.documentElement)
-      const color = style.getPropertyValue('--accent-color').trim() || '#4a9eff'
       const mouse = mouseRef.current
       const repelRadius = 25
 
@@ -98,7 +100,12 @@ 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()
@@ -108,6 +115,7 @@ export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
       cancelAnimationFrame(animRef.current)
       canvas.removeEventListener('mousemove', handleMouseMove)
       canvas.removeEventListener('mouseleave', handleMouseLeave)
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
     }
   }, [shape, size])
 
@@ -177,10 +185,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

@@ -34,6 +34,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

@@ -21,7 +21,7 @@ export default function LogoMarquee({ logos = [], title = '', titleAccent = '',
       <div className="marquee-track">
         <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,12 @@
+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)
+  })
+})

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' : ''}`}>
         {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,25 @@
+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' })
+
+    fireEvent.click(toggle)
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(toggle.getAttribute('aria-controls')).toBe('mobile-navigation')
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    expect(toggle.getAttribute('aria-label')).toBe('Menü öffnen')
+  })
+
+  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/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

@@ -123,10 +123,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" />
@@ -138,6 +149,11 @@ export default function TestimonialSlider({ testimonials = [] }) {
       <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 +163,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,16 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render } 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)
+  })
+})

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

@@ -1,5 +1,9 @@
+import { useEffect, useState } from 'react'
 import content from 'virtual:content'
 
+const detailCache = new Map()
+const detailModulePromise = import('virtual:content-details')
+
 /**
  * Get all content of a given type, sorted by date descending.
  * @param {'posts'|'kniepunkt'|'podcast'|'talks'|'consulting'|'resources'|'events'} type
@@ -50,8 +54,27 @@ 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 }
+
+    detailModulePromise.then(module => {
+      const detail = module.default[type]?.find(candidate => candidate.slug === slug) || null
+      if (detail) detailCache.set(cacheKey, detail)
+      if (active) setDetailState({ key: cacheKey, item: detail })
+    })
+
+    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/ArticleSingle.jsx

@@ -1,13 +1,12 @@
 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 (
@@ -24,6 +23,15 @@ export default function ArticleSingle() {
     )
   }
 
+  if (!post.body) {
+    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="status" aria-live="polite">Artikel wird geladen …</p>
+      </main>
+    )
+  }
+
   const formattedDate = post.date 
     ? new Date(post.date).toLocaleDateString('de-DE', { year: 'numeric', month: 'long', day: 'numeric' })
     : ''

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

@@ -15,7 +15,7 @@ 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))
     )
   })
 
@@ -84,7 +84,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">

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

@@ -21,7 +21,9 @@ export default function Contact() {
       <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>
@@ -39,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} />
@@ -47,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/Kniepunkt.jsx

@@ -16,7 +16,7 @@ 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))
     )
   })
 

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

@@ -21,6 +21,17 @@ export default function KniepunktIssue() {
     )
   }
 
+  if (!issue.body) {
+    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="status" aria-live="polite">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} />