integration: compact the wide primary navigation and keep fragment targets visible

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitignore

@@ -41,3 +41,9 @@ __screenshots__/
 # System files
 .DS_Store
 Thumbs.db
+
+# Browser and audit artifacts
+/test-results
+/playwright-report
+/blob-report
+/.lighthouseci

.prettierignore

@@ -8,3 +8,7 @@ public/**/*.svg
 Dockerfile
 docker-compose.yml
 .cursor
+test-results
+playwright-report
+.lighthouseci
+blob-report

AGENTS.md

@@ -42,6 +42,9 @@ This is a bilingual recruiter and B2B portfolio for a software/DevOps engineer.
 | `npm run format:check`        | Prettier check (CI).                          |
 | `npm run serve:ssr`           | Serve the production SSR bundle.              |
 | `npm run serve:ssr:Portfolio` | Alias of `serve:ssr` for existing tooling.    |
+| `npm run e2e`                 | Playwright + axe-core against the SSR bundle. |
+| `npm run e2e:install`         | Install the pinned Chromium build.            |
+| `npm run lighthouse`          | Production build, then Lighthouse CI.         |
 | `npm run ci`                  | lint, format:check, test:ci, then build.      |
 
 ## Code conventions
@@ -99,6 +102,7 @@ German and English are written idiomatically per language, never machine-transla
 - No `window`, `document`, `navigator`, `localStorage` or `matchMedia` access outside `afterNextRender` or `isPlatformBrowser` guards
 - Use the injected `DOCUMENT` token when the document element is required (it works on server and browser)
 - No user-agent sniffing; use CSS media queries for device capability
+- Exception: `isApplePlatform()` in `src/app/core/platform/browser.ts` may read `navigator.userAgentData?.platform ?? navigator.platform` after hydration, only to label the Command key. There is no CSS media query for that key. It is not used for device capability.
 - Capability helpers live in `src/app/core/platform/browser.ts` and return conservative defaults on the server
 - Helpers that use `inject()` must be called from a field initializer or constructor, never from a lifecycle hook or callback, and the resolved value must be stored on the instance
 - Every addressable route must remain prerenderable
@@ -121,8 +125,13 @@ German and English are written idiomatically per language, never machine-transla
 - Real locale-prefixed URLs
 - Server-rendered core text
 - Per-route titles from the content layer
+- Canonical origin is `SITE_CONFIG.siteOrigin` (`https://antoniolede.de`); every absolute URL in the app and tests is derived from it
+- Per-route metadata (description, canonical, reciprocal hreflang including `x-default`, Open Graph, Twitter, robots) is written by `SeoService` during SSR and on every client navigation
+- One JSON-LD `@graph` script per route: Person and ProfessionalService on Home, Service on service routes, CreativeWork per public case on projects, WebPage elsewhere
+- `public/robots.txt`, `public/sitemap.xml` and `public/llms.txt` stay synchronized with `prerenderablePaths()` via `crawl-assets.spec.ts`
+- The language switch exposes `hreflang` on the alternate-locale link
 
-Canonical, hreflang document tags and JSON-LD arrive in the integration phase. The language switch already exposes `hreflang` on the alternate-locale link.
+Browser binaries, HTML reports, traces and screenshots are not committed (`test-results`, `playwright-report`, `.lighthouseci`).
 
 ## Test checklist
 
@@ -136,6 +145,8 @@ A change is not done until:
 6. Routing and locale contracts still have unit coverage (paths, locale helpers, navigation links)
 7. No new `window` / `document` / `navigator` reads were added outside an SSR-safe guard
 8. Placeholder or legal copy was not replaced with invented professional claims
+9. Crawl files still match `SITE_CONFIG.siteOrigin` and `prerenderablePaths()`
+10. Playwright (`npm run e2e`) and Lighthouse CI (`npm run lighthouse`) still pass when the change affects public HTML, metadata or chrome
 
 ## Domain boundaries
 

README.md

@@ -30,6 +30,9 @@ npm install
 | `npm run format:check`        | Check formatting without writing.                                         |
 | `npm run serve:ssr`           | Serve the production SSR bundle from `dist/`.                             |
 | `npm run serve:ssr:Portfolio` | Alias of `serve:ssr`.                                                     |
+| `npm run e2e`                 | Playwright + axe-core against the production SSR bundle.                  |
+| `npm run e2e:install`         | Install the pinned Chromium build for Playwright.                         |
+| `npm run lighthouse`          | Production build, then Lighthouse CI (`lighthouserc.json`).               |
 | `npm run ci`                  | lint, format check, tests, then production build.                         |
 
 ## Local SSR build
@@ -41,6 +44,8 @@ npm run serve:ssr
 
 The server listens on `http://localhost:4000` unless `PORT` is set. The CV is copied into the browser output at `/cv/CV.pdf`.
 
+`npm run e2e` builds the SSR bundle and serves it on port 4173. `npm run lighthouse` builds, then starts the SSR server on port 4000. Browser binaries and generated reports (`test-results`, `playwright-report`, `.lighthouseci`) are not committed.
+
 ## Project structure
 
 ```

e2e/a11y.e2e.ts

@@ -0,0 +1,48 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+import { pagePath } from './helpers';
+
+const AXE_PATHS = [
+  pagePath('home', 'de'),
+  pagePath('home', 'en'),
+  pagePath('projects', 'de'),
+  pagePath('projects', 'en'),
+  pagePath('servicesAi', 'de'),
+  pagePath('servicesAi', 'en'),
+  pagePath('contact', 'de'),
+  pagePath('contact', 'en'),
+  pagePath('imprint', 'de'),
+  pagePath('imprint', 'en'),
+  '/missing-route',
+  '/en/missing-route',
+];
+
+test.describe('accessibility', () => {
+  test('revealed content stays visible under reduced motion', async ({ page }) => {
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await page.goto(pagePath('home', 'de'));
+    const pending = page.locator('.reveal-pending');
+    await expect(pending).toHaveCount(0);
+    await expect(page.locator('app-systems-map')).toBeVisible();
+    await expect(page.locator('app-case-card').first()).toBeVisible();
+  });
+
+  for (const path of AXE_PATHS) {
+    test(`axe has no serious or critical violations on ${path}`, async ({ page }) => {
+      await page.goto(path);
+      const results = await new AxeBuilder({ page }).analyze();
+      const blocking = results.violations.filter(
+        (violation) => violation.impact === 'serious' || violation.impact === 'critical',
+      );
+
+      const details = blocking
+        .map((violation) => {
+          const nodes = violation.nodes.map((node) => node.target.join(' ')).join(', ');
+          return `${violation.id} (${violation.impact}): ${nodes}`;
+        })
+        .join('\n');
+
+      expect(blocking, details).toEqual([]);
+    });
+  }
+});

e2e/contact.e2e.ts

@@ -0,0 +1,37 @@
+import { expect, test } from '@playwright/test';
+import { SITE_CONTENT_DATA } from '../src/app/core/content/site-content';
+import { SITE_CONFIG } from '../src/app/core/content/site-config';
+import { pagePath } from './helpers';
+
+test.describe('contact briefing', () => {
+  test('builds a mailto href and issues no network request', async ({ page }) => {
+    const extras: string[] = [];
+    await page.route('**/*', (route) => {
+      const url = route.request().url();
+      const resource = route.request().resourceType();
+      if (resource !== 'document' && !url.startsWith('data:') && !url.startsWith('blob:')) {
+        extras.push(`${resource} ${url}`);
+      }
+      void route.continue();
+    });
+
+    await page.goto(pagePath('contact', 'de'), { waitUntil: 'networkidle' });
+    extras.length = 0;
+
+    const emptySubmit = page.locator('.submit');
+    await expect(emptySubmit).toHaveAttribute('aria-disabled', 'true');
+    expect(await emptySubmit.getAttribute('href')).toBeNull();
+
+    await page.locator('#contact-name').fill('Ada');
+    await page.locator('#contact-email').fill('ada@example.com');
+    await page.locator('#contact-projectType').selectOption('software');
+    await page.locator('#contact-situation').fill('Need a migration.');
+
+    const href = await page.locator('a.submit').getAttribute('href');
+    expect(href).toMatch(/^mailto:/);
+    expect(href).toContain(encodeURIComponent(SITE_CONTENT_DATA.de.contact.mailSubject));
+    expect(href).toContain(encodeURIComponent('Ada'));
+    expect(href).toContain(SITE_CONFIG.contactEmail);
+    expect(extras, extras.join('\n')).toEqual([]);
+  });
+});

e2e/fragments.e2e.ts

@@ -0,0 +1,79 @@
+import { expect, test, type Page } from '@playwright/test';
+import { APP_LOCALES } from '../src/app/core/i18n/locale';
+import { pagePath } from './helpers';
+
+const VIEWPORTS = [768, 820, 1024, 1280, 1440] as const;
+const VIEWPORT_HEIGHT = 900;
+const MAX_HEADER_HEIGHT = 200;
+
+async function waitForScrollSettle(page: Page): Promise<void> {
+  await page.evaluate(async () => {
+    await new Promise<void>((resolve) => {
+      let last = window.scrollY;
+      let stableFrames = 0;
+      const tick = () => {
+        if (window.scrollY === last) {
+          stableFrames += 1;
+          if (stableFrames >= 8) {
+            resolve();
+            return;
+          }
+        } else {
+          stableFrames = 0;
+          last = window.scrollY;
+        }
+        requestAnimationFrame(tick);
+      };
+      requestAnimationFrame(tick);
+    });
+  });
+}
+
+test.describe('fragment scrolling', () => {
+  test('case headings stay fully visible under the compact header', async ({ page }, testInfo) => {
+    test.skip(
+      testInfo.project.name === 'mobile',
+      'desktop widths are measured here to avoid a duplicate run',
+    );
+
+    for (const width of VIEWPORTS) {
+      await page.setViewportSize({ width, height: VIEWPORT_HEIGHT });
+
+      for (const locale of APP_LOCALES) {
+        const path = `${pagePath('projects', locale)}#myspa`;
+        const label = `${width}px ${locale}`;
+        await page.goto(path, { waitUntil: 'networkidle' });
+
+        const header = page.locator('.site-header');
+        const heading = page.locator('#myspa h2');
+        await expect(heading).toBeVisible();
+
+        await waitForScrollSettle(page);
+
+        const headerBox = await header.boundingBox();
+        expect(headerBox, label).toBeTruthy();
+        expect(
+          headerBox!.height,
+          `header height at ${label} must be at most ${MAX_HEADER_HEIGHT}px`,
+        ).toBeLessThanOrEqual(MAX_HEADER_HEIGHT);
+        expect(
+          headerBox!.height,
+          `header height at ${label} must be at most 25% of the viewport`,
+        ).toBeLessThanOrEqual(VIEWPORT_HEIGHT * 0.25);
+
+        await expect(header).not.toHaveCSS('position', 'sticky');
+        await expect(heading).toBeInViewport({ ratio: 1 });
+
+        const headingOwnsCentre = await heading.evaluate((element) => {
+          const rect = element.getBoundingClientRect();
+          const node = document.elementFromPoint(
+            rect.left + rect.width / 2,
+            rect.top + rect.height / 2,
+          );
+          return node !== null && (element === node || element.contains(node));
+        });
+        expect(headingOwnsCentre, `heading centre must not be covered at ${label}`).toBe(true);
+      }
+    }
+  });
+});

e2e/helpers.ts

@@ -0,0 +1,97 @@
+import { expect, type APIRequestContext, type Page } from '@playwright/test';
+import { SITE_CONFIG } from '../src/app/core/content/site-config';
+import { SITE_CONTENT_DATA } from '../src/app/core/content/site-content';
+import { type AppLocale } from '../src/app/core/i18n/locale';
+import { LOCALE_HTML_LANG } from '../src/app/core/i18n/locale';
+import { type RouteId } from '../src/app/core/routing/route-ids';
+import { routePath } from '../src/app/core/routing/route-paths';
+import { buildRouteMetadata } from '../src/app/core/seo/route-metadata';
+
+export const ORIGIN = SITE_CONFIG.siteOrigin;
+
+export function pagePath(routeId: RouteId, locale: AppLocale): string {
+  return routePath(routeId, locale);
+}
+
+export async function readHtml(
+  request: APIRequestContext,
+  path: string,
+  expectedStatus: number,
+): Promise<string> {
+  const response = await request.get(path);
+  expect(response.status(), `GET ${path} status`).toBe(expectedStatus);
+  return response.text();
+}
+
+export function attr(html: string, selector: string, attribute: string): string | null {
+  const pattern = new RegExp(
+    `<[^>]*${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}[^>]*${attribute}="([^"]*)"`,
+    'i',
+  );
+  return html.match(pattern)?.[1] ?? null;
+}
+
+export function count(html: string, snippet: string): number {
+  return html.split(snippet).length - 1;
+}
+
+export async function expectHead(
+  request: APIRequestContext,
+  routeId: RouteId,
+  locale: AppLocale,
+): Promise<void> {
+  const path =
+    routeId === 'notFound'
+      ? locale === 'en'
+        ? '/en/missing-route'
+        : '/missing-route'
+      : pagePath(routeId, locale);
+  const expectedStatus = routeId === 'notFound' ? 404 : 200;
+  const html = await readHtml(request, path, expectedStatus);
+  const metadata = buildRouteMetadata(routeId, locale, SITE_CONTENT_DATA);
+
+  expect(html, `${path} title`).toContain(`<title>${metadata.title}</title>`);
+  expect(html).toContain(`name="description"`);
+  expect(html).toContain(`content="${metadata.description}"`);
+  expect(html).toContain(`name="robots"`);
+  expect(html).toContain(`content="${metadata.robots}"`);
+  expect(html).toContain(`<html lang="${LOCALE_HTML_LANG[locale]}"`);
+  expect(count(html, 'name="description"')).toBe(1);
+  expect(count(html, 'name="robots"')).toBe(1);
+  expect(count(html, 'type="application/ld+json"')).toBe(1);
+
+  if (routeId === 'notFound') {
+    expect(html).not.toMatch(/rel="canonical"/);
+    expect(html).not.toMatch(/rel="alternate"[^>]*hreflang/);
+    return;
+  }
+
+  expect(html).toContain(`rel="canonical"`);
+  expect(html).toContain(`href="${metadata.canonical}"`);
+  expect(count(html, 'rel="canonical"')).toBe(1);
+  expect(html).toContain('hreflang="de-DE"');
+  expect(html).toContain('hreflang="en"');
+  expect(html).toContain('hreflang="x-default"');
+  expect(html).toContain('property="og:type"');
+  expect(html).toContain('property="og:title"');
+  expect(html).toContain('property="og:description"');
+  expect(html).toContain('property="og:url"');
+  expect(html).toContain('property="og:site_name"');
+  expect(html).toContain('property="og:locale"');
+  expect(html).toContain('name="twitter:card"');
+  expect(html).toContain('name="twitter:title"');
+  expect(html).toContain('name="twitter:description"');
+}
+
+export async function expectNoOverflow(page: Page, route: string, width: number): Promise<void> {
+  const overflow = await page.evaluate(
+    () => document.documentElement.scrollWidth <= window.innerWidth + 1,
+  );
+  expect(overflow, `horizontal overflow at ${width}px on ${route}`).toBe(true);
+}
+
+export async function jsonLdGraph(page: Page): Promise<unknown> {
+  const raw = await page.locator('script[type="application/ld+json"]').first().textContent();
+  expect(raw).toBeTruthy();
+  return JSON.parse(raw ?? 'null');
+}

e2e/keyboard.e2e.ts

@@ -0,0 +1,123 @@
+import { expect, test } from '@playwright/test';
+import { pagePath } from './helpers';
+
+test.describe('keyboard and palette', () => {
+  test('skip link is first and moves focus to main', async ({ page }) => {
+    await page.goto('/');
+    await page.keyboard.press('Tab');
+    const skip = page.locator('.skip-link');
+    await expect(skip).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.locator('#main-content')).toBeFocused();
+  });
+
+  test('mobile nav toggle keeps aria-expanded in sync', async ({ page, request }) => {
+    const ssr = await request.get('/');
+    expect(ssr.ok()).toBe(true);
+    const html = await ssr.text();
+    expect(html).toContain('aria-expanded="true"');
+    expect(html).toContain('id="primary-nav"');
+    expect(html).toContain('class="site-nav"');
+    expect(html).toMatch(/<div[^>]*class="site"/);
+    expect(html).not.toMatch(/<div[^>]*class="[^"]*\bsite\b[^"]*\bnav-collapsed\b/);
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('/');
+    const toggle = page.locator('.nav-toggle');
+    await expect(toggle).toBeVisible();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('collapsed header stays under 25% of the viewport and is not sticky below md', async ({
+    page,
+  }) => {
+    const viewport = { width: 390, height: 844 };
+    await page.setViewportSize(viewport);
+    await page.goto('/');
+
+    const header = page.locator('.site-header');
+    const box = await header.boundingBox();
+    expect(box).toBeTruthy();
+    expect(box!.height).toBeLessThan(viewport.height * 0.25);
+
+    await expect
+      .poll(async () => header.evaluate((element) => getComputedStyle(element).position))
+      .not.toBe('sticky');
+
+    await page.locator('.nav-toggle').click();
+    await expect(page.locator('.nav-toggle')).toHaveAttribute('aria-expanded', 'true');
+    expect(await header.evaluate((element) => getComputedStyle(element).position)).not.toBe(
+      'sticky',
+    );
+
+    for (const width of [768, 820, 1024, 1280, 1440]) {
+      await page.setViewportSize({ width, height: 900 });
+      await page.goto('/');
+      expect(
+        await header.evaluate((element) => getComputedStyle(element).position),
+        `header must not be sticky at ${width}px`,
+      ).not.toBe('sticky');
+    }
+  });
+
+  test('compact services submenu stays keyboard accessible at 1024px', async ({
+    page,
+  }, testInfo) => {
+    test.skip(testInfo.project.name === 'mobile', 'compact submenu applies from md up');
+
+    await page.setViewportSize({ width: 1024, height: 900 });
+    await page.goto('/');
+
+    const servicesParent = page.locator(
+      `.primary-nav > li > a[href="${pagePath('services', 'de')}"]`,
+    );
+    const firstChild = page.locator(
+      `.primary-nav > li > .submenu a[href="${pagePath('servicesSoftware', 'de')}"]`,
+    );
+
+    await servicesParent.focus();
+    await expect(firstChild).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(firstChild).toBeFocused();
+
+    const headerBox = await page.locator('.site-header').boundingBox();
+    expect(headerBox, 'header while submenu is open').toBeTruthy();
+    expect(headerBox!.height, 'header height while submenu is open').toBeLessThanOrEqual(200);
+  });
+
+  test('palette opens with Control+K, traps focus, locks scroll and restores on Escape', async ({
+    page,
+  }) => {
+    await page.goto('/');
+    const trigger = page.locator('.command-palette-trigger');
+    await trigger.focus();
+    await page.keyboard.press('Control+k');
+
+    const dialog = page.locator('[role="dialog"]');
+    await expect(dialog).toBeVisible();
+    await expect(page.locator('.site')).toHaveAttribute('inert', '');
+    expect(await page.evaluate(() => document.body.style.overflow)).toBe('hidden');
+
+    const focusable = dialog.locator(
+      'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled])',
+    );
+    const count = await focusable.count();
+    const first = focusable.first();
+    const last = focusable.nth(count - 1);
+    await last.focus();
+    await page.keyboard.press('Tab');
+    await expect(first).toBeFocused();
+    await page.keyboard.press('Shift+Tab');
+    await expect(last).toBeFocused();
+
+    await page.keyboard.press('Escape');
+    await expect(dialog).toHaveCount(0);
+    await expect(page.locator('.site')).not.toHaveAttribute('inert');
+    expect(await page.evaluate(() => document.body.style.overflow)).toBe('');
+    await expect(trigger).toBeFocused();
+  });
+});

e2e/layout.e2e.ts

@@ -0,0 +1,79 @@
+import { expect, test } from '@playwright/test';
+import { SITE_CONFIG } from '../src/app/core/content/site-config';
+import { expectNoOverflow, pagePath } from './helpers';
+
+const CHECKED = [
+  pagePath('home', 'de'),
+  pagePath('home', 'en'),
+  pagePath('projects', 'de'),
+  pagePath('projects', 'en'),
+  pagePath('servicesAi', 'de'),
+  pagePath('contact', 'de'),
+  pagePath('imprint', 'en'),
+  '/missing-route',
+];
+
+const VIEWPORTS = [320, 768, 1024, 1440] as const;
+
+test.describe('layout and crawlability', () => {
+  test('does not overflow horizontally on checked routes', async ({ page }) => {
+    for (const width of VIEWPORTS) {
+      await page.setViewportSize({ width, height: 900 });
+      for (const path of CHECKED) {
+        await page.goto(path);
+        await expectNoOverflow(page, path, width);
+      }
+    }
+  });
+
+  test('same-origin links and crawl files respond below 400', async ({ page, request }) => {
+    const seen = new Set<string>();
+    const queue = [pagePath('home', 'de'), pagePath('home', 'en')];
+
+    while (queue.length > 0) {
+      const path = queue.shift() as string;
+      if (seen.has(path)) {
+        continue;
+      }
+      seen.add(path);
+
+      await page.goto(path);
+      const { urls, baseURI } = await page.evaluate(() => {
+        const values = [
+          ...Array.from(document.querySelectorAll('a[href]'), (node) => node.getAttribute('href')),
+          ...Array.from(document.querySelectorAll('[src]'), (node) => node.getAttribute('src')),
+        ];
+        return {
+          baseURI: document.baseURI,
+          urls: values.filter(
+            (value): value is string => typeof value === 'string' && value.length > 0,
+          ),
+        };
+      });
+
+      for (const raw of urls) {
+        if (raw.startsWith('mailto:') || raw.startsWith('tel:') || raw.startsWith('#')) {
+          continue;
+        }
+
+        const resolved = new URL(raw, baseURI);
+        if (resolved.origin !== new URL(baseURI).origin) {
+          continue;
+        }
+
+        const next = `${resolved.pathname}${resolved.search}`;
+        const response = await request.get(next);
+        expect(response.status(), `${raw} from ${path}`).toBeLessThan(400);
+
+        if (!seen.has(next) && !next.includes('.')) {
+          queue.push(next);
+        }
+      }
+    }
+
+    for (const asset of ['/robots.txt', '/sitemap.xml', '/llms.txt', SITE_CONFIG.cvAssetPath]) {
+      const response = await request.get(asset);
+      expect(response.status(), asset).toBe(200);
+    }
+  });
+});

e2e/seo.e2e.ts

@@ -0,0 +1,100 @@
+import { expect, test, type Page } from '@playwright/test';
+import { SITE_CONTENT_DATA } from '../src/app/core/content/site-content';
+import { expectHead, jsonLdGraph, pagePath } from './helpers';
+
+async function ensurePrimaryNavOpen(page: Page): Promise<void> {
+  const toggle = page.locator('.nav-toggle');
+  if ((await toggle.isVisible()) && (await toggle.getAttribute('aria-expanded')) === 'false') {
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  }
+}
+
+test.describe('server-rendered metadata', () => {
+  test('German and English Home include the full head contract', async ({ request, page }) => {
+    await expectHead(request, 'home', 'de');
+    await expectHead(request, 'home', 'en');
+
+    await page.goto('/');
+    const graph = (await jsonLdGraph(page)) as { '@graph': Array<{ '@type': string }> };
+    const types = graph['@graph'].map((node) => node['@type']);
+    expect(types).toContain('Person');
+    expect(types).toContain('ProfessionalService');
+
+    await page.goto('/en');
+    const english = (await jsonLdGraph(page)) as { '@graph': Array<{ '@type': string }> };
+    expect(english['@graph'].map((node) => node['@type'])).toEqual(
+      expect.arrayContaining(['Person', 'ProfessionalService']),
+    );
+  });
+
+  test('projects, AI service, contact, legal and 404 keep locale metadata', async ({ request }) => {
+    for (const locale of ['de', 'en'] as const) {
+      await expectHead(request, 'projects', locale);
+      await expectHead(request, 'servicesAi', locale);
+      await expectHead(request, 'contact', locale);
+      await expectHead(request, 'imprint', locale);
+      await expectHead(request, 'notFound', locale);
+    }
+  });
+
+  test('unmatched URLs return 404 and a real route stays 200', async ({ request }) => {
+    const home = await request.get('/');
+    expect(home.status(), 'GET /').toBe(200);
+
+    await expectHead(request, 'notFound', 'de');
+    await expectHead(request, 'notFound', 'en');
+  });
+
+  test('client navigation does not duplicate head tags', async ({ page }) => {
+    await page.goto('/');
+    await ensurePrimaryNavOpen(page);
+    await page.locator('a.contact-cta').first().waitFor();
+
+    const assertUnique = async (canonical: string, description: string) => {
+      await expect(page.locator('link[rel="canonical"]')).toHaveCount(1);
+      await expect(page.locator('link[rel="alternate"][hreflang="de-DE"]')).toHaveCount(1);
+      await expect(page.locator('link[rel="alternate"][hreflang="en"]')).toHaveCount(1);
+      await expect(page.locator('link[rel="alternate"][hreflang="x-default"]')).toHaveCount(1);
+      await expect(page.locator('meta[name="description"]')).toHaveCount(1);
+      await expect(page.locator('meta[name="robots"]')).toHaveCount(1);
+      await expect(page.locator('script[type="application/ld+json"]')).toHaveCount(1);
+      await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', canonical);
+      await expect(page.locator('meta[name="description"]')).toHaveAttribute(
+        'content',
+        description,
+      );
+    };
+
+    await ensurePrimaryNavOpen(page);
+    await page
+      .locator(`a[href="${pagePath('projects', 'de')}"]`)
+      .first()
+      .click();
+    await page.waitForURL('**/projekte');
+    await assertUnique(
+      'https://antoniolede.de/projekte',
+      SITE_CONTENT_DATA.de.pages.projects.description,
+    );
+
+    await ensurePrimaryNavOpen(page);
+    const servicesParent = page.locator(
+      `.primary-nav > li > a[href="${pagePath('services', 'de')}"]`,
+    );
+    const servicesAiLink = page
+      .locator(`.primary-nav a[href="${pagePath('servicesAi', 'de')}"]`)
+      .first();
+    if (!(await servicesAiLink.isVisible())) {
+      await servicesParent.hover();
+      await expect(servicesAiLink).toBeVisible();
+    }
+    await servicesAiLink.click();
+    await page.waitForURL('**/leistungen/ai-integration');
+    await expect(page.locator('link[rel="canonical"]')).toHaveCount(1);
+    await expect(page.locator('link[rel="canonical"]')).toHaveAttribute(
+      'href',
+      'https://antoniolede.de/leistungen/ai-integration',
+    );
+    await expect(page.locator('script[type="application/ld+json"]')).toHaveCount(1);
+  });
+});

e2e/systems-map.e2e.ts

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+import { pagePath } from './helpers';
+
+test.describe('Systems Map', () => {
+  test('keeps the card list visible and shows the SVG from 1024px', async ({ page }) => {
+    await page.goto(pagePath('home', 'de'));
+
+    for (const width of [390, 768, 1024, 1440]) {
+      await page.setViewportSize({ width, height: 900 });
+      const list = page.locator('.systems-map-list');
+      await expect(list).toBeVisible();
+      await expect(list.locator('.systems-map-cards li')).toHaveCount(8);
+
+      const figure = page.locator('.systems-map-figure');
+      if (width < 1024) {
+        await expect(figure).toBeHidden();
+      } else {
+        await expect(figure).toBeVisible();
+      }
+    }
+  });
+
+  test('keeps SVG labels inside their shapes at 1024 and 1440', async ({ page }) => {
+    await page.goto(pagePath('home', 'de'));
+
+    for (const width of [1024, 1440]) {
+      await page.setViewportSize({ width, height: 900 });
+      const overflow = await page.evaluate(() => {
+        const nodes = Array.from(document.querySelectorAll<SVGGElement>('.systems-map-node'));
+        return nodes.flatMap((node) => {
+          const shape = node.querySelector('circle, rect');
+          const text = node.querySelector('text');
+          if (!shape || !text) {
+            return [`${node.getAttribute('aria-label') ?? 'node'} missing shape or text`];
+          }
+
+          const shapeBox = (shape as SVGGraphicsElement).getBBox();
+          const textBox = (text as SVGGraphicsElement).getBBox();
+          const fits =
+            textBox.x >= shapeBox.x - 0.5 &&
+            textBox.y >= shapeBox.y - 0.5 &&
+            textBox.x + textBox.width <= shapeBox.x + shapeBox.width + 0.5 &&
+            textBox.y + textBox.height <= shapeBox.y + shapeBox.height + 0.5;
+
+          return fits ? [] : [node.getAttribute('aria-label') ?? 'unnamed node'];
+        });
+      });
+
+      expect(overflow, `labels overflow at ${width}px`).toEqual([]);
+    }
+  });
+
+  test('every SVG node points at a real route', async ({ page, request }) => {
+    await page.goto(pagePath('home', 'de'));
+    await page.setViewportSize({ width: 1440, height: 900 });
+    const hrefs = await page
+      .locator('.systems-map-node')
+      .evaluateAll((nodes) => nodes.map((node) => node.getAttribute('href') ?? ''));
+
+    expect(hrefs.length).toBeGreaterThan(0);
+    for (const href of hrefs) {
+      const response = await request.get(href);
+      expect(response.status(), href).toBe(200);
+    }
+  });
+});

eslint.config.js

@@ -6,10 +6,19 @@ const prettier = require('eslint-config-prettier');
 
 module.exports = tseslint.config(
   {
-    ignores: ['dist/**', '.angular/**', 'node_modules/**', 'coverage/**'],
+    ignores: [
+      'dist/**',
+      '.angular/**',
+      'node_modules/**',
+      'coverage/**',
+      'playwright-report/**',
+      'test-results/**',
+      '.lighthouseci/**',
+    ],
   },
   {
     files: ['**/*.ts'],
+    ignores: ['e2e/**/*.ts', 'playwright.config.ts'],
     extends: [
       eslint.configs.recommended,
       ...tseslint.configs.recommended,
@@ -39,5 +48,15 @@ module.exports = tseslint.config(
     files: ['**/*.html'],
     extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
   },
+  {
+    files: ['e2e/**/*.ts', 'playwright.config.ts'],
+    extends: [eslint.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.e2e.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
   prettier,
 );

lighthouserc.json

@@ -0,0 +1,31 @@
+{
+  "ci": {
+    "collect": {
+      "startServerCommand": "npm run serve:ssr",
+      "startServerReadyPattern": "Node Express server listening",
+      "url": [
+        "http://127.0.0.1:4000/",
+        "http://127.0.0.1:4000/en",
+        "http://127.0.0.1:4000/leistungen/ai-integration",
+        "http://127.0.0.1:4000/en/projects"
+      ],
+      "numberOfRuns": 3,
+      "settings": {
+        "preset": "desktop",
+        "chromeFlags": "--no-sandbox --headless=new"
+      }
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.85 }],
+        "categories:accessibility": ["error", { "minScore": 1 }],
+        "categories:best-practices": ["error", { "minScore": 1 }],
+        "categories:seo": ["error", { "minScore": 1 }]
+      }
+    },
+    "upload": {
+      "target": "filesystem",
+      "outputDir": ".lighthouseci"
+    }
+  }
+}

package.json

@@ -14,7 +14,10 @@
     "format:check": "prettier --check .",
     "serve:ssr": "node dist/Portfolio/server/server.mjs",
     "serve:ssr:Portfolio": "node dist/Portfolio/server/server.mjs",
-    "ci": "npm run lint && npm run format:check && npm run test:ci && npm run build"
+    "ci": "npm run lint && npm run format:check && npm run test:ci && npm run build",
+    "e2e": "playwright test",
+    "e2e:install": "playwright install chromium",
+    "lighthouse": "npm run build && lhci autorun"
   },
   "prettier": {
     "printWidth": 100,
@@ -47,10 +50,14 @@
     "@angular/build": "^21.0.5",
     "@angular/cli": "^21.0.5",
     "@angular/compiler-cli": "^21.0.0",
+    "@axe-core/playwright": "^4.13.0",
     "@eslint/js": "^9.39.5",
+    "@lhci/cli": "^0.15.1",
+    "@playwright/test": "1.62.1",
     "@types/express": "^5.0.1",
     "@types/node": "^20.17.19",
     "angular-eslint": "^21.4.0",
+    "axe-core": "^4.13.0",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "jsdom": "^27.1.0",

playwright.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: '**/*.e2e.ts',
+  forbidOnly: !!process.env['CI'],
+  retries: 0,
+  workers: 1,
+  reporter: [['list'], ['html', { open: 'never' }]],
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+  },
+  webServer: {
+    command: 'npm run build && npm run serve:ssr',
+    url: 'http://127.0.0.1:4173',
+    env: { PORT: '4173' },
+    timeout: 300_000,
+    reuseExistingServer: !process.env['CI'],
+  },
+  projects: [
+    {
+      name: 'desktop',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1440, height: 900 },
+      },
+    },
+    {
+      name: 'mobile',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 390, height: 844 },
+        hasTouch: true,
+        isMobile: true,
+      },
+    },
+  ],
+});

