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

Co-authored-by: Cursor <cursoragent@cursor.com>
integration: disable the contact mailto until required fields are complete
2026-08-25 19:55:22 +02:00 · 2026-08-25 19:32:22 +02:00 · 2026-08-25 19:32:22 +02:00 · 2026-08-25 19:32:18 +02:00 · 2026-08-25 19:32:13 +02:00 · 2026-08-25 18:45:28 +02:00
189 changed files with 16569 additions and 431 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,9 @@ __screenshots__/
 # System files
 .DS_Store
 Thumbs.db
+
+# Browser and audit artifacts
+/test-results
+/playwright-report
+/blob-report
+/.lighthouseci
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,14 @@
+dist
+.angular
+node_modules
+coverage
+package-lock.json
+public/**/*.svg
+*.pdf
+Dockerfile
+docker-compose.yml
+.cursor
+test-results
+playwright-report
+.lighthouseci
+blob-report
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,160 @@
+# AGENTS.md
+
+Contributor and agent guide for this repository. Read this before changing routing, copy, styles, or SSR behaviour.
+
+## Purpose
+
+This is a bilingual recruiter and B2B portfolio for a software/DevOps engineer. German is the default language and is served at `/`. English is the full second version and is served under `/en`. Every public page exists in both locales.
+
+## Architecture
+
+- Angular 21 standalone components, no NgModules
+- Zoneless change detection
+- Signals for local state
+- Lazy-loaded feature routes
+- SSR with prerendering (`@angular/ssr`, `outputMode: "server"`)
+- Express host in `src/server.ts`
+
+## Directory map
+
+| Path                    | Role                                                                                                                                         |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/app/core/**`       | Contracts, services and tokens. No UI.                                                                                                       |
+| `src/app/features/**`   | Routed page components, one folder per route.                                                                                                |
+| `src/app/shared/**`     | Reusable UI primitives used by multiple features.                                                                                            |
+| `src/app/components/**` | Existing decorative/feature widgets (skills grid, dot background).                                                                           |
+| `public/**`             | Static SVG and public assets copied as-is.                                                                                                   |
+| `src/styles.scss`       | Global design tokens and primitives. The only place raw brand hex values are defined.                                                        |
+| `src/_breakpoints.scss` | Breakpoint map (`sm` 40rem, `md` 48rem, `lg` 64rem, `xl` 80rem) and the `respond-to` mixin. Components pull it in with `@use 'breakpoints'`. |
+
+## Commands
+
+| Script                        | Purpose                                       |
+| ----------------------------- | --------------------------------------------- |
+| `npm start`                   | Dev server (`ng serve`).                      |
+| `npm run build`               | Production build (default configuration).     |
+| `npm run watch`               | Development rebuild on change.                |
+| `npm test`                    | Unit tests in watch mode.                     |
+| `npm run test:ci`             | Unit tests once (`--watch=false`); must exit. |
+| `npm run lint`                | ESLint over the workspace.                    |
+| `npm run lint:fix`            | ESLint with autofix.                          |
+| `npm run format`              | Prettier write.                               |
+| `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
+
+- Standalone components only
+- `inject()` over constructor injection for new code
+- Signals over RxJS for local state
+- `ChangeDetectionStrategy.OnPush` on new components
+- kebab-case file names
+- No `any`
+- No default exports
+- Templates in separate files
+
+## SCSS conventions
+
+- Global design tokens live only in `src/styles.scss` as CSS custom properties
+- Components consume `var(--...)` and never redefine raw hex values
+- Use the documented spacing (`--space-1` … `--space-12`) and typography (`--text-xs` … `--text-3xl`) scale
+- Hover-only affordances must be wrapped in `@media (hover: hover) and (pointer: fine)`
+- All motion must respect `prefers-reduced-motion`
+- Breakpoints and the `respond-to` mixin live in `src/_breakpoints.scss`; do not invent extra breakpoint names
+- Shared glass, layout and focus treatments belong on the global primitives (`.glass-surface`, `.content-container`, `.stack`, `.cluster`), not copied into component stylesheets
+- Keep component styles under the `anyComponentStyle` budget (4 kB warn, 8 kB error)
+
+## Content rules
+
+All user-facing copy comes from the typed bilingual content layer in `src/app/core/content`. Never inline marketing or page copy in templates.
+
+Keep the four copy roles as separate fields:
+
+- `headline` — the serious heading
+- `proof` — only a verifiable statement
+- `playfulLine` — optional wordplay; never a capability claim
+- `cta` — action label, kept swappable
+
+German and English are written idiomatically per language, never machine-translated word for word.
+
+## Claims policy (non-negotiable)
+
+- No unsupported superlatives
+- No invented references, client names, metrics or certifications
+- Unproven AI, local-LLM or multi-agent capabilities are phrased as an offering or way of working, never as a delivered reference
+- The CV stations HUP, BitWiz and Cybertrading are deliberately excluded from all public pages, cases and timelines
+- The legal pages (Impressum, Datenschutz) contain placeholders that MUST be reviewed by the site owner before publication and must visibly say so
+
+## i18n rules
+
+- German at `/`, English under `/en`
+- Every route id exists in both locales
+- New pages are added by extending the route-id table in `src/app/core/routing`, never by hard-coding paths
+- Do not swap `LOCALE_ID`; the active locale is `AppLocale` from `LocaleService`
+
+## SSR rules
+
+- 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
+
+## Accessibility checklist
+
+- Skip link as the first focusable element, targeting `#main-content`
+- Single `h1` per page
+- Landmark elements (`header`/`nav`, `main`, `footer`)
+- Visible `:focus-visible` ring
+- Keyboard reachability for every action
+- `aria-current` on the active nav item
+- At least 4.5:1 text contrast on the base surface
+- Reduced-motion alternatives for animation and smooth scrolling
+- Navigation remains usable in its server-rendered default state (no JS-only menus)
+
+## SEO expectations
+
+- Semantic headings
+- 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
+
+Browser binaries, HTML reports, traces and screenshots are not committed (`test-results`, `playwright-report`, `.lighthouseci`).
+
+## Test checklist
+
+A change is not done until:
+
+1. `npm run lint` exits 0
+2. `npm run format:check` exits 0
+3. `npm run test:ci` exits 0 with no watcher left running
+4. `npm run build` exits 0
+5. New or changed routes appear in `prerenderablePaths()` and are prerendered
+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
+
+| Branch      | Owns                                                                             |
+| ----------- | -------------------------------------------------------------------------------- |
+| Foundation  | Tooling, tokens, shell, routing and content contracts, SSR safety, test baseline |
+| Content     | Bilingual copy data and page composition                                         |
+| Signature   | Systems Map, terminal, dot background and motion                                 |
+| Integration | SEO and cross-cutting a11y/performance hardening                                 |
+
+Each branch extends the shared contracts instead of duplicating paths or copy. The Content branch replaces `placeholder-content.ts` and keeps `SITE_CONTENT`. The Signature branch may replace the dot-background internals but must keep the SSR-safe init/teardown contract.
--- a/CV.pdf
+++ b/CV.pdf
--- a/README.md
+++ b/README.md
@@ -1,59 +1,67 @@
 # Portfolio

-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.5.
+Bilingual recruiter and B2B portfolio for Antonio Ledebuhr, a software and DevOps engineer. German is the default language at `/`. English is the full second version under `/en`.

-## Development server
+This repository is the Angular 21 standalone, zoneless, SSR application that serves both locales from one build.

-To start a local development server, run:
+## Prerequisites
+
+- Node.js 22 or newer
+- npm 11 or newer (npm 12 prints an engine-compatibility warning on some Node 24 builds; that warning is not an error)
+
+## Install

 ```bash
-ng serve
+npm install
 ```

-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+## Scripts

-## Code scaffolding
+| Script                        | Description                                                               |
+| ----------------------------- | ------------------------------------------------------------------------- |
+| `npm start`                   | Start the Angular dev server.                                             |
+| `npm run build`               | Production build (default configuration), including SSR and prerendering. |
+| `npm run watch`               | Development rebuild on change.                                            |
+| `npm test`                    | Unit tests in watch mode.                                                 |
+| `npm run test:ci`             | Unit tests once; exits when finished.                                     |
+| `npm run lint`                | Run ESLint.                                                               |
+| `npm run lint:fix`            | Run ESLint with autofix.                                                  |
+| `npm run format`              | Format the workspace with Prettier.                                       |
+| `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.                         |

-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Local SSR build

 ```bash
-ng generate component component-name
+npm run build
+npm run serve:ssr
 ```

-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+The server listens on `http://localhost:4000` unless `PORT` is set. The CV is copied into the browser output at `/cv/CV.pdf`.

-```bash
-ng generate --help
+`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
+
+```
+src/app/core/          Typed contracts: locale, routing, navigation, content, platform
+src/app/features/      One standalone page per route id
+src/app/shared/        Reusable UI primitives
+src/app/components/    Existing decorative widgets (skills, dot background)
+src/styles.scss        Design tokens and global primitives
+src/_breakpoints.scss  Breakpoint map and respond-to mixin
+public/                Static SVG assets
 ```

-## Building
+Design tokens live in `src/styles.scss` as CSS custom properties. Content contracts and the placeholder provider live in `src/app/core/content`. Route ids and locale path tables live in `src/app/core/routing`.

-To build the project run:
+Contributor and agent conventions are in [AGENTS.md](./AGENTS.md).

-```bash
-ng build
-```
+## Legal pages

-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+The Impressum (`/impressum`, `/en/legal-notice`) and Datenschutz (`/datenschutz`, `/en/privacy`) pages contain unreviewed placeholders. They must be checked by the site owner before publication.
--- a/angular.json
+++ b/angular.json
@@ -23,15 +23,21 @@
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
+            "stylePreprocessorOptions": {
+              "includePaths": ["src"]
+            },
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
+              },
+              {
+                "glob": "CV.pdf",
+                "input": ".",
+                "output": "cv"
              }
            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
            "server": "src/main.server.ts",
            "outputMode": "server",
            "ssr": {
--- a/e2e/a11y.e2e.ts
+++ b/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([]);
+    });
+  }
+});
--- a/e2e/contact.e2e.ts
+++ b/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([]);
+  });
+});
--- a/e2e/fragments.e2e.ts
+++ b/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);
+      }
+    }
+  });
+});
--- a/e2e/helpers.ts
+++ b/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');
+}
--- a/e2e/keyboard.e2e.ts
+++ b/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();
+  });
+});
--- a/e2e/layout.e2e.ts
+++ b/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);
+    }
+  });
+});
--- a/e2e/seo.e2e.ts
+++ b/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);
+  });
+});
--- a/e2e/systems-map.e2e.ts
+++ b/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);
+    }
+  });
+});
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,62 @@
+// @ts-check
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
+const prettier = require('eslint-config-prettier');
+
+module.exports = tseslint.config(
+  {
+    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,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    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,
+);
--- a/lighthouserc.json
+++ b/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"
+    }
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -7,7 +7,17 @@
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
-    "serve:ssr:Portfolio": "node dist/Portfolio/server/server.mjs"
+    "test:ci": "ng test --watch=false",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "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",
+    "e2e": "playwright test",
+    "e2e:install": "playwright install chromium",
+    "lighthouse": "npm run build && lhci autorun"
  },
  "prettier": {
    "printWidth": 100,
@@ -40,10 +50,20 @@
    "@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",
+    "prettier": "^3.9.6",
    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.68.0",
    "vitest": "^4.0.8"
  }
 }
--- a/playwright.config.ts
+++ b/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,
+      },
+    },
+  ],
+});
--- a/public/llms.txt
+++ b/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.
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://antoniolede.de/sitemap.xml
--- a/public/sitemap.xml
+++ b/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>
--- a/src/_breakpoints.scss
+++ b/src/_breakpoints.scss
@@ -0,0 +1,14 @@
+@use 'sass:map';
+
+$breakpoints: (
+  sm: 40rem,
+  md: 48rem,
+  lg: 64rem,
+  xl: 80rem,
+);
+
+@mixin respond-to($name) {
+  @media (min-width: map.get($breakpoints, $name)) {
+    @content;
+  }
+}
--- a/src/app/app.config.server.ts
+++ b/src/app/app.config.server.ts
@@ -4,9 +4,7 @@ import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';

 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(withRoutes(serverRoutes))
-  ]
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
 };

 export const config = mergeApplicationConfig(appConfig, serverConfig);
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,12 +1,29 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+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: [
    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes), provideClientHydration(withEventReplay())
-  ]
+    provideRouter(
+      routes,
+      withComponentInputBinding(),
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'enabled',
+        anchorScrolling: 'enabled',
+      }),
+    ),
+    provideClientHydration(withEventReplay()),
+    { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA },
+    { provide: TitleStrategy, useClass: SeoTitleStrategy },
+  ],
 };
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,12 +1,97 @@
-<app-dot-background></app-dot-background>
-<div>
-  <header>
-
+<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()" [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>
+      <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) {
+            <li>
+              <a
+                [routerLink]="item.link"
+                routerLinkActive="is-active"
+                [routerLinkActiveOptions]="{ exact: true }"
+                ariaCurrentWhenActive="page"
+                >{{ item.label }}</a
+              >
+              @if (item.children; as children) {
+                <ul class="submenu">
+                  @for (child of children; track child.routeId) {
+                    <li>
+                      <a
+                        [routerLink]="child.link"
+                        routerLinkActive="is-active"
+                        [routerLinkActiveOptions]="{ exact: true }"
+                        ariaCurrentWhenActive="page"
+                        >{{ child.label }}</a
+                      >
+                    </li>
+                  }
+                </ul>
+              }
+            </li>
+          }
+        </ul>
+      </nav>
+      <div class="site-actions cluster">
+        <a
+          class="language-switch"
+          [routerLink]="navigation.alternateLocaleLink()"
+          [attr.hreflang]="otherHtmlLang()"
+          [attr.aria-label]="shell().languageSwitch"
+        >
+          {{ shell().otherLocaleName }}
+        </a>
+        <a
+          [href]="siteConfig.cvAssetPath"
+          [attr.download]="siteConfig.cvDownloadFileName"
+          type="application/pdf"
+        >
+          {{ shell().cvLabel }}
+        </a>
+        <a class="contact-cta" [routerLink]="navigation.contactLink()">{{ shell().contactCta }}</a>
+      </div>
+    </div>
  </header>
-  <main class="router">
-    <router-outlet></router-outlet>
+  <main id="main-content" class="site-main" tabindex="-1">
+    <router-outlet />
  </main>
-  <footer>
-
+  <footer class="site-footer">
+    <div class="content-container site-footer-inner cluster">
+      <p>{{ siteConfig.personName }}</p>
+      <a [href]="'mailto:' + siteConfig.contactEmail">{{ siteConfig.contactEmail }}</a>
+      <nav [attr.aria-label]="shell().footerNavLabel">
+        <ul class="cluster footer-nav">
+          @for (item of navigation.footerNav(); track item.routeId) {
+            <li>
+              <a
+                [routerLink]="item.link"
+                routerLinkActive="is-active"
+                [routerLinkActiveOptions]="{ exact: true }"
+                ariaCurrentWhenActive="page"
+                >{{ item.label }}</a
+              >
+            </li>
+          }
+        </ul>
+      </nav>
+    </div>
  </footer>
 </div>
+<app-command-palette></app-command-palette>
--- a/src/app/app.routes.server.spec.ts
+++ b/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);
+    }
+  });
+});
--- a/src/app/app.routes.server.ts
+++ b/src/app/app.routes.server.ts
@@ -1,8 +1,14 @@
-import { RenderMode, ServerRoute } from '@angular/ssr';
+import { RenderMode, type ServerRoute } from '@angular/ssr';
+import { prerenderableServerPaths } from './core/routing/route-paths';

 export const serverRoutes: ServerRoute[] = [
+  ...prerenderableServerPaths().map((path): ServerRoute => ({
+    path,
+    renderMode: RenderMode.Prerender,
+  })),
  {
    path: '**',
-    renderMode: RenderMode.Prerender
-  }
+    renderMode: RenderMode.Server,
+    status: 404,
+  },
 ];
--- a/src/app/app.routes.spec.ts
+++ b/src/app/app.routes.spec.ts
@@ -0,0 +1,79 @@
+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 { 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; 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,
+      title: typeof route.title === 'string' ? route.title : undefined,
+    });
+
+    if (route.children) {
+      entries.push(...flattenRoutes(route.children, path));
+    }
+  }
+
+  return entries;
+}
+
+describe('app routes', () => {
+  it('places the English subtree first and attaches locale data', () => {
+    expect(routes[0]?.path).toBe('en');
+
+    const flattened = flattenRoutes(routes);
+    const englishProjects = flattened.find((entry) => entry.path === 'en/projects');
+    const germanProjects = flattened.find((entry) => entry.path === 'projekte');
+    const englishWildcard = flattened.find((entry) => entry.path === 'en/**');
+    const germanWildcard = flattened.find((entry) => entry.path === '**');
+
+    expect(englishProjects?.data).toEqual({ routeId: 'projects', locale: 'en' });
+    expect(germanProjects?.data).toEqual({ routeId: 'projects', locale: 'de' });
+    expect(englishWildcard?.data).toEqual({ routeId: 'notFound', locale: 'en' });
+    expect(germanWildcard?.data).toEqual({ routeId: 'notFound', locale: 'de' });
+  });
+
+  it('navigates to the English projects page', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+    const locale = TestBed.inject(LocaleService);
+    await harness.navigateByUrl('/en/projects');
+
+    expect(locale.locale()).toBe('en');
+    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);
+    }
+  });
+});
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,6 +1,69 @@
-import { Routes } from '@angular/router';
-import {Skills} from './components/pages/skills/skills';
+import { type Type } from '@angular/core';
+import { type Routes } from '@angular/router';
+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';
+import { ROUTE_IDS, type RouteId } from './core/routing/route-ids';
+import { LOCALE_PREFIX, ROUTE_SEGMENTS } from './core/routing/route-paths';
+
+type LazyPage = () => Promise<Type<unknown>>;
+
+const PAGE_LOADERS: Record<RouteId, LazyPage> = {
+  home: () => import('./features/home/home').then((module) => module.HomePage),
+  services: () => import('./features/services/services').then((module) => module.ServicesPage),
+  servicesSoftware: () =>
+    import('./features/services/software/software').then((module) => module.ServicesSoftwarePage),
+  servicesHardwareNetwork: () =>
+    import('./features/services/hardware-network/hardware-network').then(
+      (module) => module.ServicesHardwareNetworkPage,
+    ),
+  servicesClusters: () =>
+    import('./features/services/clusters/clusters').then((module) => module.ServicesClustersPage),
+  servicesAi: () =>
+    import('./features/services/ai-integration/ai-integration').then(
+      (module) => module.ServicesAiPage,
+    ),
+  projects: () => import('./features/projects/projects').then((module) => module.ProjectsPage),
+  stack: () => import('./features/stack/stack').then((module) => module.StackPage),
+  about: () => import('./features/about/about').then((module) => module.AboutPage),
+  contact: () => import('./features/contact/contact').then((module) => module.ContactPage),
+  imprint: () => import('./features/imprint/imprint').then((module) => module.ImprintPage),
+  privacy: () => import('./features/privacy/privacy').then((module) => module.PrivacyPage),
+  notFound: () => import('./features/not-found/not-found').then((module) => module.NotFoundPage),
+};
+
+function routeData(routeId: RouteId, locale: AppLocale): AppRouteData {
+  return { routeId, locale };
+}
+
+function localeRoutes(locale: AppLocale): Routes {
+  const segments = ROUTE_SEGMENTS[locale];
+  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,
+      resolve: { locale: localeResolver },
+    }))
+    .concat([
+      {
+        path: '**',
+        loadComponent: PAGE_LOADERS.notFound,
+        data: routeData('notFound', locale),
+        title: pages.notFound.title,
+        resolve: { locale: localeResolver },
+      },
+    ]);
+}

 export const routes: Routes = [
-  {path: '', component: Skills}
+  {
+    path: LOCALE_PREFIX.en,
+    children: localeRoutes('en'),
+  },
+  ...localeRoutes('de'),
 ];
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -0,0 +1,230 @@
+@use 'breakpoints' as bp;
+
+:host {
+  display: block;
+  min-height: 100vh;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+}
+
+.site {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.site-header {
+  position: relative;
+  top: 0;
+  z-index: 10;
+  padding-block: var(--space-3);
+}
+
+.site-header-inner {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-3);
+  align-items: start;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+}
+
+.site-identity,
+.site-nav a,
+.site-actions a,
+.site-footer a {
+  color: var(--color-text);
+  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;
+}
+
+.site-toolbar {
+  justify-self: end;
+  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;
+  color: var(--color-text);
+}
+
+.nav-toggle span,
+.nav-toggle span::before,
+.nav-toggle span::after {
+  display: block;
+  width: 1rem;
+  height: 2px;
+  margin-inline: auto;
+  background: currentColor;
+}
+
+.nav-toggle span::before,
+.nav-toggle span::after {
+  content: '';
+  position: relative;
+}
+
+.nav-toggle span::before {
+  top: -0.35rem;
+}
+
+.nav-toggle span::after {
+  top: 0.25rem;
+}
+
+.site-nav,
+.site-actions {
+  grid-column: 1 / -1;
+}
+
+.primary-nav,
+.primary-nav ul,
+.footer-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.primary-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.primary-nav ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-inline-start: var(--space-4);
+}
+
+.contact-cta {
+  color: var(--color-text);
+}
+
+.is-active {
+  color: var(--color-accent-cool);
+}
+
+.nav-collapsed .site-nav,
+.nav-collapsed .site-actions {
+  display: none;
+}
+
+.site-main {
+  flex: 1;
+}
+
+.site-main:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.site-footer {
+  padding-block: var(--space-6);
+  color: var(--color-text-muted);
+}
+
+.site-footer-inner {
+  justify-content: space-between;
+}
+
+.site-footer p {
+  margin: 0;
+}
+
+@include bp.respond-to(md) {
+  .nav-toggle {
+    display: none;
+  }
+
+  .site-header {
+    padding-block: var(--space-2);
+  }
+
+  .site-header-inner {
+    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-actions {
+    display: flex;
+    grid-column: auto;
+    order: 3;
+  }
+
+  .site-toolbar {
+    order: 2;
+  }
+
+  .primary-nav {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .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;
+  }
+}
--- a/src/app/app.spec.ts
+++ b/src/app/app.spec.ts
@@ -1,23 +1,170 @@
-import { TestBed } from '@angular/core/testing';
-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 { 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 () => {
-    await TestBed.configureTestingModule({
-      imports: [App],
-    }).compileComponents();
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    mockViewport(true);
+
+    await configureApp();
  });

-  it('should create the app', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    Reflect.deleteProperty(window, 'matchMedia');
+  });
+
+  it('should create the shell', async () => {
    const fixture = TestBed.createComponent(App);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+    await fixture.whenStable();
+    expect(fixture.componentInstance).toBeTruthy();
  });

-  it('should render title', async () => {
+  it('should render an accessible application shell', async () => {
    const fixture = TestBed.createComponent(App);
    await fixture.whenStable();
    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Portfolio');
+
+    const focusable = compiled.querySelectorAll(
+      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    );
+    const firstFocusable = focusable.item(0);
+
+    expect(firstFocusable).toBeTruthy();
+    expect(firstFocusable.getAttribute('href')).toBe('#main-content');
+    expect(firstFocusable.classList.contains('skip-link')).toBe(true);
+    expect(compiled.querySelector('main#main-content')).toBeTruthy();
+    expect(compiled.querySelector('nav[aria-label]')).toBeTruthy();
+    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');
  });
 });
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,13 +1,119 @@
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import {DotBackground} from './components/dot-background/dot-background';
+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',
-  imports: [RouterOutlet, DotBackground],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    DotBackground,
+    CommandPalette,
+    CommandPaletteTrigger,
+  ],
  templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrl: './app.scss',
 })
 export class App {
-  protected readonly title = signal('Portfolio');
+  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);
+
+  protected readonly shell = computed(() => SHELL_COPY[this.localeService.locale()]);
+  protected readonly otherLocale = computed(() => otherLocale(this.localeService.locale()));
+  protected readonly otherHtmlLang = computed(() => LOCALE_HTML_LANG[this.otherLocale()]);
+  protected readonly menuLabel = computed(() =>
+    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;
+  }
 }
--- a/src/app/components/dot-background/dot-background.scss
+++ b/src/app/components/dot-background/dot-background.scss
@@ -2,8 +2,10 @@ canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
-  background: #0a0a0f;
+  background: var(--color-surface);

  width: 100vw;
  height: 100vh;
+  width: 100lvw;
+  height: 100lvh;
 }
--- a/src/app/components/dot-background/dot-background.spec.ts
+++ b/src/app/components/dot-background/dot-background.spec.ts
@@ -1,23 +1,281 @@
+import { ApplicationRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { DotBackground } from './dot-background';

+function mockContext(): CanvasRenderingContext2D {
+  const gradient = { addColorStop: vi.fn() };
+
+  return {
+    clearRect: vi.fn(),
+    beginPath: vi.fn(),
+    arc: vi.fn(),
+    fill: vi.fn(),
+    createRadialGradient: vi.fn(() => gradient),
+  } as unknown as CanvasRenderingContext2D;
+}
+
+function mockMatchMedia(matchesQuery: (query: string) => boolean): void {
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: (query: string): MediaQueryList =>
+      ({
+        matches: matchesQuery(query),
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      }) as MediaQueryList,
+  });
+}
+
 describe('DotBackground', () => {
-  let component: DotBackground;
-  let fixture: ComponentFixture<DotBackground>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DotBackground]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(DotBackground);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
+  afterEach(() => {
+    vi.restoreAllMocks();
+    Reflect.deleteProperty(window, 'matchMedia');
+    Object.defineProperty(document, 'hidden', {
+      configurable: true,
+      get: () => false,
+    });
  });

-  it('should create', () => {
-    expect(component).toBeTruthy();
+  async function createFixture(): Promise<ComponentFixture<DotBackground>> {
+    TestBed.resetTestingModule();
+    await TestBed.configureTestingModule({
+      imports: [DotBackground],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(DotBackground);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    TestBed.inject(ApplicationRef).tick();
+    fixture.detectChanges();
+    return fixture;
+  }
+
+  it('should create', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+
+    const fixture = await createFixture();
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it('does not throw when destroyed after browser initialization', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(mockContext());
+    vi.spyOn(window, 'requestAnimationFrame').mockReturnValue(1);
+
+    const fixture = await createFixture();
+    expect(() => fixture.destroy()).not.toThrow();
+  });
+
+  it('adds no listener and schedules no animation frame when the 2D context is null', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    const scheduled: FrameRequestCallback[] = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+      scheduled.push(callback);
+      return scheduled.length;
+    });
+    const windowAdd = vi.spyOn(window, 'addEventListener');
+    const documentAdd = vi.spyOn(document, 'addEventListener');
+
+    TestBed.resetTestingModule();
+    await TestBed.configureTestingModule({
+      imports: [DotBackground],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(DotBackground);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    TestBed.inject(ApplicationRef).tick();
+
+    const pending = scheduled.splice(0);
+    for (const callback of pending) {
+      callback(0);
+    }
+
+    expect(scheduled).toEqual([]);
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'resize')).toBe(false);
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'mousemove')).toBe(false);
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'click')).toBe(false);
+    expect(documentAdd.mock.calls.some((call) => call[0] === 'visibilitychange')).toBe(false);
+    expect(() => fixture.destroy()).not.toThrow();
+  });
+
+  it('cancels the scheduled frame and removes every listener on destroy', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(mockContext());
+    const raf = vi.spyOn(window, 'requestAnimationFrame').mockReturnValue(17);
+    const cancel = vi.spyOn(window, 'cancelAnimationFrame');
+    const windowAdd = vi.spyOn(window, 'addEventListener');
+    const windowRemove = vi.spyOn(window, 'removeEventListener');
+    const documentAdd = vi.spyOn(document, 'addEventListener');
+    const documentRemove = vi.spyOn(document, 'removeEventListener');
+
+    const fixture = await createFixture();
+
+    expect(raf).toHaveBeenCalled();
+
+    const windowAdds = windowAdd.mock.calls.filter((call) =>
+      ['resize', 'mousemove', 'click'].includes(String(call[0])),
+    );
+    const documentAdds = documentAdd.mock.calls.filter((call) => call[0] === 'visibilitychange');
+
+    expect(windowAdds.length).toBeGreaterThan(0);
+    expect(documentAdds.length).toBeGreaterThan(0);
+
+    fixture.destroy();
+
+    expect(cancel).toHaveBeenCalled();
+
+    for (const [type, handler] of windowAdds) {
+      expect(windowRemove).toHaveBeenCalledWith(type, handler);
+    }
+
+    for (const [type, handler] of documentAdds) {
+      expect(documentRemove).toHaveBeenCalledWith(type, handler);
+    }
+  });
+
+  it('draws a single static frame under reduced motion and skips pointer listeners', async () => {
+    mockMatchMedia((query) => query.includes('prefers-reduced-motion'));
+    const context = mockContext();
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context);
+    const scheduled: FrameRequestCallback[] = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+      scheduled.push(callback);
+      return scheduled.length;
+    });
+    const windowAdd = vi.spyOn(window, 'addEventListener');
+
+    TestBed.resetTestingModule();
+    await TestBed.configureTestingModule({
+      imports: [DotBackground],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(DotBackground);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    TestBed.inject(ApplicationRef).tick();
+
+    const pending = scheduled.splice(0);
+    for (const callback of pending) {
+      callback(0);
+    }
+
+    expect(context.clearRect).toHaveBeenCalled();
+    expect(scheduled).toEqual([]);
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'mousemove')).toBe(false);
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'click')).toBe(false);
+    fixture.destroy();
+  });
+
+  it('registers no pointer listeners for a coarse pointer', async () => {
+    mockMatchMedia((query) => query.includes('pointer: coarse'));
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(mockContext());
+    vi.spyOn(window, 'requestAnimationFrame').mockReturnValue(1);
+    const windowAdd = vi.spyOn(window, 'addEventListener');
+
+    await createFixture();
+
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'mousemove')).toBe(false);
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'click')).toBe(false);
+    expect(windowAdd.mock.calls.some((call) => call[0] === 'resize')).toBe(true);
+  });
+
+  it('pauses the loop when the document is hidden and resumes when it is visible', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(mockContext());
+    const raf = vi.spyOn(window, 'requestAnimationFrame').mockReturnValue(21);
+    const cancel = vi.spyOn(window, 'cancelAnimationFrame');
+
+    await createFixture();
+    expect(raf).toHaveBeenCalled();
+    raf.mockClear();
+
+    Object.defineProperty(document, 'hidden', {
+      configurable: true,
+      get: () => true,
+    });
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(cancel).toHaveBeenCalled();
+
+    Object.defineProperty(document, 'hidden', {
+      configurable: true,
+      get: () => false,
+    });
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(raf).toHaveBeenCalled();
+  });
+
+  it('starts with a bounded initial dot count on a large desktop viewport', async () => {
+    const context = mockContext();
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context);
+    const widthStub = vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(2560);
+    const heightStub = vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(1440);
+    const scheduled: FrameRequestCallback[] = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+      scheduled.push(callback);
+      return scheduled.length;
+    });
+
+    try {
+      const fixture = await createFixture();
+      const pending = scheduled.splice(0);
+      for (const callback of pending) {
+        callback(0);
+      }
+
+      const arcCalls = vi.mocked(context.arc).mock.calls.length;
+      expect(arcCalls).toBeGreaterThanOrEqual(6);
+      expect(arcCalls).toBeLessThanOrEqual(24);
+      fixture.destroy();
+    } finally {
+      widthStub.mockRestore();
+      heightStub.mockRestore();
+    }
+  });
+
+  it('redraws the static frame after resize under reduced motion without starting a loop', async () => {
+    mockMatchMedia((query) => query.includes('prefers-reduced-motion'));
+    const context = mockContext();
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context);
+    const scheduled: FrameRequestCallback[] = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+      scheduled.push(callback);
+      return scheduled.length;
+    });
+
+    TestBed.resetTestingModule();
+    await TestBed.configureTestingModule({
+      imports: [DotBackground],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(DotBackground);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    TestBed.inject(ApplicationRef).tick();
+
+    const pending = scheduled.splice(0);
+    for (const callback of pending) {
+      callback(0);
+    }
+
+    vi.mocked(context.clearRect).mockClear();
+    vi.mocked(context.arc).mockClear();
+
+    window.dispatchEvent(new Event('resize'));
+
+    const resizeFrames = scheduled.splice(0);
+    for (const callback of resizeFrames) {
+      callback(0);
+    }
+
+    expect(context.clearRect).toHaveBeenCalled();
+    expect(context.arc).toHaveBeenCalled();
+    expect(scheduled).toEqual([]);
+    fixture.destroy();
  });
 });
--- a/src/app/components/dot-background/dot-background.ts
+++ b/src/app/components/dot-background/dot-background.ts
@@ -1,73 +1,214 @@
-import {afterNextRender, Component, ElementRef, NgZone, OnDestroy, ViewChild} from '@angular/core';
-import {Dot} from '../../models/dot';
+import { DOCUMENT } from '@angular/common';
+import {
+  afterNextRender,
+  Component,
+  DestroyRef,
+  ElementRef,
+  inject,
+  NgZone,
+  ViewChild,
+} from '@angular/core';
+import {
+  isBrowserPlatform,
+  prefersCoarsePointer,
+  prefersReducedMotion,
+} from '../../core/platform/browser';
+import { Dot } from '../../models/dot';

@Component({
  selector: 'app-dot-background',
  imports: [],
  templateUrl: './dot-background.html',
  styleUrl: './dot-background.scss',
+  host: {
+    'aria-hidden': 'true',
+  },
 })
-export class DotBackground implements OnDestroy {
+export class DotBackground {
  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;

-  private ctx!: CanvasRenderingContext2D;
+  private readonly document = inject(DOCUMENT);
+  private readonly ngZone = inject(NgZone);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly isBrowser = isBrowserPlatform();
+  private readonly coarsePointer = prefersCoarsePointer();
+  private readonly reducedMotion = prefersReducedMotion();
+
+  private ctx: CanvasRenderingContext2D | undefined;
  private dots: Dot[] = [];
  private mouse = { x: -1000, y: -1000 };
  private animationId = 0;
-  private initialized = false;
+  private resizeFrameId = 0;
+  private loopActive = false;
+  private tornDown = false;
+  private readonly teardowns: Array<() => void> = [];

-  private readonly DOT_COUNT = 12;
+  private readonly INITIAL_DOT_COUNT_MIN = 6;
+  private readonly INITIAL_DOT_COUNT_MAX = 24;
+  private readonly INITIAL_DOT_COUNT_MAX_COARSE = 12;
+  private readonly INITIAL_DOT_AREA_DIVISOR = 130_000;
+  private readonly MAX_DOT_COUNT = 100;
+  private readonly MAX_DOT_COUNT_MOBILE = 40;
  private readonly COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#3b82f6'];
  private readonly MOUSE_RADIUS = 150;

-  private lastWidth = 0;
-  private lastHeight = 0;
-  private readonly RESIZE_THRESHOLD = 100; // ignore small height changes (browser chrome)
+  private ballSpawnId = 0;
+  private ballSpawnNextColor = 0;
+
+  constructor() {
+    this.destroyRef.onDestroy(() => this.teardown());

-  constructor(private ngZone: NgZone) {
    afterNextRender(() => {
      this.init();
    });
  }

-  ngOnDestroy() {
-    if (!this.initialized) return;
-
-    cancelAnimationFrame(this.animationId);
-    window.removeEventListener('resize', this.resize);
-    window.removeEventListener('mousemove', this.onMouseMove);
+  private view(): Window | null {
+    return this.document.defaultView;
  }

-  private init() {
-    const canvas = this.canvasRef.nativeElement;
-    this.ctx = canvas.getContext('2d')!;
-    this.resize();
-    this.initDots();
-
-    window.addEventListener('resize', this.resize);
-    window.addEventListener('mousemove', this.onMouseMove);
-
-    this.initialized = true;
-    this.ngZone.runOutsideAngular(() => this.animate());
-  }
-
-  private resize = () => {
-    const canvas = this.canvasRef.nativeElement;
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-
-    const widthChanged = width !== this.lastWidth;
-    const heightDiff = Math.abs(height - this.lastHeight);
-    const significantHeightChange = heightDiff > this.RESIZE_THRESHOLD;
-
-    // Only resize on width change or significant height change (orientation flip, not browser chrome)
-    if (!widthChanged && !significantHeightChange && this.lastWidth !== 0) {
+  private init(): void {
+    if (this.tornDown || !this.isBrowser) {
      return;
    }

-    this.lastWidth = width;
-    this.lastHeight = height;
+    const view = this.view();

+    if (!view) {
+      return;
+    }
+
+    const canvas = this.canvasRef?.nativeElement;
+
+    if (!canvas) {
+      return;
+    }
+
+    let ctx: CanvasRenderingContext2D | null = null;
+
+    try {
+      ctx = canvas.getContext('2d');
+    } catch {
+      return;
+    }
+
+    if (!ctx) {
+      return;
+    }
+
+    this.ctx = ctx;
+    this.resize();
+    this.initDots();
+
+    this.listen(view, 'resize', this.onResize);
+    this.listen(this.document, 'visibilitychange', this.onVisibilityChange);
+
+    if (!this.reducedMotion && !this.coarsePointer) {
+      this.listen(view, 'mousemove', this.onMouseMove);
+      this.listen(view, 'click', this.onMouseClick);
+    }
+
+    if (this.reducedMotion) {
+      this.drawFrame();
+      return;
+    }
+
+    this.ngZone.runOutsideAngular(() => this.startLoop());
+  }
+
+  private listen(target: EventTarget, type: string, handler: EventListener): void {
+    target.addEventListener(type, handler);
+    this.teardowns.push(() => target.removeEventListener(type, handler));
+  }
+
+  private requestFrame(callback: FrameRequestCallback): number {
+    const view = this.view();
+    return view ? view.requestAnimationFrame(callback) : 0;
+  }
+
+  private cancelFrame(id: number): void {
+    const view = this.view();
+
+    if (!view || id === 0) {
+      return;
+    }
+
+    view.cancelAnimationFrame(id);
+  }
+
+  private startLoop(): void {
+    if (this.loopActive || this.reducedMotion || this.tornDown) {
+      return;
+    }
+
+    this.loopActive = true;
+    this.scheduleAnimate();
+  }
+
+  private stopLoop(): void {
+    this.loopActive = false;
+    this.cancelFrame(this.animationId);
+    this.animationId = 0;
+  }
+
+  private scheduleAnimate(): void {
+    this.animationId = this.requestFrame(this.animate);
+  }
+
+  private teardown(): void {
+    if (this.tornDown) {
+      return;
+    }
+
+    this.tornDown = true;
+    this.stopLoop();
+    this.cancelFrame(this.resizeFrameId);
+    this.resizeFrameId = 0;
+
+    for (const dispose of this.teardowns) {
+      dispose();
+    }
+
+    this.teardowns.length = 0;
+  }
+
+  private onResize = (): void => {
+    if (this.resizeFrameId !== 0) {
+      return;
+    }
+
+    this.resizeFrameId = this.requestFrame(() => {
+      this.resizeFrameId = 0;
+      this.resize();
+    });
+  };
+
+  private onVisibilityChange = (): void => {
+    if (this.document.hidden) {
+      this.stopLoop();
+      return;
+    }
+
+    if (!this.reducedMotion) {
+      this.ngZone.runOutsideAngular(() => this.startLoop());
+    }
+  };
+
+  private resize = (): void => {
+    const view = this.view();
+    const canvas = this.canvasRef?.nativeElement;
+
+    if (!view || !canvas) {
+      return;
+    }
+
+    const width = view.innerWidth;
+    const height = view.innerHeight;
+
+    const dx = width === 0 ? 0 : Math.abs(width - canvas.width) / width;
+    const dy = height === 0 ? 0 : Math.abs(height - canvas.height) / height;
+
+    if (!this.coarsePointer || dy > 0.2 || dx > 0.05) {
      canvas.width = width;
      canvas.height = height;

@@ -75,38 +216,115 @@ export class DotBackground implements OnDestroy {
        dot.x = Math.max(dot.radius, Math.min(width - dot.radius, dot.x));
        dot.y = Math.max(dot.radius, Math.min(height - dot.radius, dot.y));
      }
+
+      if (this.reducedMotion && this.ctx) {
+        this.drawFrame();
+      }
+    }
  };

-  private onMouseMove = (e: MouseEvent) => {
-    this.mouse.x = e.clientX;
-    this.mouse.y = e.clientY;
+  private onMouseMove = (event: Event): void => {
+    if (!(event instanceof MouseEvent)) {
+      return;
+    }
+
+    const view = this.view();
+    const canvas = this.canvasRef?.nativeElement;
+
+    if (!view || !canvas) {
+      return;
+    }
+
+    this.mouse.x = (event.clientX / view.innerWidth) * canvas.width;
+    this.mouse.y = (event.clientY / view.innerHeight) * canvas.height;
  };

-  private initDots() {
+  private onMouseClick = (): void => {
+    const dot = this.spawnDot();
+    dot.x = this.mouse.x;
+    dot.y = this.mouse.y;
+  };
+
+  private targetDotCount(width: number, height: number): number {
+    const maxInitial = this.coarsePointer
+      ? this.INITIAL_DOT_COUNT_MAX_COARSE
+      : this.INITIAL_DOT_COUNT_MAX;
+    const area = Math.max(0, width) * Math.max(0, height);
+    const fromArea = Math.round(area / this.INITIAL_DOT_AREA_DIVISOR);
+    return Math.min(maxInitial, Math.max(this.INITIAL_DOT_COUNT_MIN, fromArea));
+  }
+
+  private spawnDot(): Dot {
+    const dotId = this.ballSpawnId++;
+    const maxCount = this.coarsePointer ? this.MAX_DOT_COUNT_MOBILE : this.MAX_DOT_COUNT;
+    let dot: Dot;
+
+    if (dotId < maxCount) {
+      dot = {
+        x: 0,
+        y: 0,
+        vx: 0,
+        vy: 0,
+        radius: 1,
+        color: '#000000',
+      };
+
+      this.dots.push(dot);
+    } else {
+      dot = this.dots[dotId % this.dots.length];
+    }
+
+    this.populateDot(dot);
+
+    return dot;
+  }
+
+  private populateDot(dot: Dot): void {
    const { width, height } = this.canvasRef.nativeElement;
-    for (let i = 0; i < this.DOT_COUNT; i++) {
-      this.dots.push({
-        x: Math.random() * width,
-        y: Math.random() * height,
-        vx: (Math.random() - 0.5) * 0.5,
-        vy: (Math.random() - 0.5) * 0.5,
-        radius: Math.random() * 60 + 40,
-        color: this.COLORS[i % this.COLORS.length],
-      });
+
+    dot.x = Math.random() * width;
+    dot.y = Math.random() * height;
+    dot.vx = (Math.random() - 0.5) * 0.5;
+    dot.vy = (Math.random() - 0.5) * 0.5;
+    dot.radius = Math.random() * 60 + 40;
+    dot.color = this.COLORS[this.ballSpawnNextColor++ % this.COLORS.length];
+  }
+
+  private initDots(): void {
+    const { width, height } = this.canvasRef.nativeElement;
+    const count = this.targetDotCount(width, height);
+
+    for (let i = 0; i < count; i++) {
+      this.spawnDot();
    }
  }

-  private animate = () => {
-    const canvas = this.canvasRef.nativeElement;
+  private animate = (): void => {
+    this.animationId = 0;
+    this.drawFrame();
+
+    if (this.loopActive && !this.tornDown) {
+      this.scheduleAnimate();
+    }
+  };
+
+  private drawFrame(): void {
+    const canvas = this.canvasRef?.nativeElement;
+    const ctx = this.ctx;
+
+    if (!canvas || !ctx) {
+      return;
+    }
+
    const { width, height } = canvas;
-    this.ctx.clearRect(0, 0, width, height);
+    ctx.clearRect(0, 0, width, height);

    for (const dot of this.dots) {
      const dx = dot.x - this.mouse.x;
      const dy = dot.y - this.mouse.y;
      const dist = Math.sqrt(dx * dx + dy * dy);

-      if (dist < this.MOUSE_RADIUS) {
+      if (dist != 0 && dist < this.MOUSE_RADIUS) {
        const force = (this.MOUSE_RADIUS - dist) / this.MOUSE_RADIUS;
        dot.vx += (dx / dist) * force * 0.5;
        dot.vy += (dy / dist) * force * 0.5;
@@ -119,29 +337,32 @@ export class DotBackground implements OnDestroy {
      if (speed > 0.3) {
        dot.vx *= 0.98;
        dot.vy *= 0.98;
+      } else if (speed <= 0.3) {
+        dot.vx *= 1.02;
+        dot.vy *= 1.02;
+      } else if (speed === 0) {
+        dot.vx = Math.random() * 0.2 - 0.1;
+        dot.vy = Math.random() * 0.2 - 0.1;
      }

-      // Bounce off edges (accounting for radius)
-      if (dot.x < dot.radius || dot.x > width - dot.radius) dot.vx *= -1;
-      if (dot.y < dot.radius || dot.y > height - dot.radius) dot.vy *= -1;
+      if (dot.x < dot.radius || dot.x > width - dot.radius) {
+        dot.vx *= -1;
+      }
+      if (dot.y < dot.radius || dot.y > height - dot.radius) {
+        dot.vy *= -1;
+      }

-      // Clamp to bounds
      dot.x = Math.max(dot.radius, Math.min(width - dot.radius, dot.x));
      dot.y = Math.max(dot.radius, Math.min(height - dot.radius, dot.y));

-      const gradient = this.ctx.createRadialGradient(
-        dot.x, dot.y, 0,
-        dot.x, dot.y, dot.radius
-      );
+      const gradient = ctx.createRadialGradient(dot.x, dot.y, 0, dot.x, dot.y, dot.radius);
      gradient.addColorStop(0, dot.color + '40');
      gradient.addColorStop(1, 'transparent');

-      this.ctx.beginPath();
-      this.ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
-      this.ctx.fillStyle = gradient;
-      this.ctx.fill();
+      ctx.beginPath();
+      ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+    }
  }
-
-    this.animationId = requestAnimationFrame(this.animate);
-  };
 }
--- a/src/app/components/pages/skills/skill-card/skill-card.html
+++ b/src/app/components/pages/skills/skill-card/skill-card.html
@@ -1,10 +1,11 @@
-<div class="card">
+<div class="card glass-surface">
  <h3>{{ title }}</h3>
  <div class="icons">
    @for (skill of skills; track skill.icon) {
      <a
        [href]="skill.url"
        target="_blank"
+        rel="noopener noreferrer"
        [attr.aria-label]="skill.name"
      >
        <img
--- a/src/app/components/pages/skills/skill-card/skill-card.scss
+++ b/src/app/components/pages/skills/skill-card/skill-card.scss
@@ -1,44 +1,27 @@
-// skill-card.component.scss
 .card {
-  background: linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.05) 100%
-  );
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 16px;
-  padding: 1.5rem;
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
  height: 100%;
  display: flex;
  flex-direction: column;
-  box-shadow:
-    0 4px 24px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow:
-      0 8px 32px rgba(99, 102, 241, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.25);
-  }
+  transition:
+    transform var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard),
+    border-color var(--duration-base) var(--ease-standard);

  h3 {
-    margin: 0 0 1rem;
-    font-size: 0.875rem;
+    margin: 0 0 var(--space-4);
+    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: rgba(255, 255, 255, 0.6);
+    letter-spacing: var(--tracking-wide);
+    color: var(--color-text-muted);
  }

  .icons {
    display: flex;
    flex-wrap: wrap;
-    gap: 1rem;
+    gap: var(--space-4);
    align-items: center;
    flex: 1;

@@ -51,13 +34,23 @@
        height: 40px;
        object-fit: contain;
        filter: grayscale(100%) brightness(0.8);
-        transition: filter 0.2s ease, transform 0.2s ease;
-      }
-
-      &:hover img {
-        filter: none;
-        transform: scale(1.1);
+        transition:
+          filter var(--duration-fast) var(--ease-standard),
+          transform var(--duration-fast) var(--ease-standard);
      }
    }
  }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-raised);
+    border-color: var(--surface-glass-border-strong);
+  }
+
+  .card .icons a:hover img {
+    filter: none;
+    transform: scale(1.1);
+  }
+}
--- a/src/app/components/pages/skills/skill-card/skill-card.spec.ts
+++ b/src/app/components/pages/skills/skill-card/skill-card.spec.ts
@@ -8,9 +8,8 @@ describe('SkillCard', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [SkillCard]
-    })
-    .compileComponents();
+      imports: [SkillCard],
+    }).compileComponents();

    fixture = TestBed.createComponent(SkillCard);
    component = fixture.componentInstance;
--- a/src/app/components/pages/skills/skill-card/skill-card.ts
+++ b/src/app/components/pages/skills/skill-card/skill-card.ts
@@ -1,5 +1,5 @@
-import {Component, Input} from '@angular/core';
-import {Skill} from '../../../../models/skill';
+import { Component, Input } from '@angular/core';
+import { Skill } from '../../../../models/skill';

@Component({
  selector: 'app-skill-card',
--- a/src/app/components/pages/skills/skills-grid/skills-grid.html
+++ b/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"
--- a/src/app/components/pages/skills/skills-grid/skills-grid.scss
+++ b/src/app/components/pages/skills/skills-grid/skills-grid.scss
@@ -2,5 +2,5 @@
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
-  gap: 10px;
+  gap: var(--space-3);
 }
--- a/src/app/components/pages/skills/skills-grid/skills-grid.spec.ts
+++ b/src/app/components/pages/skills/skills-grid/skills-grid.spec.ts
@@ -8,9 +8,8 @@ describe('SkillsGrid', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [SkillsGrid]
-    })
-    .compileComponents();
+      imports: [SkillsGrid],
+    }).compileComponents();

    fixture = TestBed.createComponent(SkillsGrid);
    component = fixture.componentInstance;
--- a/src/app/components/pages/skills/skills-grid/skills-grid.ts
+++ b/src/app/components/pages/skills/skills-grid/skills-grid.ts
@@ -1,31 +1,26 @@
-import {Component} from '@angular/core';
-import {SkillCategory} from '../../../../models/skill-category';
-import {SkillCard} from '../skill-card/skill-card';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { SkillCategory } from '../../../../models/skill-category';
+import { SkillCard } from '../skill-card/skill-card';

-@Component({
-  selector: 'app-skills-grid',
-  imports: [
-    SkillCard
-  ],
-  templateUrl: './skills-grid.html',
-  styleUrl: './skills-grid.scss',
-})
-export class SkillsGrid {
-  categories: SkillCategory[] = [
+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/'},
+      { 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/' },
    ],
  },
  {
@@ -33,10 +28,14 @@ export class SkillsGrid {
    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/'},
+      {
+        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/' },
    ],
  },
  {
@@ -44,13 +43,17 @@ export class SkillsGrid {
    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/'},
+      { 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/' },
    ],
  },
  {
@@ -58,10 +61,10 @@ export class SkillsGrid {
    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'},
+      { 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' },
    ],
  },
  {
@@ -69,8 +72,8 @@ export class SkillsGrid {
    category: 'iac',
    gridArea: 'iac',
    skills: [
-        {name: 'Terraform', icon: 'terraform', url: 'https://www.terraform.io/'},
-        {name: 'Ansible', icon: 'ansible', url: 'https://www.ansible.com/'},
+      { name: 'Terraform', icon: 'terraform', url: 'https://www.terraform.io/' },
+      { name: 'Ansible', icon: 'ansible', url: 'https://www.ansible.com/' },
    ],
  },
  {
@@ -78,8 +81,12 @@ export class SkillsGrid {
    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/'},
+      { 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/',
+      },
    ],
  },
  {
@@ -87,10 +94,36 @@ export class SkillsGrid {
    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'},
+      { 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 {
+  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,
+    }));
+  });
 }
--- a/src/app/components/pages/skills/skills.html
+++ b/src/app/components/pages/skills/skills.html
@@ -1,5 +0,0 @@
-<div class="main">
-  <h1>Antonio Ledebuhr</h1>
-  <p>Software Engineering & DevOps</p>
-  <app-skills-grid></app-skills-grid>
-</div>
--- a/src/app/components/pages/skills/skills.scss
+++ b/src/app/components/pages/skills/skills.scss
@@ -1,20 +0,0 @@
-.main {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-family: system-ui, sans-serif;
-}
-
-h1 {
-  font-size: 3rem;
-  font-weight: 600;
-  margin: 0;
-}
-
-p {
-  color: rgba(255, 255, 255, 0.5);
-  margin: 0.5rem 0 3rem;
-}
--- a/src/app/components/pages/skills/skills.spec.ts
+++ b/src/app/components/pages/skills/skills.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Skills } from './skills';
-
-describe('Skills', () => {
-  let component: Skills;
-  let fixture: ComponentFixture<Skills>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Skills]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Skills);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/components/pages/skills/skills.ts
+++ b/src/app/components/pages/skills/skills.ts
@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import {SkillsGrid} from './skills-grid/skills-grid';
-
-@Component({
-  selector: 'app-skills',
-  imports: [
-    SkillsGrid
-  ],
-  templateUrl: './skills.html',
-  styleUrl: './skills.scss',
-})
-export class Skills {
-
-}
--- a/src/app/core/commands/command-ids.ts
+++ b/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',
+];
--- a/src/app/core/content/content-claims.spec.ts
+++ b/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);
+    }
+  });
+});
--- a/src/app/core/content/content-completeness.spec.ts
+++ b/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([]);
+      }
+    }
+  });
+});
--- a/src/app/core/content/content-exclusions.spec.ts
+++ b/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);
+    }
+  });
+});
--- a/src/app/core/content/content-parity.spec.ts
+++ b/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']);
+  });
+});
--- a/src/app/core/content/content.contracts.ts
+++ b/src/app/core/content/content.contracts.ts
@@ -0,0 +1,208 @@
+import { type RouteId } from '../routing/route-ids';
+
+/**
+ * Copy roles stay separate on purpose:
+ * - headline is the serious heading used for SEO and page structure
+ * - proof is only ever a verifiable statement
+ * - playfulLine is an optional wordplay hook that is never a capability claim
+ * - cta lives on CtaCopy so action labels stay swappable
+ */
+export interface CopyBlock {
+  readonly headline: string;
+  readonly proof?: string;
+  readonly playfulLine?: string;
+  readonly body?: readonly string[];
+}
+
+export interface CtaCopy {
+  readonly label: string;
+  readonly routeId?: RouteId;
+  readonly href?: string;
+  readonly external?: boolean;
+  readonly fragment?: string;
+}
+
+export interface SectionCopy extends CopyBlock {
+  readonly id: string;
+}
+
+export interface PageCopy {
+  readonly routeId: RouteId;
+  readonly title: string;
+  readonly description: string;
+  readonly hero: CopyBlock;
+  readonly sections: readonly SectionCopy[];
+  readonly ctas: readonly CtaCopy[];
+}
+
+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 value: string;
+  readonly label: string;
+  readonly note?: string;
+  readonly caseId?: CaseStudyId;
+}
+
+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: 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;
+}
--- a/src/app/core/content/content.service.ts
+++ b/src/app/core/content/content.service.ts
@@ -0,0 +1,62 @@
+import { computed, inject, Injectable, type Signal } from '@angular/core';
+import { LocaleService } from '../i18n/locale.service';
+import { type RouteId } from '../routing/route-ids';
+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' })
+export class ContentService {
+  private readonly localeService = inject(LocaleService);
+  private readonly content = inject(SITE_CONTENT);
+
+  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]);
+  }
+}
--- a/src/app/core/content/content.token.ts
+++ b/src/app/core/content/content.token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { type AppLocale } from '../i18n/locale';
+import { type SiteContent } from './content.contracts';
+
+export const SITE_CONTENT = new InjectionToken<Record<AppLocale, SiteContent>>('SITE_CONTENT');
--- a/src/app/core/content/de/cases.ts
+++ b/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',
+  },
+};
--- a/src/app/core/content/de/home.ts
+++ b/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' },
+  ],
+};
--- a/src/app/core/content/de/pages.ts
+++ b/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' },
+  ],
+};
--- a/src/app/core/content/de/services.ts
+++ b/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}.',
+};
--- a/src/app/core/content/de/site.ts
+++ b/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,
+  },
+};
--- a/src/app/core/content/en/cases.ts
+++ b/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',
+  },
+};
--- a/src/app/core/content/en/home.ts
+++ b/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' },
+  ],
+};
--- a/src/app/core/content/en/pages.ts
+++ b/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' },
+  ],
+};
--- a/src/app/core/content/en/services.ts
+++ b/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}.',
+};
--- a/src/app/core/content/en/site.ts
+++ b/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,
+  },
+};
--- a/src/app/core/content/shell-copy.ts
+++ b/src/app/core/content/shell-copy.ts
@@ -0,0 +1,38 @@
+import { type AppLocale } from '../i18n/locale';
+
+export interface ShellCopy {
+  readonly skipLink: string;
+  readonly primaryNavLabel: string;
+  readonly footerNavLabel: string;
+  readonly menuOpen: string;
+  readonly menuClose: string;
+  readonly languageSwitch: string;
+  readonly otherLocaleName: string;
+  readonly cvLabel: string;
+  readonly contactCta: string;
+}
+
+export const SHELL_COPY: Record<AppLocale, ShellCopy> = {
+  de: {
+    skipLink: 'Zum Inhalt springen',
+    primaryNavLabel: 'Hauptnavigation',
+    footerNavLabel: 'Fußzeilen-Navigation',
+    menuOpen: 'Menü öffnen',
+    menuClose: 'Menü schließen',
+    languageSwitch: 'Zur englischen Version wechseln',
+    otherLocaleName: 'English',
+    cvLabel: 'Lebenslauf als PDF',
+    contactCta: 'Kontakt',
+  },
+  en: {
+    skipLink: 'Skip to content',
+    primaryNavLabel: 'Primary navigation',
+    footerNavLabel: 'Footer navigation',
+    menuOpen: 'Open menu',
+    menuClose: 'Close menu',
+    languageSwitch: 'Switch to the German version',
+    otherLocaleName: 'Deutsch',
+    cvLabel: 'Curriculum vitae as PDF',
+    contactCta: 'Contact',
+  },
+};
--- a/src/app/core/content/signature-copy.spec.ts
+++ b/src/app/core/content/signature-copy.spec.ts
@@ -0,0 +1,70 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { COMMAND_IDS } from '../commands/command-ids';
+import { APP_LOCALES } from '../i18n/locale';
+import { SIGNATURE_COPY } from './signature-copy';
+
+function leafPaths(value: unknown, prefix = ''): string[] {
+  if (typeof value === 'string') {
+    return [prefix];
+  }
+
+  if (value !== null && typeof value === 'object') {
+    return Object.keys(value).flatMap((key) => {
+      const next = prefix.length > 0 ? `${prefix}.${key}` : key;
+      return leafPaths((value as Record<string, unknown>)[key], next);
+    });
+  }
+
+  return [prefix];
+}
+
+function collectStrings(value: unknown): string[] {
+  if (typeof value === 'string') {
+    return [value];
+  }
+
+  if (value !== null && typeof value === 'object') {
+    return Object.values(value).flatMap((entry) => collectStrings(entry));
+  }
+
+  return [];
+}
+
+describe('SIGNATURE_COPY', () => {
+  it('exposes the same key structure in both locales', () => {
+    const [first, ...rest] = APP_LOCALES.map((locale) => leafPaths(SIGNATURE_COPY[locale]));
+
+    for (const keys of rest) {
+      expect(keys).toEqual(first);
+    }
+  });
+
+  it('keeps every string non-empty', () => {
+    for (const locale of APP_LOCALES) {
+      for (const value of collectStrings(SIGNATURE_COPY[locale])) {
+        expect(value.trim().length).toBeGreaterThan(0);
+      }
+    }
+  });
+
+  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;
+
+      expect(Object.keys(descriptions).sort()).toEqual([...COMMAND_IDS].sort());
+
+      for (const id of COMMAND_IDS) {
+        expect(descriptions[id].trim().length).toBeGreaterThan(0);
+      }
+    }
+  });
+});
--- a/src/app/core/content/signature-copy.ts
+++ b/src/app/core/content/signature-copy.ts
@@ -0,0 +1,153 @@
+import { type CommandId } from '../commands/command-ids';
+import { type AppLocale } from '../i18n/locale';
+
+export interface SignatureCopy {
+  readonly palette: {
+    readonly triggerLabel: string;
+    readonly shortcutHint: string;
+    readonly shortcutHintApple: string;
+    readonly dialogTitle: string;
+    readonly dialogDescription: string;
+    readonly inputLabel: string;
+    readonly inputPlaceholder: string;
+    readonly closeLabel: string;
+    readonly suggestionsLabel: string;
+    readonly outputLabel: string;
+    readonly emptySuggestions: string;
+    readonly unknownCommand: string;
+    readonly helpIntro: string;
+    readonly clearedMessage: string;
+    readonly cvOpened: string;
+    readonly navigating: string;
+    readonly commandDescriptions: Record<CommandId, string>;
+    readonly responses: {
+      readonly brew: string;
+      readonly ignite: string;
+      readonly rev: string;
+    };
+  };
+  readonly systemsMap: {
+    readonly heading: string;
+    readonly intro: string;
+    readonly diagramDescription: string;
+    readonly listHeading: string;
+    readonly legendHeading: string;
+    readonly relationshipLabel: string;
+    readonly legend: {
+      readonly ai: string;
+      readonly cluster: string;
+      readonly hardware: string;
+      readonly software: string;
+      readonly project: string;
+    };
+  };
+}
+
+export const SIGNATURE_COPY: Record<AppLocale, SignatureCopy> = {
+  de: {
+    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.',
+      inputLabel: 'Befehl',
+      inputPlaceholder: 'Befehl eingeben',
+      closeLabel: 'Schließen',
+      suggestionsLabel: 'Vorschläge',
+      outputLabel: 'Ausgabe',
+      emptySuggestions: 'Keine passenden Befehle.',
+      unknownCommand: 'Unbekannter Befehl: {command}',
+      helpIntro: 'Verfügbare Befehle:',
+      clearedMessage: 'Ausgabe geleert.',
+      cvOpened: 'Lebenslauf in einem neuen Tab geöffnet.',
+      navigating: 'Wechsel zu {target}.',
+      commandDescriptions: {
+        help: 'Listet die verfügbaren Befehle.',
+        projects: 'Öffnet die Projektübersicht.',
+        servicesAi: 'Öffnet die Seite zur KI-Integration.',
+        cv: 'Öffnet den Lebenslauf als PDF.',
+        contact: 'Öffnet die Kontaktseite.',
+        brew: 'Eine kurze, spielerische Rückmeldung.',
+        ignite: 'Eine kurze, spielerische Rückmeldung.',
+        rev: 'Eine kurze, spielerische Rückmeldung.',
+        clear: 'Leert die Ausgabe.',
+        close: 'Schließt die Befehlsübersicht.',
+      },
+      responses: {
+        brew: 'Frisch aufgebrüht. Automatisierung, die auch vor dem ersten Kaffee läuft.',
+        ignite: 'Zündung frei. Die Systeme laufen warm.',
+        rev: 'Drehzahl steigt, der Content bleibt trotzdem ruhig.',
+      },
+    },
+    systemsMap: {
+      heading: 'Systemkarte',
+      intro:
+        'Wie die technischen Schichten zusammenhängen — von Hardware bis zu den Projektfeldern.',
+      diagramDescription: 'Diagramm der technischen Schichten und ihrer Verbindungen.',
+      listHeading: 'Knoten als Liste',
+      legendHeading: 'Legende',
+      relationshipLabel: 'Verbunden mit {targets}.',
+      legend: {
+        ai: 'KI-Integration',
+        cluster: 'Cluster',
+        hardware: 'Hardware und Netz',
+        software: 'Software',
+        project: 'Projektfeld',
+      },
+    },
+  },
+  en: {
+    palette: {
+      triggerLabel: 'Open commands',
+      shortcutHint: 'Ctrl+K',
+      shortcutHintApple: '⌘K',
+      dialogTitle: 'Commands',
+      dialogDescription: 'Navigate or get a short acknowledgement. No code is executed.',
+      inputLabel: 'Command',
+      inputPlaceholder: 'Type a command',
+      closeLabel: 'Close',
+      suggestionsLabel: 'Suggestions',
+      outputLabel: 'Output',
+      emptySuggestions: 'No matching commands.',
+      unknownCommand: 'Unknown command: {command}',
+      helpIntro: 'Available commands:',
+      clearedMessage: 'Output cleared.',
+      cvOpened: 'Opened the CV in a new tab.',
+      navigating: 'Going to {target}.',
+      commandDescriptions: {
+        help: 'Lists the available commands.',
+        projects: 'Opens the projects overview.',
+        servicesAi: 'Opens the AI integration page.',
+        cv: 'Opens the CV as a PDF.',
+        contact: 'Opens the contact page.',
+        brew: 'A short playful acknowledgement.',
+        ignite: 'A short playful acknowledgement.',
+        rev: 'A short playful acknowledgement.',
+        clear: 'Clears the output.',
+        close: 'Closes the command palette.',
+      },
+      responses: {
+        brew: 'Freshly brewed. Automation that runs before the first coffee.',
+        ignite: 'Ignition on. Systems are warming up.',
+        rev: 'Revs climbing, the content stays calm.',
+      },
+    },
+    systemsMap: {
+      heading: 'Systems map',
+      intro: 'How the technical layers connect — from hardware through to the project fields.',
+      diagramDescription: 'Diagram of the technical layers and their connections.',
+      listHeading: 'Nodes as a list',
+      legendHeading: 'Legend',
+      relationshipLabel: 'Connected to {targets}.',
+      legend: {
+        ai: 'AI integration',
+        cluster: 'Cluster',
+        hardware: 'Hardware and network',
+        software: 'Software',
+        project: 'Project field',
+      },
+    },
+  },
+};
--- a/src/app/core/content/site-config.ts
+++ b/src/app/core/content/site-config.ts
@@ -0,0 +1,15 @@
+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,
+};
--- a/src/app/core/content/site-content.ts
+++ b/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,
+};
--- a/src/app/core/i18n/locale.resolver.ts
+++ b/src/app/core/i18n/locale.resolver.ts
@@ -0,0 +1,11 @@
+import { inject } from '@angular/core';
+import { type ResolveFn } from '@angular/router';
+import { DEFAULT_LOCALE, isAppLocale, type AppLocale } from './locale';
+import { LocaleService } from './locale.service';
+
+export const localeResolver: ResolveFn<AppLocale> = (route) => {
+  const localeValue: unknown = route.data['locale'];
+  const locale = isAppLocale(localeValue) ? localeValue : DEFAULT_LOCALE;
+  inject(LocaleService).setLocale(locale);
+  return locale;
+};
--- a/src/app/core/i18n/locale.service.ts
+++ b/src/app/core/i18n/locale.service.ts
@@ -0,0 +1,25 @@
+import { computed, inject, Injectable, signal } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { DEFAULT_LOCALE, LOCALE_HTML_LANG, type AppLocale } from './locale';
+
+@Injectable({ providedIn: 'root' })
+export class LocaleService {
+  private readonly document = inject(DOCUMENT);
+  private readonly localeSignal = signal<AppLocale>(DEFAULT_LOCALE);
+
+  readonly locale = this.localeSignal.asReadonly();
+  readonly htmlLang = computed(() => LOCALE_HTML_LANG[this.localeSignal()]);
+
+  constructor() {
+    this.applyHtmlLang(DEFAULT_LOCALE);
+  }
+
+  setLocale(locale: AppLocale): void {
+    this.localeSignal.set(locale);
+    this.applyHtmlLang(locale);
+  }
+
+  private applyHtmlLang(locale: AppLocale): void {
+    this.document.documentElement.lang = LOCALE_HTML_LANG[locale];
+  }
+}
--- a/src/app/core/i18n/locale.spec.ts
+++ b/src/app/core/i18n/locale.spec.ts
@@ -0,0 +1,44 @@
+import { DOCUMENT } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
+import { DEFAULT_LOCALE, isAppLocale, otherLocale } from './locale';
+import { LocaleService } from './locale.service';
+
+describe('locale helpers', () => {
+  it('defaults to German', () => {
+    expect(DEFAULT_LOCALE).toBe('de');
+  });
+
+  it('accepts only de and en', () => {
+    expect(isAppLocale('de')).toBe(true);
+    expect(isAppLocale('en')).toBe(true);
+    expect(isAppLocale('fr')).toBe(false);
+    expect(isAppLocale('')).toBe(false);
+    expect(isAppLocale(null)).toBe(false);
+  });
+
+  it('round-trips the other locale', () => {
+    expect(otherLocale('de')).toBe('en');
+    expect(otherLocale('en')).toBe('de');
+    expect(otherLocale(otherLocale('de'))).toBe('de');
+  });
+});
+
+describe('LocaleService', () => {
+  it('updates the locale signal and the document lang attribute', () => {
+    TestBed.configureTestingModule({});
+    const service = TestBed.inject(LocaleService);
+    const document = TestBed.inject(DOCUMENT);
+
+    expect(service.locale()).toBe('de');
+    expect(document.documentElement.lang).toBe('de-DE');
+
+    service.setLocale('en');
+    expect(service.locale()).toBe('en');
+    expect(service.htmlLang()).toBe('en');
+    expect(document.documentElement.lang).toBe('en');
+
+    service.setLocale('de');
+    expect(service.locale()).toBe('de');
+    expect(document.documentElement.lang).toBe('de-DE');
+  });
+});
--- a/src/app/core/i18n/locale.ts
+++ b/src/app/core/i18n/locale.ts
@@ -0,0 +1,18 @@
+export type AppLocale = 'de' | 'en';
+
+export const APP_LOCALES: readonly AppLocale[] = ['de', 'en'];
+
+export const DEFAULT_LOCALE: AppLocale = 'de';
+
+export const LOCALE_HTML_LANG: Record<AppLocale, string> = {
+  de: 'de-DE',
+  en: 'en',
+};
+
+export function isAppLocale(value: unknown): value is AppLocale {
+  return value === 'de' || value === 'en';
+}
+
+export function otherLocale(locale: AppLocale): AppLocale {
+  return locale === 'de' ? 'en' : 'de';
+}
--- a/src/app/core/navigation/navigation.service.spec.ts
+++ b/src/app/core/navigation/navigation.service.spec.ts
@@ -0,0 +1,43 @@
+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/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: SITE_CONTENT_DATA }],
+    });
+  });
+
+  it('maps a German route to its English counterpart and back', async () => {
+    const harness = await RouterTestingHarness.create();
+    const navigation = TestBed.inject(NavigationService);
+
+    await harness.navigateByUrl('/projekte');
+    expect(navigation.activeRouteId()).toBe('projects');
+    expect(navigation.alternateLocaleLink()).toEqual(['/', 'en', 'projects']);
+
+    await harness.navigateByUrl('/en/projects');
+    expect(navigation.activeRouteId()).toBe('projects');
+    expect(navigation.alternateLocaleLink()).toEqual(['/', 'projekte']);
+  });
+
+  it('builds links for the active locale', () => {
+    const navigation = TestBed.inject(NavigationService);
+    const locale = TestBed.inject(LocaleService);
+
+    locale.setLocale('de');
+    expect(navigation.link('projects')).toEqual(['/', 'projekte']);
+    expect(navigation.link('home')).toEqual(['/']);
+
+    locale.setLocale('en');
+    expect(navigation.link('projects')).toEqual(['/', 'en', 'projects']);
+    expect(navigation.link('home')).toEqual(['/', 'en']);
+    expect(navigation.link('contact', 'de')).toEqual(['/', 'kontakt']);
+  });
+});
--- a/src/app/core/navigation/navigation.service.ts
+++ b/src/app/core/navigation/navigation.service.ts
@@ -0,0 +1,77 @@
+import { computed, inject, Injectable, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { SITE_CONFIG } from '../content/site-config';
+import { otherLocale, type AppLocale } from '../i18n/locale';
+import { LocaleService } from '../i18n/locale.service';
+import { isAppRouteData } from '../routing/app-route-data';
+import { type RouteId } from '../routing/route-ids';
+import { routeCommands } from '../routing/route-paths';
+import { FOOTER_NAV, PRIMARY_NAV, type NavItem } from './navigation';
+
+export interface ResolvedNavItem {
+  readonly routeId: RouteId;
+  readonly label: string;
+  readonly link: unknown[];
+  readonly children?: readonly ResolvedNavItem[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class NavigationService {
+  private readonly localeService = inject(LocaleService);
+  private readonly router = inject(Router);
+  private readonly activeRouteIdSignal = signal<RouteId>('home');
+
+  readonly activeRouteId = this.activeRouteIdSignal.asReadonly();
+  readonly cvHref = SITE_CONFIG.cvAssetPath;
+  readonly contactLink = computed(() => this.link('contact'));
+  readonly primaryNav = computed(() => this.resolveItems(PRIMARY_NAV, this.localeService.locale()));
+  readonly footerNav = computed(() => this.resolveItems(FOOTER_NAV, this.localeService.locale()));
+
+  constructor() {
+    this.router.events
+      .pipe(
+        filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => this.syncFromRouter());
+
+    this.syncFromRouter();
+  }
+
+  link(routeId: RouteId, locale?: AppLocale): unknown[] {
+    return routeCommands(routeId, locale ?? this.localeService.locale());
+  }
+
+  alternateLocaleLink(): unknown[] {
+    const targetLocale = otherLocale(this.localeService.locale());
+    const current = this.activeRouteId();
+    const routeId = current === 'notFound' ? 'home' : current;
+    return routeCommands(routeId, targetLocale);
+  }
+
+  private resolveItems(items: readonly NavItem[], locale: AppLocale): ResolvedNavItem[] {
+    return items.map((item) => ({
+      routeId: item.routeId,
+      label: item.label[locale],
+      link: routeCommands(item.routeId, locale),
+      children: item.children ? this.resolveItems(item.children, locale) : undefined,
+    }));
+  }
+
+  private syncFromRouter(): void {
+    let snapshot = this.router.routerState.snapshot.root;
+
+    while (snapshot.firstChild) {
+      snapshot = snapshot.firstChild;
+    }
+
+    if (!isAppRouteData(snapshot.data)) {
+      return;
+    }
+
+    this.localeService.setLocale(snapshot.data.locale);
+    this.activeRouteIdSignal.set(snapshot.data.routeId);
+  }
+}
--- a/src/app/core/navigation/navigation.ts
+++ b/src/app/core/navigation/navigation.ts
@@ -0,0 +1,68 @@
+import { type AppLocale } from '../i18n/locale';
+import { type RouteId } from '../routing/route-ids';
+
+export interface NavItem {
+  readonly routeId: RouteId;
+  readonly label: Record<AppLocale, string>;
+  readonly children?: readonly NavItem[];
+}
+
+export const PRIMARY_NAV: readonly NavItem[] = [
+  {
+    routeId: 'home',
+    label: { de: 'Startseite', en: 'Home' },
+  },
+  {
+    routeId: 'services',
+    label: { de: 'Leistungen', en: 'Services' },
+    children: [
+      {
+        routeId: 'servicesSoftware',
+        label: { de: 'Software', en: 'Software' },
+      },
+      {
+        routeId: 'servicesHardwareNetwork',
+        label: { de: 'Hardware und Netzwerk', en: 'Hardware and network' },
+      },
+      {
+        routeId: 'servicesClusters',
+        label: { de: 'Cluster', en: 'Clusters' },
+      },
+      {
+        routeId: 'servicesAi',
+        label: { de: 'KI-Integration', en: 'AI integration' },
+      },
+    ],
+  },
+  {
+    routeId: 'projects',
+    label: { de: 'Projekte', en: 'Projects' },
+  },
+  {
+    routeId: 'stack',
+    label: { de: 'Stack', en: 'Stack' },
+  },
+  {
+    routeId: 'about',
+    label: { de: 'Über mich', en: 'About' },
+  },
+  {
+    routeId: 'contact',
+    label: { de: 'Kontakt', en: 'Contact' },
+  },
+];
+
+export const FOOTER_NAV: readonly NavItem[] = [
+  {
+    routeId: 'imprint',
+    label: { de: 'Impressum', en: 'Legal notice' },
+  },
+  {
+    routeId: 'privacy',
+    label: { de: 'Datenschutz', en: 'Privacy' },
+  },
+  {
+    routeId: 'contact',
+    label: { de: 'Kontakt', en: 'Contact' },
+  },
+];
--- a/src/app/core/platform/browser.spec.ts
+++ b/src/app/core/platform/browser.spec.ts
@@ -0,0 +1,25 @@
+import { PLATFORM_ID } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+  isApplePlatform,
+  isBrowserPlatform,
+  prefersCoarsePointer,
+  prefersReducedMotion,
+  viewportMatches,
+} from './browser';
+
+describe('browser platform helpers', () => {
+  it('returns conservative defaults on the server without throwing', () => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: PLATFORM_ID, useValue: 'server' }],
+    });
+
+    TestBed.runInInjectionContext(() => {
+      expect(isBrowserPlatform()).toBe(false);
+      expect(prefersReducedMotion()).toBe(false);
+      expect(prefersCoarsePointer()).toBe(false);
+      expect(viewportMatches('(min-width: 40rem)')).toBe(false);
+      expect(isApplePlatform()).toBe(false);
+    });
+  });
+});
--- a/src/app/core/platform/browser.ts
+++ b/src/app/core/platform/browser.ts
@@ -0,0 +1,42 @@
+import { inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+export function isBrowserPlatform(): boolean {
+  return isPlatformBrowser(inject(PLATFORM_ID));
+}
+
+export function prefersReducedMotion(): boolean {
+  return mediaQueryMatches('(prefers-reduced-motion: reduce)');
+}
+
+export function prefersCoarsePointer(): boolean {
+  return mediaQueryMatches('(pointer: coarse)');
+}
+
+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;
+  }
+
+  return window.matchMedia(query).matches;
+}
--- a/src/app/core/routing/app-route-data.ts
+++ b/src/app/core/routing/app-route-data.ts
@@ -0,0 +1,16 @@
+import { isAppLocale, type AppLocale } from '../i18n/locale';
+import { type RouteId } from './route-ids';
+
+export interface AppRouteData {
+  readonly routeId: RouteId;
+  readonly locale: AppLocale;
+}
+
+export function isAppRouteData(value: unknown): value is AppRouteData {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  const record = value as Record<string, unknown>;
+  return typeof record['routeId'] === 'string' && isAppLocale(record['locale']);
+}
--- a/src/app/core/routing/route-ids.ts
+++ b/src/app/core/routing/route-ids.ts
@@ -0,0 +1,30 @@
+export type RouteId =
+  | 'home'
+  | 'services'
+  | 'servicesSoftware'
+  | 'servicesHardwareNetwork'
+  | 'servicesClusters'
+  | 'servicesAi'
+  | 'projects'
+  | 'stack'
+  | 'about'
+  | 'contact'
+  | 'imprint'
+  | 'privacy'
+  | 'notFound';
+
+export const ROUTE_IDS: readonly RouteId[] = [
+  'home',
+  'services',
+  'servicesSoftware',
+  'servicesHardwareNetwork',
+  'servicesClusters',
+  'servicesAi',
+  'projects',
+  'stack',
+  'about',
+  'contact',
+  'imprint',
+  'privacy',
+  'notFound',
+];
--- a/src/app/core/routing/route-paths.spec.ts
+++ b/src/app/core/routing/route-paths.spec.ts
@@ -0,0 +1,46 @@
+import { APP_LOCALES } from '../i18n/locale';
+import { ROUTE_IDS, type RouteId } from './route-ids';
+import { prerenderablePaths, routePath, ROUTE_SEGMENTS } from './route-paths';
+
+describe('route paths', () => {
+  const addressableIds = ROUTE_IDS.filter((routeId) => routeId !== 'notFound');
+
+  it('defines every route id in both locales', () => {
+    for (const locale of APP_LOCALES) {
+      for (const routeId of ROUTE_IDS) {
+        expect(ROUTE_SEGMENTS[locale][routeId]).toBeTypeOf('string');
+      }
+    }
+  });
+
+  it('has no duplicate addressable paths within a locale', () => {
+    for (const locale of APP_LOCALES) {
+      const paths = addressableIds.map((routeId) => routePath(routeId, locale));
+      expect(new Set(paths).size).toBe(paths.length);
+    }
+  });
+
+  it('builds the expected home and projects paths', () => {
+    expect(routePath('home', 'de')).toBe('/');
+    expect(routePath('home', 'en')).toBe('/en');
+    expect(routePath('projects', 'de')).toBe('/projekte');
+    expect(routePath('projects', 'en')).toBe('/en/projects');
+  });
+
+  it('includes both locales in prerenderable paths and excludes the wildcard', () => {
+    const paths = prerenderablePaths();
+
+    expect(paths).toContain('/');
+    expect(paths).toContain('/en');
+    expect(paths).toContain('/projekte');
+    expect(paths).toContain('/en/projects');
+    expect(paths.some((path) => path.includes('**'))).toBe(false);
+    expect(paths).not.toContain('');
+
+    for (const locale of APP_LOCALES) {
+      for (const routeId of addressableIds) {
+        expect(paths).toContain(routePath(routeId as RouteId, locale));
+      }
+    }
+  });
+});
--- a/src/app/core/routing/route-paths.ts
+++ b/src/app/core/routing/route-paths.ts
@@ -0,0 +1,83 @@
+import { APP_LOCALES, type AppLocale } from '../i18n/locale';
+import { ROUTE_IDS, type RouteId } from './route-ids';
+
+export const LOCALE_PREFIX: Record<AppLocale, string> = {
+  de: '',
+  en: 'en',
+};
+
+export const ROUTE_SEGMENTS: Record<AppLocale, Record<RouteId, string>> = {
+  de: {
+    home: '',
+    services: 'leistungen',
+    servicesSoftware: 'leistungen/software',
+    servicesHardwareNetwork: 'leistungen/hardware-netzwerk',
+    servicesClusters: 'leistungen/cluster',
+    servicesAi: 'leistungen/ai-integration',
+    projects: 'projekte',
+    stack: 'stack',
+    about: 'ueber-mich',
+    contact: 'kontakt',
+    imprint: 'impressum',
+    privacy: 'datenschutz',
+    notFound: '**',
+  },
+  en: {
+    home: '',
+    services: 'services',
+    servicesSoftware: 'services/software',
+    servicesHardwareNetwork: 'services/hardware-network',
+    servicesClusters: 'services/clusters',
+    servicesAi: 'services/ai-integration',
+    projects: 'projects',
+    stack: 'stack',
+    about: 'about',
+    contact: 'contact',
+    imprint: 'legal-notice',
+    privacy: 'privacy',
+    notFound: '**',
+  },
+};
+
+export function routePath(routeId: RouteId, locale: AppLocale): string {
+  if (routeId === 'notFound') {
+    return '';
+  }
+
+  const prefix = LOCALE_PREFIX[locale];
+  const segment = ROUTE_SEGMENTS[locale][routeId];
+  const parts = [prefix, segment].filter((part) => part.length > 0);
+  return parts.length === 0 ? '/' : `/${parts.join('/')}`;
+}
+
+export function routeCommands(routeId: RouteId, locale: AppLocale): unknown[] {
+  if (routeId === 'notFound') {
+    return ['/'];
+  }
+
+  const commands: string[] = ['/'];
+  const prefix = LOCALE_PREFIX[locale];
+  const segment = ROUTE_SEGMENTS[locale][routeId];
+
+  if (prefix.length > 0) {
+    commands.push(prefix);
+  }
+
+  if (segment.length > 0) {
+    commands.push(...segment.split('/'));
+  }
+
+  return commands;
+}
+
+export function prerenderablePaths(): readonly string[] {
+  return APP_LOCALES.flatMap((locale) =>
+    ROUTE_IDS.filter((routeId) => routeId !== 'notFound').map((routeId) =>
+      routePath(routeId, locale),
+    ),
+  );
+}
+
+export function prerenderableServerPaths(): readonly string[] {
+  return prerenderablePaths().map((path) => (path === '/' ? '' : path.slice(1)));
+}
--- a/src/app/core/seo/crawl-assets.spec.ts
+++ b/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);
+    }
+  });
+});
--- a/src/app/core/seo/route-metadata.spec.ts
+++ b/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,
+      );
+    }
+  });
+});
--- a/src/app/core/seo/route-metadata.ts
+++ b/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',
+  };
+}
--- a/src/app/core/seo/seo-title.strategy.ts
+++ b/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);
+  }
+}
--- a/src/app/core/seo/seo.contracts.ts
+++ b/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;
+}
--- a/src/app/core/seo/seo.service.spec.ts
+++ b/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);
+  });
+});
--- a/src/app/core/seo/seo.service.ts
+++ b/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);
+  }
+}
--- a/src/app/core/seo/structured-data.spec.ts
+++ b/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/);
+      }
+    }
+  });
+});
--- a/src/app/core/seo/structured-data.ts
+++ b/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');
+}
--- a/src/app/features/about/about.html
+++ b/src/app/features/about/about.html
@@ -0,0 +1,8 @@
+@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" />
+    }
+  </div>
+}
--- a/src/app/features/about/about.ts
+++ b/src/app/features/about/about.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+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: [PageHero, ContentSection],
+  templateUrl: './about.html',
+  styleUrl: '../../shared/page-shell.scss',
+})
+export class AboutPage {
+  protected readonly page = inject(ContentService).page('about');
+}
--- a/src/app/features/contact/contact.html
+++ b/src/app/features/contact/contact.html
@@ -0,0 +1,9 @@
+@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" />
+    }
+    <app-contact-briefing [copy]="copy" />
+  </div>
+}
--- a/src/app/features/contact/contact.ts
+++ b/src/app/features/contact/contact.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+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: [PageHero, ContentSection, ContactBriefing],
+  templateUrl: './contact.html',
+  styleUrl: '../../shared/page-shell.scss',
+})
+export class ContactPage {
+  protected readonly page = inject(ContentService).contact();
+}
--- a/src/app/features/home/home.html
+++ b/src/app/features/home/home.html
@@ -0,0 +1,42 @@
+@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 === '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>
+}
--- a/src/app/features/home/home.scss
+++ b/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);
+}
--- a/src/app/features/home/home.ts
+++ b/src/app/features/home/home.ts
@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+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 { 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: [PageHero, ContentSection, MetricList, CaseCard, CtaRow, SystemsMap, RevealDirective],
+  templateUrl: './home.html',
+  styleUrl: './home.scss',
+})
+export class HomePage {
+  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)());
+  });
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Antonio Ledebuhr	b15dfd7801	integration: compact the wide primary navigation and keep fragment targets visible Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 19:55:22 +02:00
Antonio Ledebuhr	575ba06bb9	integration: disable the contact mailto until required fields are complete Keep the submit control focusable with a disabled semantic while the briefing is incomplete, mark invalid fields only after interaction, and leave the encoded mailto path unchanged once the form is filled. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 19:32:22 +02:00
Antonio Ledebuhr	1ff26be61b	integration: keep reveal transitions on the revealed state Move the transition onto the base reveal-target selector so removing reveal-pending no longer drops the animation, while reduced-motion still suppresses it. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 19:32:22 +02:00
Antonio Ledebuhr	1de146c650	integration: name case metrics, split delivered offerings from offers, and frame the stack honestly Give every metrics list a localized heading, keep delivered Rösterei tools out of the offer boundary, and describe the skills grid as a familiarity overview with an evidence note instead of claiming public-case backing for every item. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 19:32:18 +02:00
Antonio Ledebuhr	1d2965a7ff	integration: collapse the mobile nav after hydration and keep fragment targets clear of the sticky header SSR still ships the expanded menu, but phones collapse it after render, stop sticking the header below md, and use the header-offset token so case anchors no longer sit underneath the bar. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 19:32:13 +02:00
Antonio Ledebuhr	271df12334	integration: return HTTP 404 for unmatched URLs and close remaining browser-gate gaps Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 18:45:28 +02:00
Antonio Ledebuhr	34367181d2	integration: add Playwright, axe and Lighthouse CI gates Lock SEO, accessibility and crawlability with headless browser checks so regressions fail before a merge instead of after publication. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 18:28:24 +02:00
Antonio Ledebuhr	46c86447d1	integration: add route metadata, JSON-LD and harden the public shell Ship prerendered SEO, crawl files and palette/map a11y so every locale route is indexable, honest and keyboard-usable without inventing claims. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 18:28:22 +02:00
Antonio Ledebuhr	2ccac6b28a	merge: integrate signature UX domain	2026-08-25 17:57:03 +02:00
Antonio Ledebuhr	da38cc3624	merge: integrate bilingual content domain	2026-08-25 17:57:03 +02:00
Antonio Ledebuhr	763bf435c9	content: drop repeated reference headings and land case CTAs on anchors Service notes now say why the public case fits, the four case CTAs open the matching project fragment, and the Innofocus run-time figure is a case metric as well as a home tile. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 17:52:37 +02:00
Antonio Ledebuhr	6c1572bf3c	signature: restore lean dots, reduced-motion redraw, above-fold reveal and map focus rings Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 17:49:57 +02:00
Antonio Ledebuhr	cfc7580a8f	content: repair visitor-facing copy and briefing accessibility Public pages no longer describe their own pipeline, case and service labels are real accessible names, and the contact briefing writes localized fields without empty optional lines. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 17:46:32 +02:00
Antonio Ledebuhr	7813499ee3	signature: add systems map, command palette and motion primitives Ship the Signature UX as standalone, SSR-safe pieces: bilingual copy, a dual SVG/list systems map, a Map-backed command palette in the shell, opt-in reveal and metric primitives, and a leak-free decorative canvas. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 17:37:25 +02:00
Antonio Ledebuhr	d954361724	content: replace scaffolding with bilingual pages and case studies Ship the final German and English copy, compose every route from shared page primitives, and cover claims, parity and contact briefing in tests. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 17:34:04 +02:00
Antonio Ledebuhr	9ea2885c7b	foundation: resolve platform in injection context for dot background teardown Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 17:12:10 +02:00
Antonio Ledebuhr	42e9f01253	foundation: project guide, tooling, design tokens, bilingual shell and routing contracts Co-authored-by: Cursor <cursoragent@cursor.com>	2026-08-25 17:06:51 +02:00
Antonio Ledebuhr	1020ac4c68	added cv	2026-08-25 15:21:25 +02:00
Antonio Ledebuhr	95193cf99e	added CV	2026-08-25 15:19:58 +02:00
Antonio Ledebuhr	6b170c6864	disabled hover effects on mobile	2026-01-21 20:08:41 +01:00
Antonio Ledebuhr	55a63047cd	fix jumping when resizing	2026-01-21 19:15:38 +01:00
Antonio Ledebuhr	e87dd76626	add ball with click but remove oldest dot when limit reached	2026-01-21 18:52:03 +01:00
Antonio Ledebuhr	fb917d56e6	add ball with click but remove oldest dot when limit reached	2026-01-21 18:46:12 +01:00
Antonio Ledebuhr	47920509d3	add ball with click	2026-01-21 18:27:02 +01:00
Antonio Ledebuhr	010520f722	can't trap dots in corner anymore	2026-01-21 17:42:29 +01:00
Antonio Ledebuhr	66a8bacbe8	mobile jumping background fix	2026-01-21 17:30:40 +01:00