public/llms.txt

@@ -0,0 +1,51 @@
+# Antonio Ledebuhr
+
+Fullstack and DevOps engineer in Tangermünde. The public site documents a curated set of stations, four service areas, and a local mailto briefing. German is the default language; English is the full second version.
+
+## Profile
+
+- https://antoniolede.de/
+- https://antoniolede.de/en
+- https://antoniolede.de/ueber-mich
+- https://antoniolede.de/en/about
+
+## Services
+
+- https://antoniolede.de/leistungen
+- https://antoniolede.de/en/services
+- https://antoniolede.de/leistungen/software
+- https://antoniolede.de/en/services/software
+- https://antoniolede.de/leistungen/hardware-netzwerk
+- https://antoniolede.de/en/services/hardware-network
+- https://antoniolede.de/leistungen/cluster
+- https://antoniolede.de/en/services/clusters
+- https://antoniolede.de/leistungen/ai-integration
+- https://antoniolede.de/en/services/ai-integration
+
+## Projects
+
+- https://antoniolede.de/projekte
+- https://antoniolede.de/en/projects
+- https://antoniolede.de/projekte#innofocus
+- https://antoniolede.de/en/projects#innofocus
+- https://antoniolede.de/projekte#roesterei
+- https://antoniolede.de/en/projects#roesterei
+- https://antoniolede.de/projekte#myspa
+- https://antoniolede.de/en/projects#myspa
+- https://antoniolede.de/projekte#hdi
+- https://antoniolede.de/en/projects#hdi
+
+## Contact, stack and legal
+
+- https://antoniolede.de/kontakt
+- https://antoniolede.de/en/contact
+- https://antoniolede.de/stack
+- https://antoniolede.de/en/stack
+- https://antoniolede.de/impressum
+- https://antoniolede.de/en/legal-notice
+- https://antoniolede.de/datenschutz
+- https://antoniolede.de/en/privacy
+
+## Languages
+
+German URLs are unprefixed. English URLs live under `/en`. Each public page exists in both locales.

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://antoniolede.de/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+  <url>
+    <loc>https://antoniolede.de/</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/leistungen</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/leistungen/software</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/software" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/software" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/software" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/leistungen/hardware-netzwerk</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/hardware-netzwerk" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/hardware-network" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/hardware-netzwerk" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/leistungen/cluster</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/cluster" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/clusters" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/cluster" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/leistungen/ai-integration</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/ai-integration" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/ai-integration" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/ai-integration" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/projekte</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/projekte" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/projects" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/projekte" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/stack</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/stack" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/stack" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/stack" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/ueber-mich</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/ueber-mich" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/about" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/ueber-mich" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/kontakt</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/kontakt" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/contact" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/kontakt" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/impressum</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/impressum" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/legal-notice" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/impressum" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/datenschutz</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/datenschutz" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/privacy" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/datenschutz" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/services</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/services/software</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/software" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/software" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/software" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/services/hardware-network</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/hardware-netzwerk" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/hardware-network" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/hardware-netzwerk" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/services/clusters</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/cluster" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/clusters" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/cluster" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/services/ai-integration</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/leistungen/ai-integration" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/services/ai-integration" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/leistungen/ai-integration" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/projects</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/projekte" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/projects" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/projekte" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/stack</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/stack" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/stack" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/stack" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/about</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/ueber-mich" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/about" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/ueber-mich" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/contact</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/kontakt" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/contact" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/kontakt" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/legal-notice</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/impressum" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/legal-notice" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/impressum" />
+  </url>
+  <url>
+    <loc>https://antoniolede.de/en/privacy</loc>
+    <xhtml:link rel="alternate" hreflang="de-DE" href="https://antoniolede.de/datenschutz" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://antoniolede.de/en/privacy" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://antoniolede.de/datenschutz" />
+  </url>
+</urlset>

src/app/app.config.ts

@@ -1,9 +1,15 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from '@angular/router';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
-import { SITE_CONTENT } from './core/content/content.token';
+import {
+  provideRouter,
+  TitleStrategy,
+  withComponentInputBinding,
+  withInMemoryScrolling,
+} from '@angular/router';
 import { routes } from './app.routes';
+import { SITE_CONTENT } from './core/content/content.token';
+import { SITE_CONTENT_DATA } from './core/content/site-content';
+import { SeoTitleStrategy } from './core/seo/seo-title.strategy';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -17,6 +23,7 @@ export const appConfig: ApplicationConfig = {
       }),
     ),
     provideClientHydration(withEventReplay()),
-    { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT },
+    { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA },
+    { provide: TitleStrategy, useClass: SeoTitleStrategy },
   ],
 };

src/app/app.html

@@ -1,21 +1,24 @@
 <a class="skip-link" href="#main-content">{{ shell().skipLink }}</a>
 <app-dot-background aria-hidden="true"></app-dot-background>
-<div class="site" [class.nav-collapsed]="!navOpen()">
+<div class="site" [class.nav-collapsed]="!navOpen()" [attr.inert]="palette.open() ? '' : null">
   <header class="site-header">
     <div class="content-container site-header-inner glass-surface">
       <a class="site-identity" [routerLink]="navigation.link('home')">
         {{ siteConfig.personName }}
       </a>
-      <button
-        type="button"
-        class="nav-toggle"
-        [attr.aria-expanded]="navOpen()"
-        aria-controls="primary-nav"
-        [attr.aria-label]="menuLabel()"
-        (click)="toggleNav()"
-      >
-        <span aria-hidden="true"></span>
-      </button>
+      <div class="site-toolbar cluster">
+        <app-command-palette-trigger></app-command-palette-trigger>
+        <button
+          type="button"
+          class="nav-toggle"
+          [attr.aria-expanded]="navOpen()"
+          aria-controls="primary-nav"
+          [attr.aria-label]="menuLabel()"
+          (click)="toggleNav()"
+        >
+          <span aria-hidden="true"></span>
+        </button>
+      </div>
       <nav class="site-nav" [attr.aria-label]="shell().primaryNavLabel">
         <ul class="primary-nav" id="primary-nav">
           @for (item of navigation.primaryNav(); track item.routeId) {
@@ -28,7 +31,7 @@
                 >{{ item.label }}</a
               >
               @if (item.children; as children) {
-                <ul>
+                <ul class="submenu">
                   @for (child of children; track child.routeId) {
                     <li>
                       <a
@@ -47,7 +50,6 @@
         </ul>
       </nav>
       <div class="site-actions cluster">
-        <app-command-palette></app-command-palette>
         <a
           class="language-switch"
           [routerLink]="navigation.alternateLocaleLink()"
@@ -92,3 +94,4 @@
     </div>
   </footer>
 </div>
+<app-command-palette></app-command-palette>

src/app/app.routes.server.spec.ts

@@ -0,0 +1,19 @@
+import { RenderMode } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+describe('server routes', () => {
+  it('returns HTTP 404 from the catch-all and leaves prerendered routes without a status', () => {
+    const catchAll = serverRoutes.find((route) => route.path === '**');
+
+    expect(catchAll?.renderMode).toBe(RenderMode.Server);
+    expect(catchAll && 'status' in catchAll ? catchAll.status : undefined).toBe(404);
+
+    const prerendered = serverRoutes.filter((route) => route.path !== '**');
+    expect(prerendered.length).toBeGreaterThan(0);
+
+    for (const route of prerendered) {
+      expect(route.renderMode, route.path).toBe(RenderMode.Prerender);
+      expect('status' in route, `${route.path} must not set status`).toBe(false);
+    }
+  });
+});

src/app/app.routes.server.ts

@@ -9,5 +9,6 @@ export const serverRoutes: ServerRoute[] = [
   {
     path: '**',
     renderMode: RenderMode.Server,
+    status: 404,
   },
 ];

src/app/app.routes.spec.ts

@@ -2,18 +2,25 @@ import { TestBed } from '@angular/core/testing';
 import { provideRouter, type Routes } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
 import { routes } from './app.routes';
-import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
 import { SITE_CONTENT } from './core/content/content.token';
+import { SITE_CONTENT_DATA } from './core/content/site-content';
 import { LocaleService } from './core/i18n/locale.service';
 import { type AppRouteData } from './core/routing/app-route-data';
 
-function flattenRoutes(tree: Routes, prefix = ''): Array<{ path: string; data?: AppRouteData }> {
-  const entries: Array<{ path: string; data?: AppRouteData }> = [];
+function flattenRoutes(
+  tree: Routes,
+  prefix = '',
+): Array<{ path: string; data?: AppRouteData; title?: string }> {
+  const entries: Array<{ path: string; data?: AppRouteData; title?: string }> = [];
 
   for (const route of tree) {
     const segment = route.path ?? '';
     const path = [prefix, segment].filter((part) => part.length > 0).join('/');
-    entries.push({ path, data: route.data as AppRouteData | undefined });
+    entries.push({
+      path,
+      data: route.data as AppRouteData | undefined,
+      title: typeof route.title === 'string' ? route.title : undefined,
+    });
 
     if (route.children) {
       entries.push(...flattenRoutes(route.children, path));
@@ -39,9 +46,9 @@ describe('app routes', () => {
     expect(germanWildcard?.data).toEqual({ routeId: 'notFound', locale: 'de' });
   });
 
-  it('navigates to the English projects placeholder', async () => {
+  it('navigates to the English projects page', async () => {
     TestBed.configureTestingModule({
-      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
     });
 
     const harness = await RouterTestingHarness.create();
@@ -49,7 +56,24 @@ describe('app routes', () => {
     await harness.navigateByUrl('/en/projects');
 
     expect(locale.locale()).toBe('en');
-    expect(harness.routeNativeElement?.querySelector('h1')?.textContent).toContain('Projects');
-    expect(harness.routeNativeElement?.textContent).toContain('This page is being built.');
+    expect(harness.routeNativeElement?.querySelector('h1')?.textContent).toContain(
+      SITE_CONTENT_DATA.en.pages.projects.hero.headline,
+    );
+    expect(harness.routeNativeElement?.textContent).toContain(
+      SITE_CONTENT_DATA.en.cases.innofocus.client,
+    );
+  });
+
+  it('attaches the final page title for every locale route', () => {
+    const flattened = flattenRoutes(routes);
+
+    for (const entry of flattened) {
+      if (!entry.data) {
+        continue;
+      }
+
+      const expected = SITE_CONTENT_DATA[entry.data.locale].pages[entry.data.routeId].title;
+      expect(entry.title, entry.path).toBe(expected);
+    }
   });
 });

src/app/app.routes.ts

@@ -1,6 +1,6 @@
 import { type Type } from '@angular/core';
 import { type Routes } from '@angular/router';
-import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
+import { SITE_CONTENT_DATA } from './core/content/site-content';
 import { localeResolver } from './core/i18n/locale.resolver';
 import { type AppLocale } from './core/i18n/locale';
 import { type AppRouteData } from './core/routing/app-route-data';
@@ -39,14 +39,14 @@ function routeData(routeId: RouteId, locale: AppLocale): AppRouteData {
 
 function localeRoutes(locale: AppLocale): Routes {
   const segments = ROUTE_SEGMENTS[locale];
-  const pages = PLACEHOLDER_CONTENT[locale].pages;
+  const pages = SITE_CONTENT_DATA[locale].pages;
 
   return ROUTE_IDS.filter((routeId) => routeId !== 'notFound')
     .map((routeId) => ({
       path: segments[routeId],
       loadComponent: PAGE_LOADERS[routeId],
       data: routeData(routeId, locale),
-      title: pages[routeId]?.title,
+      title: pages[routeId].title,
       resolve: { locale: localeResolver },
     }))
     .concat([
@@ -54,7 +54,7 @@ function localeRoutes(locale: AppLocale): Routes {
         path: '**',
         loadComponent: PAGE_LOADERS.notFound,
         data: routeData('notFound', locale),
-        title: pages.notFound?.title,
+        title: pages.notFound.title,
         resolve: { locale: localeResolver },
       },
     ]);

src/app/app.scss

@@ -14,7 +14,7 @@
 }
 
 .site-header {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
   padding-block: var(--space-3);
@@ -29,10 +29,6 @@
   border-radius: var(--radius-lg);
 }
 
-.site-actions app-command-palette {
-  flex: 0 0 auto;
-}
-
 .site-identity,
 .site-nav a,
 .site-actions a,
@@ -41,14 +37,34 @@
   text-decoration: none;
 }
 
+.site-identity,
+.site-nav a,
+.site-actions a,
+.site-footer a,
+.nav-toggle {
+  min-height: 2.75rem;
+}
+
+.site-identity,
+.site-nav a,
+.site-actions a,
+.site-footer a {
+  display: inline-flex;
+  align-items: center;
+}
+
 .site-identity {
   font-weight: 600;
 }
 
-.nav-toggle {
+.site-toolbar {
   justify-self: end;
-  width: 2.5rem;
-  height: 2.5rem;
+  align-items: center;
+}
+
+.nav-toggle {
+  width: 2.75rem;
+  height: 2.75rem;
   border: 1px solid var(--surface-glass-border);
   border-radius: var(--radius-sm);
   background: transparent;
@@ -120,7 +136,11 @@
 
 .site-main {
   flex: 1;
-  outline: none;
+}
+
+.site-main:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .site-footer {
@@ -141,27 +161,70 @@
     display: none;
   }
 
+  .site-header {
+    padding-block: var(--space-2);
+  }
+
   .site-header-inner {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto auto;
     align-items: center;
+    gap: var(--space-2);
+    padding-block: var(--space-2);
   }
 
   .site-nav,
+  .nav-collapsed .site-nav {
+    display: flex;
+    grid-column: 1 / -1;
+    order: 5;
+  }
+
   .site-actions,
-  .nav-collapsed .site-nav,
   .nav-collapsed .site-actions {
     display: flex;
     grid-column: auto;
+    order: 3;
+  }
+
+  .site-toolbar {
+    order: 2;
   }
 
   .primary-nav {
     flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: var(--space-4);
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--space-3);
   }
 
-  .primary-nav ul {
-    padding-inline-start: 0;
+  .primary-nav > li {
+    position: relative;
+  }
+
+  .primary-nav > li > a {
+    white-space: nowrap;
+  }
+
+  .primary-nav > li > .submenu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: max-content;
+    z-index: 20;
+    padding: var(--space-2) var(--space-3);
+    gap: var(--space-1);
+    border-radius: var(--radius-md);
+    background: var(--surface-glass);
+    backdrop-filter: blur(var(--blur-glass));
+    -webkit-backdrop-filter: blur(var(--blur-glass));
+    border: 1px solid var(--surface-glass-border);
+    box-shadow: var(--shadow-soft);
+  }
+
+  .primary-nav > li:hover > .submenu,
+  .primary-nav > li:focus-within > .submenu {
+    display: flex;
+    flex-direction: column;
   }
 }

src/app/app.spec.ts

@@ -1,22 +1,67 @@
-import { TestBed } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
-import { App } from './app';
+import { ApplicationRef, PLATFORM_ID } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { provideRouter, Router, TitleStrategy } from '@angular/router';
+import { App, WIDE_NAV_QUERY } from './app';
 import { routes } from './app.routes';
-import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
 import { SITE_CONTENT } from './core/content/content.token';
+import { SITE_CONTENT_DATA } from './core/content/site-content';
+import { SeoTitleStrategy } from './core/seo/seo-title.strategy';
+
+function mockViewport(wide: boolean): void {
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: (query: string): MediaQueryList =>
+      ({
+        matches: wide && query === WIDE_NAV_QUERY,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      }) as MediaQueryList,
+  });
+}
+
+async function configureApp(
+  extraProviders: { provide: unknown; useValue: unknown }[] = [],
+): Promise<void> {
+  await TestBed.configureTestingModule({
+    imports: [App],
+    providers: [
+      provideRouter(routes),
+      { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA },
+      { provide: TitleStrategy, useClass: SeoTitleStrategy },
+      ...extraProviders,
+    ],
+  }).compileComponents();
+}
+
+async function flush(fixture: ComponentFixture<App>): Promise<void> {
+  fixture.detectChanges();
+  await fixture.whenStable();
+  TestBed.inject(ApplicationRef).tick();
+  fixture.detectChanges();
+  await fixture.whenStable();
+}
+
+function toggle(root: HTMLElement): HTMLButtonElement {
+  return root.querySelector('.nav-toggle') as HTMLButtonElement;
+}
 
 describe('App', () => {
   beforeEach(async () => {
     vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    mockViewport(true);
 
-    await TestBed.configureTestingModule({
-      imports: [App],
-      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
-    }).compileComponents();
+    await configureApp();
   });
 
   afterEach(() => {
     vi.restoreAllMocks();
+    Reflect.deleteProperty(window, 'matchMedia');
   });
 
   it('should create the shell', async () => {
@@ -43,4 +88,83 @@ describe('App', () => {
     expect(compiled.querySelector('a.language-switch[hreflang]')).toBeTruthy();
     expect(compiled.querySelector('footer')).toBeTruthy();
   });
+
+  it('keeps the palette trigger in the header and the dialog outside .site', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    const site = compiled.querySelector('.site');
+    const trigger = compiled.querySelector('header .command-palette-trigger');
+
+    expect(site).toBeTruthy();
+    expect(trigger).toBeTruthy();
+    expect(site?.contains(trigger)).toBe(true);
+
+    (trigger as HTMLButtonElement).click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    TestBed.inject(ApplicationRef).tick();
+    fixture.detectChanges();
+
+    const dialog = compiled.querySelector('[role="dialog"]');
+    expect(dialog).toBeTruthy();
+    expect(site?.contains(dialog)).toBe(false);
+    expect(site?.hasAttribute('inert')).toBe(true);
+  });
+
+  it('keeps the server-rendered nav expanded and collapses after hydration on a narrow viewport', async () => {
+    TestBed.resetTestingModule();
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    mockViewport(false);
+    await configureApp();
+
+    const fixture = TestBed.createComponent(App);
+    const shell = fixture.componentInstance as unknown as { navOpen: () => boolean };
+    expect(shell.navOpen()).toBe(true);
+
+    await flush(fixture);
+    const button = toggle(fixture.nativeElement);
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+    expect(button.getAttribute('aria-controls')).toBe('primary-nav');
+    expect(button.getAttribute('aria-label')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('.site')?.classList.contains('nav-collapsed')).toBe(
+      true,
+    );
+  });
+
+  it('does not collapse the nav on the server even when the viewport helper would be narrow', async () => {
+    TestBed.resetTestingModule();
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    mockViewport(false);
+    await configureApp([{ provide: PLATFORM_ID, useValue: 'server' }]);
+
+    const fixture = TestBed.createComponent(App);
+    await flush(fixture);
+
+    expect(toggle(fixture.nativeElement).getAttribute('aria-expanded')).toBe('true');
+    expect(fixture.nativeElement.querySelector('.site')?.classList.contains('nav-collapsed')).toBe(
+      false,
+    );
+  });
+
+  it('closes the nav on navigation when the viewport is narrow', async () => {
+    TestBed.resetTestingModule();
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    mockViewport(false);
+    await configureApp();
+
+    const fixture = TestBed.createComponent(App);
+    await flush(fixture);
+
+    const button = toggle(fixture.nativeElement);
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+    button.click();
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-expanded')).toBe('true');
+
+    await TestBed.inject(Router).navigateByUrl('/projekte');
+    await flush(fixture);
+
+    expect(toggle(fixture.nativeElement).getAttribute('aria-expanded')).toBe('false');
+  });
 });

src/app/app.ts

@@ -1,23 +1,54 @@
-import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { DOCUMENT, ViewportScroller } from '@angular/common';
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  Injector,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { filter } from 'rxjs';
 import { DotBackground } from './components/dot-background/dot-background';
 import { SHELL_COPY } from './core/content/shell-copy';
 import { SITE_CONFIG } from './core/content/site-config';
 import { LOCALE_HTML_LANG, otherLocale } from './core/i18n/locale';
 import { LocaleService } from './core/i18n/locale.service';
 import { NavigationService } from './core/navigation/navigation.service';
+import { isBrowserPlatform, viewportMatches } from './core/platform/browser';
 import { CommandPalette } from './shared/command-palette/command-palette';
+import { CommandPaletteTrigger } from './shared/command-palette/command-palette-trigger/command-palette-trigger';
+import { CommandPaletteService } from './shared/command-palette/command-palette.service';
+
+/** Matches `md` in `src/_breakpoints.scss` (48rem). */
+export const WIDE_NAV_QUERY = '(min-width: 48rem)';
 
 @Component({
   selector: 'app-root',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, DotBackground, CommandPalette],
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    DotBackground,
+    CommandPalette,
+    CommandPaletteTrigger,
+  ],
   templateUrl: './app.html',
   styleUrl: './app.scss',
 })
 export class App {
   protected readonly navigation = inject(NavigationService);
   protected readonly localeService = inject(LocaleService);
+  protected readonly palette = inject(CommandPaletteService);
+  private readonly router = inject(Router);
+  private readonly injector = inject(Injector);
+  private readonly document = inject(DOCUMENT);
+  private readonly viewportScroller = inject(ViewportScroller);
+  private readonly isBrowser = isBrowserPlatform();
+  private readonly wideNav = viewportMatches(WIDE_NAV_QUERY);
   protected readonly siteConfig = SITE_CONFIG;
   protected readonly navOpen = signal(true);
 
@@ -28,7 +59,61 @@ export class App {
     this.navOpen() ? this.shell().menuClose : this.shell().menuOpen,
   );
 
+  constructor() {
+    afterNextRender(
+      () => {
+        this.collapseNavIfNarrow();
+        this.bindHeaderScrollOffset();
+      },
+      { injector: this.injector },
+    );
+
+    this.router.events
+      .pipe(
+        filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => this.collapseNavIfNarrow());
+  }
+
   protected toggleNav(): void {
     this.navOpen.update((open) => !open);
   }
+
+  private collapseNavIfNarrow(): void {
+    if (!this.isBrowser || this.wideNav) {
+      return;
+    }
+
+    this.navOpen.set(false);
+  }
+
+  private bindHeaderScrollOffset(): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    this.viewportScroller.setOffset(() => [0, this.headerOffsetPx()]);
+  }
+
+  private headerOffsetPx(): number {
+    const view = this.document.defaultView;
+    if (!view) {
+      return 0;
+    }
+
+    const styles = view.getComputedStyle(this.document.documentElement);
+    const raw = styles.getPropertyValue('--header-offset').trim();
+    const numeric = Number.parseFloat(raw);
+    if (!Number.isFinite(numeric)) {
+      return 0;
+    }
+
+    if (raw.endsWith('rem')) {
+      const rootSize = Number.parseFloat(styles.fontSize);
+      return numeric * (Number.isFinite(rootSize) ? rootSize : 16);
+    }
+
+    return numeric;
+  }
 }

src/app/components/pages/skills/skills-grid/skills-grid.html

@@ -1,5 +1,5 @@
 <div class="grid">
-  @for (cat of categories; track cat.category) {
+  @for (cat of categories(); track cat.category) {
     <app-skill-card
       [title]="cat.title"
       [category]="cat.category"

src/app/components/pages/skills/skills-grid/skills-grid.ts

@@ -1,114 +1,129 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { SkillCategory } from '../../../../models/skill-category';
 import { SkillCard } from '../skill-card/skill-card';
 
+const BASE_CATEGORIES: readonly SkillCategory[] = [
+  {
+    title: 'Programming',
+    category: 'programming',
+    gridArea: 'prog',
+    skills: [
+      { name: 'TypeScript', icon: 'typescript', url: 'https://www.typescriptlang.org/' },
+      {
+        name: 'JavaScript',
+        icon: 'javascript',
+        url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
+      },
+      { name: 'Angular', icon: 'angular', url: 'https://angular.dev/' },
+      { name: 'Java', icon: 'java', url: 'https://www.java.com/' },
+      { name: 'Spring', icon: 'java-spring', url: 'https://spring.io/' },
+      { name: 'C#', icon: 'c-sharp', url: 'https://learn.microsoft.com/en-us/dotnet/csharp/' },
+      { name: '.NET', icon: 'c-sharp-net', url: 'https://dotnet.microsoft.com/' },
+      { name: 'Kafka', icon: 'kafka', url: 'https://kafka.apache.org/' },
+      { name: 'Elasticsearch', icon: 'elasticseach', url: 'https://www.elastic.co/' },
+    ],
+  },
+  {
+    title: 'Databases',
+    category: 'db',
+    gridArea: 'db',
+    skills: [
+      {
+        name: 'SQL Server',
+        icon: 'microsoftsqlserver',
+        url: 'https://www.microsoft.com/en-us/sql-server',
+      },
+      { name: 'PostgreSQL', icon: 'postgresql', url: 'https://www.postgresql.org/' },
+      { name: 'MySQL', icon: 'mysql', url: 'https://www.mysql.com/' },
+      { name: 'MariaDB', icon: 'mariadb', url: 'https://mariadb.org/' },
+    ],
+  },
+  {
+    title: 'DevOps',
+    category: 'devops',
+    gridArea: 'devops',
+    skills: [
+      { name: 'Kubernetes', icon: 'kubernetes', url: 'https://kubernetes.io/' },
+      { name: 'Docker', icon: 'docker', url: 'https://www.docker.com/' },
+      { name: 'GitLab', icon: 'gitlab', url: 'https://gitlab.com/' },
+      {
+        name: 'Azure DevOps',
+        icon: 'devops',
+        url: 'https://azure.microsoft.com/en-us/products/devops',
+      },
+      { name: 'Azure', icon: 'azure', url: 'https://azure.microsoft.com/' },
+      { name: 'Hetzner', icon: 'hetzner', url: 'https://www.hetzner.com/' },
+      { name: 'Netcup', icon: 'netcup', url: 'https://www.netcup.eu/' },
+    ],
+  },
+  {
+    title: 'Operating Systems',
+    category: 'os',
+    gridArea: 'os',
+    skills: [
+      { name: 'Arch Linux', icon: 'arch', url: 'https://archlinux.org/' },
+      { name: 'Ubuntu', icon: 'ubuntu', url: 'https://ubuntu.com/' },
+      { name: 'macOS', icon: 'macos', url: 'https://www.apple.com/macos/' },
+      { name: 'Windows', icon: 'windows', url: 'https://www.microsoft.com/windows' },
+    ],
+  },
+  {
+    title: 'Infrastructure as Code',
+    category: 'iac',
+    gridArea: 'iac',
+    skills: [
+      { name: 'Terraform', icon: 'terraform', url: 'https://www.terraform.io/' },
+      { name: 'Ansible', icon: 'ansible', url: 'https://www.ansible.com/' },
+    ],
+  },
+  {
+    title: 'Hypervisors',
+    category: 'hyperviser',
+    gridArea: 'hyper',
+    skills: [
+      { name: 'Proxmox', icon: 'proxmox', url: 'https://www.proxmox.com/' },
+      {
+        name: 'Hyper-V',
+        icon: 'hyperv',
+        url: 'https://learn.microsoft.com/en-us/virtualization/hyper-v-on-windows/',
+      },
+    ],
+  },
+  {
+    title: 'Tools',
+    category: 'tools',
+    gridArea: 'tools',
+    skills: [
+      { name: 'JetBrains', icon: 'jetbrains', url: 'https://www.jetbrains.com/' },
+      { name: 'Visual Studio', icon: 'vs', url: 'https://visualstudio.microsoft.com/' },
+      {
+        name: 'Microsoft Office',
+        icon: 'office',
+        url: 'https://www.microsoft.com/microsoft-365',
+      },
+    ],
+  },
+];
+
+export const SKILL_GRID_ITEM_NAMES: readonly string[] = BASE_CATEGORIES.flatMap((category) =>
+  category.skills.map((skill) => skill.name),
+);
+
 @Component({
   selector: 'app-skills-grid',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SkillCard],
   templateUrl: './skills-grid.html',
   styleUrl: './skills-grid.scss',
 })
 export class SkillsGrid {
-  categories: SkillCategory[] = [
-    {
-      title: 'Programming',
-      category: 'programming',
-      gridArea: 'prog',
-      skills: [
-        { name: 'TypeScript', icon: 'typescript', url: 'https://www.typescriptlang.org/' },
-        {
-          name: 'JavaScript',
-          icon: 'javascript',
-          url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
-        },
-        { name: 'Angular', icon: 'angular', url: 'https://angular.dev/' },
-        { name: 'Java', icon: 'java', url: 'https://www.java.com/' },
-        { name: 'Spring', icon: 'java-spring', url: 'https://spring.io/' },
-        { name: 'C#', icon: 'c-sharp', url: 'https://learn.microsoft.com/en-us/dotnet/csharp/' },
-        { name: '.NET', icon: 'c-sharp-net', url: 'https://dotnet.microsoft.com/' },
-        { name: 'Kafka', icon: 'kafka', url: 'https://kafka.apache.org/' },
-        { name: 'Elasticsearch', icon: 'elasticseach', url: 'https://www.elastic.co/' },
-      ],
-    },
-    {
-      title: 'Databases',
-      category: 'db',
-      gridArea: 'db',
-      skills: [
-        {
-          name: 'SQL Server',
-          icon: 'microsoftsqlserver',
-          url: 'https://www.microsoft.com/en-us/sql-server',
-        },
-        { name: 'PostgreSQL', icon: 'postgresql', url: 'https://www.postgresql.org/' },
-        { name: 'MySQL', icon: 'mysql', url: 'https://www.mysql.com/' },
-        { name: 'MariaDB', icon: 'mariadb', url: 'https://mariadb.org/' },
-      ],
-    },
-    {
-      title: 'DevOps',
-      category: 'devops',
-      gridArea: 'devops',
-      skills: [
-        { name: 'Kubernetes', icon: 'kubernetes', url: 'https://kubernetes.io/' },
-        { name: 'Docker', icon: 'docker', url: 'https://www.docker.com/' },
-        { name: 'GitLab', icon: 'gitlab', url: 'https://gitlab.com/' },
-        {
-          name: 'Azure DevOps',
-          icon: 'devops',
-          url: 'https://azure.microsoft.com/en-us/products/devops',
-        },
-        { name: 'Azure', icon: 'azure', url: 'https://azure.microsoft.com/' },
-        { name: 'Hetzner', icon: 'hetzner', url: 'https://www.hetzner.com/' },
-        { name: 'Netcup', icon: 'netcup', url: 'https://www.netcup.eu/' },
-      ],
-    },
-    {
-      title: 'Operating Systems',
-      category: 'os',
-      gridArea: 'os',
-      skills: [
-        { name: 'Arch Linux', icon: 'arch', url: 'https://archlinux.org/' },
-        { name: 'Ubuntu', icon: 'ubuntu', url: 'https://ubuntu.com/' },
-        { name: 'macOS', icon: 'macos', url: 'https://www.apple.com/macos/' },
-        { name: 'Windows', icon: 'windows', url: 'https://www.microsoft.com/windows' },
-      ],
-    },
-    {
-      title: 'Infrastructure as Code',
-      category: 'iac',
-      gridArea: 'iac',
-      skills: [
-        { name: 'Terraform', icon: 'terraform', url: 'https://www.terraform.io/' },
-        { name: 'Ansible', icon: 'ansible', url: 'https://www.ansible.com/' },
-      ],
-    },
-    {
-      title: 'Hypervisors',
-      category: 'hyperviser',
-      gridArea: 'hyper',
-      skills: [
-        { name: 'Proxmox', icon: 'proxmox', url: 'https://www.proxmox.com/' },
-        {
-          name: 'Hyper-V',
-          icon: 'hyperv',
-          url: 'https://learn.microsoft.com/en-us/virtualization/hyper-v-on-windows/',
-        },
-      ],
-    },
-    {
-      title: 'Tools',
-      category: 'tools',
-      gridArea: 'tools',
-      skills: [
-        { name: 'JetBrains', icon: 'jetbrains', url: 'https://www.jetbrains.com/' },
-        { name: 'Visual Studio', icon: 'vs', url: 'https://visualstudio.microsoft.com/' },
-        {
-          name: 'Microsoft Office',
-          icon: 'office',
-          url: 'https://www.microsoft.com/microsoft-365',
-        },
-      ],
-    },
-  ];
+  readonly categoryTitles = input<Readonly<Record<string, string>>>({});
+
+  protected readonly categories = computed(() => {
+    const titles = this.categoryTitles();
+    return BASE_CATEGORIES.map((category) => ({
+      ...category,
+      title: titles[category.category] ?? category.title,
+    }));
+  });
 }

src/app/components/pages/skills/skills.html

@@ -1,7 +0,0 @@
-<div class="main">
-  @if (page(); as copy) {
-    <h1>{{ copy.title }}</h1>
-    <p>{{ copy.description }}</p>
-  }
-  <app-skills-grid></app-skills-grid>
-</div>

src/app/components/pages/skills/skills.scss

@@ -1,22 +0,0 @@
-.main {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text);
-  font-family: var(--font-sans);
-  padding: var(--space-8) var(--content-gutter);
-}
-
-h1 {
-  font-size: var(--text-3xl);
-  font-weight: 600;
-  line-height: var(--leading-tight);
-  margin: 0;
-}
-
-p {
-  color: var(--color-text-muted);
-  margin: var(--space-2) 0 var(--space-9);
-}

src/app/components/pages/skills/skills.spec.ts

@@ -1,31 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { PLACEHOLDER_CONTENT } from '../../../core/content/placeholder-content';
-import { SITE_CONTENT } from '../../../core/content/content.token';
-import { SITE_CONFIG } from '../../../core/content/site-config';
-import { Skills } from './skills';
-
-describe('Skills', () => {
-  let component: Skills;
-  let fixture: ComponentFixture<Skills>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Skills],
-      providers: [{ provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(Skills);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('renders the localized stack title instead of the person name', () => {
-    const heading = (fixture.nativeElement as HTMLElement).querySelector('h1');
-    expect(heading?.textContent?.trim()).toBe('Stack');
-    expect(heading?.textContent).not.toContain(SITE_CONFIG.personName);
-  });
-});

src/app/components/pages/skills/skills.ts

@@ -1,14 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ContentService } from '../../../core/content/content.service';
-import { SkillsGrid } from './skills-grid/skills-grid';
-
-@Component({
-  selector: 'app-skills',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SkillsGrid],
-  templateUrl: './skills.html',
-  styleUrl: './skills.scss',
-})
-export class Skills {
-  protected readonly page = inject(ContentService).page('stack');
-}

src/app/core/commands/command-ids.ts

@@ -0,0 +1,24 @@
+export type CommandId =
+  | 'help'
+  | 'projects'
+  | 'servicesAi'
+  | 'cv'
+  | 'contact'
+  | 'brew'
+  | 'ignite'
+  | 'rev'
+  | 'clear'
+  | 'close';
+
+export const COMMAND_IDS: readonly CommandId[] = [
+  'help',
+  'projects',
+  'servicesAi',
+  'cv',
+  'contact',
+  'brew',
+  'ignite',
+  'rev',
+  'clear',
+  'close',
+];

src/app/core/content/content-claims.spec.ts

@@ -0,0 +1,86 @@
+import { APP_LOCALES } from '../i18n/locale';
+import {
+  CASE_STUDY_IDS,
+  type CaseStudyCopy,
+  type MetricCopy,
+  type OfferingCopy,
+  type SiteContent,
+} from './content.contracts';
+import { SITE_CONTENT_DATA } from './site-content';
+
+const DELIVERED_OFFER_WORDING =
+  /für kunden umgesetzt|im kundeneinsatz|in production for clients|delivered for clients|langjährige erfahrung mit rag|years of rag/i;
+
+function allMetrics(site: SiteContent): readonly MetricCopy[] {
+  return [...site.home.metrics, ...CASE_STUDY_IDS.flatMap((id) => site.cases[id].metrics)];
+}
+
+function allOfferings(site: SiteContent): readonly OfferingCopy[] {
+  return Object.values(site.services).flatMap((page) => page.offerings);
+}
+
+function caseText(caseStudy: CaseStudyCopy): string {
+  return [
+    caseStudy.summary,
+    caseStudy.responsibility,
+    caseStudy.situation,
+    ...caseStudy.approach,
+    ...caseStudy.outcome,
+    ...caseStudy.metrics.map((metric) => `${metric.value} ${metric.label} ${metric.note ?? ''}`),
+  ].join('\n');
+}
+
+describe('content claims and attribution', () => {
+  it('keeps the four public cases and attributes verified facts to the right ones', () => {
+    for (const locale of APP_LOCALES) {
+      const site = SITE_CONTENT_DATA[locale];
+      expect(Object.keys(site.cases)).toEqual([...CASE_STUDY_IDS]);
+      expect(CASE_STUDY_IDS).toEqual(['innofocus', 'roesterei', 'myspa', 'hdi']);
+
+      const matchesRuntime = (metric: MetricCopy) =>
+        /8/.test(metric.value) && /90/.test(metric.value);
+      const runtimeMetrics = allMetrics(site).filter(matchesRuntime);
+      expect(runtimeMetrics.every((metric) => metric.caseId === 'innofocus')).toBe(true);
+      expect(site.home.metrics.filter(matchesRuntime)).toHaveLength(1);
+      expect(site.cases.innofocus.metrics.filter(matchesRuntime)).toHaveLength(1);
+      for (const caseId of CASE_STUDY_IDS.filter((id) => id !== 'innofocus')) {
+        expect(site.cases[caseId].metrics.filter(matchesRuntime)).toHaveLength(0);
+      }
+
+      const leadershipMetrics = allMetrics(site).filter(
+        (metric) =>
+          metric.caseId === 'myspa' &&
+          /4/.test(`${metric.value} ${metric.label}`) &&
+          /2/.test(`${metric.value} ${metric.label}`),
+      );
+      expect(leadershipMetrics.length).toBeGreaterThan(0);
+
+      const hdiText = caseText(site.cases.hdi);
+      expect(hdiText).toMatch(/Azure AKS/);
+      expect(hdiText).toMatch(/Azure App Services/);
+
+      for (const caseId of CASE_STUDY_IDS.filter((id) => id !== 'hdi')) {
+        expect(caseText(site.cases[caseId])).not.toMatch(/Azure App Services/);
+      }
+    }
+  });
+
+  it('keeps AI delivery claims limited to the two Rösterei tools', () => {
+    for (const locale of APP_LOCALES) {
+      const site = SITE_CONTENT_DATA[locale];
+      const aiOfferings = site.services.servicesAi.offerings;
+      const delivered = aiOfferings.filter((offering) => offering.status === 'delivered');
+
+      expect(delivered).toHaveLength(2);
+      expect(delivered.every((offering) => offering.referenceCaseId === 'roesterei')).toBe(true);
+
+      const otherOfferings = allOfferings(site).filter((offering) => !delivered.includes(offering));
+      expect(otherOfferings.every((offering) => offering.status === 'offer')).toBe(true);
+      expect(
+        otherOfferings.some((offering) =>
+          DELIVERED_OFFER_WORDING.test(`${offering.title} ${offering.body}`),
+        ),
+      ).toBe(false);
+    }
+  });
+});

src/app/core/content/content-completeness.spec.ts

@@ -0,0 +1,116 @@
+import { APP_LOCALES } from '../i18n/locale';
+import { ROUTE_IDS } from '../routing/route-ids';
+import { type SiteContent } from './content.contracts';
+import { SITE_CONTENT_DATA } from './site-content';
+
+const TITLE_SUFFIX = ' | Antonio Ledebuhr';
+const FORBIDDEN =
+  /lorem|todo|tbd|platzhaltertext|placeholder text|wird derzeit aufgebaut|being built|coming soon|xxx/i;
+
+function walkStrings(
+  value: unknown,
+  visit: (text: string, path: string) => void,
+  path = '',
+  skipKeys: ReadonlySet<string> = new Set(),
+): void {
+  if (typeof value === 'string') {
+    visit(value, path);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => walkStrings(item, visit, `${path}[${index}]`, skipKeys));
+    return;
+  }
+
+  if (value && typeof value === 'object') {
+    for (const [key, child] of Object.entries(value)) {
+      if (skipKeys.has(key)) {
+        continue;
+      }
+      walkStrings(child, visit, path ? `${path}.${key}` : key, skipKeys);
+    }
+  }
+}
+
+describe('content completeness', () => {
+  it('covers every route in both locales with real page copy', () => {
+    for (const locale of APP_LOCALES) {
+      const site = SITE_CONTENT_DATA[locale];
+
+      expect(site.pages.home).toBe(site.home);
+      expect(site.pages.contact).toBe(site.contact);
+      expect(site.pages.projects).toBe(site.projects);
+      expect(site.pages.stack).toBe(site.stack);
+      expect(site.pages.imprint).toBe(site.legal.imprint);
+      expect(site.pages.privacy).toBe(site.legal.privacy);
+      expect(site.pages.servicesAi).toBe(site.services.servicesAi);
+
+      for (const routeId of ROUTE_IDS) {
+        const page = site.pages[routeId];
+        expect(page, `${locale}.${routeId}`).toBeTruthy();
+        expect(page.title.length).toBeGreaterThan(0);
+        expect(page.title.endsWith(TITLE_SUFFIX)).toBe(true);
+        expect(page.description.length).toBeGreaterThanOrEqual(60);
+        expect(page.hero.headline.length).toBeGreaterThan(0);
+        expect(page.hero.headline.includes(TITLE_SUFFIX)).toBe(false);
+
+        if (routeId !== 'notFound') {
+          const filledSections = page.sections.filter((section) =>
+            (section.body ?? []).some((paragraph) => paragraph.trim().length > 0),
+          );
+          expect(filledSections.length, `${locale}.${routeId} sections`).toBeGreaterThanOrEqual(2);
+        }
+      }
+    }
+  });
+
+  it('keeps the content tree free of scaffolding, except legal review fields', () => {
+    const skipped = new Set(['reviewNotice', 'reviewTodos']);
+
+    for (const locale of APP_LOCALES) {
+      const site = SITE_CONTENT_DATA[locale];
+      const hits: string[] = [];
+
+      walkStrings(
+        site,
+        (text, path) => {
+          if (FORBIDDEN.test(text)) {
+            hits.push(`${path}: ${text}`);
+          }
+        },
+        locale,
+        skipped,
+      );
+
+      expect(hits).toEqual([]);
+
+      for (const legalId of ['imprint', 'privacy'] as const) {
+        const legal = site.legal[legalId];
+        expect(legal.reviewNotice.trim().length).toBeGreaterThan(20);
+        expect(legal.reviewTodos.length).toBeGreaterThan(0);
+        expect(legal.reviewTodos.every((item) => item.trim().length > 0)).toBe(true);
+      }
+    }
+  });
+
+  it('does not treat legal review fields as an implicit skip of the rest of the legal pages', () => {
+    for (const locale of APP_LOCALES) {
+      const site: SiteContent = SITE_CONTENT_DATA[locale];
+      for (const legalId of ['imprint', 'privacy'] as const) {
+        const legal = site.legal[legalId];
+        const remainderHits: string[] = [];
+        walkStrings(
+          { hero: legal.hero, sections: legal.sections, legalSections: legal.legalSections },
+          (text, path) => {
+            if (FORBIDDEN.test(text)) {
+              remainderHits.push(`${path}: ${text}`);
+            }
+          },
+          `${locale}.${legalId}`,
+        );
+        expect(remainderHits).toEqual([]);
+      }
+    }
+  });
+});

src/app/core/content/content-exclusions.spec.ts

@@ -0,0 +1,63 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { routes } from '../../app.routes';
+import { SITE_CONTENT } from './content.token';
+import { SITE_CONTENT_DATA } from './site-content';
+import { SHELL_COPY } from './shell-copy';
+import { FOOTER_NAV, PRIMARY_NAV } from '../navigation/navigation';
+
+const EXCLUDED = new RegExp(
+  `\\b(${['hu' + 'p', 'bit' + 'wiz', 'cyber' + 'trading'].join('|')})\\b`,
+  'i',
+);
+
+function walkStrings(value: unknown, visit: (text: string) => void): void {
+  if (typeof value === 'string') {
+    visit(value);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item) => walkStrings(item, visit));
+    return;
+  }
+
+  if (value && typeof value === 'object') {
+    Object.values(value).forEach((child) => walkStrings(child, visit));
+  }
+}
+
+function collectHits(value: unknown): string[] {
+  const hits: string[] = [];
+  walkStrings(value, (text) => {
+    if (EXCLUDED.test(text)) {
+      hits.push(text);
+    }
+  });
+  return hits;
+}
+
+describe('content exclusions', () => {
+  it('keeps excluded former stations out of copy data and navigation labels', () => {
+    expect(collectHits(SITE_CONTENT_DATA)).toEqual([]);
+    expect(collectHits(SHELL_COPY)).toEqual([]);
+    expect(collectHits(PRIMARY_NAV)).toEqual([]);
+    expect(collectHits(FOOTER_NAV)).toEqual([]);
+  });
+
+  it('keeps excluded former stations out of rendered home, projects and about pages', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+    const paths = ['/', '/en', '/projekte', '/en/projects', '/ueber-mich', '/en/about'];
+
+    for (const path of paths) {
+      await harness.navigateByUrl(path);
+      const text = harness.routeNativeElement?.textContent ?? '';
+      expect(EXCLUDED.test(text), path).toBe(false);
+    }
+  });
+});

src/app/core/content/content-parity.spec.ts

@@ -0,0 +1,87 @@
+import { APP_LOCALES } from '../i18n/locale';
+import { ROUTE_IDS } from '../routing/route-ids';
+import { CASE_STUDY_IDS } from './content.contracts';
+import { SITE_CONTENT_DATA } from './site-content';
+
+const STRUCTURAL_KEYS = new Set([
+  'id',
+  'status',
+  'control',
+  'required',
+  'routeId',
+  'caseId',
+  'referenceCaseId',
+  'external',
+]);
+
+function assertParity(left: unknown, right: unknown, path: string): void {
+  if (Array.isArray(left) || Array.isArray(right)) {
+    expect(Array.isArray(left), path).toBe(true);
+    expect(Array.isArray(right), path).toBe(true);
+    expect((left as unknown[]).length, path).toBe((right as unknown[]).length);
+    (left as unknown[]).forEach((item, index) =>
+      assertParity(item, (right as unknown[])[index], `${path}[${index}]`),
+    );
+    return;
+  }
+
+  if (left && right && typeof left === 'object' && typeof right === 'object') {
+    const leftKeys = Object.keys(left).sort();
+    const rightKeys = Object.keys(right).sort();
+    expect(leftKeys, path).toEqual(rightKeys);
+
+    for (const key of leftKeys) {
+      const nextPath = `${path}.${key}`;
+      const leftValue = (left as Record<string, unknown>)[key];
+      const rightValue = (right as Record<string, unknown>)[key];
+      if (STRUCTURAL_KEYS.has(key)) {
+        expect(leftValue, nextPath).toEqual(rightValue);
+      } else {
+        assertParity(leftValue, rightValue, nextPath);
+      }
+    }
+    return;
+  }
+
+  if (
+    typeof left === 'string' &&
+    typeof right === 'string' &&
+    (/featuredCaseIds\[\d+\]$/.test(path) || /options\[\d+\]\.value$/.test(path))
+  ) {
+    expect(left, path).toBe(right);
+  }
+}
+
+describe('content parity', () => {
+  it('keeps the German and English trees structurally aligned', () => {
+    assertParity(SITE_CONTENT_DATA.de, SITE_CONTENT_DATA.en, 'site');
+  });
+
+  it('uses different long-form copy in German and English', () => {
+    for (const routeId of ROUTE_IDS) {
+      const german = SITE_CONTENT_DATA.de.pages[routeId];
+      const english = SITE_CONTENT_DATA.en.pages[routeId];
+
+      expect(german.title, routeId).not.toBe(english.title);
+      expect(german.description, routeId).not.toBe(english.description);
+      expect(german.hero.headline, routeId).not.toBe(english.hero.headline);
+
+      german.sections.forEach((section, index) => {
+        const other = english.sections[index];
+        expect(section.body?.join('\n'), `${routeId}.${section.id}`).not.toBe(
+          other?.body?.join('\n'),
+        );
+      });
+    }
+
+    for (const caseId of CASE_STUDY_IDS) {
+      const german = SITE_CONTENT_DATA.de.cases[caseId];
+      const english = SITE_CONTENT_DATA.en.cases[caseId];
+      expect(german.summary, caseId).not.toBe(english.summary);
+      expect(german.situation, caseId).not.toBe(english.situation);
+      expect(german.linkLabel, caseId).not.toBe(english.linkLabel);
+    }
+
+    expect(APP_LOCALES).toEqual(['de', 'en']);
+  });
+});

src/app/core/content/content.contracts.ts

@@ -19,6 +19,7 @@ export interface CtaCopy {
   readonly routeId?: RouteId;
   readonly href?: string;
   readonly external?: boolean;
+  readonly fragment?: string;
 }
 
 export interface SectionCopy extends CopyBlock {
@@ -34,17 +35,174 @@ export interface PageCopy {
   readonly ctas: readonly CtaCopy[];
 }
 
-export interface CaseStudySummary {
+export type CaseStudyId = 'innofocus' | 'roesterei' | 'myspa' | 'hdi';
+
+export const CASE_STUDY_IDS: readonly CaseStudyId[] = ['innofocus', 'roesterei', 'myspa', 'hdi'];
+
+export interface MetricCopy {
   readonly id: string;
-  readonly client: string;
-  readonly headline: string;
-  readonly proof?: string;
-  readonly tags: readonly string[];
-  readonly routeId?: RouteId;
+  readonly value: string;
+  readonly label: string;
+  readonly note?: string;
+  readonly caseId?: CaseStudyId;
 }
 
-export type LocalizedPages = Partial<Record<RouteId, PageCopy>>;
+export interface ProcessStepCopy {
+  readonly id: string;
+  readonly title: string;
+  readonly body: string;
+}
+
+export interface CaseStudyCopy {
+  readonly id: CaseStudyId;
+  readonly client: string;
+  readonly role: string;
+  readonly period: string;
+  readonly domain: string;
+  readonly headline: string;
+  readonly summary: string;
+  readonly responsibility: string;
+  readonly situation: string;
+  readonly approach: readonly string[];
+  readonly outcome: readonly string[];
+  readonly metrics: readonly MetricCopy[];
+  readonly stack: readonly string[];
+  readonly tags: readonly string[];
+  readonly linkLabel: string;
+  readonly transparencyNote?: string;
+}
+
+export type OfferingStatus = 'delivered' | 'offer';
+
+export interface OfferingCopy {
+  readonly id: string;
+  readonly title: string;
+  readonly body: string;
+  readonly status: OfferingStatus;
+  readonly referenceCaseId?: CaseStudyId;
+}
+
+export interface ServiceSequenceCopy {
+  readonly situation: SectionCopy;
+  readonly diagnosis: SectionCopy;
+  readonly implementation: SectionCopy;
+  readonly operation: SectionCopy;
+  readonly referenceCaseId: CaseStudyId;
+  readonly referenceHeadline: string;
+  readonly referenceNote: string;
+  readonly inquiry: SectionCopy;
+}
+
+export interface ServicePageCopy extends PageCopy {
+  readonly sequence: ServiceSequenceCopy;
+  readonly offerings: readonly OfferingCopy[];
+  readonly deliveredOfferingsHeading: string;
+  readonly offerOfferingsHeading: string;
+  readonly offeringCaseBackedLabel: string;
+}
+
+export interface AudienceEntryCopy {
+  readonly id: 'recruiters' | 'companies';
+  readonly headline: string;
+  readonly body: string;
+  readonly bullets: readonly string[];
+  readonly ctas: readonly CtaCopy[];
+}
+
+export interface HomePageCopy extends PageCopy {
+  readonly profile: readonly string[];
+  readonly metrics: readonly MetricCopy[];
+  readonly audiences: readonly AudienceEntryCopy[];
+  readonly featuredCaseIds: readonly CaseStudyId[];
+  readonly systemsMap: {
+    readonly heading: string;
+    readonly intro: string;
+  };
+}
+
+export type ContactFieldId =
+  'name' | 'email' | 'company' | 'projectType' | 'situation' | 'timeframe';
+
+export interface ContactFieldOption {
+  readonly value: string;
+  readonly label: string;
+}
+
+export interface ContactFieldCopy {
+  readonly id: ContactFieldId;
+  readonly control: 'text' | 'email' | 'select' | 'textarea';
+  readonly label: string;
+  readonly hint?: string;
+  readonly required: boolean;
+  readonly options?: readonly ContactFieldOption[];
+}
+
+export interface ContactPageCopy extends PageCopy {
+  readonly fields: readonly ContactFieldCopy[];
+  readonly mailSubject: string;
+  readonly mailIntro: string;
+  readonly mailSignature: string;
+  readonly submitLabel: string;
+  readonly incompleteHint: string;
+  readonly requiredMarkerLabel: string;
+  readonly directEmailLabel: string;
+  readonly calendarLabel: string;
+  readonly noBackendNote: string;
+}
+
+export interface LegalSectionCopy {
+  readonly id: string;
+  readonly title: string;
+  readonly body: readonly string[];
+}
+
+export interface LegalPageCopy extends PageCopy {
+  readonly reviewNotice: string;
+  readonly reviewTodos: readonly string[];
+  readonly legalSections: readonly LegalSectionCopy[];
+}
+
+export interface StackGroupCopy {
+  readonly id: string;
+  readonly title: string;
+  readonly body?: string;
+}
+
+export interface StackPageCopy extends PageCopy {
+  readonly groups: readonly StackGroupCopy[];
+  readonly evidenceNote: string;
+}
+
+export interface CaseStudyLabels {
+  readonly situation: string;
+  readonly approach: string;
+  readonly outcome: string;
+  readonly metrics: string;
+  readonly stack: string;
+  readonly tags: string;
+}
+
+export interface ProjectsPageCopy extends PageCopy {
+  readonly caseLabels: CaseStudyLabels;
+}
+
+export type ServicePageId =
+  'servicesSoftware' | 'servicesHardwareNetwork' | 'servicesClusters' | 'servicesAi';
+
+export interface SiteSeoCopy {
+  readonly jobTitle: string;
+  readonly professionalServiceName: string;
+  readonly professionalServiceDescription: string;
+}
 
 export interface SiteContent {
-  readonly pages: LocalizedPages;
+  readonly pages: Record<RouteId, PageCopy>;
+  readonly home: HomePageCopy;
+  readonly services: Record<ServicePageId, ServicePageCopy>;
+  readonly cases: Record<CaseStudyId, CaseStudyCopy>;
+  readonly contact: ContactPageCopy;
+  readonly projects: ProjectsPageCopy;
+  readonly stack: StackPageCopy;
+  readonly legal: Record<'imprint' | 'privacy', LegalPageCopy>;
+  readonly seo: SiteSeoCopy;
 }

src/app/core/content/content.service.ts

@@ -1,7 +1,19 @@
 import { computed, inject, Injectable, type Signal } from '@angular/core';
 import { LocaleService } from '../i18n/locale.service';
 import { type RouteId } from '../routing/route-ids';
-import { type PageCopy } from './content.contracts';
+import {
+  CASE_STUDY_IDS,
+  type CaseStudyCopy,
+  type CaseStudyId,
+  type ContactPageCopy,
+  type HomePageCopy,
+  type LegalPageCopy,
+  type PageCopy,
+  type ProjectsPageCopy,
+  type ServicePageCopy,
+  type ServicePageId,
+  type StackPageCopy,
+} from './content.contracts';
 import { SITE_CONTENT } from './content.token';
 
 @Injectable({ providedIn: 'root' })
@@ -9,7 +21,42 @@ export class ContentService {
   private readonly localeService = inject(LocaleService);
   private readonly content = inject(SITE_CONTENT);
 
-  page(routeId: RouteId): Signal<PageCopy | undefined> {
+  page(routeId: RouteId): Signal<PageCopy> {
     return computed(() => this.content[this.localeService.locale()].pages[routeId]);
   }
+
+  home(): Signal<HomePageCopy> {
+    return computed(() => this.content[this.localeService.locale()].home);
+  }
+
+  service(id: ServicePageId): Signal<ServicePageCopy> {
+    return computed(() => this.content[this.localeService.locale()].services[id]);
+  }
+
+  caseStudy(id: CaseStudyId): Signal<CaseStudyCopy> {
+    return computed(() => this.content[this.localeService.locale()].cases[id]);
+  }
+
+  cases(): Signal<readonly CaseStudyCopy[]> {
+    return computed(() => {
+      const cases = this.content[this.localeService.locale()].cases;
+      return CASE_STUDY_IDS.map((id) => cases[id]);
+    });
+  }
+
+  contact(): Signal<ContactPageCopy> {
+    return computed(() => this.content[this.localeService.locale()].contact);
+  }
+
+  projects(): Signal<ProjectsPageCopy> {
+    return computed(() => this.content[this.localeService.locale()].projects);
+  }
+
+  stack(): Signal<StackPageCopy> {
+    return computed(() => this.content[this.localeService.locale()].stack);
+  }
+
+  legal(id: 'imprint' | 'privacy'): Signal<LegalPageCopy> {
+    return computed(() => this.content[this.localeService.locale()].legal[id]);
+  }
 }

src/app/core/content/de/cases.ts

@@ -0,0 +1,181 @@
+import { type CaseStudyCopy } from '../content.contracts';
+
+export const CASES_DE: Record<'innofocus' | 'roesterei' | 'myspa' | 'hdi', CaseStudyCopy> = {
+  innofocus: {
+    id: 'innofocus',
+    client: 'Innofocus / reifen.com',
+    role: 'Senior Backend- und Datenbankingenieur',
+    period: 'seit 09/2025, laufend',
+    domain: 'eCommerce / ERP',
+    headline: 'Normalisierte ERP-Datenmigration in Microsoft SQL Server',
+    summary:
+      'Ersatz des bestehenden ERP durch ein neues, normalisiertes System. Die Migration aller Altdaten läuft direkt in Microsoft SQL Server.',
+    responsibility:
+      'Alleinverantwortung: das Migrationsteam besteht aus einer Person. Als einziger Freiberufler steht er im direkten Kontakt mit dem Endkunden.',
+    situation:
+      'Das bestehende ERP wird durch ein neues, normalisiertes System ersetzt. Alle Altdaten werden direkt in Microsoft SQL Server migriert. Die Altstruktur ist nicht normalisiert, die Zielstruktur ist es; die Migration besteht deshalb vor allem aus Datenbereinigung, Normalisierung und Dokumentation für eine prüfende Stelle. Die Migration war zuvor bei einem anderen Dienstleister gelaufen und wurde übernommen.',
+    approach: [
+      'Umfangreiche T-SQL-Stored-Procedures für Transformation, Normalisierung und Bereinigung.',
+      'Selektive Arbeit an der Anwendung selbst mit C#, .NET und Angular.',
+      'Anmeldung über Keycloak mit OAuth 2 / OIDC.',
+      'Betrieb auf Kubernetes, GitOps-Deployments über Argo CD, Git und Pipelines in Azure DevOps.',
+    ],
+    outcome: [
+      'Die Laufzeit der Migration liegt bei etwa 90 Minuten statt zuvor rund acht Stunden, bei größerem Funktionsumfang und höherer Datenqualität.',
+      'Die Zielstruktur ist normalisiert und für die prüfende Stelle dokumentiert.',
+    ],
+    metrics: [
+      {
+        id: 'innofocus-migration-runtime',
+        value: '8 h → ca. 90 min',
+        label: 'Laufzeit der Datenmigration bei Innofocus / reifen.com',
+        note: 'bei größerem Funktionsumfang und höherer Datenqualität',
+        caseId: 'innofocus',
+      },
+    ],
+    stack: [
+      'Microsoft SQL Server',
+      'T-SQL',
+      'C#',
+      '.NET',
+      'Angular',
+      'Keycloak',
+      'OAuth 2 / OIDC',
+      'Kubernetes',
+      'Argo CD',
+      'Azure DevOps',
+    ],
+    tags: ['eCommerce', 'ERP', 'Datenmigration', 'SQL'],
+    linkLabel: 'Fall lesen: Innofocus / reifen.com',
+  },
+  roesterei: {
+    id: 'roesterei',
+    client: 'Rösterei Tangermünde',
+    role: 'Gesamtverantwortung für die Technik',
+    period: 'seit 10/2023, laufend',
+    domain: 'eCommerce und interne IT',
+    headline: 'Laden-IT, Shop und interne Werkzeuge aus einer Hand',
+    summary:
+      'Ursprünglich sollte ein neuer Shop entstehen. Der Auftrag ist weit darüber hinausgewachsen und umfasst die gesamte Technik des Unternehmens.',
+    responsibility:
+      'Vollständige Verantwortung für die Technik: Netz- und Serverstrukturen, Mitarbeitergeräte, Management-SaaS wie Microsoft 365, der neue Onlineshop und neues Marketing.',
+    situation:
+      'Die Rösterei brauchte zunächst einen neuen Shop. Daraus wurde die Verantwortung für Netz, Server, Geräte, Microsoft 365, den Shop und Marketing. Anforderungen kommen direkt von nicht-technischen Stakeholdern; die Markenführung entsteht in Zusammenarbeit mit einem Designer.',
+    approach: [
+      'Zeitgemäße und kostengünstige Infrastruktur statt unnötiger Komplexität.',
+      'Shop-Version 1: Shopify mit eigenem Theme und eigenen Komponenten in Liquid.',
+      'Shop-Version 2: Liquid und Hydrogen, mit eigenen angebundenen Diensten.',
+      'Interne Werkzeuge für geringere Kosten und mehr Autonomie: ein Generator für Vektorgrafiken in Werbemitteln, ein KI-Werkzeug zur Kategorisierung von Kundenbewertungen und ein KI-Werkzeug für die schnelle Verwaltung des neuen Shops, vergleichbar mit Shopify Sidekick und in die interne Werkzeugkette eingebunden.',
+    ],
+    outcome: [
+      'Die Technik des Unternehmens liegt in einer Hand, vom Netz bis zum Shop.',
+      'Zwei KI-Werkzeuge sind im internen Betrieb der Rösterei im Einsatz: die Kategorisierung von Bewertungen und der Shop-Assistent.',
+    ],
+    metrics: [],
+    stack: [
+      'Shopify',
+      'Liquid',
+      'Hydrogen',
+      'Angular',
+      'TypeScript',
+      'SCSS',
+      'Java Spring WebFlux',
+      'Java OpenAI library',
+      'MariaDB',
+      'Docker',
+      'Kubernetes',
+      'Proxmox',
+      'GitLab CE',
+      'Microsoft 365',
+    ],
+    tags: ['eCommerce', 'interne IT', 'Shopify', 'KI-Werkzeuge'],
+    linkLabel: 'Fall lesen: Rösterei Tangermünde',
+    transparencyNote:
+      'Antonio Ledebuhr hält eine wirtschaftliche Beteiligung an der Rösterei Tangermünde.',
+  },
+  myspa: {
+    id: 'myspa',
+    client: 'Aracom IT Services / MySpa',
+    role: 'Lead Backend / DevOps',
+    period: '03/2024 – 09/2024',
+    domain: 'IoT',
+    headline: 'Backend als Schnittstelle zwischen Haus, Zahlung und Raumtechnik',
+    summary:
+      'Ersatz der Altsoftware durch neue Individualsoftware. Das Backend verbindet Website, internes Admin-Werkzeug, Zahlungsterminal, Schließfächer, smarte Geräte und Touchpanels.',
+    responsibility:
+      'Leitung des Backend-Teams (4 Personen) und des DevOps-Teams (2 Personen) bis zum Start der Software. Direkter Kundenkontakt für Anforderungen.',
+    situation:
+      'Die vorhandene Software sollte durch eine neue Eigenentwicklung ersetzt werden. Das Backend ist die Schnittstelle zwischen Website, internem Admin-Werkzeug, Zahlungsterminal, Schließfächern, smarten Geräten (Licht, Fernseher) und Touchpanels für Bestellungen und Raumtechnik.',
+    approach: [
+      'Backend mit C# und .NET 8, REST-API, Entity Framework 8 im Data-First-Ansatz.',
+      'Verwaltung des MySQL-Servers vor Ort.',
+      'Testgetriebene Entwicklung mit Unit- und Integrationstests (xUnit).',
+      'OAuth 2 über ein Identity-Provider-Framework, dazu MQTT und Hangfire.',
+      'Migration von Entwicklungs-, QS- und Produktivsystemen von Diensten vor Ort in ein Docker-Cluster.',
+      'CI/CD-Pipelines mit GitLab EE, Arbeit im Scrum.',
+    ],
+    outcome: [
+      'Das Backend verbindet die genannten Kanäle bis zum Softwarestart.',
+      'Entwicklungs-, QS- und Produktivsysteme laufen im Docker-Cluster.',
+    ],
+    metrics: [],
+    stack: [
+      'C#',
+      '.NET 8',
+      'ASP.NET Core',
+      'Entity Framework 8',
+      'xUnit',
+      'MySQL',
+      'OAuth 2',
+      'MQTT',
+      'Hangfire',
+      'Docker',
+      'GitLab EE',
+    ],
+    tags: ['IoT', 'Backend', 'DevOps', 'Docker'],
+    linkLabel: 'Fall lesen: Aracom IT Services / MySpa',
+  },
+  hdi: {
+    id: 'hdi',
+    client: 'HDI Specialty',
+    role: 'Senior Fullstack / DevOps',
+    period: '05/2023 – 01/2024',
+    domain: 'Versicherung',
+    headline: 'Exposure Management für Simulationen und BaFin-Auswertungen',
+    summary:
+      'Software, die Simulationsfolgen automatisiert, um bestimmte Risiken zu bestimmen, Simulationen stochastisch auswertet, Policen zentral sammelt und Auswertungen aller Policen für die BaFin erzeugt.',
+    responsibility:
+      'Senior-Fullstack- und DevOps-Arbeit an der Exposure-Management-Software, einschließlich der Migration der Umgebungen auf Azure AKS.',
+    situation:
+      'HDI Specialty braucht Software für Exposure Management: Simulationsfolgen sollen bestimmte Risiken bestimmen, stochastisch ausgewertet werden, Policen zentral sammeln und Auswertungen aller Policen für die BaFin liefern.',
+    approach: [
+      'Angular-Einzelanwendung mit TypeScript, HTML, SCSS/CSS, Ngrx Store und Ngx Pipes.',
+      'Backend mit C# und .NET, REST-API und Entity Framework.',
+      'Testgetriebene Entwicklung mit Unit- und Integrationstests (xUnit).',
+      'Verwaltung von Azure SQL Server.',
+      'Anmeldung und Berechtigungen über Okta mit OAuth 2.',
+      'CI/CD-Pipelines und Projektsteuerung mit Azure DevOps, Arbeit im Scrum.',
+    ],
+    outcome: [
+      'Entwicklungs-, QS- und Produktivsysteme wurden von Azure App Services auf ein Kubernetes-Cluster auf Azure AKS migriert.',
+    ],
+    metrics: [],
+    stack: [
+      'Angular',
+      'TypeScript',
+      'Ngrx',
+      'Ngx Pipes',
+      'C#',
+      '.NET',
+      'Entity Framework',
+      'xUnit',
+      'Azure SQL Server',
+      'Okta',
+      'OAuth 2',
+      'Azure AKS',
+      'Azure DevOps',
+    ],
+    tags: ['Versicherung', 'Fullstack', 'Kubernetes', 'Azure'],
+    linkLabel: 'Fall lesen: HDI Specialty',
+  },
+};

src/app/core/content/de/home.ts

@@ -0,0 +1,103 @@
+import { SITE_CONFIG } from '../site-config';
+import { type HomePageCopy } from '../content.contracts';
+
+export const HOME_DE: HomePageCopy = {
+  routeId: 'home',
+  title: 'Startseite | Antonio Ledebuhr',
+  description:
+    'Fullstack- und DevOps-Ingenieur in Tangermünde: rund sieben Jahre Webanwendungen, direkter Kundenkontakt und Teamverantwortung, freelance seit 04/2023.',
+  hero: {
+    headline: 'Fullstack- und DevOps-Ingenieur in Tangermünde',
+    proof:
+      'Rund sieben Jahre berufliche Erfahrung mit dem Bau und Betrieb von Webanwendungen. Freelance seit 04/2023.',
+    playfulLine: 'IT mit Drehmoment',
+  },
+  profile: [
+    'Rund sieben Jahre berufliche Erfahrung mit dem Bau und Betrieb von Webanwendungen.',
+    'Fullstack-Entwicklung, DevOps, direkter Kundenkontakt vom ersten Anforderungsworkshop bis in den Produktivbetrieb sowie Personal- und Teamverantwortung.',
+    'Freelance seit 04/2023, mit Sitz in Tangermünde.',
+    'Heimspiel Java mit Spring; dazu C# und .NET, Angular, SQL, Docker und Kubernetes, Azure einschließlich AKS sowie GitLab CI/CD und Azure DevOps.',
+  ],
+  metrics: [
+    {
+      id: 'experience-years',
+      value: 'ca. 7 Jahre',
+      label: 'berufliche Erfahrung mit Webanwendungen',
+    },
+    {
+      id: 'innofocus-migration-runtime',
+      value: '8 h → ca. 90 min',
+      label: 'Laufzeit der Datenmigration bei Innofocus / reifen.com',
+      note: 'bei größerem Funktionsumfang und höherer Datenqualität',
+      caseId: 'innofocus',
+    },
+    {
+      id: 'myspa-team-lead',
+      value: '4 + 2',
+      label: 'Leitung des Backend-Teams und des DevOps-Teams bis zum Start von MySpa',
+      caseId: 'myspa',
+    },
+  ],
+  audiences: [
+    {
+      id: 'recruiters',
+      headline: 'Für Recruiterinnen und Recruiter',
+      body: 'Ein kurzer Überblick über Erfahrung, ausgewählte Fälle, den technischen Stack und den Lebenslauf.',
+      bullets: [
+        'Rund sieben Jahre Fullstack- und DevOps-Arbeit mit direktem Kundenkontakt und Teamverantwortung.',
+        'Vier öffentlich dargestellte Fälle aus eCommerce, interner IT, IoT und Versicherung.',
+        'Heimspiel Java und Spring, dazu C#/.NET, Angular, SQL sowie Docker und Kubernetes.',
+        'Lebenslauf als PDF zum direkten Download.',
+      ],
+      ctas: [
+        { label: 'Ausgewählte Projekte', routeId: 'projects' },
+        { label: 'Technik-Stack ansehen', routeId: 'stack' },
+        {
+          label: 'Lebenslauf als PDF',
+          href: SITE_CONFIG.cvAssetPath,
+        },
+      ],
+    },
+    {
+      id: 'companies',
+      headline: 'Für Unternehmen',
+      body: 'Vier Leistungsbereiche, vom ersten Workshop bis zum Betrieb — und ein kurzes Briefing für die Anfrage.',
+      bullets: [
+        'Software: Fullstack-Produkte mit Java, .NET, Angular und Datenarbeit in SQL.',
+        'Hardware und Netzwerk: Server, Geräte, Microsoft 365 und wartbare Infrastruktur.',
+        'Cluster: Docker und Kubernetes on-premise und auf Azure AKS, inklusive Pipelines.',
+        'KI-Integration: zwei umgesetzte Werkzeuge bei der Rösterei Tangermünde, weitere Bausteine als Angebot.',
+      ],
+      ctas: [
+        { label: 'Leistungen ansehen', routeId: 'services' },
+        { label: 'Projekt anfragen', routeId: 'contact' },
+      ],
+    },
+  ],
+  featuredCaseIds: ['innofocus', 'roesterei', 'myspa', 'hdi'],
+  systemsMap: {
+    heading: 'Wie die Schichten zusammenhängen',
+    intro: 'Hardware, Cluster, Software und KI-Anbindung — und wo die öffentlichen Fälle ansetzen.',
+  },
+  sections: [
+    {
+      id: 'profile',
+      headline: 'In dreißig Sekunden',
+      body: [
+        'Antonio Ledebuhr arbeitet als Fullstack- und DevOps-Ingenieur aus Tangermünde. Diese Seite zeigt eine kuratierte Auswahl von Stationen; der vollständige Lebenslauf steht als PDF bereit.',
+      ],
+    },
+    {
+      id: 'featured-cases',
+      headline: 'Ausgewählte Fälle',
+      body: [
+        'Die vier öffentlichen Fälle decken eCommerce und ERP, Laden-IT, IoT und Versicherung ab. Jeder Fall ist auf der Projektseite vollständig beschrieben.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Leistungen', routeId: 'services' },
+    { label: 'Projekte', routeId: 'projects' },
+    { label: 'Kontakt', routeId: 'contact' },
+  ],
+};

src/app/core/content/de/pages.ts

@@ -0,0 +1,370 @@
+import { SITE_CONFIG } from '../site-config';
+import {
+  type ContactPageCopy,
+  type LegalPageCopy,
+  type PageCopy,
+  type ProjectsPageCopy,
+  type StackPageCopy,
+} from '../content.contracts';
+
+export const PROJECTS_DE: ProjectsPageCopy = {
+  routeId: 'projects',
+  title: 'Projekte | Antonio Ledebuhr',
+  description:
+    'Vier öffentliche Fälle: Innofocus / reifen.com, Rösterei Tangermünde, MySpa und HDI Specialty. Eine bewusst schmale Auswahl, der vollständige Lebenslauf liegt als Download bereit.',
+  hero: {
+    headline: 'Vier öffentliche Fälle, bewusst ausgewählt',
+    proof:
+      'Die Seite zeigt eine kuratierte Auswahl. Der vollständige Lebenslauf steht als PDF zum Download bereit.',
+  },
+  sections: [
+    {
+      id: 'selection',
+      headline: 'Warum nur diese vier',
+      body: [
+        'Öffentlich stehen vier Fälle: Innofocus / reifen.com, die Rösterei Tangermünde, MySpa und HDI Specialty. Weitere Stationen gehören in den Lebenslauf, nicht auf diese Seiten.',
+      ],
+    },
+    {
+      id: 'reading',
+      headline: 'Was jeder Fall festhält',
+      body: [
+        'Jeder Fall dokumentiert Auftrag, Rolle, Zeitraum, Lage, Vorgehen und Ergebnis. Zahlen stehen nur dort, wo sie belegt sind.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Lebenslauf als PDF', href: SITE_CONFIG.cvAssetPath },
+    { label: 'Kontakt', routeId: 'contact' },
+  ],
+  caseLabels: {
+    situation: 'Lage',
+    approach: 'Vorgehen',
+    outcome: 'Ergebnis',
+    metrics: 'Kennzahlen',
+    stack: 'Technik',
+    tags: 'Schlagworte',
+  },
+};
+
+export const STACK_DE: StackPageCopy = {
+  routeId: 'stack',
+  title: 'Technik-Stack | Antonio Ledebuhr',
+  description:
+    'Technik-Überblick in sieben Gruppen: Programmierung, Datenbanken, DevOps, Betriebssysteme, Infrastructure as Code, Hypervisor und Werkzeuge.',
+  hero: {
+    headline: 'Ein Technik-Überblick zur Einordnung',
+    proof:
+      'Die Rasterkarte ist eine Vertrautheitsliste. Sie zeigt Technologien aus der Arbeit, ohne jeden Eintrag als öffentlichen Fall zu belegen.',
+  },
+  sections: [
+    {
+      id: 'reading',
+      headline: 'Überblick, keine Rangliste',
+      body: [
+        'Die Übersicht ordnet Technologien nach Gruppen. Sie ist keine Rangliste und kein Nachweis, dass jeder Eintrag in einem öffentlichen Fall vorkommt.',
+      ],
+    },
+    {
+      id: 'groups',
+      headline: 'Welche Gruppen die Arbeit berührt',
+      body: [
+        'Produktarbeit in Java und Spring sowie in C# und .NET, mit Angular auf der Oberfläche. Datenarbeit in SQL Server und T-SQL. Container und Cluster mit Docker, Kubernetes und Azure AKS. Pipelines in GitLab CI/CD und Azure DevOps, GitOps mit Argo CD. Server und Virtualisierung vor Ort.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Projekte', routeId: 'projects' },
+    { label: 'Über mich', routeId: 'about' },
+  ],
+  groups: [
+    { id: 'programming', title: 'Programmierung' },
+    { id: 'db', title: 'Datenbanken' },
+    { id: 'devops', title: 'DevOps' },
+    { id: 'os', title: 'Betriebssysteme' },
+    { id: 'iac', title: 'Infrastructure as Code' },
+    { id: 'hyperviser', title: 'Hypervisor' },
+    { id: 'tools', title: 'Werkzeuge' },
+  ],
+  evidenceNote:
+    'In den öffentlichen Fällen sind unter anderem Angular, TypeScript, C#, .NET, Java, Spring, SQL Server, MySQL, MariaDB, Docker, Kubernetes, Azure, Azure DevOps, GitLab, Proxmox und Microsoft 365 belegt. Die übrigen Einträge der Übersicht stehen für Breite und Vertrautheit, ohne öffentlichen Referenzfall.',
+};
+
+export const ABOUT_DE: PageCopy = {
+  routeId: 'about',
+  title: 'Über mich | Antonio Ledebuhr',
+  description:
+    'Antonio Ledebuhr, Fullstack- und DevOps-Ingenieur in Tangermünde. Freelance seit 04/2023, Deutsch als Muttersprache, Englisch verhandlungssicher.',
+  hero: {
+    headline: 'Antonio Ledebuhr, Fullstack- und DevOps-Ingenieur',
+    proof:
+      'Sitz in Tangermünde. Freelance seit 04/2023. Deutsch als Muttersprache, Englisch verhandlungssicher.',
+  },
+  sections: [
+    {
+      id: 'profile',
+      headline: 'Berufliches Profil',
+      body: [
+        'Rund sieben Jahre berufliche Erfahrung mit dem Bau und Betrieb von Webanwendungen. Die Arbeit umfasst Fullstack-Entwicklung, DevOps, direkten Kundenkontakt vom ersten Anforderungsworkshop bis in den Produktivbetrieb sowie Personal- und Teamverantwortung.',
+        'Heimspiel ist Java (8/11/17/21, Maven, Spring Boot, Spring Data JPA, WebFlux, JUnit). Dazu kommen C# / .NET Core / .NET 8 (ASP.NET Core, Entity Framework, xUnit) und Angular (TypeScript, RxJS-zeitige SPA-Arbeit, Ngrx, SCSS).',
+      ],
+    },
+    {
+      id: 'working',
+      headline: 'Arbeitsweise',
+      body: [
+        'Sauberer Code, tragfähige Architektur, Domain-driven Design und testgetriebene Entwicklung. Neu in eine Fachlichkeit einsteigen gehört zur Arbeit, nicht an ihren Rand.',
+      ],
+    },
+    {
+      id: 'contact-and-language',
+      headline: 'Kundenkontakt, Team und Sprachen',
+      body: [
+        'Direkter Kundenkontakt und Teamverantwortung sind Teil der bisherigen Arbeit, nicht eine spätere Ausbaustufe.',
+        'Deutsch ist Muttersprache. Englisch ist verhandlungssicher.',
+      ],
+    },
+    {
+      id: 'accent',
+      headline: 'Rösterei und Drehmoment',
+      body: [
+        'Die Rösterei-Arbeit bleibt der persönliche Akzent: Rösten und Drehmoment statt Leerlauf. Antonio Ledebuhr hält eine wirtschaftliche Beteiligung an der Rösterei Tangermünde.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Projekte', routeId: 'projects' },
+    { label: 'Kontakt', routeId: 'contact' },
+  ],
+};
+
+export const CONTACT_DE: ContactPageCopy = {
+  routeId: 'contact',
+  title: 'Kontakt | Antonio Ledebuhr',
+  description:
+    'Kurzes Projektbriefing im Browser. Es entsteht nur eine lokale E-Mail an info@antoniolede.de, ohne Versand an diesen Server.',
+  hero: {
+    headline: 'Kurzes Briefing, danach das lokale E-Mail-Programm',
+    proof:
+      'Die Felder bleiben im Browser. Der Knopf öffnet nur eine vorausgefüllte Nachricht an info@antoniolede.de.',
+  },
+  sections: [
+    {
+      id: 'how',
+      headline: 'Was mit den Angaben passiert',
+      body: [
+        'Nichts wird an diesen Server gesendet. Aus den ausgefüllten Feldern entsteht eine mailto-Nachricht, die das lokale E-Mail-Programm öffnet.',
+      ],
+    },
+    {
+      id: 'direct',
+      headline: 'Direkt schreiben',
+      body: [
+        'Wer das Briefing nicht nutzen möchte, schreibt direkt an info@antoniolede.de. Ein Kalenderlink ist derzeit nicht hinterlegt.',
+      ],
+    },
+  ],
+  ctas: [],
+  fields: [
+    { id: 'name', control: 'text', label: 'Name', required: true },
+    { id: 'email', control: 'email', label: 'E-Mail', required: true },
+    { id: 'company', control: 'text', label: 'Unternehmen', hint: 'freiwillig', required: false },
+    {
+      id: 'projectType',
+      control: 'select',
+      label: 'Art des Vorhabens',
+      required: true,
+      options: [
+        { value: 'software', label: 'Software' },
+        { value: 'hardware-network', label: 'Hardware und Netzwerk' },
+        { value: 'clusters', label: 'Cluster' },
+        { value: 'ai', label: 'KI-Integration' },
+        { value: 'other', label: 'Sonstiges' },
+      ],
+    },
+    {
+      id: 'situation',
+      control: 'textarea',
+      label: 'Lage',
+      hint: 'Was steht an, und woran soll die Zusammenarbeit ansetzen?',
+      required: true,
+    },
+    { id: 'timeframe', control: 'text', label: 'Zeitrahmen', hint: 'freiwillig', required: false },
+  ],
+  mailSubject: 'Projektanfrage über antoniolede.de',
+  mailIntro: 'Kurzes Briefing von der Website:',
+  mailSignature: 'Gesendet über das Kontaktbriefing auf antoniolede.de.',
+  submitLabel: 'E-Mail-Programm öffnen',
+  incompleteHint: 'Bitte noch ausfüllen:',
+  requiredMarkerLabel: 'Pflichtfeld',
+  directEmailLabel: 'Direkt an info@antoniolede.de schreiben',
+  calendarLabel: 'Termin finden',
+  noBackendNote:
+    'Es gibt kein Formular-Backend. Es wird nichts an diesen Server übertragen. Der Knopf öffnet nur das lokale E-Mail-Programm.',
+};
+
+export const IMPRINT_DE: LegalPageCopy = {
+  routeId: 'imprint',
+  title: 'Impressum | Antonio Ledebuhr',
+  description:
+    'Anbieterkennzeichnung von Antonio Ledebuhr, Kirchstr. 19, 39590 Tangermünde. Der Text ist ungeprüft und vor der Veröffentlichung vom Seitenbetreiber zu prüfen.',
+  hero: {
+    headline: 'Impressum',
+    proof:
+      'Name, Anschrift und E-Mail sind aus dem Lebenslauf übernommen. Weitere Pflichtangaben fehlen bewusst.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'Was hier steht',
+      body: [
+        'Dieser Text nennt Name, Anschrift, E-Mail und die Verantwortung für den Inhalt. Er ist kein fertiges Impressum.',
+      ],
+    },
+    {
+      id: 'limit',
+      headline: 'Was fehlt',
+      body: [
+        'Umsatzsteuer-Identifikationsnummer, Registerdaten, Aufsicht, Berufshaftpflicht und Telefon stehen nicht auf dieser Seite, weil sie hier nicht belegt sind.',
+      ],
+    },
+  ],
+  ctas: [{ label: 'Datenschutz', routeId: 'privacy' }],
+  reviewNotice:
+    'Achtung: Dieser Rechtstext ist ungeprüft. Vor jeder Veröffentlichung muss der Seitenbetreiber ihn prüfen und die offenen Punkte unten ergänzen.',
+  reviewTodos: [
+    'Umsatzsteuer-Identifikationsnummer, sofern eine besteht',
+    'Registergericht und Registernummer, sofern ein Eintrag besteht',
+    'Aufsichtsbehörde, sofern eine zuständig ist',
+    'Berufshaftpflichtversicherung, sofern eine besteht',
+    'Telefonnummer, sofern sie veröffentlicht werden soll',
+    'Hosting-Anbieter und dessen Datenverarbeitung',
+  ],
+  legalSections: [
+    {
+      id: 'provider',
+      title: 'Anbieter',
+      body: [
+        'Antonio Ledebuhr',
+        'Kirchstr. 19',
+        '39590 Tangermünde',
+        'Germany',
+        'E-Mail: info@antoniolede.de',
+      ],
+    },
+    {
+      id: 'responsibility',
+      title: 'Verantwortlich für den Inhalt',
+      body: [
+        'Verantwortlich für den Inhalt dieser Seiten ist Antonio Ledebuhr, Kirchstr. 19, 39590 Tangermünde, Germany.',
+      ],
+    },
+    {
+      id: 'completeness',
+      title: 'Keine Vollständigkeit',
+      body: [
+        'Diese Seite behauptet keine rechtliche Vollständigkeit. Offene Angaben stehen in der Prüfungsliste oben und müssen vor der Veröffentlichung vom Seitenbetreiber ergänzt werden.',
+      ],
+    },
+  ],
+};
+
+export const PRIVACY_DE: LegalPageCopy = {
+  routeId: 'privacy',
+  title: 'Datenschutz | Antonio Ledebuhr',
+  description:
+    'Hinweise zur Verarbeitung auf dieser statischen, serverseitig gerenderten Website ohne eigenes Backend. Der Text ist ungeprüft und vor der Veröffentlichung zu ergänzen.',
+  hero: {
+    headline: 'Datenschutz',
+    proof:
+      'Die Website hat kein eigenes Backend. Das Kontaktbriefing bleibt im Browser und erzeugt nur eine mailto-Nachricht.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'Was dieser Text leistet',
+      body: [
+        'Er beschreibt den öffentlichen Stand der Seite, so weit er hier belegt ist. Er ist keine abgeschlossene Datenschutzerklärung.',
+      ],
+    },
+    {
+      id: 'limit',
+      headline: 'Was der Seitenbetreiber noch eintragen muss',
+      body: [
+        'Hosting-Anbieter, dessen Verarbeitung und weitere gesetzlich geforderte Punkte stehen in der Prüfungsliste und fehlen hier bewusst.',
+      ],
+    },
+  ],
+  ctas: [{ label: 'Impressum', routeId: 'imprint' }],
+  reviewNotice:
+    'Achtung: Dieser Rechtstext ist ungeprüft. Vor jeder Veröffentlichung muss der Seitenbetreiber ihn prüfen und die offenen Punkte unten ergänzen.',
+  reviewTodos: [
+    'Hosting-Anbieter und dessen Auftragsverarbeitung',
+    'Serverstandort und eingesetzte Unterauftragsverarbeiter',
+    'Kontaktmöglichkeit für datenschutzrechtliche Anfragen, sofern nicht die E-Mail genügt',
+    'Weitere gesetzlich geforderte Angaben, sobald sie feststehen',
+  ],
+  legalSections: [
+    {
+      id: 'controller',
+      title: 'Verantwortlicher',
+      body: [
+        'Antonio Ledebuhr, Kirchstr. 19, 39590 Tangermünde, Germany, E-Mail: info@antoniolede.de.',
+      ],
+    },
+    {
+      id: 'site-nature',
+      title: 'Art dieser Website',
+      body: [
+        'Diese Website ist eine statische, serverseitig gerenderte Website ohne eigenes Backend. Es gibt kein Nutzerkonto und keine serverseitige Formularannahme auf dieser Domain.',
+      ],
+    },
+    {
+      id: 'contact-briefing',
+      title: 'Kontaktbriefing',
+      body: [
+        'Das Kontaktbriefing läuft vollständig im Browser. Es setzt nur einen mailto-Link zusammen. Es werden keine Formulardaten an diese Website übertragen.',
+      ],
+    },
+    {
+      id: 'email',
+      title: 'E-Mail-Korrespondenz',
+      body: [
+        'Wenn eine Nachricht an info@antoniolede.de geht, wird die Korrespondenz zum Zweck der Anfrage verarbeitet. Eine andere Nutzung ist hier nicht beschrieben.',
+      ],
+    },
+    {
+      id: 'rights',
+      title: 'Rechte betroffener Personen',
+      body: [
+        'Betroffene Personen haben die allgemeinen Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Widerspruch und Beschwerde bei einer Aufsichtsbehörde. Die konkrete Ausübung hängt vom jeweiligen Vorgang ab.',
+      ],
+    },
+    {
+      id: 'hosting',
+      title: 'Hosting',
+      body: [
+        'Der Hosting-Anbieter und seine Verarbeitung sind vom Seitenbetreiber noch einzutragen. An dieser Stelle wird kein Anbieter genannt.',
+      ],
+    },
+  ],
+};
+
+export const NOT_FOUND_DE: PageCopy = {
+  routeId: 'notFound',
+  title: 'Seite nicht gefunden | Antonio Ledebuhr',
+  description:
+    'Diese Adresse führt auf keine öffentliche Seite. Weiter geht es über Start, Leistungen, Projekte oder Kontakt.',
+  hero: {
+    headline: 'Diese Seite gibt es hier nicht',
+    proof:
+      'Die Adresse gehört zu keiner öffentlichen Route. Die vier Links unten führen zurück in den Bestand.',
+  },
+  sections: [],
+  ctas: [
+    { label: 'Zur Startseite', routeId: 'home' },
+    { label: 'Leistungen', routeId: 'services' },
+    { label: 'Projekte', routeId: 'projects' },
+    { label: 'Kontakt', routeId: 'contact' },
+  ],
+};

src/app/core/content/de/services.ts

@@ -0,0 +1,436 @@
+import { type PageCopy, type ServicePageCopy } from '../content.contracts';
+
+export const SERVICES_OVERVIEW_DE: PageCopy = {
+  routeId: 'services',
+  title: 'Leistungen | Antonio Ledebuhr',
+  description:
+    'Vier Leistungsbereiche für Produktsoftware, Infrastruktur, Cluster und KI-Anbindung — vom ersten Workshop bis zum Betrieb, mit direktem Kundenkontakt.',
+  hero: {
+    headline: 'Vier Leistungsbereiche, ein Ansprechpartner',
+    proof:
+      'Software, Hardware und Netzwerk, Cluster sowie KI-Integration. Der Weg geht von der Lage über die Diagnose zur Umsetzung und in den Betrieb.',
+    playfulLine: 'Systeme, die nicht im Leerlauf laufen',
+  },
+  sections: [
+    {
+      id: 'areas',
+      headline: 'Die vier Bereiche',
+      body: [
+        'Software umfasst Fullstack-Produktarbeit mit Java und Spring Boot, C# und .NET, Angular, REST-APIs, Domain-driven Design, testgetriebener Entwicklung sowie SQL- und T-SQL-Datenarbeit.',
+        'Hardware und Netzwerk umfasst Netz- und Serverstrukturen, Mitarbeitergeräte, Management-SaaS wie Microsoft 365 sowie Server und Virtualisierung vor Ort.',
+        'Cluster umfasst Docker und Kubernetes on-premise und auf Azure AKS, die Migration von einzelnen Hosts und PaaS auf Cluster, GitLab CI/CD und Azure DevOps sowie GitOps mit Argo CD.',
+        'KI-Integration ist der größte Bereich: zwei umgesetzte Werkzeuge bei der Rösterei Tangermünde und weitere Bausteine, die je Auftrag geschnitten und geprüft werden.',
+      ],
+    },
+    {
+      id: 'who',
+      headline: 'Für wen das gedacht ist',
+      body: [
+        'Für Unternehmen, die einen Ansprechpartner vom ersten Anforderungsworkshop bis in den Produktivbetrieb suchen — ohne extra Schicht zwischen Fachseite und Technik.',
+        'Für Recruiterinnen und Recruiter, die die öffentliche Auswahl und den Stack prüfen wollen, bevor sie den Lebenslauf lesen.',
+      ],
+    },
+    {
+      id: 'engagement',
+      headline: 'So läuft eine Zusammenarbeit',
+      body: [
+        'Zuerst die Lage, dann die Diagnose, danach die Umsetzung und zum Schluss Betrieb oder Übergabe. Jede Detailseite folgt dieser Reihenfolge und nennt einen passenden öffentlichen Fall.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Software', routeId: 'servicesSoftware' },
+    { label: 'Hardware und Netzwerk', routeId: 'servicesHardwareNetwork' },
+    { label: 'Cluster', routeId: 'servicesClusters' },
+    { label: 'KI-Integration', routeId: 'servicesAi' },
+    { label: 'Projekt anfragen', routeId: 'contact' },
+  ],
+};
+
+export const SERVICES_SOFTWARE_DE: ServicePageCopy = {
+  routeId: 'servicesSoftware',
+  title: 'Softwareentwicklung | Antonio Ledebuhr',
+  description:
+    'Fullstack-Produktarbeit mit Java und Spring Boot, C# und .NET, Angular, REST-APIs, Domain-driven Design, Tests und SQL-Datenarbeit.',
+  hero: {
+    headline: 'Fullstack-Produktarbeit, von der Anforderung bis zur Auslieferung',
+    proof:
+      'Java und Spring Boot, C# und .NET, Angular, REST-APIs, Domain-driven Design, testgetriebene Entwicklung und SQL- bzw. T-SQL-Datenarbeit. Anmeldung mit Keycloak und OAuth 2.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'Was dieser Bereich abdeckt',
+      body: [
+        'Neue Produktsoftware und der Umbau bestehender Anwendungen. Die Arbeit reicht von der Domäne über die API bis zur Oberfläche, inklusive Datenmodell und Anmeldung.',
+      ],
+    },
+    {
+      id: 'fit',
+      headline: 'Wann das passt',
+      body: [
+        'Wenn Fachseite und Technik denselben Ansprechpartner brauchen und die Datenhaltung Teil der Produktarbeit ist, nicht ein Nachgedanke.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'Vom Anliegen zum Betrieb',
+      body: [
+        'Die Zusammenarbeit folgt der Reihenfolge Lage, Diagnose, Umsetzung, Betrieb oder Übergabe.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Fall Innofocus / reifen.com', routeId: 'projects', fragment: 'innofocus' },
+    { label: 'Projekt anfragen', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Lage',
+      body: [
+        'Ein Produkt braucht eine belastbare Kette aus Domäne, Daten, API und Oberfläche — oft mit gewachsener Datenhaltung und bestehenden Anmeldediensten.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnose',
+      body: [
+        'Zuerst die fachliche Grenze, dann das Datenmodell, dann die Schnittstellen. Domain-driven Design und Tests machen die Annahmen sichtbar, bevor Code in die Breite geht.',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Umsetzung',
+      body: [
+        'Umsetzung in Java und Spring Boot oder in C# und .NET, mit Angular auf der Oberfläche, REST-APIs, SQL- bzw. T-SQL-Datenarbeit und Anmeldung über Keycloak bzw. OAuth 2.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Betrieb und Übergabe',
+      body: [
+        'Der Stand wird so übergeben, dass Tests, Datenarbeit und Betrieb nachvollziehbar bleiben — nicht als undokumentierter Zwischenstand.',
+      ],
+    },
+    referenceCaseId: 'innofocus',
+    referenceHeadline: 'Passender öffentlicher Fall',
+    referenceNote:
+      'Die ERP-Datenmigration für Innofocus / reifen.com gehört in diesen Bereich, weil sie Produkt- und Datenarbeit mit T-SQL, .NET, Angular und Keycloak ist.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Anfrage',
+      body: [
+        'Für eine Softwareanfrage reicht ein kurzes Briefing zur Lage. Daraus wird eine lokale E-Mail, ohne Versand an diesen Server.',
+      ],
+    },
+  },
+  offerings: [],
+  deliveredOfferingsHeading: 'Umgesetzte Arbeit',
+  offerOfferingsHeading: 'Angebot, je Auftrag geprüft',
+  offeringCaseBackedLabel: 'Belegt durch den öffentlichen Fall {case}.',
+};
+
+export const SERVICES_HARDWARE_DE: ServicePageCopy = {
+  routeId: 'servicesHardwareNetwork',
+  title: 'Hardware und Netzwerk | Antonio Ledebuhr',
+  description:
+    'Netz- und Serverstrukturen, Mitarbeitergeräte, Microsoft 365 sowie Server und Virtualisierung vor Ort — kostengünstig und wartbar.',
+  hero: {
+    headline: 'Infrastruktur, die sich im Alltag tragen lässt',
+    proof:
+      'Netz- und Serverstrukturen, Mitarbeitergeräte, Management-SaaS wie Microsoft 365, Server und Virtualisierung vor Ort. Ausgelegt auf Kosten und Wartbarkeit.',
+    playfulLine: 'Von der ersten Bohne bis zum stabilen Betrieb',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'Was dieser Bereich abdeckt',
+      body: [
+        'Nicht nur ein einzelnes Gerät, sondern die Kette aus Netz, Server, Arbeitsplatz und den Diensten, mit denen das Unternehmen täglich arbeitet.',
+      ],
+    },
+    {
+      id: 'fit',
+      headline: 'Wann das passt',
+      body: [
+        'Wenn interne IT und der öffentliche Auftritt dieselbe Verantwortung brauchen und die Infrastruktur klein, klar und bezahlbar bleiben soll.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'Vom Anliegen zum Betrieb',
+      body: [
+        'Die Zusammenarbeit folgt der Reihenfolge Lage, Diagnose, Umsetzung, Betrieb oder Übergabe.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Fall Rösterei Tangermünde', routeId: 'projects', fragment: 'roesterei' },
+    { label: 'Projekt anfragen', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Lage',
+      body: [
+        'Gewachsene Netze, einzelne Server und verteilte Geräte machen den Alltag teurer, als er sein müsste — besonders wenn Shop und interne IT getrennt gedacht werden.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnose',
+      body: [
+        'Welche Wege müssen stabil sein, welche Dienste gehören zusammen, und wo reichen kostengünstige, wartbare Bausteine statt zusätzlicher Schichten?',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Umsetzung',
+      body: [
+        'Netz- und Serverstrukturen, Mitarbeitergeräte, Microsoft 365, Server und Virtualisierung vor Ort — so geschnitten, dass Betrieb und Änderung im Haus bleiben.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Betrieb und Übergabe',
+      body: [
+        'Die Infrastruktur bleibt im Alltag bedienbar. Übergabe heißt: nachvollziehbare Strukturen, keine undokumentierte Sonderlocke.',
+      ],
+    },
+    referenceCaseId: 'roesterei',
+    referenceHeadline: 'Passender öffentlicher Fall',
+    referenceNote:
+      'Die Gesamtverantwortung für die Technik der Rösterei Tangermünde gehört in diesen Bereich, weil sie vom Netz bis zum Shop reicht.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Anfrage',
+      body: [
+        'Für Infrastrukturfragen hilft eine kurze Lagebeschreibung. Das Briefing bleibt im Browser und öffnet nur das lokale E-Mail-Programm.',
+      ],
+    },
+  },
+  offerings: [],
+  deliveredOfferingsHeading: 'Umgesetzte Arbeit',
+  offerOfferingsHeading: 'Angebot, je Auftrag geprüft',
+  offeringCaseBackedLabel: 'Belegt durch den öffentlichen Fall {case}.',
+};
+
+export const SERVICES_CLUSTERS_DE: ServicePageCopy = {
+  routeId: 'servicesClusters',
+  title: 'Clusterbetrieb | Antonio Ledebuhr',
+  description:
+    'Docker und Kubernetes on-premise und auf Azure AKS, Migration von Hosts und PaaS, GitLab CI/CD, Azure DevOps und GitOps mit Argo CD.',
+  hero: {
+    headline: 'Von einzelnen Hosts und PaaS auf Cluster',
+    proof:
+      'Docker und Kubernetes on-premise und in der Cloud (Azure AKS), Pipelines mit GitLab CI/CD und Azure DevOps, GitOps mit Argo CD, plus Betrieb und Übergabe.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'Was dieser Bereich abdeckt',
+      body: [
+        'Die Migration von einzelnen Hosts oder PaaS-Diensten auf ein Cluster, inklusive der Pipelines, mit denen der Stand nachvollziehbar ausgerollt wird.',
+      ],
+    },
+    {
+      id: 'fit',
+      headline: 'Wann das passt',
+      body: [
+        'Wenn Entwicklungs-, QS- und Produktivumgebungen dieselbe Betriebsform brauchen und der Weg dorthin dokumentiert bleiben soll.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'Vom Anliegen zum Betrieb',
+      body: [
+        'Die Zusammenarbeit folgt der Reihenfolge Lage, Diagnose, Umsetzung, Betrieb oder Übergabe.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Fall HDI Specialty', routeId: 'projects', fragment: 'hdi' },
+    { label: 'Projekt anfragen', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Lage',
+      body: [
+        'Anwendungen laufen auf einzelnen Hosts oder auf PaaS. Umgebungen weichen voneinander ab, Ausrollen und Betrieb hängen an Handgriffen.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnose',
+      body: [
+        'Welche Last muss das Cluster tragen, welche Umgebung muss identisch bleiben, und welcher GitOps- oder Pipeline-Weg passt zur bestehenden Toolkette?',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Umsetzung',
+      body: [
+        'Docker und Kubernetes on-premise oder auf Azure AKS, GitLab CI/CD oder Azure DevOps, bei Bedarf GitOps mit Argo CD.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Betrieb und Übergabe',
+      body: [
+        'Betrieb und Übergabe gehören zusammen: der Clusterstand soll sich aus dem Repository erklären, nicht aus einem einzelnen Rechner.',
+      ],
+    },
+    referenceCaseId: 'hdi',
+    referenceHeadline: 'Passender öffentlicher Fall',
+    referenceNote:
+      'Die Migration der Umgebungen von HDI Specialty von Azure App Services auf Azure AKS gehört in diesen Bereich, weil sie den Weg auf ein Cluster zeigt.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Anfrage',
+      body: [
+        'Für Clusterfragen: welche Umgebungen umziehen sollen und worauf sie heute laufen. Das Briefing erzeugt nur eine lokale E-Mail.',
+      ],
+    },
+  },
+  offerings: [],
+  deliveredOfferingsHeading: 'Umgesetzte Arbeit',
+  offerOfferingsHeading: 'Angebot, je Auftrag geprüft',
+  offeringCaseBackedLabel: 'Belegt durch den öffentlichen Fall {case}.',
+};
+
+export const SERVICES_AI_DE: ServicePageCopy = {
+  routeId: 'servicesAi',
+  title: 'KI-Integration | Antonio Ledebuhr',
+  description:
+    'Zwei umgesetzte KI-Werkzeuge bei der Rösterei Tangermünde. Weitere Bausteine — von der Prozessanalyse bis zu lokalen Modellen — werden je Auftrag geprüft.',
+  hero: {
+    headline: 'KI-Anbindung, die am konkreten Auftrag hängt',
+    proof:
+      'Umgesetzt sind ein Werkzeug zur Kategorisierung von Kundenbewertungen und ein Assistent für die Shop-Verwaltung, beide bei der Rösterei Tangermünde. Alles andere wird je Auftrag geschnitten und geprüft.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'Was öffentlich als umgesetzt gilt',
+      body: [
+        'Nur die beiden Werkzeuge der Rösterei Tangermünde sind als gelieferte Arbeit dargestellt: die Kategorisierung von Kundenbewertungen und der Assistent für die Shop-Verwaltung.',
+      ],
+    },
+    {
+      id: 'offer-boundary',
+      headline: 'Was Angebot bleibt',
+      body: [
+        'Prozessanalyse, externe Modelle und APIs, lokale Modelle, RAG (Abruf angereicherter Texte) mit Datenschutzfokus, Mensch in der Schleife und Mehr-Agenten-Abläufe sind Angebote. Sie werden je Auftrag geschnitten und geprüft, nicht als allgemeine Kundenerfahrung dargestellt.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'Vom Anliegen zum Betrieb',
+      body: [
+        'Die Zusammenarbeit folgt der Reihenfolge Lage, Diagnose, Umsetzung, Betrieb oder Übergabe.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Fall Rösterei Tangermünde', routeId: 'projects', fragment: 'roesterei' },
+    { label: 'Projekt anfragen', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Lage',
+      body: [
+        'Ein interner Ablauf frisst Zeit, etwa das Sortieren von Bewertungen oder wiederkehrende Schritte in der Shop-Verwaltung. Ob ein Modell hilft, hängt am konkreten Prozess.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnose',
+      body: [
+        'Zuerst der Ablauf, dann die Datengrenze, dann die Frage, ob ein vorhandenes Modell, eine API oder ein lokaler Lauf überhaupt passt. Das wird je Auftrag geprüft.',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Umsetzung',
+      body: [
+        'Wo ein Auftrag das hergibt, entsteht ein schmales Werkzeug in der bestehenden Kette — wie die beiden umgesetzten Werkzeuge der Rösterei, angebunden an die interne IT.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Betrieb und Übergabe',
+      body: [
+        'Das Werkzeug bleibt im internen Werkzeugkasten. Übergabe heißt nachvollziehbare Anbindung, nicht ein undokumentierter Chat neben dem Shop.',
+      ],
+    },
+    referenceCaseId: 'roesterei',
+    referenceHeadline: 'Passender öffentlicher Fall',
+    referenceNote:
+      'Die internen KI-Werkzeuge der Rösterei Tangermünde für Bewertungen und Shop-Verwaltung gehören in diesen Bereich, weil sie die umgesetzte KI-Arbeit sind.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Anfrage',
+      body: [
+        'Für eine KI-Anfrage: welcher Ablauf entlastet werden soll und welche Daten im Haus bleiben müssen. Jeder Baustein wird am Auftrag geprüft.',
+      ],
+    },
+  },
+  offerings: [
+    {
+      id: 'review-categorization',
+      title: 'Kategorisierung von Kundenbewertungen',
+      body: 'Ein KI-Werkzeug, das Kundenbewertungen kategorisiert. Umgesetzt für die Rösterei Tangermünde und in deren interne Werkzeugkette eingebunden.',
+      status: 'delivered',
+      referenceCaseId: 'roesterei',
+    },
+    {
+      id: 'shop-management-assistant',
+      title: 'Assistent für die Shop-Verwaltung',
+      body: 'Ein KI-Werkzeug für die schnelle Verwaltung des neuen Shops, vergleichbar mit Shopify Sidekick und in die interne Werkzeugkette eingebunden. Umgesetzt für die Rösterei Tangermünde.',
+      status: 'delivered',
+      referenceCaseId: 'roesterei',
+    },
+    {
+      id: 'process-analysis',
+      title: 'Prozessanalyse vor dem Modell',
+      body: 'Gemeinsames Zuschneiden des Ablaufs, bevor überhaupt ein Modell ins Spiel kommt. Umfang und Nutzen werden am konkreten Auftrag geprüft, nicht aus anderen Projekten übertragen.',
+      status: 'offer',
+    },
+    {
+      id: 'external-models',
+      title: 'Externe Modelle und APIs',
+      body: 'Anbindung eines externen Modells oder einer API an einen bestehenden Ablauf. Ob das zum Auftrag passt, wird je Auftrag geprüft und begrenzt.',
+      status: 'offer',
+    },
+    {
+      id: 'local-llms',
+      title: 'Lokale Sprachmodelle',
+      body: 'Prüfung, ob ein lokal betriebenes Modell für den jeweiligen Auftrag tragfähig ist. Das ist ein Angebot zur Klärung vor Ort, keine Darstellung allgemeiner Produktionserfahrung.',
+      status: 'offer',
+    },
+    {
+      id: 'rag-privacy',
+      title: 'RAG mit Datenschutzgrenze',
+      body: 'Wenn interne Texte ein Modell stützen sollen, wird RAG — der Abruf angereicherter Texte — samt Datenschutzgrenze am konkreten Bestand entworfen. Der Zuschnitt gilt nur für diesen Auftrag und wird mit der Fachseite geprüft.',
+      status: 'offer',
+    },
+    {
+      id: 'human-in-the-loop',
+      title: 'Mensch in der Schleife',
+      body: 'Ein Vorschlag, an welchen Stellen eine Person Freigabe oder Korrektur behält. Die Schleife wird je Auftrag gelegt und mit den Beteiligten geprüft, nicht als Standardpaket verkauft.',
+      status: 'offer',
+    },
+    {
+      id: 'multi-agent',
+      title: 'Mehrere Agenten in einem Ablauf',
+      body: 'Wenn mehrere spezialisierte Schritte nacheinander laufen sollen, wird das Zusammenspiel am Auftrag skizziert und geprüft. Es ist ein Angebot, kein Hinweis auf umgesetzte Kundenprojekte dieser Art.',
+      status: 'offer',
+    },
+  ],
+  deliveredOfferingsHeading: 'Umgesetzte Arbeit',
+  offerOfferingsHeading: 'Angebot, je Auftrag geprüft',
+  offeringCaseBackedLabel: 'Belegt durch den öffentlichen Fall {case}.',
+};

src/app/core/content/de/site.ts

@@ -0,0 +1,58 @@
+import { type SiteContent } from '../content.contracts';
+import { CASES_DE } from './cases';
+import { HOME_DE } from './home';
+import {
+  ABOUT_DE,
+  CONTACT_DE,
+  IMPRINT_DE,
+  NOT_FOUND_DE,
+  PRIVACY_DE,
+  PROJECTS_DE,
+  STACK_DE,
+} from './pages';
+import {
+  SERVICES_AI_DE,
+  SERVICES_CLUSTERS_DE,
+  SERVICES_HARDWARE_DE,
+  SERVICES_OVERVIEW_DE,
+  SERVICES_SOFTWARE_DE,
+} from './services';
+
+export const SITE_CONTENT_DE: SiteContent = {
+  home: HOME_DE,
+  services: {
+    servicesSoftware: SERVICES_SOFTWARE_DE,
+    servicesHardwareNetwork: SERVICES_HARDWARE_DE,
+    servicesClusters: SERVICES_CLUSTERS_DE,
+    servicesAi: SERVICES_AI_DE,
+  },
+  cases: CASES_DE,
+  contact: CONTACT_DE,
+  projects: PROJECTS_DE,
+  stack: STACK_DE,
+  legal: {
+    imprint: IMPRINT_DE,
+    privacy: PRIVACY_DE,
+  },
+  seo: {
+    jobTitle: 'Fullstack- und DevOps-Ingenieur',
+    professionalServiceName: 'Software- und DevOps-Leistungen',
+    professionalServiceDescription:
+      'Vier Leistungsbereiche für Produktsoftware, Infrastruktur, Cluster und KI-Anbindung — vom ersten Workshop bis zum Betrieb, mit direktem Kundenkontakt.',
+  },
+  pages: {
+    home: HOME_DE,
+    services: SERVICES_OVERVIEW_DE,
+    servicesSoftware: SERVICES_SOFTWARE_DE,
+    servicesHardwareNetwork: SERVICES_HARDWARE_DE,
+    servicesClusters: SERVICES_CLUSTERS_DE,
+    servicesAi: SERVICES_AI_DE,
+    projects: PROJECTS_DE,
+    stack: STACK_DE,
+    about: ABOUT_DE,
+    contact: CONTACT_DE,
+    imprint: IMPRINT_DE,
+    privacy: PRIVACY_DE,
+    notFound: NOT_FOUND_DE,
+  },
+};

src/app/core/content/en/cases.ts

@@ -0,0 +1,180 @@
+import { type CaseStudyCopy } from '../content.contracts';
+
+export const CASES_EN: Record<'innofocus' | 'roesterei' | 'myspa' | 'hdi', CaseStudyCopy> = {
+  innofocus: {
+    id: 'innofocus',
+    client: 'Innofocus / reifen.com',
+    role: 'Senior backend and database engineer',
+    period: 'since 09/2025, ongoing',
+    domain: 'eCommerce / ERP',
+    headline: 'Normalised ERP data migration inside Microsoft SQL Server',
+    summary:
+      'Replacement of the existing ERP with a new, normalised system. All legacy data is migrated directly inside Microsoft SQL Server.',
+    responsibility:
+      'Sole responsibility: the migration team is one person. As the only freelancer he is in direct contact with the end customer.',
+    situation:
+      'The existing ERP is being replaced by a new, normalised system. All legacy data is migrated directly inside Microsoft SQL Server. The legacy structure is not normalised; the target structure is. The migration is therefore largely data cleansing, normalisation and documentation for an auditor. The migration had previously been run by another service provider and was taken over.',
+    approach: [
+      'Extensive T-SQL stored procedures for transformation, normalisation and cleansing.',
+      'Selective work on the application itself with C#, .NET and Angular.',
+      'Sign-in through Keycloak with OAuth 2 / OIDC.',
+      'Operation on Kubernetes, GitOps deployments via Argo CD, Git and pipelines on Azure DevOps.',
+    ],
+    outcome: [
+      'Migration run time is about 90 minutes instead of around eight hours, with a larger feature scope and higher data quality.',
+      'The target structure is normalised and documented for the auditor.',
+    ],
+    metrics: [
+      {
+        id: 'innofocus-migration-runtime',
+        value: '8 h → about 90 min',
+        label: 'data-migration run time at Innofocus / reifen.com',
+        note: 'with a larger feature scope and higher data quality',
+        caseId: 'innofocus',
+      },
+    ],
+    stack: [
+      'Microsoft SQL Server',
+      'T-SQL',
+      'C#',
+      '.NET',
+      'Angular',
+      'Keycloak',
+      'OAuth 2 / OIDC',
+      'Kubernetes',
+      'Argo CD',
+      'Azure DevOps',
+    ],
+    tags: ['eCommerce', 'ERP', 'data migration', 'SQL'],
+    linkLabel: 'Read the case: Innofocus / reifen.com',
+  },
+  roesterei: {
+    id: 'roesterei',
+    client: 'Rösterei Tangermünde',
+    role: 'Full technical responsibility for the company',
+    period: 'since 10/2023, ongoing',
+    domain: 'eCommerce and internal IT',
+    headline: 'Shop-floor IT, storefront and internal tools under one roof',
+    summary:
+      'The original goal was a new shop. The scope grew far beyond that and now covers the company’s technology as a whole.',
+    responsibility:
+      'Full responsibility for the technology: network structures, server structures, employee devices, management SaaS such as Microsoft 365, the new online shop and new marketing.',
+    situation:
+      'The roastery first needed a new shop. That became responsibility for the network, servers, devices, Microsoft 365, the shop and marketing. Requirements come directly from non-technical stakeholders; brand identity is shaped together with a designer.',
+    approach: [
+      'Contemporary and cost-effective infrastructure instead of extra complexity.',
+      'Shop version 1: Shopify with a custom theme and custom components in Liquid.',
+      'Shop version 2: Liquid and Hydrogen, with own services integrated.',
+      'Internal tools for cost reduction and autonomy: a generator for vector graphics used in advertising material, an AI tool that categorises customer reviews, and an AI tool for fast management of the new shop, comparable to Shopify Sidekick and wired into the internal tooling.',
+    ],
+    outcome: [
+      'The company’s technology sits with one owner, from the network to the shop.',
+      'Two AI tools are in use in the roastery’s internal operations: review categorisation and the shop assistant.',
+    ],
+    metrics: [],
+    stack: [
+      'Shopify',
+      'Liquid',
+      'Hydrogen',
+      'Angular',
+      'TypeScript',
+      'SCSS',
+      'Java Spring WebFlux',
+      'Java OpenAI library',
+      'MariaDB',
+      'Docker',
+      'Kubernetes',
+      'Proxmox',
+      'GitLab CE',
+      'Microsoft 365',
+    ],
+    tags: ['eCommerce', 'internal IT', 'Shopify', 'AI tools'],
+    linkLabel: 'Read the case: Rösterei Tangermünde',
+    transparencyNote: 'Antonio Ledebuhr holds an economic stake in Rösterei Tangermünde.',
+  },
+  myspa: {
+    id: 'myspa',
+    client: 'Aracom IT Services / MySpa',
+    role: 'Lead backend / DevOps',
+    period: '03/2024 – 09/2024',
+    domain: 'IoT',
+    headline: 'A backend between the house, payments and room technology',
+    summary:
+      'Replacement of legacy software with new custom software. The backend is the interface between the website, the internal admin tool, the payment terminal, lockers, smart devices and touch panels.',
+    responsibility:
+      'Took over leadership of the backend team (4 people) and the DevOps team (2 people) until the software launch. Direct customer contact for requirements.',
+    situation:
+      'The existing software was to be replaced by a new custom system. The backend is the interface between the website, the internal admin tool, the payment terminal, lockers, smart devices (lights, TVs) and touch panels for placing orders and controlling room technology.',
+    approach: [
+      'Backend with C# and .NET 8, a RESTful API, and Entity Framework 8 in a data-first approach.',
+      'On-prem MySQL server administration.',
+      'Test-driven development with unit and integration tests (xUnit).',
+      'OAuth 2 via an identity provider framework, plus MQTT and Hangfire.',
+      'Migration of development, QA and production systems from on-prem services to a Docker cluster.',
+      'CI/CD pipelines with GitLab EE, work in Scrum.',
+    ],
+    outcome: [
+      'The backend connects the channels listed above through to the software launch.',
+      'Development, QA and production systems run on the Docker cluster.',
+    ],
+    metrics: [],
+    stack: [
+      'C#',
+      '.NET 8',
+      'ASP.NET Core',
+      'Entity Framework 8',
+      'xUnit',
+      'MySQL',
+      'OAuth 2',
+      'MQTT',
+      'Hangfire',
+      'Docker',
+      'GitLab EE',
+    ],
+    tags: ['IoT', 'backend', 'DevOps', 'Docker'],
+    linkLabel: 'Read the case: Aracom IT Services / MySpa',
+  },
+  hdi: {
+    id: 'hdi',
+    client: 'HDI Specialty',
+    role: 'Senior fullstack / DevOps',
+    period: '05/2023 – 01/2024',
+    domain: 'Insurance',
+    headline: 'Exposure management for simulations and BaFin reports',
+    summary:
+      'Software that automates simulation sequences to determine specific risks, evaluates simulations stochastically, collects policies centrally and produces evaluations of all policies for BaFin.',
+    responsibility:
+      'Senior fullstack and DevOps work on the exposure-management software, including the migration of the environments onto Azure AKS.',
+    situation:
+      'HDI Specialty needs software for exposure management: simulation sequences should determine specific risks, be evaluated stochastically, collect policies centrally and produce evaluations of all policies for BaFin.',
+    approach: [
+      'Angular single-page application with TypeScript, HTML, SCSS/CSS, Ngrx Store and Ngx Pipes.',
+      'Backend with C# and .NET, a RESTful API and Entity Framework.',
+      'Test-driven development with unit and integration tests (xUnit).',
+      'Azure SQL Server administration.',
+      'Authentication and authorisation through Okta with OAuth 2.',
+      'CI/CD pipelines and project management with Azure DevOps, work in Scrum.',
+    ],
+    outcome: [
+      'Development, QA and production systems were migrated from Azure App Services to a Kubernetes cluster on Azure AKS.',
+    ],
+    metrics: [],
+    stack: [
+      'Angular',
+      'TypeScript',
+      'Ngrx',
+      'Ngx Pipes',
+      'C#',
+      '.NET',
+      'Entity Framework',
+      'xUnit',
+      'Azure SQL Server',
+      'Okta',
+      'OAuth 2',
+      'Azure AKS',
+      'Azure DevOps',
+    ],
+    tags: ['insurance', 'fullstack', 'Kubernetes', 'Azure'],
+    linkLabel: 'Read the case: HDI Specialty',
+  },
+};

src/app/core/content/en/home.ts

@@ -0,0 +1,103 @@
+import { SITE_CONFIG } from '../site-config';
+import { type HomePageCopy } from '../content.contracts';
+
+export const HOME_EN: HomePageCopy = {
+  routeId: 'home',
+  title: 'Home | Antonio Ledebuhr',
+  description:
+    'Fullstack and DevOps engineer in Tangermünde: about seven years of web application work, direct customer contact and team responsibility, freelance since 04/2023.',
+  hero: {
+    headline: 'Fullstack and DevOps engineer based in Tangermünde',
+    proof:
+      'About seven years of professional experience building and operating web applications. Freelance since 04/2023.',
+    playfulLine: 'Full-stack, full throttle',
+  },
+  profile: [
+    'About seven years of professional experience building and operating web applications.',
+    'Fullstack development, DevOps, direct customer contact from the first requirements workshop through to production, and personnel and team responsibility.',
+    'Freelance since 04/2023, based in Tangermünde.',
+    'Home ground is Java with Spring; also C# and .NET, Angular, SQL, Docker and Kubernetes, Azure including AKS, plus GitLab CI/CD and Azure DevOps.',
+  ],
+  metrics: [
+    {
+      id: 'experience-years',
+      value: 'about 7 years',
+      label: 'professional experience with web applications',
+    },
+    {
+      id: 'innofocus-migration-runtime',
+      value: '8 h → about 90 min',
+      label: 'data-migration run time at Innofocus / reifen.com',
+      note: 'with a larger feature scope and higher data quality',
+      caseId: 'innofocus',
+    },
+    {
+      id: 'myspa-team-lead',
+      value: '4 + 2',
+      label: 'led the backend team and the DevOps team through the MySpa launch',
+      caseId: 'myspa',
+    },
+  ],
+  audiences: [
+    {
+      id: 'recruiters',
+      headline: 'For recruiters',
+      body: 'A short path through experience, selected cases, the public stack and the curriculum vitae.',
+      bullets: [
+        'About seven years of fullstack and DevOps work with direct customer contact and team responsibility.',
+        'Four public cases across eCommerce, in-house IT, IoT and insurance.',
+        'Home ground Java and Spring, plus C#/.NET, Angular, SQL, Docker and Kubernetes.',
+        'Curriculum vitae as a PDF download.',
+      ],
+      ctas: [
+        { label: 'Selected projects', routeId: 'projects' },
+        { label: 'View the stack', routeId: 'stack' },
+        {
+          label: 'Curriculum vitae as PDF',
+          href: SITE_CONFIG.cvAssetPath,
+        },
+      ],
+    },
+    {
+      id: 'companies',
+      headline: 'For companies',
+      body: 'Four service areas, from the first workshop through to operations — and a short briefing for an enquiry.',
+      bullets: [
+        'Software: fullstack product work with Java, .NET, Angular and SQL data work.',
+        'Hardware and network: servers, devices, Microsoft 365 and maintainable infrastructure.',
+        'Clusters: Docker and Kubernetes on-premise and on Azure AKS, including pipelines.',
+        'AI integration: two delivered tools at Rösterei Tangermünde, further building blocks as an offer.',
+      ],
+      ctas: [
+        { label: 'Browse services', routeId: 'services' },
+        { label: 'Start a project enquiry', routeId: 'contact' },
+      ],
+    },
+  ],
+  featuredCaseIds: ['innofocus', 'roesterei', 'myspa', 'hdi'],
+  systemsMap: {
+    heading: 'How the layers connect',
+    intro: 'Hardware, clusters, software and AI integration — and where the public cases attach.',
+  },
+  sections: [
+    {
+      id: 'profile',
+      headline: 'Thirty seconds',
+      body: [
+        'Antonio Ledebuhr works as a fullstack and DevOps engineer from Tangermünde. This site shows a curated selection of stations; the full curriculum vitae is available as a PDF.',
+      ],
+    },
+    {
+      id: 'featured-cases',
+      headline: 'Selected cases',
+      body: [
+        'The four public cases cover eCommerce and ERP, shop-floor IT, IoT and insurance. Each case is written in full on the projects page.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Services', routeId: 'services' },
+    { label: 'Projects', routeId: 'projects' },
+    { label: 'Contact', routeId: 'contact' },
+  ],
+};

src/app/core/content/en/pages.ts

@@ -0,0 +1,370 @@
+import { SITE_CONFIG } from '../site-config';
+import {
+  type ContactPageCopy,
+  type LegalPageCopy,
+  type PageCopy,
+  type ProjectsPageCopy,
+  type StackPageCopy,
+} from '../content.contracts';
+
+export const PROJECTS_EN: ProjectsPageCopy = {
+  routeId: 'projects',
+  title: 'Projects | Antonio Ledebuhr',
+  description:
+    'Four public cases: Innofocus / reifen.com, Rösterei Tangermünde, MySpa and HDI Specialty. A deliberately narrow selection; the full curriculum vitae is available as a download.',
+  hero: {
+    headline: 'Four public cases, deliberately chosen',
+    proof:
+      'The site shows a curated selection. The full curriculum vitae is available as a PDF download.',
+  },
+  sections: [
+    {
+      id: 'selection',
+      headline: 'Why only these four',
+      body: [
+        'The public record has four cases: Innofocus / reifen.com, Rösterei Tangermünde, MySpa and HDI Specialty. Further stations belong in the curriculum vitae, not on these pages.',
+      ],
+    },
+    {
+      id: 'reading',
+      headline: 'What each case documents',
+      body: [
+        'Each case documents the engagement, the role, the period, the situation, the approach and the outcome. Figures appear only where they are verified.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Curriculum vitae as PDF', href: SITE_CONFIG.cvAssetPath },
+    { label: 'Contact', routeId: 'contact' },
+  ],
+  caseLabels: {
+    situation: 'Situation',
+    approach: 'Approach',
+    outcome: 'Outcome',
+    metrics: 'Metrics',
+    stack: 'Stack',
+    tags: 'Tags',
+  },
+};
+
+export const STACK_EN: StackPageCopy = {
+  routeId: 'stack',
+  title: 'Technology stack | Antonio Ledebuhr',
+  description:
+    'A technology overview in seven groups: programming, databases, DevOps, operating systems, infrastructure as code, hypervisors and tools.',
+  hero: {
+    headline: 'A technology overview, not a proof list',
+    proof:
+      'The grid is a familiarity list. It shows technologies from the work without claiming a public case for every entry.',
+  },
+  sections: [
+    {
+      id: 'reading',
+      headline: 'An overview, not a ranking',
+      body: [
+        'The grid groups technologies for orientation. It is not a ranking, and it does not claim that every entry appears in a public case.',
+      ],
+    },
+    {
+      id: 'groups',
+      headline: 'Which groups the work touches',
+      body: [
+        'Product work in Java and Spring and in C# and .NET, with Angular on the front end. SQL Server and T-SQL data work. Containers and clusters with Docker, Kubernetes and Azure AKS. Pipelines in GitLab CI/CD and Azure DevOps, GitOps with Argo CD. Servers and virtualisation on site.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Projects', routeId: 'projects' },
+    { label: 'About', routeId: 'about' },
+  ],
+  groups: [
+    { id: 'programming', title: 'Programming' },
+    { id: 'db', title: 'Databases' },
+    { id: 'devops', title: 'DevOps' },
+    { id: 'os', title: 'Operating Systems' },
+    { id: 'iac', title: 'Infrastructure as Code' },
+    { id: 'hyperviser', title: 'Hypervisors' },
+    { id: 'tools', title: 'Tools' },
+  ],
+  evidenceNote:
+    'The public cases evidence items such as Angular, TypeScript, C#, .NET, Java, Spring, SQL Server, MySQL, MariaDB, Docker, Kubernetes, Azure, Azure DevOps, GitLab, Proxmox and Microsoft 365. The remaining entries show breadth and familiarity without a public reference.',
+};
+
+export const ABOUT_EN: PageCopy = {
+  routeId: 'about',
+  title: 'About | Antonio Ledebuhr',
+  description:
+    'Antonio Ledebuhr, fullstack and DevOps engineer in Tangermünde. Freelance since 04/2023, German native, English at negotiation level.',
+  hero: {
+    headline: 'Antonio Ledebuhr, fullstack and DevOps engineer',
+    proof:
+      'Based in Tangermünde. Freelance since 04/2023. German native, English at negotiation level.',
+  },
+  sections: [
+    {
+      id: 'profile',
+      headline: 'Professional profile',
+      body: [
+        'About seven years of professional experience building and operating web applications. The work covers fullstack development, DevOps, direct customer contact from the first requirements workshop through to production, and personnel and team responsibility.',
+        'Home ground is Java (8/11/17/21, Maven, Spring Boot, Spring Data JPA, WebFlux, JUnit). Alongside that sit C# / .NET Core / .NET 8 (ASP.NET Core, Entity Framework, xUnit) and Angular (TypeScript, RxJS-era SPA work, Ngrx, SCSS).',
+      ],
+    },
+    {
+      id: 'working',
+      headline: 'Way of working',
+      body: [
+        'Clean code, architecture that can be lived with, domain-driven design and test-driven development. Landing in a new domain is part of the work, not a side task.',
+      ],
+    },
+    {
+      id: 'contact-and-language',
+      headline: 'Customer contact, teams and languages',
+      body: [
+        'Direct customer contact and team responsibility are part of the work so far, not a later add-on.',
+        'German is the native language. English is at negotiation level.',
+      ],
+    },
+    {
+      id: 'accent',
+      headline: 'Roastery and torque',
+      body: [
+        'The roastery work remains the personal accent: brewing and torque rather than idle. Antonio Ledebuhr holds an economic stake in Rösterei Tangermünde.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Projects', routeId: 'projects' },
+    { label: 'Contact', routeId: 'contact' },
+  ],
+};
+
+export const CONTACT_EN: ContactPageCopy = {
+  routeId: 'contact',
+  title: 'Contact | Antonio Ledebuhr',
+  description:
+    'A short project briefing in the browser. It only assembles a local email to info@antoniolede.de; nothing is sent to this server.',
+  hero: {
+    headline: 'A short briefing, then the local mail program',
+    proof:
+      'The fields stay in the browser. The button only opens a prefilled message to info@antoniolede.de.',
+  },
+  sections: [
+    {
+      id: 'how',
+      headline: 'What happens to the answers',
+      body: [
+        'Nothing is sent to this server. The filled fields become a mailto message that opens the local mail program.',
+      ],
+    },
+    {
+      id: 'direct',
+      headline: 'Write directly',
+      body: [
+        'Anyone who prefers to skip the briefing can write to info@antoniolede.de. A calendar link is not published at the moment.',
+      ],
+    },
+  ],
+  ctas: [],
+  fields: [
+    { id: 'name', control: 'text', label: 'Name', required: true },
+    { id: 'email', control: 'email', label: 'Email', required: true },
+    { id: 'company', control: 'text', label: 'Company', hint: 'optional', required: false },
+    {
+      id: 'projectType',
+      control: 'select',
+      label: 'Type of work',
+      required: true,
+      options: [
+        { value: 'software', label: 'Software' },
+        { value: 'hardware-network', label: 'Hardware and network' },
+        { value: 'clusters', label: 'Clusters' },
+        { value: 'ai', label: 'AI integration' },
+        { value: 'other', label: 'Other' },
+      ],
+    },
+    {
+      id: 'situation',
+      control: 'textarea',
+      label: 'Situation',
+      hint: 'What is in front of you, and where should the work start?',
+      required: true,
+    },
+    { id: 'timeframe', control: 'text', label: 'Timeframe', hint: 'optional', required: false },
+  ],
+  mailSubject: 'Project enquiry via antoniolede.de',
+  mailIntro: 'Short briefing from the website:',
+  mailSignature: 'Sent via the contact briefing on antoniolede.de.',
+  submitLabel: 'Open the mail program',
+  incompleteHint: 'Still needed:',
+  requiredMarkerLabel: 'Required field',
+  directEmailLabel: 'Write directly to info@antoniolede.de',
+  calendarLabel: 'Find a time',
+  noBackendNote:
+    'There is no form backend. Nothing is transmitted to this server. The button only opens the local mail program.',
+};
+
+export const IMPRINT_EN: LegalPageCopy = {
+  routeId: 'imprint',
+  title: 'Legal notice | Antonio Ledebuhr',
+  description:
+    'Legal notice for Antonio Ledebuhr, Kirchstr. 19, 39590 Tangermünde. The text is unreviewed and must be checked by the site owner before publication.',
+  hero: {
+    headline: 'Legal notice',
+    proof:
+      'Name, address and email are taken from the curriculum vitae. Further required details are left blank on purpose.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'What is on this page',
+      body: [
+        'This text names the person, the address, the email address and responsibility for the content. It is not a finished legal notice.',
+      ],
+    },
+    {
+      id: 'limit',
+      headline: 'What is missing',
+      body: [
+        'A VAT ID, register details, a supervisory authority, professional-liability insurance and a telephone number are not published here because they are not verified for this site.',
+      ],
+    },
+  ],
+  ctas: [{ label: 'Privacy', routeId: 'privacy' }],
+  reviewNotice:
+    'Warning: this legal text is unreviewed. The site owner must check it before any publication and complete the open items below.',
+  reviewTodos: [
+    'VAT identification number, if one exists',
+    'Register court and register number, if an entry exists',
+    'Supervisory authority, if one applies',
+    'Professional-liability insurance, if one exists',
+    'Telephone number, if it should be published',
+    'Hosting provider and its data processing',
+  ],
+  legalSections: [
+    {
+      id: 'provider',
+      title: 'Provider',
+      body: [
+        'Antonio Ledebuhr',
+        'Kirchstr. 19',
+        '39590 Tangermünde',
+        'Germany',
+        'Email: info@antoniolede.de',
+      ],
+    },
+    {
+      id: 'responsibility',
+      title: 'Responsible for the content',
+      body: [
+        'Responsible for the content of these pages is Antonio Ledebuhr, Kirchstr. 19, 39590 Tangermünde, Germany.',
+      ],
+    },
+    {
+      id: 'completeness',
+      title: 'No claim of completeness',
+      body: [
+        'This page does not claim legal completeness. Open items sit in the review list above and must be completed by the site owner before publication.',
+      ],
+    },
+  ],
+};
+
+export const PRIVACY_EN: LegalPageCopy = {
+  routeId: 'privacy',
+  title: 'Privacy | Antonio Ledebuhr',
+  description:
+    'Notes on processing for this static, server-rendered site without its own backend. The text is unreviewed and must be completed before publication.',
+  hero: {
+    headline: 'Privacy',
+    proof:
+      'The site has no backend of its own. The contact briefing stays in the browser and only assembles a mailto message.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'What this text covers',
+      body: [
+        'It describes the public site as far as that is verified here. It is not a finished privacy statement.',
+      ],
+    },
+    {
+      id: 'limit',
+      headline: 'What the owner still has to add',
+      body: [
+        'The hosting provider, its processing and further legally required items sit in the review list and are left blank here on purpose.',
+      ],
+    },
+  ],
+  ctas: [{ label: 'Legal notice', routeId: 'imprint' }],
+  reviewNotice:
+    'Warning: this legal text is unreviewed. The site owner must check it before any publication and complete the open items below.',
+  reviewTodos: [
+    'Hosting provider and its commissioned processing',
+    'Server location and any sub-processors in use',
+    'A contact path for privacy requests, if email is not enough',
+    'Further legally required items once they are known',
+  ],
+  legalSections: [
+    {
+      id: 'controller',
+      title: 'Controller',
+      body: [
+        'Antonio Ledebuhr, Kirchstr. 19, 39590 Tangermünde, Germany, email: info@antoniolede.de.',
+      ],
+    },
+    {
+      id: 'site-nature',
+      title: 'Nature of this site',
+      body: [
+        'This site is a static, server-rendered site without its own backend. There is no user account and no server-side form intake on this domain.',
+      ],
+    },
+    {
+      id: 'contact-briefing',
+      title: 'Contact briefing',
+      body: [
+        'The contact briefing runs entirely in the browser. It only assembles a mailto link. No form data reaches this site.',
+      ],
+    },
+    {
+      id: 'email',
+      title: 'Email correspondence',
+      body: [
+        'When a message is sent to info@antoniolede.de, the correspondence is processed for the purpose of the enquiry. No other use is described here.',
+      ],
+    },
+    {
+      id: 'rights',
+      title: 'Rights of data subjects',
+      body: [
+        'Data subjects have the general rights of access, rectification, erasure, restriction of processing, objection and complaint to a supervisory authority. How those rights are exercised depends on the specific matter.',
+      ],
+    },
+    {
+      id: 'hosting',
+      title: 'Hosting',
+      body: [
+        'The hosting provider and its processing still have to be completed by the site owner. No provider is named here.',
+      ],
+    },
+  ],
+};
+
+export const NOT_FOUND_EN: PageCopy = {
+  routeId: 'notFound',
+  title: 'Page not found | Antonio Ledebuhr',
+  description:
+    'This address does not match a public page. Continue via home, services, projects or contact.',
+  hero: {
+    headline: 'This page is not on the public site',
+    proof:
+      'The address does not match a public route. The four links below lead back into the site.',
+  },
+  sections: [],
+  ctas: [
+    { label: 'Back to home', routeId: 'home' },
+    { label: 'Services', routeId: 'services' },
+    { label: 'Projects', routeId: 'projects' },
+    { label: 'Contact', routeId: 'contact' },
+  ],
+};

src/app/core/content/en/services.ts

@@ -0,0 +1,436 @@
+import { type PageCopy, type ServicePageCopy } from '../content.contracts';
+
+export const SERVICES_OVERVIEW_EN: PageCopy = {
+  routeId: 'services',
+  title: 'Services | Antonio Ledebuhr',
+  description:
+    'Four service areas covering product software, infrastructure, clusters and AI integration — from the first workshop through to operations, with direct customer contact.',
+  hero: {
+    headline: 'Four service areas, one counterpart',
+    proof:
+      'Software, hardware and network, clusters, and AI integration. The path runs from the situation through diagnosis and implementation into operations.',
+    playfulLine: 'Systems that stay in gear',
+  },
+  sections: [
+    {
+      id: 'areas',
+      headline: 'The four areas',
+      body: [
+        'Software covers fullstack product work with Java and Spring Boot, C# and .NET, Angular, REST APIs, domain-driven design, test-driven development, and SQL / T-SQL data work.',
+        'Hardware and network covers network and server structures, employee devices, management SaaS such as Microsoft 365, and on-prem servers and virtualisation.',
+        'Clusters covers Docker and Kubernetes on-premise and on Azure AKS, migration off single hosts and PaaS onto clusters, GitLab CI/CD and Azure DevOps, and GitOps with Argo CD.',
+        'AI integration is the largest area: two delivered tools at Rösterei Tangermünde, and further building blocks that are scoped and validated per engagement.',
+      ],
+    },
+    {
+      id: 'who',
+      headline: 'Who this is for',
+      body: [
+        'For companies that want one counterpart from the first requirements workshop through to production — without an extra layer between the business side and the technology.',
+        'For recruiters who want to read the public selection and the stack before opening the curriculum vitae.',
+      ],
+    },
+    {
+      id: 'engagement',
+      headline: 'How an engagement runs',
+      body: [
+        'Situation first, then diagnosis, then implementation, then operations or handover. Each detail page follows that order and names a fitting public case.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Software', routeId: 'servicesSoftware' },
+    { label: 'Hardware and network', routeId: 'servicesHardwareNetwork' },
+    { label: 'Clusters', routeId: 'servicesClusters' },
+    { label: 'AI integration', routeId: 'servicesAi' },
+    { label: 'Start a project enquiry', routeId: 'contact' },
+  ],
+};
+
+export const SERVICES_SOFTWARE_EN: ServicePageCopy = {
+  routeId: 'servicesSoftware',
+  title: 'Software engineering | Antonio Ledebuhr',
+  description:
+    'Fullstack product work with Java and Spring Boot, C# and .NET, Angular, REST APIs, domain-driven design, tests and SQL data work.',
+  hero: {
+    headline: 'Fullstack product work, from the brief to delivery',
+    proof:
+      'Java and Spring Boot, C# and .NET, Angular, REST APIs, domain-driven design, test-driven development and SQL / T-SQL data work. Sign-in with Keycloak and OAuth 2.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'What this area covers',
+      body: [
+        'New product software and the reshaping of existing applications. The work runs from the domain through the API to the interface, including the data model and sign-in.',
+      ],
+    },
+    {
+      id: 'fit',
+      headline: 'When this fits',
+      body: [
+        'When the business side and the technology need the same counterpart, and data work is part of the product rather than an afterthought.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'From the brief to operations',
+      body: [
+        'The work follows the order situation, diagnosis, implementation, then operations or handover.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Innofocus / reifen.com case', routeId: 'projects', fragment: 'innofocus' },
+    { label: 'Start a project enquiry', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Situation',
+      body: [
+        'A product needs a reliable chain from domain and data through the API to the interface — often with inherited data stores and existing identity services.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnosis',
+      body: [
+        'Domain boundary first, then the data model, then the interfaces. Domain-driven design and tests make the assumptions visible before the code fans out.',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Implementation',
+      body: [
+        'Delivery in Java and Spring Boot or in C# and .NET, with Angular on the surface, REST APIs, SQL / T-SQL data work and sign-in through Keycloak or OAuth 2.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Operations and handover',
+      body: [
+        'The result is handed over so that tests, data work and operations stay readable — not as an undocumented snapshot.',
+      ],
+    },
+    referenceCaseId: 'innofocus',
+    referenceHeadline: 'A fitting public case',
+    referenceNote:
+      'The ERP data migration for Innofocus / reifen.com belongs here because it is product and data work with T-SQL, .NET, Angular and Keycloak.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Enquiry',
+      body: [
+        'A short briefing of the situation is enough for a software enquiry. It becomes a local email and is not sent to this server.',
+      ],
+    },
+  },
+  offerings: [],
+  deliveredOfferingsHeading: 'Delivered work',
+  offerOfferingsHeading: 'Offered and validated per engagement',
+  offeringCaseBackedLabel: 'Backed by the public case {case}.',
+};
+
+export const SERVICES_HARDWARE_EN: ServicePageCopy = {
+  routeId: 'servicesHardwareNetwork',
+  title: 'Hardware and network | Antonio Ledebuhr',
+  description:
+    'Network and server structures, employee devices, Microsoft 365, plus on-prem servers and virtualisation — kept cost-effective and maintainable.',
+  hero: {
+    headline: 'Infrastructure that holds up on a Tuesday',
+    proof:
+      'Network and server structures, employee devices, management SaaS such as Microsoft 365, on-prem servers and virtualisation. Cut for cost and maintainability.',
+    playfulLine: 'Freshly brewed automation',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'What this area covers',
+      body: [
+        'Not a single box, but the chain of network, servers, workplaces and the services the company uses every day.',
+      ],
+    },
+    {
+      id: 'fit',
+      headline: 'When this fits',
+      body: [
+        'When in-house IT and the public storefront need the same owner, and the infrastructure should stay small, clear and affordable.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'From the brief to operations',
+      body: [
+        'The work follows the order situation, diagnosis, implementation, then operations or handover.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Rösterei Tangermünde case', routeId: 'projects', fragment: 'roesterei' },
+    { label: 'Start a project enquiry', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Situation',
+      body: [
+        'Grown networks, single servers and scattered devices make the week more expensive than it needs to be — especially when the shop and in-house IT are treated as separate worlds.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnosis',
+      body: [
+        'Which paths have to stay up, which services belong together, and where a cost-effective, maintainable building block is enough?',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Implementation',
+      body: [
+        'Network and server structures, employee devices, Microsoft 365, on-prem servers and virtualisation — cut so that operations and change stay in-house.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Operations and handover',
+      body: [
+        'The infrastructure stays operable in daily work. Handover means readable structures, not an undocumented exception.',
+      ],
+    },
+    referenceCaseId: 'roesterei',
+    referenceHeadline: 'A fitting public case',
+    referenceNote:
+      'Full technical responsibility for Rösterei Tangermünde belongs here because it runs from the network to the shop.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Enquiry',
+      body: [
+        'A short description of the current setup is enough. The briefing stays in the browser and only opens the local mail program.',
+      ],
+    },
+  },
+  offerings: [],
+  deliveredOfferingsHeading: 'Delivered work',
+  offerOfferingsHeading: 'Offered and validated per engagement',
+  offeringCaseBackedLabel: 'Backed by the public case {case}.',
+};
+
+export const SERVICES_CLUSTERS_EN: ServicePageCopy = {
+  routeId: 'servicesClusters',
+  title: 'Cluster operations | Antonio Ledebuhr',
+  description:
+    'Docker and Kubernetes on-premise and on Azure AKS, migration off hosts and PaaS, GitLab CI/CD, Azure DevOps and GitOps with Argo CD.',
+  hero: {
+    headline: 'Off single hosts and PaaS, onto a cluster',
+    proof:
+      'Docker and Kubernetes on-premise and in the cloud (Azure AKS), pipelines with GitLab CI/CD and Azure DevOps, GitOps with Argo CD, plus operations and handover.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'What this area covers',
+      body: [
+        'Moving from single hosts or PaaS services onto a cluster, including the pipelines that roll the same state out in a readable way.',
+      ],
+    },
+    {
+      id: 'fit',
+      headline: 'When this fits',
+      body: [
+        'When development, QA and production need the same operating shape, and the path there should stay documented.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'From the brief to operations',
+      body: [
+        'The work follows the order situation, diagnosis, implementation, then operations or handover.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'HDI Specialty case', routeId: 'projects', fragment: 'hdi' },
+    { label: 'Start a project enquiry', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Situation',
+      body: [
+        'Applications run on single hosts or on PaaS. Environments drift, and rollout and operations still depend on hand work.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnosis',
+      body: [
+        'What load the cluster must carry, which environments must stay alike, and which GitOps or pipeline path fits the existing toolchain.',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Implementation',
+      body: [
+        'Docker and Kubernetes on-premise or on Azure AKS, GitLab CI/CD or Azure DevOps, and GitOps with Argo CD where that fits.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Operations and handover',
+      body: [
+        'Operations and handover belong together: the cluster state should be explained by the repository, not by a single machine.',
+      ],
+    },
+    referenceCaseId: 'hdi',
+    referenceHeadline: 'A fitting public case',
+    referenceNote:
+      'The migration of the HDI Specialty environments from Azure App Services to Azure AKS belongs here because it is the move onto a cluster.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Enquiry',
+      body: [
+        'For a cluster enquiry: which environments should move and what they run on today. The briefing only creates a local email.',
+      ],
+    },
+  },
+  offerings: [],
+  deliveredOfferingsHeading: 'Delivered work',
+  offerOfferingsHeading: 'Offered and validated per engagement',
+  offeringCaseBackedLabel: 'Backed by the public case {case}.',
+};
+
+export const SERVICES_AI_EN: ServicePageCopy = {
+  routeId: 'servicesAi',
+  title: 'AI integration | Antonio Ledebuhr',
+  description:
+    'Two delivered AI tools at Rösterei Tangermünde. Further building blocks — from process analysis to local models — are validated per client.',
+  hero: {
+    headline: 'AI integration that stays tied to the brief',
+    proof:
+      'Delivered work is a review-categorisation tool and a shop-management assistant, both at Rösterei Tangermünde. Everything else is scoped and validated per engagement.',
+  },
+  sections: [
+    {
+      id: 'scope',
+      headline: 'What is presented as delivered',
+      body: [
+        'Only the two Rösterei Tangermünde tools are shown as delivered work: the categorisation of customer reviews and the assistant for shop management.',
+      ],
+    },
+    {
+      id: 'offer-boundary',
+      headline: 'What remains an offer',
+      body: [
+        'Process analysis, external models and APIs, local models, retrieval-augmented text with a privacy boundary, human-in-the-loop and multi-agent workflows are offers. They are scoped and validated per engagement, not presented as general client experience.',
+      ],
+    },
+    {
+      id: 'sequence',
+      headline: 'From the brief to operations',
+      body: [
+        'The work follows the order situation, diagnosis, implementation, then operations or handover.',
+      ],
+    },
+  ],
+  ctas: [
+    { label: 'Rösterei Tangermünde case', routeId: 'projects', fragment: 'roesterei' },
+    { label: 'Start a project enquiry', routeId: 'contact' },
+  ],
+  sequence: {
+    situation: {
+      id: 'situation',
+      headline: 'Situation',
+      body: [
+        'An internal process burns time, such as sorting reviews or repeating steps in shop management. Whether a model helps depends on that process.',
+      ],
+    },
+    diagnosis: {
+      id: 'diagnosis',
+      headline: 'Diagnosis',
+      body: [
+        'The process first, then the data boundary, then whether an existing model, an API or a local run even fits. That is validated per engagement.',
+      ],
+    },
+    implementation: {
+      id: 'implementation',
+      headline: 'Implementation',
+      body: [
+        'Where the brief supports it, a narrow tool lands in the existing chain — as with the two delivered Rösterei tools, wired into the in-house IT.',
+      ],
+    },
+    operation: {
+      id: 'operation',
+      headline: 'Operations and handover',
+      body: [
+        'The tool stays inside the internal toolbox. Handover means a readable integration, not an undocumented chat beside the shop.',
+      ],
+    },
+    referenceCaseId: 'roesterei',
+    referenceHeadline: 'A fitting public case',
+    referenceNote:
+      'The in-house AI tools at Rösterei Tangermünde for reviews and shop management belong here because they are the delivered AI work.',
+    inquiry: {
+      id: 'inquiry',
+      headline: 'Enquiry',
+      body: [
+        'For an AI enquiry: which process should get lighter, and which data has to stay in-house. Each building block is validated against that brief.',
+      ],
+    },
+  },
+  offerings: [
+    {
+      id: 'review-categorization',
+      title: 'Customer-review categorisation',
+      body: 'An AI tool that categorises customer reviews. Delivered for Rösterei Tangermünde and wired into its internal tooling.',
+      status: 'delivered',
+      referenceCaseId: 'roesterei',
+    },
+    {
+      id: 'shop-management-assistant',
+      title: 'Shop-management assistant',
+      body: 'An AI tool for fast management of the new shop, comparable to Shopify Sidekick and wired into the internal tooling. Delivered for Rösterei Tangermünde.',
+      status: 'delivered',
+      referenceCaseId: 'roesterei',
+    },
+    {
+      id: 'process-analysis',
+      title: 'Process analysis before the model',
+      body: 'A joint cut of the process before a model enters the picture. Scope and usefulness are validated on the individual brief, not copied from other work.',
+      status: 'offer',
+    },
+    {
+      id: 'external-models',
+      title: 'External models and APIs',
+      body: 'Connecting an external model or API to an existing process. Whether that fits is scoped and validated for the individual client.',
+      status: 'offer',
+    },
+    {
+      id: 'local-llms',
+      title: 'Local language models',
+      body: 'A check of whether a locally operated model is viable for the individual brief. This is an offer to clarify on site, not a claim of general production experience.',
+      status: 'offer',
+    },
+    {
+      id: 'rag-privacy',
+      title: 'Retrieval with a privacy boundary',
+      body: 'If internal texts should ground a model, the retrieval path and the privacy boundary are designed against that corpus. The cut applies only to this engagement and is validated with the people who own the data.',
+      status: 'offer',
+    },
+    {
+      id: 'human-in-the-loop',
+      title: 'A person in the loop',
+      body: 'A proposal for where a person keeps approval or correction. The loop is placed per engagement and validated with the people involved; it is not a standard package.',
+      status: 'offer',
+    },
+    {
+      id: 'multi-agent',
+      title: 'Several agents in one workflow',
+      body: 'If several specialised steps should run in sequence, the composition is sketched and validated on the brief. It is an offer, not a pointer to delivered client work of that kind.',
+      status: 'offer',
+    },
+  ],
+  deliveredOfferingsHeading: 'Delivered work',
+  offerOfferingsHeading: 'Offered and validated per engagement',
+  offeringCaseBackedLabel: 'Backed by the public case {case}.',
+};

src/app/core/content/en/site.ts

@@ -0,0 +1,58 @@
+import { type SiteContent } from '../content.contracts';
+import { CASES_EN } from './cases';
+import { HOME_EN } from './home';
+import {
+  ABOUT_EN,
+  CONTACT_EN,
+  IMPRINT_EN,
+  NOT_FOUND_EN,
+  PRIVACY_EN,
+  PROJECTS_EN,
+  STACK_EN,
+} from './pages';
+import {
+  SERVICES_AI_EN,
+  SERVICES_CLUSTERS_EN,
+  SERVICES_HARDWARE_EN,
+  SERVICES_OVERVIEW_EN,
+  SERVICES_SOFTWARE_EN,
+} from './services';
+
+export const SITE_CONTENT_EN: SiteContent = {
+  home: HOME_EN,
+  services: {
+    servicesSoftware: SERVICES_SOFTWARE_EN,
+    servicesHardwareNetwork: SERVICES_HARDWARE_EN,
+    servicesClusters: SERVICES_CLUSTERS_EN,
+    servicesAi: SERVICES_AI_EN,
+  },
+  cases: CASES_EN,
+  contact: CONTACT_EN,
+  projects: PROJECTS_EN,
+  stack: STACK_EN,
+  legal: {
+    imprint: IMPRINT_EN,
+    privacy: PRIVACY_EN,
+  },
+  seo: {
+    jobTitle: 'Fullstack and DevOps engineer',
+    professionalServiceName: 'Software and DevOps services',
+    professionalServiceDescription:
+      'Four service areas covering product software, infrastructure, clusters and AI integration — from the first workshop through to operations, with direct customer contact.',
+  },
+  pages: {
+    home: HOME_EN,
+    services: SERVICES_OVERVIEW_EN,
+    servicesSoftware: SERVICES_SOFTWARE_EN,
+    servicesHardwareNetwork: SERVICES_HARDWARE_EN,
+    servicesClusters: SERVICES_CLUSTERS_EN,
+    servicesAi: SERVICES_AI_EN,
+    projects: PROJECTS_EN,
+    stack: STACK_EN,
+    about: ABOUT_EN,
+    contact: CONTACT_EN,
+    imprint: IMPRINT_EN,
+    privacy: PRIVACY_EN,
+    notFound: NOT_FOUND_EN,
+  },
+};

src/app/core/content/placeholder-content.ts

@@ -1,58 +0,0 @@
-import { type AppLocale } from '../i18n/locale';
-import { ROUTE_IDS, type RouteId } from '../routing/route-ids';
-import { type PageCopy, type SiteContent } from './content.contracts';
-
-const PAGE_TITLES: Record<RouteId, Record<AppLocale, string>> = {
-  home: { de: 'Startseite', en: 'Home' },
-  services: { de: 'Leistungen', en: 'Services' },
-  servicesSoftware: { de: 'Software', en: 'Software' },
-  servicesHardwareNetwork: { de: 'Hardware und Netzwerk', en: 'Hardware and network' },
-  servicesClusters: { de: 'Cluster', en: 'Clusters' },
-  servicesAi: { de: 'KI-Integration', en: 'AI integration' },
-  projects: { de: 'Projekte', en: 'Projects' },
-  stack: { de: 'Stack', en: 'Stack' },
-  about: { de: 'Über mich', en: 'About' },
-  contact: { de: 'Kontakt', en: 'Contact' },
-  imprint: { de: 'Impressum', en: 'Legal notice' },
-  privacy: { de: 'Datenschutz', en: 'Privacy' },
-  notFound: { de: 'Seite nicht gefunden', en: 'Page not found' },
-};
-
-function scaffoldPage(routeId: RouteId, locale: AppLocale): PageCopy {
-  const title = PAGE_TITLES[routeId][locale];
-  const description =
-    locale === 'de' ? 'Diese Seite wird derzeit aufgebaut.' : 'This page is being built.';
-
-  return {
-    routeId,
-    title,
-    description,
-    hero: {
-      headline: title,
-      body: [description],
-    },
-    sections: [],
-    ctas:
-      routeId === 'notFound'
-        ? [
-            {
-              label: locale === 'de' ? 'Zur Startseite' : 'Back to home',
-              routeId: 'home',
-            },
-          ]
-        : [],
-  };
-}
-
-function pagesFor(locale: AppLocale): SiteContent {
-  const pages = Object.fromEntries(
-    ROUTE_IDS.map((routeId) => [routeId, scaffoldPage(routeId, locale)]),
-  ) as Record<RouteId, PageCopy>;
-
-  return { pages };
-}
-
-export const PLACEHOLDER_CONTENT: Record<AppLocale, SiteContent> = {
-  de: pagesFor('de'),
-  en: pagesFor('en'),
-};

src/app/core/content/shell-copy.ts

@@ -10,9 +10,6 @@ export interface ShellCopy {
   readonly otherLocaleName: string;
   readonly cvLabel: string;
   readonly contactCta: string;
-  readonly scaffoldingNote: string;
-  readonly legalReviewNotice: string;
-  readonly notFoundHomeLabel: string;
 }
 
 export const SHELL_COPY: Record<AppLocale, ShellCopy> = {
@@ -26,10 +23,6 @@ export const SHELL_COPY: Record<AppLocale, ShellCopy> = {
     otherLocaleName: 'English',
     cvLabel: 'Lebenslauf als PDF',
     contactCta: 'Kontakt',
-    scaffoldingNote: 'Hinweis: Der endgültige Inhalt folgt. Diese Seite ist ein Gerüst.',
-    legalReviewNotice:
-      'Platzhalter: Dieser Rechtstext ist ungeprüft und muss vor der Veröffentlichung vom Seitenbetreiber geprüft werden.',
-    notFoundHomeLabel: 'Zur Startseite',
   },
   en: {
     skipLink: 'Skip to content',
@@ -41,9 +34,5 @@ export const SHELL_COPY: Record<AppLocale, ShellCopy> = {
     otherLocaleName: 'Deutsch',
     cvLabel: 'Curriculum vitae as PDF',
     contactCta: 'Contact',
-    scaffoldingNote: 'Note: Final content follows. This page is scaffolding.',
-    legalReviewNotice:
-      'Placeholder: This legal text is unreviewed and must be checked by the site owner before publication.',
-    notFoundHomeLabel: 'Back to home',
   },
 };

src/app/core/content/signature-copy.spec.ts

@@ -1,5 +1,7 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { COMMAND_IDS } from '../commands/command-ids';
 import { APP_LOCALES } from '../i18n/locale';
-import { COMMAND_IDS } from '../../shared/command-palette/commands';
 import { SIGNATURE_COPY } from './signature-copy';
 
 function leafPaths(value: unknown, prefix = ''): string[] {
@@ -46,6 +48,14 @@ describe('SIGNATURE_COPY', () => {
     }
   });
 
+  it('does not import from src/app/shared', () => {
+    const source = readFileSync(
+      join(process.cwd(), 'src/app/core/content/signature-copy.ts'),
+      'utf8',
+    );
+    expect(source).not.toMatch(/from ['"][^'"]*\/shared\//);
+  });
+
   it('describes every CommandId in both locales', () => {
     for (const locale of APP_LOCALES) {
       const descriptions = SIGNATURE_COPY[locale].palette.commandDescriptions;

src/app/core/content/signature-copy.ts

@@ -1,10 +1,11 @@
+import { type CommandId } from '../commands/command-ids';
 import { type AppLocale } from '../i18n/locale';
-import { type CommandId } from '../../shared/command-palette/commands';
 
 export interface SignatureCopy {
   readonly palette: {
     readonly triggerLabel: string;
     readonly shortcutHint: string;
+    readonly shortcutHintApple: string;
     readonly dialogTitle: string;
     readonly dialogDescription: string;
     readonly inputLabel: string;
@@ -47,6 +48,7 @@ export const SIGNATURE_COPY: Record<AppLocale, SignatureCopy> = {
     palette: {
       triggerLabel: 'Befehle öffnen',
       shortcutHint: 'Strg+K',
+      shortcutHintApple: '⌘K',
       dialogTitle: 'Befehle',
       dialogDescription:
         'Zur Navigation oder zu einer kurzen Rückmeldung. Es wird kein Code ausgeführt.',
@@ -100,6 +102,7 @@ export const SIGNATURE_COPY: Record<AppLocale, SignatureCopy> = {
     palette: {
       triggerLabel: 'Open commands',
       shortcutHint: 'Ctrl+K',
+      shortcutHintApple: '⌘K',
       dialogTitle: 'Commands',
       dialogDescription: 'Navigate or get a short acknowledgement. No code is executed.',
       inputLabel: 'Command',

src/app/core/content/site-config.ts

@@ -1,7 +1,15 @@
-export const SITE_CONFIG = {
+export const SITE_CONFIG: {
+  readonly personName: string;
+  readonly contactEmail: string;
+  readonly siteOrigin: string;
+  readonly cvAssetPath: string;
+  readonly cvDownloadFileName: string;
+  readonly calendarUrl: string | null;
+} = {
   personName: 'Antonio Ledebuhr',
   contactEmail: 'info@antoniolede.de',
+  siteOrigin: 'https://antoniolede.de',
   cvAssetPath: '/cv/CV.pdf',
   cvDownloadFileName: 'Antonio-Ledebuhr-CV.pdf',
   calendarUrl: null,
-} as const;
+};

src/app/core/content/site-content.ts

@@ -0,0 +1,9 @@
+import { type AppLocale } from '../i18n/locale';
+import { type SiteContent } from './content.contracts';
+import { SITE_CONTENT_DE } from './de/site';
+import { SITE_CONTENT_EN } from './en/site';
+
+export const SITE_CONTENT_DATA: Record<AppLocale, SiteContent> = {
+  de: SITE_CONTENT_DE,
+  en: SITE_CONTENT_EN,
+};

src/app/core/navigation/navigation.service.spec.ts

@@ -2,15 +2,15 @@ import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
 import { routes } from '../../app.routes';
-import { PLACEHOLDER_CONTENT } from '../content/placeholder-content';
 import { SITE_CONTENT } from '../content/content.token';
+import { SITE_CONTENT_DATA } from '../content/site-content';
 import { LocaleService } from '../i18n/locale.service';
 import { NavigationService } from './navigation.service';
 
 describe('NavigationService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
     });
   });
 

src/app/core/navigation/navigation.ts

@@ -10,7 +10,7 @@ export interface NavItem {
 export const PRIMARY_NAV: readonly NavItem[] = [
   {
     routeId: 'home',
-    label: { de: 'Start', en: 'Home' },
+    label: { de: 'Startseite', en: 'Home' },
   },
   {
     routeId: 'services',

src/app/core/platform/browser.spec.ts

@@ -1,6 +1,7 @@
 import { PLATFORM_ID } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import {
+  isApplePlatform,
   isBrowserPlatform,
   prefersCoarsePointer,
   prefersReducedMotion,
@@ -18,6 +19,7 @@ describe('browser platform helpers', () => {
       expect(prefersReducedMotion()).toBe(false);
       expect(prefersCoarsePointer()).toBe(false);
       expect(viewportMatches('(min-width: 40rem)')).toBe(false);
+      expect(isApplePlatform()).toBe(false);
     });
   });
 });

src/app/core/platform/browser.ts

@@ -17,6 +17,22 @@ export function viewportMatches(query: string): boolean {
   return mediaQueryMatches(query);
 }
 
+/**
+ * Keyboard-labelling exception: there is no CSS media query for the Command key.
+ * Used only to swap the palette shortcut hint after hydration.
+ */
+export function isApplePlatform(): boolean {
+  if (!isBrowserPlatform()) {
+    return false;
+  }
+
+  const navigatorWithHints = window.navigator as Navigator & {
+    readonly userAgentData?: { readonly platform?: string };
+  };
+  const platform = navigatorWithHints.userAgentData?.platform ?? navigatorWithHints.platform ?? '';
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+
 function mediaQueryMatches(query: string): boolean {
   if (!isBrowserPlatform() || typeof window.matchMedia !== 'function') {
     return false;

src/app/core/seo/crawl-assets.spec.ts

@@ -0,0 +1,169 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { APP_LOCALES } from '../i18n/locale';
+import { SITE_CONFIG } from '../content/site-config';
+import { CASE_STUDY_IDS } from '../content/content.contracts';
+import { prerenderablePaths, routePath } from '../routing/route-paths';
+import { absoluteUrl } from './route-metadata';
+
+const PUBLIC = join(process.cwd(), 'public');
+const EXCLUDED = /HUP|BitWiz|Cybertrading/;
+
+function readPublic(name: 'robots.txt' | 'sitemap.xml' | 'llms.txt'): string {
+  return readFileSync(join(PUBLIC, name), 'utf8');
+}
+
+function expectedCanonicals(): readonly string[] {
+  return prerenderablePaths().map((path) => absoluteUrl(path));
+}
+
+function sitemapLocs(xml: string): string[] {
+  return [...xml.matchAll(/<loc>([^<]+)<\/loc>/g)].map((match) => match[1]);
+}
+
+function sitemapAlternates(xml: string): Array<{ loc: string; hreflang: string; href: string }> {
+  const blocks = xml.split(/<url>/).slice(1);
+  const rows: Array<{ loc: string; hreflang: string; href: string }> = [];
+
+  for (const block of blocks) {
+    const loc = block.match(/<loc>([^<]+)<\/loc>/)?.[1];
+    if (!loc) {
+      throw new Error(`sitemap.xml has a <url> block without <loc>: ${block.slice(0, 120)}`);
+    }
+
+    const links = [
+      ...block.matchAll(
+        /<xhtml:link[^>]*rel="alternate"[^>]*hreflang="([^"]+)"[^>]*href="([^"]+)"/g,
+      ),
+    ];
+
+    if (links.length === 0) {
+      throw new Error(`sitemap.xml is missing xhtml alternates for ${loc}`);
+    }
+
+    for (const link of links) {
+      rows.push({ loc, hreflang: link[1], href: link[2] });
+    }
+  }
+
+  return rows;
+}
+
+function siteOriginsIn(text: string): string[] {
+  return [...text.matchAll(/(?:href|loc|Sitemap:\s*)["']?(https?:\/\/[^/\s"'<>]+)/g)].map(
+    (match) => match[1],
+  );
+}
+
+describe('crawl assets', () => {
+  it('lists every prerenderable path once and no URL outside that set', () => {
+    const xml = readPublic('sitemap.xml');
+    const expected = [...expectedCanonicals()].sort();
+    const actual = [...new Set(sitemapLocs(xml))].sort();
+
+    expect(
+      actual,
+      'sitemap.xml locs must match SITE_CONFIG.siteOrigin + prerenderablePaths()',
+    ).toEqual(expected);
+    expect(sitemapLocs(xml)).toHaveLength(expected.length);
+  });
+
+  it('keeps reciprocal hreflang alternates for de-DE, en and x-default', () => {
+    const xml = readPublic('sitemap.xml');
+    const required = ['de-DE', 'en', 'x-default'] as const;
+
+    for (const loc of sitemapLocs(xml)) {
+      const links = sitemapAlternates(xml).filter((row) => row.loc === loc);
+      const langs = links.map((row) => row.hreflang).sort();
+      expect(langs, `${loc} must have de-DE, en and x-default`).toEqual([...required].sort());
+
+      const byLang = Object.fromEntries(links.map((row) => [row.hreflang, row.href]));
+      expect(byLang['x-default'], `${loc} x-default must be the German URL`).toBe(byLang['de-DE']);
+    }
+
+    for (const locale of APP_LOCALES) {
+      for (const path of prerenderablePaths().filter((entry) =>
+        locale === 'en'
+          ? entry === '/en' || entry.startsWith('/en/')
+          : !(entry === '/en' || entry.startsWith('/en/')),
+      )) {
+        const loc = absoluteUrl(path);
+        const links = sitemapAlternates(xml).filter((row) => row.loc === loc);
+        const germanHref = links.find((row) => row.hreflang === 'de-DE')?.href;
+        const englishHref = links.find((row) => row.hreflang === 'en')?.href;
+        expect(germanHref, `${loc} is missing a de-DE alternate`).toBeTruthy();
+        expect(englishHref, `${loc} is missing an en alternate`).toBeTruthy();
+
+        const germanLinks = sitemapAlternates(xml).filter((row) => row.loc === germanHref);
+        const englishLinks = sitemapAlternates(xml).filter((row) => row.loc === englishHref);
+        expect(
+          germanLinks.find((row) => row.hreflang === 'en')?.href,
+          `${germanHref} must point back to ${englishHref}`,
+        ).toBe(englishHref);
+        expect(
+          englishLinks.find((row) => row.hreflang === 'de-DE')?.href,
+          `${englishHref} must point back to ${germanHref}`,
+        ).toBe(germanHref);
+      }
+    }
+  });
+
+  it('lists the required canonical URLs in both locales in llms.txt', () => {
+    const text = readPublic('llms.txt');
+    const required = [
+      absoluteUrl(routePath('home', 'de')),
+      absoluteUrl(routePath('home', 'en')),
+      absoluteUrl(routePath('about', 'de')),
+      absoluteUrl(routePath('about', 'en')),
+      absoluteUrl(routePath('services', 'de')),
+      absoluteUrl(routePath('services', 'en')),
+      absoluteUrl(routePath('servicesSoftware', 'de')),
+      absoluteUrl(routePath('servicesSoftware', 'en')),
+      absoluteUrl(routePath('servicesHardwareNetwork', 'de')),
+      absoluteUrl(routePath('servicesHardwareNetwork', 'en')),
+      absoluteUrl(routePath('servicesClusters', 'de')),
+      absoluteUrl(routePath('servicesClusters', 'en')),
+      absoluteUrl(routePath('servicesAi', 'de')),
+      absoluteUrl(routePath('servicesAi', 'en')),
+      absoluteUrl(routePath('projects', 'de')),
+      absoluteUrl(routePath('projects', 'en')),
+      ...CASE_STUDY_IDS.flatMap((id) => [
+        `${absoluteUrl(routePath('projects', 'de'))}#${id}`,
+        `${absoluteUrl(routePath('projects', 'en'))}#${id}`,
+      ]),
+      absoluteUrl(routePath('contact', 'de')),
+      absoluteUrl(routePath('contact', 'en')),
+      absoluteUrl(routePath('stack', 'de')),
+      absoluteUrl(routePath('stack', 'en')),
+      absoluteUrl(routePath('imprint', 'de')),
+      absoluteUrl(routePath('imprint', 'en')),
+      absoluteUrl(routePath('privacy', 'de')),
+      absoluteUrl(routePath('privacy', 'en')),
+    ];
+
+    for (const url of required) {
+      expect(text.includes(url), `llms.txt is missing ${url}`).toBe(true);
+    }
+  });
+
+  it('points robots.txt at the sitemap on the canonical origin', () => {
+    const robots = readPublic('robots.txt');
+    expect(robots, 'robots.txt must reference the sitemap at SITE_CONFIG.siteOrigin').toContain(
+      `Sitemap: ${SITE_CONFIG.siteOrigin}/sitemap.xml`,
+    );
+    expect(robots).toMatch(/User-agent:\s*\*/);
+    expect(robots).not.toMatch(/Disallow:\s+\S+/);
+  });
+
+  it('uses only SITE_CONFIG.siteOrigin and never names excluded stations', () => {
+    for (const name of ['robots.txt', 'sitemap.xml', 'llms.txt'] as const) {
+      const text = readPublic(name);
+      const origins = siteOriginsIn(text);
+      const unexpected = origins.filter((origin) => origin !== SITE_CONFIG.siteOrigin);
+      expect(unexpected, `${name} contains an origin other than ${SITE_CONFIG.siteOrigin}`).toEqual(
+        [],
+      );
+      expect(EXCLUDED.test(text), `${name} contains an excluded station name`).toBe(false);
+    }
+  });
+});

src/app/core/seo/route-metadata.spec.ts

@@ -0,0 +1,69 @@
+import { SITE_CONTENT_DATA } from '../content/site-content';
+import { SITE_CONFIG } from '../content/site-config';
+import { APP_LOCALES } from '../i18n/locale';
+import { ROUTE_IDS } from '../routing/route-ids';
+import { routePath } from '../routing/route-paths';
+import { buildRouteMetadata, OG_LOCALE } from './route-metadata';
+
+describe('buildRouteMetadata', () => {
+  it('derives title, description, canonical, alternates, Open Graph and Twitter for every route', () => {
+    for (const locale of APP_LOCALES) {
+      for (const routeId of ROUTE_IDS) {
+        const page = SITE_CONTENT_DATA[locale].pages[routeId];
+        const metadata = buildRouteMetadata(routeId, locale, SITE_CONTENT_DATA);
+        const other = locale === 'de' ? 'en' : 'de';
+
+        expect(metadata.title, `${locale}.${routeId} title`).toBe(page.title);
+        expect(metadata.description, `${locale}.${routeId} description`).toBe(page.description);
+        expect(metadata.openGraph.type).toBe('website');
+        expect(metadata.openGraph.title).toBe(page.title);
+        expect(metadata.openGraph.description).toBe(page.description);
+        expect(metadata.openGraph.siteName).toBe(SITE_CONFIG.personName);
+        expect(metadata.openGraph.locale).toBe(OG_LOCALE[locale]);
+        expect(metadata.openGraph.localeAlternate).toBe(OG_LOCALE[other]);
+        expect(metadata.twitter.card).toBe('summary');
+        expect(metadata.twitter.title).toBe(page.title);
+        expect(metadata.twitter.description).toBe(page.description);
+
+        if (routeId === 'notFound') {
+          expect(metadata.canonical, `${locale}.notFound must have no canonical`).toBeNull();
+          expect(metadata.alternates, `${locale}.notFound must have no alternates`).toEqual([]);
+          expect(metadata.openGraph.url).toBeNull();
+          expect(metadata.robots).toBe('noindex, follow');
+          continue;
+        }
+
+        const expectedCanonical = `${SITE_CONFIG.siteOrigin}${routePath(routeId, locale)}`;
+        expect(metadata.canonical, `${locale}.${routeId} canonical`).toBe(expectedCanonical);
+        expect(metadata.openGraph.url).toBe(expectedCanonical);
+        expect(metadata.robots).toBe('index, follow');
+
+        const byLang = Object.fromEntries(
+          metadata.alternates.map((entry) => [entry.hreflang, entry.href]),
+        );
+        expect(Object.keys(byLang).sort()).toEqual(['de-DE', 'en', 'x-default']);
+        expect(byLang['de-DE']).toBe(`${SITE_CONFIG.siteOrigin}${routePath(routeId, 'de')}`);
+        expect(byLang['en']).toBe(`${SITE_CONFIG.siteOrigin}${routePath(routeId, 'en')}`);
+        expect(byLang['x-default']).toBe(byLang['de-DE']);
+      }
+    }
+  });
+
+  it('keeps German and English alternates reciprocal for every public route', () => {
+    for (const routeId of ROUTE_IDS.filter((id) => id !== 'notFound')) {
+      const german = buildRouteMetadata(routeId, 'de', SITE_CONTENT_DATA);
+      const english = buildRouteMetadata(routeId, 'en', SITE_CONTENT_DATA);
+      const germanHref = german.alternates.find((entry) => entry.hreflang === 'de-DE')?.href;
+      const englishHref = german.alternates.find((entry) => entry.hreflang === 'en')?.href;
+
+      expect(english.alternates.find((entry) => entry.hreflang === 'de-DE')?.href).toBe(germanHref);
+      expect(english.alternates.find((entry) => entry.hreflang === 'en')?.href).toBe(englishHref);
+      expect(german.alternates.find((entry) => entry.hreflang === 'x-default')?.href).toBe(
+        germanHref,
+      );
+      expect(english.alternates.find((entry) => entry.hreflang === 'x-default')?.href).toBe(
+        germanHref,
+      );
+    }
+  });
+});

src/app/core/seo/route-metadata.ts

@@ -0,0 +1,61 @@
+import { type SiteContent } from '../content/content.contracts';
+import { SITE_CONFIG } from '../content/site-config';
+import { type AppLocale } from '../i18n/locale';
+import { otherLocale } from '../i18n/locale';
+import { type RouteId } from '../routing/route-ids';
+import { routePath } from '../routing/route-paths';
+import { type RouteMetadata } from './seo.contracts';
+
+export const OG_LOCALE: Record<AppLocale, string> = {
+  de: 'de_DE',
+  en: 'en_US',
+};
+
+export function absoluteUrl(path: string): string {
+  return `${SITE_CONFIG.siteOrigin}${path === '/' ? '/' : path}`;
+}
+
+export function canonicalUrl(routeId: RouteId, locale: AppLocale): string {
+  return absoluteUrl(routePath(routeId, locale));
+}
+
+export function buildRouteMetadata(
+  routeId: RouteId,
+  locale: AppLocale,
+  content: Record<AppLocale, SiteContent>,
+): RouteMetadata {
+  const page = content[locale].pages[routeId];
+  const title = page.title;
+  const description = page.description;
+  const isNotFound = routeId === 'notFound';
+  const canonical = isNotFound ? null : canonicalUrl(routeId, locale);
+  const alternateLocale = otherLocale(locale);
+
+  return {
+    title,
+    description,
+    canonical,
+    alternates: isNotFound
+      ? []
+      : [
+          { hreflang: 'de-DE', href: canonicalUrl(routeId, 'de') },
+          { hreflang: 'en', href: canonicalUrl(routeId, 'en') },
+          { hreflang: 'x-default', href: canonicalUrl(routeId, 'de') },
+        ],
+    openGraph: {
+      type: 'website',
+      title,
+      description,
+      url: canonical,
+      siteName: SITE_CONFIG.personName,
+      locale: OG_LOCALE[locale],
+      localeAlternate: OG_LOCALE[alternateLocale],
+    },
+    twitter: {
+      card: 'summary',
+      title,
+      description,
+    },
+    robots: isNotFound ? 'noindex, follow' : 'index, follow',
+  };
+}

src/app/core/seo/seo-title.strategy.ts

@@ -0,0 +1,30 @@
+import { inject, Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
+import { SITE_CONTENT } from '../content/content.token';
+import { isAppRouteData } from '../routing/app-route-data';
+import { buildRouteMetadata } from './route-metadata';
+import { SeoService } from './seo.service';
+
+@Injectable()
+export class SeoTitleStrategy extends TitleStrategy {
+  private readonly title = inject(Title);
+  private readonly seo = inject(SeoService);
+  private readonly content = inject(SITE_CONTENT);
+
+  override updateTitle(snapshot: RouterStateSnapshot): void {
+    let current = snapshot.root;
+
+    while (current.firstChild) {
+      current = current.firstChild;
+    }
+
+    if (!isAppRouteData(current.data)) {
+      return;
+    }
+
+    const metadata = buildRouteMetadata(current.data.routeId, current.data.locale, this.content);
+    this.title.setTitle(metadata.title);
+    this.seo.apply(current.data.routeId, current.data.locale);
+  }
+}

src/app/core/seo/seo.contracts.ts

@@ -0,0 +1,30 @@
+export interface RouteAlternate {
+  readonly hreflang: string;
+  readonly href: string;
+}
+
+export interface OpenGraphMetadata {
+  readonly type: 'website';
+  readonly title: string;
+  readonly description: string;
+  readonly url: string | null;
+  readonly siteName: string;
+  readonly locale: string;
+  readonly localeAlternate: string;
+}
+
+export interface TwitterMetadata {
+  readonly card: 'summary';
+  readonly title: string;
+  readonly description: string;
+}
+
+export interface RouteMetadata {
+  readonly title: string;
+  readonly description: string;
+  readonly canonical: string | null;
+  readonly alternates: readonly RouteAlternate[];
+  readonly openGraph: OpenGraphMetadata;
+  readonly twitter: TwitterMetadata;
+  readonly robots: string;
+}

src/app/core/seo/seo.service.spec.ts

@@ -0,0 +1,61 @@
+import { TestBed } from '@angular/core/testing';
+import { Title } from '@angular/platform-browser';
+import { SITE_CONTENT } from '../content/content.token';
+import { SITE_CONTENT_DATA } from '../content/site-content';
+import { SITE_CONFIG } from '../content/site-config';
+import { routePath } from '../routing/route-paths';
+import { SeoService } from './seo.service';
+
+describe('SeoService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SeoService, { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+  });
+
+  afterEach(() => {
+    document.head.querySelectorAll('[data-seo]').forEach((node) => node.remove());
+    document.head
+      .querySelectorAll(
+        'meta[name="description"], meta[name="robots"], meta[name^="twitter:"], meta[property^="og:"]',
+      )
+      .forEach((node) => node.remove());
+  });
+
+  it('applies two routes in sequence without duplicating owned head elements', () => {
+    const seo = TestBed.inject(SeoService);
+    const title = TestBed.inject(Title);
+
+    seo.apply('home', 'de');
+    seo.apply('projects', 'en');
+
+    expect(title.getTitle()).toBe(SITE_CONTENT_DATA.en.pages.projects.title);
+    expect(document.querySelectorAll('link[rel="canonical"]')).toHaveLength(1);
+    expect(document.querySelectorAll('link[rel="alternate"][hreflang]')).toHaveLength(3);
+    expect(document.querySelectorAll('meta[name="description"]')).toHaveLength(1);
+    expect(document.querySelectorAll('meta[name="robots"]')).toHaveLength(1);
+    expect(document.querySelectorAll('script[type="application/ld+json"]')).toHaveLength(1);
+
+    const canonical = document.querySelector('link[rel="canonical"]')?.getAttribute('href');
+    expect(canonical).toBe(`${SITE_CONFIG.siteOrigin}${routePath('projects', 'en')}`);
+    expect(document.querySelector('meta[name="description"]')?.getAttribute('content')).toBe(
+      SITE_CONTENT_DATA.en.pages.projects.description,
+    );
+    expect(document.querySelector('meta[name="robots"]')?.getAttribute('content')).toBe(
+      'index, follow',
+    );
+  });
+
+  it('drops canonical and alternate links for notFound and sets noindex', () => {
+    const seo = TestBed.inject(SeoService);
+    seo.apply('home', 'de');
+    seo.apply('notFound', 'de');
+
+    expect(document.querySelectorAll('link[rel="canonical"]')).toHaveLength(0);
+    expect(document.querySelectorAll('link[rel="alternate"][hreflang]')).toHaveLength(0);
+    expect(document.querySelector('meta[name="robots"]')?.getAttribute('content')).toBe(
+      'noindex, follow',
+    );
+    expect(document.querySelectorAll('script[type="application/ld+json"]')).toHaveLength(1);
+  });
+});

src/app/core/seo/seo.service.ts

@@ -0,0 +1,116 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, Injectable } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { SITE_CONTENT } from '../content/content.token';
+import { type AppLocale } from '../i18n/locale';
+import { type RouteId } from '../routing/route-ids';
+import { buildRouteMetadata } from './route-metadata';
+import { type RouteMetadata } from './seo.contracts';
+import { buildJsonLdGraph, serializeJsonLd } from './structured-data';
+
+const SEO_OWNED = 'data-seo';
+
+@Injectable({ providedIn: 'root' })
+export class SeoService {
+  private readonly document = inject(DOCUMENT);
+  private readonly title = inject(Title);
+  private readonly meta = inject(Meta);
+  private readonly content = inject(SITE_CONTENT);
+
+  apply(routeId: RouteId, locale: AppLocale): void {
+    const metadata = buildRouteMetadata(routeId, locale, this.content);
+    this.title.setTitle(metadata.title);
+    this.updateMeta(metadata);
+    this.replaceOwnedElements(routeId, locale, metadata);
+  }
+
+  private updateMeta(metadata: RouteMetadata): void {
+    this.meta.updateTag(
+      { name: 'description', content: metadata.description },
+      'name="description"',
+    );
+    this.meta.updateTag({ name: 'robots', content: metadata.robots }, 'name="robots"');
+    this.meta.updateTag(
+      { property: 'og:type', content: metadata.openGraph.type },
+      'property="og:type"',
+    );
+    this.meta.updateTag(
+      { property: 'og:title', content: metadata.openGraph.title },
+      'property="og:title"',
+    );
+    this.meta.updateTag(
+      { property: 'og:description', content: metadata.openGraph.description },
+      'property="og:description"',
+    );
+    this.meta.updateTag(
+      { property: 'og:site_name', content: metadata.openGraph.siteName },
+      'property="og:site_name"',
+    );
+    this.meta.updateTag(
+      { property: 'og:locale', content: metadata.openGraph.locale },
+      'property="og:locale"',
+    );
+    this.meta.updateTag(
+      { property: 'og:locale:alternate', content: metadata.openGraph.localeAlternate },
+      'property="og:locale:alternate"',
+    );
+    this.meta.updateTag(
+      { name: 'twitter:card', content: metadata.twitter.card },
+      'name="twitter:card"',
+    );
+    this.meta.updateTag(
+      { name: 'twitter:title', content: metadata.twitter.title },
+      'name="twitter:title"',
+    );
+    this.meta.updateTag(
+      { name: 'twitter:description', content: metadata.twitter.description },
+      'name="twitter:description"',
+    );
+
+    if (metadata.openGraph.url) {
+      this.meta.updateTag(
+        { property: 'og:url', content: metadata.openGraph.url },
+        'property="og:url"',
+      );
+    } else {
+      this.meta.removeTag('property="og:url"');
+    }
+  }
+
+  private replaceOwnedElements(routeId: RouteId, locale: AppLocale, metadata: RouteMetadata): void {
+    const head = this.document.head;
+
+    for (const owned of Array.from(head.querySelectorAll(`[${SEO_OWNED}]`))) {
+      owned.remove();
+    }
+
+    if (metadata.canonical) {
+      this.appendLink(head, { rel: 'canonical', href: metadata.canonical });
+    }
+
+    for (const alternate of metadata.alternates) {
+      this.appendLink(head, {
+        rel: 'alternate',
+        hreflang: alternate.hreflang,
+        href: alternate.href,
+      });
+    }
+
+    const script = this.document.createElement('script');
+    script.type = 'application/ld+json';
+    script.setAttribute(SEO_OWNED, '');
+    script.textContent = serializeJsonLd(buildJsonLdGraph(routeId, locale, this.content));
+    head.appendChild(script);
+  }
+
+  private appendLink(head: HTMLHeadElement, attributes: Record<string, string>): void {
+    const link = this.document.createElement('link');
+    link.setAttribute(SEO_OWNED, '');
+
+    for (const [name, value] of Object.entries(attributes)) {
+      link.setAttribute(name, value);
+    }
+
+    head.appendChild(link);
+  }
+}

src/app/core/seo/structured-data.spec.ts

@@ -0,0 +1,111 @@
+import { SITE_CONTENT_DATA } from '../content/site-content';
+import { APP_LOCALES } from '../i18n/locale';
+import { ROUTE_IDS, type RouteId } from '../routing/route-ids';
+import { buildJsonLdGraph, serializeJsonLd } from './structured-data';
+
+const FORBIDDEN_FIELDS = [
+  'aggregateRating',
+  'review',
+  'offers',
+  'price',
+  'priceRange',
+  'worksFor',
+  'employee',
+  'sponsor',
+  'address',
+  'geo',
+  'openingHours',
+  'telephone',
+  'foundingDate',
+  'numberOfEmployees',
+] as const;
+
+const SERVICE_ROUTES: readonly RouteId[] = [
+  'services',
+  'servicesSoftware',
+  'servicesHardwareNetwork',
+  'servicesClusters',
+  'servicesAi',
+];
+
+function collectKeys(value: unknown, keys = new Set<string>()): Set<string> {
+  if (Array.isArray(value)) {
+    value.forEach((entry) => collectKeys(entry, keys));
+    return keys;
+  }
+
+  if (value && typeof value === 'object') {
+    for (const [key, child] of Object.entries(value)) {
+      keys.add(key);
+      collectKeys(child, keys);
+    }
+  }
+
+  return keys;
+}
+
+function graphTypes(routeId: RouteId, locale: (typeof APP_LOCALES)[number]): string[] {
+  const graph = buildJsonLdGraph(routeId, locale, SITE_CONTENT_DATA);
+  return graph['@graph'].map((node) => {
+    if (node && typeof node === 'object' && !Array.isArray(node) && '@type' in node) {
+      return String(node['@type']);
+    }
+
+    return '';
+  });
+}
+
+describe('JSON-LD builders', () => {
+  it('emits a schema.org @graph with the expected types per route', () => {
+    for (const locale of APP_LOCALES) {
+      const home = buildJsonLdGraph('home', locale, SITE_CONTENT_DATA);
+      expect(home['@context']).toBe('https://schema.org');
+      expect(graphTypes('home', locale)).toEqual(['Person', 'ProfessionalService']);
+
+      for (const routeId of SERVICE_ROUTES) {
+        expect(graphTypes(routeId, locale), `${locale}.${routeId}`).toEqual(['Service']);
+      }
+
+      expect(graphTypes('projects', locale)).toEqual([
+        'CreativeWork',
+        'CreativeWork',
+        'CreativeWork',
+        'CreativeWork',
+      ]);
+
+      for (const routeId of ROUTE_IDS.filter(
+        (id) => id !== 'home' && id !== 'projects' && !SERVICE_ROUTES.includes(id),
+      )) {
+        expect(graphTypes(routeId, locale), `${locale}.${routeId}`).toEqual(['WebPage']);
+      }
+    }
+  });
+
+  it('escapes <, > and & inside the serialized payload', () => {
+    const serialized = serializeJsonLd({
+      name: 'A <script>alert(1)</script> & more',
+    });
+
+    expect(serialized).toContain('\\u003c');
+    expect(serialized).toContain('\\u003e');
+    expect(serialized).toContain('\\u0026');
+    expect(serialized).not.toContain('<');
+    expect(serialized).not.toContain('>');
+    expect(serialized).not.toContain('&');
+  });
+
+  it('never invents forbidden fields or excluded station names', () => {
+    for (const locale of APP_LOCALES) {
+      for (const routeId of ROUTE_IDS) {
+        const graph = buildJsonLdGraph(routeId, locale, SITE_CONTENT_DATA);
+        const keys = collectKeys(graph);
+        for (const field of FORBIDDEN_FIELDS) {
+          expect(keys.has(field), `${locale}.${routeId} contains ${field}`).toBe(false);
+        }
+
+        const serialized = serializeJsonLd(graph);
+        expect(serialized).not.toMatch(/HUP|BitWiz|Cybertrading/);
+      }
+    }
+  });
+});

src/app/core/seo/structured-data.ts

@@ -0,0 +1,149 @@
+import { CASE_STUDY_IDS, type SiteContent } from '../content/content.contracts';
+import { SITE_CONFIG } from '../content/site-config';
+import { LOCALE_HTML_LANG, type AppLocale } from '../i18n/locale';
+import { type RouteId } from '../routing/route-ids';
+import { canonicalUrl } from './route-metadata';
+
+const SCHEMA_CONTEXT = 'https://schema.org';
+
+const SERVICE_ROUTE_IDS: readonly RouteId[] = [
+  'services',
+  'servicesSoftware',
+  'servicesHardwareNetwork',
+  'servicesClusters',
+  'servicesAi',
+];
+
+export type JsonLdValue =
+  | string
+  | number
+  | boolean
+  | null
+  | readonly JsonLdValue[]
+  | { readonly [key: string]: JsonLdValue };
+
+export interface JsonLdGraph {
+  readonly '@context': typeof SCHEMA_CONTEXT;
+  readonly '@graph': readonly JsonLdValue[];
+}
+
+function personNode(locale: AppLocale, content: Record<AppLocale, SiteContent>): JsonLdValue {
+  return {
+    '@type': 'Person',
+    name: SITE_CONFIG.personName,
+    jobTitle: content[locale].seo.jobTitle,
+    email: SITE_CONFIG.contactEmail,
+    url: canonicalUrl('home', locale),
+    description: content[locale].pages.home.description,
+  };
+}
+
+function professionalServiceNode(
+  locale: AppLocale,
+  content: Record<AppLocale, SiteContent>,
+): JsonLdValue {
+  const seo = content[locale].seo;
+
+  return {
+    '@type': 'ProfessionalService',
+    name: seo.professionalServiceName,
+    description: seo.professionalServiceDescription,
+    url: canonicalUrl('home', locale),
+    provider: {
+      '@type': 'Person',
+      name: SITE_CONFIG.personName,
+    },
+  };
+}
+
+function serviceNode(
+  routeId: RouteId,
+  locale: AppLocale,
+  content: Record<AppLocale, SiteContent>,
+): JsonLdValue {
+  const page = content[locale].pages[routeId];
+
+  return {
+    '@type': 'Service',
+    name: page.hero.headline,
+    description: page.description,
+    url: canonicalUrl(routeId, locale),
+    provider: {
+      '@type': 'Person',
+      name: SITE_CONFIG.personName,
+    },
+  };
+}
+
+function projectWorks(
+  locale: AppLocale,
+  content: Record<AppLocale, SiteContent>,
+): readonly JsonLdValue[] {
+  const projectsUrl = canonicalUrl('projects', locale);
+
+  return CASE_STUDY_IDS.map((caseId) => {
+    const study = content[locale].cases[caseId];
+
+    return {
+      '@type': 'CreativeWork',
+      name: study.headline,
+      description: study.summary,
+      url: `${projectsUrl}#${caseId}`,
+    };
+  });
+}
+
+function webPageNode(
+  routeId: RouteId,
+  locale: AppLocale,
+  content: Record<AppLocale, SiteContent>,
+): JsonLdValue {
+  const page = content[locale].pages[routeId];
+  const node: { [key: string]: JsonLdValue } = {
+    '@type': 'WebPage',
+    name: page.title,
+    description: page.description,
+    inLanguage: LOCALE_HTML_LANG[locale],
+    isPartOf: {
+      '@type': 'WebSite',
+      name: SITE_CONFIG.personName,
+      url: SITE_CONFIG.siteOrigin + '/',
+    },
+  };
+
+  if (routeId !== 'notFound') {
+    node['url'] = canonicalUrl(routeId, locale);
+  }
+
+  return node;
+}
+
+export function buildJsonLdGraph(
+  routeId: RouteId,
+  locale: AppLocale,
+  content: Record<AppLocale, SiteContent>,
+): JsonLdGraph {
+  let graph: readonly JsonLdValue[];
+
+  if (routeId === 'home') {
+    graph = [personNode(locale, content), professionalServiceNode(locale, content)];
+  } else if (SERVICE_ROUTE_IDS.includes(routeId)) {
+    graph = [serviceNode(routeId, locale, content)];
+  } else if (routeId === 'projects') {
+    graph = projectWorks(locale, content);
+  } else {
+    graph = [webPageNode(routeId, locale, content)];
+  }
+
+  return {
+    '@context': SCHEMA_CONTEXT,
+    '@graph': graph,
+  };
+}
+
+export function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

src/app/features/about/about.html

@@ -1,3 +1,8 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+    }
+  </div>
 }

src/app/features/about/about.ts

@@ -1,12 +1,14 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { ContentSection } from '../../shared/content-section/content-section';
+import { PageHero } from '../../shared/page-hero/page-hero';
 
 @Component({
   selector: 'app-about-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero, ContentSection],
   templateUrl: './about.html',
+  styleUrl: '../../shared/page-shell.scss',
 })
 export class AboutPage {
   protected readonly page = inject(ContentService).page('about');

src/app/features/contact/contact.html

@@ -1,3 +1,9 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+    }
+    <app-contact-briefing [copy]="copy" />
+  </div>
 }

src/app/features/contact/contact.ts

@@ -1,13 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { ContactBriefing } from '../../shared/contact-briefing/contact-briefing';
+import { ContentSection } from '../../shared/content-section/content-section';
+import { PageHero } from '../../shared/page-hero/page-hero';
 
 @Component({
   selector: 'app-contact-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero, ContentSection, ContactBriefing],
   templateUrl: './contact.html',
+  styleUrl: '../../shared/page-shell.scss',
 })
 export class ContactPage {
-  protected readonly page = inject(ContentService).page('contact');
+  protected readonly page = inject(ContentService).contact();
 }

src/app/features/home/home.html

@@ -1,3 +1,42 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+      @if (section.id === 'profile') {
+        <ul class="stack">
+          @for (line of copy.profile; track $index) {
+            <li>{{ line }}</li>
+          }
+        </ul>
+        <app-metric-list [metrics]="copy.metrics" [labelledBy]="'section-profile'" />
+        <div appReveal class="home-reveal">
+          <app-systems-map
+            [heading]="copy.systemsMap.heading"
+            [intro]="copy.systemsMap.intro"
+            [headingLevel]="2"
+          />
+        </div>
+      }
+      @if (section.id === 'featured-cases') {
+        <div appReveal class="home-reveal stack">
+          @for (caseStudy of featuredCases(); track caseStudy.id) {
+            <app-case-card [caseStudy]="caseStudy" />
+          }
+        </div>
+      }
+    }
+    @for (audience of copy.audiences; track audience.id) {
+      <section class="stack" [id]="audience.id" [attr.aria-labelledby]="'audience-' + audience.id">
+        <h2 [id]="'audience-' + audience.id">{{ audience.headline }}</h2>
+        <p>{{ audience.body }}</p>
+        <ul>
+          @for (bullet of audience.bullets; track $index) {
+            <li>{{ bullet }}</li>
+          }
+        </ul>
+        <app-cta-row [ctas]="audience.ctas" />
+      </section>
+    }
+  </div>
 }

src/app/features/home/home.scss

@@ -0,0 +1,18 @@
+@use '../../shared/motion/reveal';
+@use '../../shared/page-shell';
+
+.home-reveal {
+  @include reveal.reveal-target;
+}
+
+.page h2 {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: 600;
+}
+
+.page p,
+.page li {
+  max-width: 40rem;
+  color: var(--color-text-muted);
+}

src/app/features/home/home.ts

@@ -1,13 +1,26 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { CaseCard } from '../../shared/case-card/case-card';
+import { ContentSection } from '../../shared/content-section/content-section';
+import { CtaRow } from '../../shared/cta-row/cta-row';
+import { MetricList } from '../../shared/metric-list/metric-list';
+import { RevealDirective } from '../../shared/motion/reveal.directive';
+import { PageHero } from '../../shared/page-hero/page-hero';
+import { SystemsMap } from '../../shared/systems-map/systems-map';
 
 @Component({
   selector: 'app-home-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero, ContentSection, MetricList, CaseCard, CtaRow, SystemsMap, RevealDirective],
   templateUrl: './home.html',
+  styleUrl: './home.scss',
 })
 export class HomePage {
-  protected readonly page = inject(ContentService).page('home');
+  private readonly content = inject(ContentService);
+
+  protected readonly page = this.content.home();
+  protected readonly featuredCases = computed(() => {
+    const ids = this.page().featuredCaseIds;
+    return ids.map((id) => this.content.caseStudy(id)());
+  });
 }

src/app/features/imprint/imprint.html

@@ -1,3 +1,17 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    <app-legal-review-notice [notice]="copy.reviewNotice" [todos]="copy.reviewTodos" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+    }
+    @for (legal of copy.legalSections; track legal.id) {
+      <section class="stack" [attr.aria-labelledby]="'legal-' + legal.id">
+        <h2 [id]="'legal-' + legal.id">{{ legal.title }}</h2>
+        @for (paragraph of legal.body; track $index) {
+          <p>{{ paragraph }}</p>
+        }
+      </section>
+    }
+  </div>
 }

src/app/features/imprint/imprint.ts

@@ -1,13 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { ContentSection } from '../../shared/content-section/content-section';
+import { LegalReviewNotice } from '../../shared/legal-review-notice/legal-review-notice';
+import { PageHero } from '../../shared/page-hero/page-hero';
 
 @Component({
   selector: 'app-imprint-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero, LegalReviewNotice, ContentSection],
   templateUrl: './imprint.html',
+  styleUrl: '../../shared/page-shell.scss',
 })
 export class ImprintPage {
-  protected readonly page = inject(ContentService).page('imprint');
+  protected readonly page = inject(ContentService).legal('imprint');
 }

src/app/features/legal-review.spec.ts

@@ -0,0 +1,39 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { routes } from '../app.routes';
+import { SITE_CONTENT } from '../core/content/content.token';
+import { SITE_CONTENT_DATA } from '../core/content/site-content';
+
+describe('legal review notice', () => {
+  it('renders the review notice on legal pages and keeps it off the home page', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+
+    for (const [path, locale, legalId] of [
+      ['/impressum', 'de', 'imprint'],
+      ['/en/legal-notice', 'en', 'imprint'],
+      ['/datenschutz', 'de', 'privacy'],
+      ['/en/privacy', 'en', 'privacy'],
+    ] as const) {
+      await harness.navigateByUrl(path);
+      const text = harness.routeNativeElement?.textContent ?? '';
+      const legal = SITE_CONTENT_DATA[locale].legal[legalId];
+      expect(text).toContain(legal.reviewNotice);
+      expect(legal.reviewTodos.some((todo) => text.includes(todo))).toBe(true);
+    }
+
+    await harness.navigateByUrl('/');
+    expect(harness.routeNativeElement?.textContent).not.toContain(
+      SITE_CONTENT_DATA.de.legal.imprint.reviewNotice,
+    );
+
+    await harness.navigateByUrl('/en');
+    expect(harness.routeNativeElement?.textContent).not.toContain(
+      SITE_CONTENT_DATA.en.legal.imprint.reviewNotice,
+    );
+  });
+});

src/app/features/not-found/not-found.html

@@ -1,3 +1,5 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+  </div>
 }

src/app/features/not-found/not-found.ts

@@ -1,12 +1,13 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { PageHero } from '../../shared/page-hero/page-hero';
 
 @Component({
   selector: 'app-not-found-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero],
   templateUrl: './not-found.html',
+  styleUrl: '../../shared/page-shell.scss',
 })
 export class NotFoundPage {
   protected readonly page = inject(ContentService).page('notFound');

src/app/features/page-rendering.spec.ts

@@ -0,0 +1,184 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { routes } from '../app.routes';
+import { SITE_CONTENT } from '../core/content/content.token';
+import { SITE_CONTENT_DATA } from '../core/content/site-content';
+import { SITE_CONFIG } from '../core/content/site-config';
+import { CASE_STUDY_IDS } from '../core/content/content.contracts';
+import { APP_LOCALES } from '../core/i18n/locale';
+import { routePath } from '../core/routing/route-paths';
+
+function headingLevel(element: Element): number {
+  return Number(element.tagName.slice(1));
+}
+
+function accessibleName(root: HTMLElement, element: Element): string {
+  const labelledBy = element.getAttribute('aria-labelledby');
+  if (labelledBy) {
+    return labelledBy
+      .split(/\s+/)
+      .map((id) => root.querySelector(`[id="${id}"]`)?.textContent ?? '')
+      .join(' ')
+      .trim();
+  }
+
+  return (element.getAttribute('aria-label') ?? element.textContent ?? '').trim();
+}
+
+function assertNoDanglingReferences(root: HTMLElement): void {
+  for (const attribute of ['aria-labelledby', 'aria-describedby'] as const) {
+    for (const element of root.querySelectorAll(`[${attribute}]`)) {
+      const ids = (element.getAttribute(attribute) ?? '').split(/\s+/).filter(Boolean);
+      for (const id of ids) {
+        expect(root.querySelector(`[id="${id}"]`), `${attribute} -> #${id}`).toBeTruthy();
+      }
+    }
+  }
+}
+
+function assertPageSemantics(root: HTMLElement): void {
+  const headings = [...root.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+  expect(headings.filter((heading) => heading.tagName === 'H1')).toHaveLength(1);
+
+  let previous = 1;
+  for (const heading of headings) {
+    const level = headingLevel(heading);
+    expect(level).toBeLessThanOrEqual(previous + 1);
+    previous = level;
+  }
+
+  for (const link of root.querySelectorAll('a')) {
+    expect(accessibleName(root, link).length).toBeGreaterThan(0);
+  }
+
+  for (const region of root.querySelectorAll('section, article')) {
+    expect(accessibleName(root, region).length).toBeGreaterThan(0);
+  }
+}
+
+describe('page rendering, semantics and accessibility', () => {
+  it('renders home, a service detail page, projects and 404 in both locales', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+    const paths = [
+      '/',
+      '/en',
+      '/leistungen/software',
+      '/en/services/software',
+      '/projekte',
+      '/en/projects',
+      '/missing-route',
+      '/en/missing-route',
+    ];
+
+    for (const path of paths) {
+      await harness.navigateByUrl(path);
+      const root = harness.routeNativeElement as HTMLElement;
+      expect(root).toBeTruthy();
+      assertPageSemantics(root);
+      assertNoDanglingReferences(root);
+    }
+  });
+
+  it('keeps every aria-labelledby and aria-describedby target in the document', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+    const paths = [
+      '/',
+      '/en',
+      '/projekte',
+      '/en/projects',
+      '/leistungen/ai-integration',
+      '/en/services/ai-integration',
+      '/kontakt',
+      '/en/contact',
+      '/stack',
+      '/en/stack',
+    ];
+
+    for (const path of paths) {
+      await harness.navigateByUrl(path);
+      const root = harness.routeNativeElement as HTMLElement;
+      expect(root).toBeTruthy();
+      assertNoDanglingReferences(root);
+    }
+  });
+
+  it('exposes case anchors, audience entries and the CV download', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+
+    for (const path of ['/projekte', '/en/projects']) {
+      await harness.navigateByUrl(path);
+      const root = harness.routeNativeElement as HTMLElement;
+      for (const caseId of CASE_STUDY_IDS) {
+        expect(root.querySelector(`#${caseId}`)).toBeTruthy();
+      }
+    }
+
+    for (const path of ['/', '/en']) {
+      await harness.navigateByUrl(path);
+      const root = harness.routeNativeElement as HTMLElement;
+      expect(root.querySelector('#recruiters')).toBeTruthy();
+      expect(root.querySelector('#companies')).toBeTruthy();
+      expect(root.querySelector(`a[href="${SITE_CONFIG.cvAssetPath}"]`)).toBeTruthy();
+    }
+
+    expect(SITE_CONTENT_DATA.de.pages.notFound.hero.headline).toBeTruthy();
+  });
+
+  it('places the Systems Map between the profile block and the featured cases', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+
+    for (const path of ['/', '/en']) {
+      await harness.navigateByUrl(path);
+      const root = harness.routeNativeElement as HTMLElement;
+      const metrics = root.querySelector('app-metric-list');
+      const map = root.querySelector('app-systems-map');
+      const firstCase = root.querySelector('app-case-card');
+
+      expect(metrics).toBeTruthy();
+      expect(map).toBeTruthy();
+      expect(firstCase).toBeTruthy();
+
+      const position = metrics!.compareDocumentPosition(map!);
+      expect(position & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+      const afterMap = map!.compareDocumentPosition(firstCase!);
+      expect(afterMap & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+
+      assertPageSemantics(root);
+    }
+  });
+
+  it('sends the software service case CTA to the innofocus project anchor', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+
+    for (const locale of APP_LOCALES) {
+      await harness.navigateByUrl(routePath('servicesSoftware', locale));
+      const root = harness.routeNativeElement as HTMLElement;
+      const expected = `${routePath('projects', locale)}#innofocus`;
+      const hrefs = [...root.querySelectorAll('a')].map(
+        (anchor) => anchor.getAttribute('href') ?? '',
+      );
+      expect(hrefs.some((href) => href.endsWith(expected))).toBe(true);
+    }
+  });
+});

src/app/features/privacy/privacy.html

@@ -1,3 +1,17 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    <app-legal-review-notice [notice]="copy.reviewNotice" [todos]="copy.reviewTodos" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+    }
+    @for (legal of copy.legalSections; track legal.id) {
+      <section class="stack" [attr.aria-labelledby]="'legal-' + legal.id">
+        <h2 [id]="'legal-' + legal.id">{{ legal.title }}</h2>
+        @for (paragraph of legal.body; track $index) {
+          <p>{{ paragraph }}</p>
+        }
+      </section>
+    }
+  </div>
 }

src/app/features/privacy/privacy.ts

@@ -1,13 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { ContentSection } from '../../shared/content-section/content-section';
+import { LegalReviewNotice } from '../../shared/legal-review-notice/legal-review-notice';
+import { PageHero } from '../../shared/page-hero/page-hero';
 
 @Component({
   selector: 'app-privacy-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero, LegalReviewNotice, ContentSection],
   templateUrl: './privacy.html',
+  styleUrl: '../../shared/page-shell.scss',
 })
 export class PrivacyPage {
-  protected readonly page = inject(ContentService).page('privacy');
+  protected readonly page = inject(ContentService).legal('privacy');
 }

src/app/features/projects/projects.html

@@ -1,3 +1,19 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+    }
+    @for (caseStudy of cases(); track caseStudy.id) {
+      <app-case-study
+        [caseStudy]="caseStudy"
+        [situationLabel]="copy.caseLabels.situation"
+        [approachLabel]="copy.caseLabels.approach"
+        [outcomeLabel]="copy.caseLabels.outcome"
+        [metricsLabel]="copy.caseLabels.metrics"
+        [stackLabel]="copy.caseLabels.stack"
+        [tagsLabel]="copy.caseLabels.tags"
+      />
+    }
+  </div>
 }

src/app/features/projects/projects.ts

@@ -1,13 +1,19 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { CaseStudy } from '../../shared/case-study/case-study';
+import { ContentSection } from '../../shared/content-section/content-section';
+import { PageHero } from '../../shared/page-hero/page-hero';
 
 @Component({
   selector: 'app-projects-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero, ContentSection, CaseStudy],
   templateUrl: './projects.html',
+  styleUrl: '../../shared/page-shell.scss',
 })
 export class ProjectsPage {
-  protected readonly page = inject(ContentService).page('projects');
+  private readonly content = inject(ContentService);
+
+  protected readonly page = this.content.projects();
+  protected readonly cases = this.content.cases();
 }

src/app/features/services/ai-integration/ai-integration.html

@@ -1,3 +1 @@
-@if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
-}
+<app-service-page-view routeId="servicesAi" />

src/app/features/services/ai-integration/ai-integration.ts

@@ -1,13 +1,10 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ContentService } from '../../../core/content/content.service';
-import { PagePlaceholder } from '../../../shared/page-placeholder/page-placeholder';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ServicePageView } from '../service-page-view/service-page-view';
 
 @Component({
   selector: 'app-services-ai-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [ServicePageView],
   templateUrl: './ai-integration.html',
 })
-export class ServicesAiPage {
-  protected readonly page = inject(ContentService).page('servicesAi');
-}
+export class ServicesAiPage {}

src/app/features/services/clusters/clusters.html

@@ -1,3 +1 @@
-@if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
-}
+<app-service-page-view routeId="servicesClusters" />

src/app/features/services/clusters/clusters.ts

@@ -1,13 +1,10 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ContentService } from '../../../core/content/content.service';
-import { PagePlaceholder } from '../../../shared/page-placeholder/page-placeholder';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ServicePageView } from '../service-page-view/service-page-view';
 
 @Component({
   selector: 'app-services-clusters-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [ServicePageView],
   templateUrl: './clusters.html',
 })
-export class ServicesClustersPage {
-  protected readonly page = inject(ContentService).page('servicesClusters');
-}
+export class ServicesClustersPage {}

src/app/features/services/hardware-network/hardware-network.html

@@ -1,3 +1 @@
-@if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
-}
+<app-service-page-view routeId="servicesHardwareNetwork" />

src/app/features/services/hardware-network/hardware-network.ts

@@ -1,13 +1,10 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ContentService } from '../../../core/content/content.service';
-import { PagePlaceholder } from '../../../shared/page-placeholder/page-placeholder';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ServicePageView } from '../service-page-view/service-page-view';
 
 @Component({
   selector: 'app-services-hardware-network-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [ServicePageView],
   templateUrl: './hardware-network.html',
 })
-export class ServicesHardwareNetworkPage {
-  protected readonly page = inject(ContentService).page('servicesHardwareNetwork');
-}
+export class ServicesHardwareNetworkPage {}

src/app/features/services/service-page-view/service-offerings.spec.ts

@@ -0,0 +1,57 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { routes } from '../../../app.routes';
+import { SITE_CONTENT } from '../../../core/content/content.token';
+import { SITE_CONTENT_DATA } from '../../../core/content/site-content';
+import { APP_LOCALES } from '../../../core/i18n/locale';
+import { routePath } from '../../../core/routing/route-paths';
+
+describe('AI service offering groups', () => {
+  it('renders delivered work and offers under their own localized labels', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+
+    for (const locale of APP_LOCALES) {
+      const copy = SITE_CONTENT_DATA[locale].services.servicesAi;
+      const delivered = copy.offerings.filter((offering) => offering.status === 'delivered');
+      const offers = copy.offerings.filter((offering) => offering.status === 'offer');
+      expect(delivered.length).toBeGreaterThan(0);
+      expect(offers.length).toBeGreaterThan(0);
+
+      await harness.navigateByUrl(routePath('servicesAi', locale));
+      const root = harness.routeNativeElement as HTMLElement;
+      expect(root).toBeTruthy();
+
+      const deliveredGroup = root.querySelector(
+        `[aria-labelledby="offerings-delivered-servicesAi"]`,
+      );
+      const offerGroup = root.querySelector(`[aria-labelledby="offerings-offer-servicesAi"]`);
+      expect(deliveredGroup).toBeTruthy();
+      expect(offerGroup).toBeTruthy();
+      expect(deliveredGroup?.textContent).toContain(copy.deliveredOfferingsHeading);
+      expect(offerGroup?.textContent).toContain(copy.offerOfferingsHeading);
+
+      for (const offering of delivered) {
+        expect(deliveredGroup?.textContent).toContain(offering.title);
+        expect(offerGroup?.textContent).not.toContain(offering.title);
+        const note = copy.offeringCaseBackedLabel.replace(
+          '{case}',
+          SITE_CONTENT_DATA[locale].cases[offering.referenceCaseId!].client,
+        );
+        expect(deliveredGroup?.textContent).toContain(note);
+      }
+
+      for (const offering of offers) {
+        expect(offerGroup?.textContent).toContain(offering.title);
+        expect(deliveredGroup?.textContent).not.toContain(offering.title);
+      }
+
+      expect(deliveredGroup?.querySelector('[data-offering-status="offer"]')).toBeNull();
+      expect(offerGroup?.querySelector('[data-offering-status="delivered"]')).toBeNull();
+    }
+  });
+});

src/app/features/services/service-page-view/service-page-view.html

@@ -0,0 +1,47 @@
+@if (page(); as copy) {
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+      @if (section.id === 'sequence') {
+        <app-process-steps [steps]="steps()" [labelledBy]="sequenceHeadingId()" />
+      }
+      @if (section.id === 'scope' && deliveredOfferings().length > 0) {
+        <section class="stack offerings-group" [attr.aria-labelledby]="deliveredHeadingId()">
+          <h3 [id]="deliveredHeadingId()">{{ copy.deliveredOfferingsHeading }}</h3>
+          <ul class="stack offerings">
+            @for (offering of deliveredOfferings(); track offering.id) {
+              <li class="glass-surface" [attr.data-offering-status]="offering.status">
+                <h4>{{ offering.title }}</h4>
+                <p>{{ offering.body }}</p>
+                @if (caseBackedNote(offering); as note) {
+                  <p class="case-backed">{{ note }}</p>
+                }
+              </li>
+            }
+          </ul>
+        </section>
+      }
+      @if (section.id === 'offer-boundary' && offerOfferings().length > 0) {
+        <section class="stack offerings-group" [attr.aria-labelledby]="offerHeadingId()">
+          <h3 [id]="offerHeadingId()">{{ copy.offerOfferingsHeading }}</h3>
+          <ul class="stack offerings">
+            @for (offering of offerOfferings(); track offering.id) {
+              <li class="glass-surface" [attr.data-offering-status]="offering.status">
+                <h4>{{ offering.title }}</h4>
+                <p>{{ offering.body }}</p>
+              </li>
+            }
+          </ul>
+        </section>
+      }
+    }
+    <section class="stack" [attr.aria-labelledby]="'reference-' + copy.routeId">
+      <h2 [id]="'reference-' + copy.routeId">{{ copy.sequence.referenceHeadline }}</h2>
+      <p>{{ copy.sequence.referenceNote }}</p>
+      <app-case-card [caseStudy]="referenceCase()" />
+    </section>
+    <app-content-section [section]="copy.sequence.inquiry" />
+    <app-cta-row [ctas]="copy.ctas" />
+  </div>
+}

src/app/features/services/service-page-view/service-page-view.scss

@@ -0,0 +1,32 @@
+@use '../../../shared/page-shell';
+
+.offerings {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-4);
+}
+
+.offerings li {
+  padding: var(--space-5);
+  border-radius: var(--radius-md);
+}
+
+.offerings-group h3,
+.offerings h4 {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-lg);
+}
+
+.offerings h4 {
+  font-size: var(--text-md);
+}
+
+.offerings p {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
+.offerings .case-backed {
+  color: var(--color-text);
+}

src/app/features/services/service-page-view/service-page-view.ts

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import {
+  type OfferingCopy,
+  type ProcessStepCopy,
+  type ServicePageId,
+  type ServiceSequenceCopy,
+} from '../../../core/content/content.contracts';
+import { ContentService } from '../../../core/content/content.service';
+import { CaseCard } from '../../../shared/case-card/case-card';
+import { ContentSection } from '../../../shared/content-section/content-section';
+import { CtaRow } from '../../../shared/cta-row/cta-row';
+import { PageHero } from '../../../shared/page-hero/page-hero';
+import { ProcessSteps } from '../../../shared/process-steps/process-steps';
+
+function sequenceSteps(sequence: ServiceSequenceCopy): readonly ProcessStepCopy[] {
+  return [sequence.situation, sequence.diagnosis, sequence.implementation, sequence.operation].map(
+    (section) => ({
+      id: section.id,
+      title: section.headline,
+      body: (section.body ?? []).join(' '),
+    }),
+  );
+}
+
+@Component({
+  selector: 'app-service-page-view',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PageHero, ContentSection, ProcessSteps, CaseCard, CtaRow],
+  templateUrl: './service-page-view.html',
+  styleUrl: './service-page-view.scss',
+})
+export class ServicePageView {
+  readonly routeId = input.required<ServicePageId>();
+
+  private readonly content = inject(ContentService);
+
+  protected readonly page = computed(() => this.content.service(this.routeId())());
+  protected readonly steps = computed(() => sequenceSteps(this.page().sequence));
+  protected readonly referenceCase = computed(() =>
+    this.content.caseStudy(this.page().sequence.referenceCaseId)(),
+  );
+  protected readonly sequenceHeadingId = computed(() => {
+    const section = this.page().sections.find((item) => item.id === 'sequence');
+    return section ? `section-${section.id}` : null;
+  });
+  protected readonly deliveredOfferings = computed(() =>
+    this.page().offerings.filter((offering) => offering.status === 'delivered'),
+  );
+  protected readonly offerOfferings = computed(() =>
+    this.page().offerings.filter((offering) => offering.status === 'offer'),
+  );
+  protected readonly deliveredHeadingId = computed(() => `offerings-delivered-${this.routeId()}`);
+  protected readonly offerHeadingId = computed(() => `offerings-offer-${this.routeId()}`);
+
+  protected caseBackedNote(offering: OfferingCopy): string | null {
+    const caseId = offering.referenceCaseId;
+    if (!caseId) {
+      return null;
+    }
+
+    return this.page().offeringCaseBackedLabel.replace(
+      '{case}',
+      this.content.caseStudy(caseId)().client,
+    );
+  }
+}

src/app/features/services/services.html

@@ -1,3 +1,8 @@
 @if (page(); as copy) {
-  <app-page-placeholder [page]="copy" />
+  <div class="content-container stack page">
+    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
+    @for (section of copy.sections; track section.id) {
+      <app-content-section [section]="section" />
+    }
+  </div>
 }

src/app/features/services/services.ts

@@ -1,12 +1,14 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContentService } from '../../core/content/content.service';
-import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+import { ContentSection } from '../../shared/content-section/content-section';
+import { PageHero } from '../../shared/page-hero/page-hero';
 
 @Component({
   selector: 'app-services-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PagePlaceholder],
+  imports: [PageHero, ContentSection],
   templateUrl: './services.html',
+  styleUrl: '../../shared/page-shell.scss',
 })
 export class ServicesPage {
   protected readonly page = inject(ContentService).page('services');